:root {
  --primary: #F7094D;
  --primary-light: #ff3a74;
  --primary-dark: #d00040;
  --light-accent: #FFE3E1;
  --secondary-accent: #FED547;
  --secondary-accent-dark: #e5bb30;
  --dark-text: #333333;
  --light-text: #FFFFFF;
  --gray-bg: #f8f8f8;
}

body {
  font-family: 'Montserrat', sans-serif;
  scroll-behavior: smooth;
  color: var(--dark-text);
}

/* Custom Classes */
.btn {
  padding: 0.75rem 1.5rem;            /* py-3 px-6 */
  font-weight: 700;                   /* font-bold */
  border-radius: 9999px;              /* rounded-full */
  transition: all 300ms ease-in-out;  /* transition duration-300 ease-in-out */
  transform: translateZ(0);           /* for smooth transforms */
  box-shadow: 0 4px 6px rgba(0,0,0,.12); /* shadow-md */
  will-change: transform, box-shadow;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--light-text);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-0.25rem); /* -translate-y-1 */
}

.btn-secondary {
  background-color: var(--secondary-accent);
  color: var(--dark-text);
}

.btn-secondary:hover {
  background-color: var(--secondary-accent-dark);
  transform: translateY(-0.25rem); /* -translate-y-1 */
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--light-text);
  transform: translateY(-0.25rem); /* -translate-y-1 */
}

.section {
  padding-top: 4rem;   /* py-16 */
  padding-bottom: 4rem;
}

/* Tailwind responsive font sizes moved to a media query */
.section-title {
  font-size: 1.875rem;     /* text-3xl */
  line-height: 2.25rem;
  font-weight: 800;        /* font-extrabold */
  margin-bottom: 2rem;     /* mb-8 */
  position: relative;
  display: inline-block;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.25rem;    /* md:text-4xl */
    line-height: 2.5rem;
  }
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 70px;
  height: 4px;
  background-color: var(--secondary-accent);
}

.card {
  background: #fff;                 /* bg-white */
  border-radius: 1rem;              /* rounded-2xl */
  box-shadow: 0 10px 15px rgba(0,0,0,.10); /* shadow-lg */
  overflow: hidden;
  transition: all 300ms ease;        /* transition-all duration-300 */
}

.card:hover {
  box-shadow: 0 20px 25px rgba(0,0,0,.14); /* shadow-xl */
  transform: translateY(-0.5rem);          /* -translate-y-2 */
}

.menu-category {
  margin-bottom: 2.5rem; /* mb-10 */
}

.menu-category-title {
  font-size: 1.5rem;      /* text-2xl */
  line-height: 2rem;
  font-weight: 700;       /* font-bold */
  margin-bottom: 1.5rem;  /* mb-6 */
  position: relative;
  display: inline-block;
}

.menu-category-title:after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--primary);
}

.product-card {
  background: #fff;
  border-radius: 0.75rem;              /* rounded-xl */
  box-shadow: 0 4px 6px rgba(0,0,0,.12); /* shadow-md */
  overflow: hidden;
  transition: all 300ms ease;
  height: 100%;                         /* h-full */
  display: flex;                        /* flex */
  flex-direction: column;               /* flex-col */
}

.product-card:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,.14); /* shadow-lg */
  transform: translateY(-0.25rem);         /* -translate-y-1 */
}

.product-img {
  width: 100%;        /* w-full */
  height: 11rem;      /* h-44 */
  object-fit: cover;  /* object-cover */
  display: block;
}

.product-content {
  padding: 1rem;        /* p-4 */
  display: flex;        /* flex */
  flex-direction: column; /* flex-col */
  flex-grow: 1;         /* flex-grow */
}

/* FIX: esto estaba mal escrito en tu CSS */
.product-title {
  font-weight: 700;       /* font-bold */
  font-size: 1.125rem;    /* text-lg */
  line-height: 1.75rem;
  margin-bottom: 0.25rem; /* mb-1 */
}

.product-desc {
  font-size: 0.875rem;      /* text-sm */
  line-height: 1.25rem;
  color: #4b5563;           /* text-gray-600 */
  margin-bottom: 0.75rem;   /* mb-3 */
}

.product-price {
  font-weight: 700;         /* font-bold */
  color: var(--primary);    /* text-primary */
  font-size: 1.125rem;      /* text-lg */
  line-height: 1.75rem;
  margin-top: auto;         /* mt-auto */
}

.add-to-cart {
  margin-top: 1rem;          /* mt-4 */
  padding: 0.5rem 1rem;      /* py-2 px-4 */
  background-color: var(--primary); /* bg-primary */
  color: #fff;               /* text-white */
  border-radius: 0.5rem;     /* rounded-lg */
  font-weight: 500;          /* font-medium */
  transition: background-color 200ms ease, transform 200ms ease;
  display: flex;             /* flex */
  align-items: center;       /* items-center */
  justify-content: center;   /* justify-center */
  gap: 0.5rem;               /* gap-2 */
  border: none;
  cursor: pointer;
}

.add-to-cart:hover {
  background-color: var(--primary-dark); /* hover:bg-primary-dark */
}

/* Navigation */
.nav-link {
  color: #1f2937;           /* text-gray-800 */
  font-weight: 500;         /* font-medium */
  transition: color 300ms ease; /* transition duration-300 */
  position: relative;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--primary); /* hover:text-primary */
}

.nav-link:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover:after {
  width: 100%;
}

.nav-link.active {
  color: var(--primary);
}

.nav-link.active:after {
  width: 100%;
}

/* Mobile Navigation */
.mobile-menu {
  position: fixed;         /* fixed */
  inset: 0;                /* inset-0 */
  background: #fff;        /* bg-white */
  z-index: 50;             /* z-50 */
  transform: translateX(0);
  transition: transform 300ms ease;
}

.mobile-menu.hidden {
  transform: translateX(-100%);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Promotion Badge */
.promo-badge {
  position: absolute;       /* absolute */
  top: 0.75rem;             /* top-3 */
  right: 0.75rem;           /* right-3 */
  background: var(--secondary-accent); /* bg-secondary-accent */
  color: var(--dark-text);  /* text-dark-text */
  padding: 0.25rem 0.75rem; /* py-1 px-3 */
  border-radius: 9999px;    /* rounded-full */
  font-size: 0.875rem;      /* text-sm */
  line-height: 1.25rem;
  font-weight: 700;         /* font-bold */
  z-index: 10;              /* z-10 */
}

/* Countdown Timer */
.countdown {
  font-size: 0.875rem;   /* text-sm */
  line-height: 1.25rem;
  font-weight: 700;      /* font-bold */
  color: var(--primary);
}

/* Cart Drawer */
.cart-drawer {
  position: fixed;               /* fixed */
  top: 0;
  right: 0;
  height: 100%;                  /* h-full */
  width: 100%;                   /* w-full */
  background: #fff;              /* bg-white */
  z-index: 50;                   /* z-50 */
  box-shadow: 0 25px 50px rgba(0,0,0,.25); /* shadow-2xl */
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
  overflow-y: auto;              /* overflow-y-auto */
  max-width: 100%;
}

@media (min-width: 768px) {
  .cart-drawer {
    width: 24rem; /* md:w-96 */
  }
}

.cart-drawer.hidden {
  transform: translateX(100%);
}

.cart-item {
  padding-top: 0.75rem;           /* py-3 */
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
  display: flex;                  /* flex */
  align-items: center;            /* items-center */
  gap: 0.75rem;                   /* gap-3 */
}

/* Loader */
.loader {
  width: 1.5rem;                 /* w-6 */
  height: 1.5rem;                /* h-6 */
  border: 2px solid rgba(0,0,0,.15); /* border-2 */
  border-top-color: var(--primary);  /* border-t-primary */
  border-radius: 9999px;         /* rounded-full */
  animation: spin 1s linear infinite; /* animate-spin */
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;              /* fixed */
  bottom: 1.5rem;               /* bottom-6 */
  right: 1.5rem;                /* right-6 */
  background: #22c55e;          /* bg-green-500 */
  color: #fff;                  /* text-white */
  padding: 0.75rem;             /* p-3 */
  border-radius: 9999px;        /* rounded-full */
  box-shadow: 0 10px 15px rgba(0,0,0,.20); /* shadow-lg */
  z-index: 40;                  /* z-40 */
  transition: background-color 200ms ease, transform 200ms ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #16a34a; /* hover:bg-green-600 */
}

/* Location Section Map */
.map-container {
  width: 100%;
  height: 16rem;               /* h-64 */
  border-radius: 0.75rem;      /* rounded-xl */
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,.12); /* shadow-md */
}

@media (min-width: 768px) {
  .map-container {
    height: 20rem; /* md:h-80 */
  }
}

/* Testimonial Card */
.testimonial-card {
  background: #fff;
  padding: 1.5rem;            /* p-6 */
  border-radius: 0.75rem;     /* rounded-xl */
  box-shadow: 0 4px 6px rgba(0,0,0,.12); /* shadow-md */
}

/* Custom Category Tabs */
.category-tab {
  padding: 0.5rem 1.25rem;    /* py-2 px-5 */
  font-weight: 500;           /* font-medium */
  border-radius: 9999px;      /* rounded-full */
  transition: all 200ms ease; /* transition-all */
  border: none;
  cursor: pointer;
  background: transparent;
}

.category-tab.active {
  background-color: var(--primary);
  color: var(--light-text);
}

/* Utility classes */
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-light-accent { background-color: var(--light-accent); }
.bg-secondary-accent { background-color: var(--secondary-accent); }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary-accent); }
.border-primary { border-color: var(--primary); }

/* Hero section custom style */
.hero-section {
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)),
    url('./images/banner2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Quick access section */
.quick-access-item {
  display: flex;                 /* flex */
  flex-direction: column;        /* flex-col */
  align-items: center;           /* items-center */
  padding: 1rem;                 /* p-4 */
  border-radius: 1rem;           /* rounded-2xl (approx) */
  transition: all 300ms ease;    /* transition-all duration-300 */
}

.quick-access-item:hover {
  background-color: var(--light-accent);
  transform: translateY(-0.5rem); /* -translate-y-2 */
}

.quick-access-icon {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  margin-bottom: 0.75rem; /* mb-3 */
  color: var(--primary);
}

/* Order process steps */
.step {
  display: flex;          /* flex */
  flex-direction: column; /* flex-col */
  align-items: center;    /* items-center */
}

.step-number {
  display: flex;                 /* flex */
  align-items: center;           /* items-center */
  justify-content: center;       /* justify-center */
  width: 2.5rem;                 /* w-10 */
  height: 2.5rem;                /* h-10 */
  border-radius: 9999px;         /* rounded-full */
  font-weight: 700;              /* font-bold */
  margin-bottom: 0.5rem;         /* mb-2 */
  background-color: var(--secondary-accent);
}

.step-line {
  display: none; /* hidden */
  position: absolute;
  height: 0.25rem; /* h-1 */
  top: 1.25rem;    /* top-5 */
  background-color: var(--secondary-accent);
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
}

@media (min-width: 768px) {
  .step-line {
    display: block; /* md:block */
  }
}

/* Search bar */
.search-bar {
  width: 100%;                  /* w-full */
  padding: 0.75rem;             /* p-3 */
  padding-left: 2.5rem;         /* pl-10 */
  border-radius: 9999px;        /* rounded-full */
  border: 1px solid #d1d5db;    /* border-gray-300 */
  outline: none;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.search-bar:focus {
  border-color: transparent; /* focus:border-transparent */
  box-shadow: 0 0 0 2px rgba(247, 9, 77, 0.35); /* focus:ring-2 focus:ring-primary */
}

/* Category Slider */
.category-slider {
  display: flex;
  overflow-x: auto;          /* overflow-x-auto */
  padding-top: 0.5rem;       /* py-2 */
  padding-bottom: 0.5rem;
  gap: 0.5rem;               /* gap-2 */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.category-slider::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;             /* fixed */
  inset: 0;                    /* inset-0 */
  background: rgba(0,0,0,.5);  /* bg-black bg-opacity-50 */
  display: flex;               /* flex */
  align-items: center;         /* items-center */
  justify-content: center;     /* justify-center */
  z-index: 50;                 /* z-50 */
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem; /* p-4 */
}

.modal-content {
  background: #fff;
  border-radius: 1rem; /* rounded-2xl */
  padding: 1.5rem;     /* p-6 */
  max-width: 28rem;    /* max-w-md */
  width: 100%;
  max-height: 90vh;    /* max-h-[90vh] */
  overflow-y: auto;
}

/* Cart badge */
.cart-badge {
  position: absolute;
  top: -0.5rem;               /* -top-2 */
  right: -0.5rem;             /* -right-2 */
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;         /* text-xs */
  width: 1.25rem;             /* w-5 */
  height: 1.25rem;            /* h-5 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 700;
}

/* Loyalty section */
.loyalty-card {
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 10px 15px rgba(0,0,0,.12); /* shadow-lg */
  padding: 1.25rem;   /* p-5 */
  color: #fff;
  background: linear-gradient(to right, var(--primary), var(--primary-light));
}

.loyalty-progress {
  height: 0.75rem;                 /* h-3 */
  background: rgba(255,255,255,.3);/* bg-white bg-opacity-30 */
  border-radius: 9999px;           /* rounded-full */
  margin-top: 0.75rem;             /* mt-3 */
  overflow: hidden;
}

.loyalty-progress-bar {
  height: 100%;
  background-color: var(--secondary-accent);
}