* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

:root {
  --red: #E63946;
  --red-bg: #AA0101;
  --yellow: #FFD923;
  --cream: #fffaf0;
  --dark: #333;
  --bg-light: #fffaf0;
  --text-dark: #333;
  --text-light: #fff;
}

.dark-mode {
  --bg-light: #1a1a1a;
  --text-dark: #f0f0f0;
  --text-light: #fff;
  --cream: #2a2a2a;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  scroll-behavior: smooth;
  transition: background-color 0.5s, color 0.5s;
}

.animated-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, var(--red-bg), var(--red), var(--yellow), var(--red-bg));
  background-size: 400% 400%;
  animation: bg-gradient-animation 15s ease infinite;
  opacity: 1;
  z-index: -10;
}

.animated-overlay::after {
  content: 'WASHINGTON BURRITO WASHINGTON BURRITO WASHINGTON BURRITO \A  WASHINGTON BURRITO WASHINGTON BURRITO WASHINGTON BURRITO \A WASHINGTON BURRITO WASHINGTON BURRITO WASHINGTON BURRITO \A  WASHINGTON BURRITO WASHINGTON BURRITO WASHINGTON BURRITO \A WASHINGTON BURRITO WASHINGTON BURRITO WASHINGTON BURRITO';
  position: absolute;
  top: 50%;
  left: -50%;
  width: 300%;
  font-family: 'Bebas Neue', cursive;
  font-size: 9vw;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.05);
  white-space: pre;
  animation: flow-text 120s linear infinite;
  transform: rotate(-20deg) translateY(-50%);
  z-index: -1;
}

.dark-mode .animated-overlay {
  background: linear-gradient(-45deg, #3d1170, #6a1b9a, #ad1457, #3d1170);
}

.dark-mode .animated-overlay::after {
  color: rgba(255, 255, 255, 0.03);
}

h1,
h2,
h3,
.logo,
.btn,
.section-title,
.burrito-tag,
.location-tag {
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

/* HEADER */
header {
  position: sticky;
  top: 1rem;
  max-width: 1400px;
  width: 95%;
  margin: 1rem auto;
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: background 0.5s;
  border-radius: 50px;
}

.dark-mode header {
  background: rgba(26, 26, 26, 0.95);
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

.logo img {
  height: 60px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo:hover img {
  transform: scale(1.1) rotate(-5deg);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--yellow);
}

.dark-mode .nav-links a {
  color: var(--text-light);
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-dark);
  transition: color 0.3s;
}

.theme-toggle:hover {
  color: var(--yellow);
}

.dark-mode .theme-toggle {
  color: var(--text-light);
}

.lang-toggle {
  background: transparent;
  border: 2px solid var(--yellow);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-toggle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.lang-toggle:hover {
  background: var(--yellow);
  color: var(--red);
  transform: scale(1.1) rotate(15deg);
}

.hamburger-menu {
  display: none;
  cursor: pointer;
  z-index: 1001;
}

.hamburger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background: var(--text-dark);
  transition: all 0.3s ease-in-out;
}

.dark-mode .hamburger-menu span {
  background: var(--text-light);
}

.hamburger-menu.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* BOTÓN GENÉRICO */
.btn {
  display: inline-block;
  background: var(--red);
  color: white;
  padding: 0.8rem 1.8rem;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s;
  border: 2px solid var(--yellow);
  cursor: pointer;
}

.btn:hover {
  background: var(--yellow);
  color: var(--red);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(252, 163, 17, 0.4);
}

.dark-mode .btn {
  background: var(--yellow);
  color: var(--red);
  border: 2px solid var(--red);
}

.dark-mode .btn:hover {
  background: var(--red);
  color: white;
}

/* SECCIONES */
section {
  max-width: 1400px;
  margin: 2rem auto;
  border-radius: 25px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 6rem 5%;
  position: relative;
  transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
  background-color: var(--bg-light);
}

.section-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--red);
  position: relative;
  animation: fadeInUp 1s ease;
}

.dark-mode .section-title {
  color: var(--yellow);
}

.section-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: var(--yellow);
  margin: 10px auto;
  border-radius: 2px;
}

.dark-mode .section-title::after {
  background: var(--red);
}

.section-subtitle {
  max-width: 800px;
  margin: -0.5rem auto 2.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.8;
  text-align: center;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HERO SLIDER */
.hero-slider {
  height: 75vh;
  max-height: 700px;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.dark-mode .hero-slider {
  background-color: #3d1170;
}

.slider-container {
  height: 100%;
  position: relative;
  z-index: 1;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 5%;
  background-size: cover;
  background-position: center;
  animation: ken-burns 20s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  animation-play-state: running;
}

.slide h1 {
  font-size: 4rem;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.slide p {
  font-size: 1.5rem;
  color: white;
  max-width: 800px;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.slide h1,
.slide p,
.slide .btn {
  /* Hide by default, will be animated in */
  opacity: 0;
}

.slide.active h1 {
  animation: text-entry-effect 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.3s both;
}

.slide.active p {
  animation: text-entry-effect 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s both;
}

.slide.active .btn {
  animation: text-entry-effect 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.7s both;
}

.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: white;
}

/* Nuevos botones de carrusel (simples y bonitos) */
.carousel-nav-btn {
  background: var(--red);
  color: white;
  border: none;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.carousel-nav-btn:hover {
  background: var(--yellow);
  color: var(--red);
  transform: scale(1.1);
}

.carousel-nav .carousel-nav-btn:hover {
  transform: scale(1.1) rotate(-15deg);
}

.dark-mode .carousel-nav-btn {
  background: var(--yellow);
  color: var(--red);
}

.dark-mode .carousel-nav-btn:hover {
  background: var(--red);
  color: white;
}

/* WHY CHOOSE US — ¡RESTAURADO! */
.why-us {
  background-color: var(--red-bg);
  position: relative;
  overflow: hidden;
}

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.reason {
  background: var(--bg-light);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.reason h3 {
  color: var(--red);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.reason:nth-child(1) {
  animation-name: pulse-card-1;
}

.reason:nth-child(2) {
  animation-name: pulse-card-2;
}

.reason:nth-child(3) {
  animation-name: pulse-card-3;
}

.dark-mode .reason {
  background: #333;
}

.dark-mode .reason h3 {
  color: var(--yellow);
}

.why-us .section-title {
  color: white;
}

.dark-mode .why-us .availability-text {
  color: var(--yellow);
}

.why-us .availability-text {
  text-align: center;
  margin-top: -0.5rem;
  margin-bottom: 2.5rem;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--yellow);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.dark-mode .why-us {
  background-color: #3d1170;
}

.why-us::after,
.locations-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--yellow) 1px, transparent 1px),
    radial-gradient(circle, #F1C40F 1px, transparent 1px);
  background-size: 60px 60px, 120px 120px;
  background-position: 0 0, 60px 60px;
  animation: sparkle-twinkle 5s linear infinite;
  transform: translate(var(--mouse-x, 0px), var(--mouse-y, 0px));
  transition: transform 0.1s linear;
}

.dark-mode .why-us::after,
.dark-mode .locations-section::after {
  background-image:
    radial-gradient(circle, #ad1457 1px, transparent 1px),
    radial-gradient(circle, #6a1b9a 1px, transparent 1px);
}

@keyframes sparkle-twinkle {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 0.2;
  }
}

@keyframes pulse-card-1 {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  12.5% {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.2);
  }

  25%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
}

@keyframes pulse-card-2 {

  0%,
  25% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  37.5% {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.2);
  }

  50%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
}

@keyframes pulse-card-3 {

  0%,
  50% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  62.5% {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.2);
  }

  75%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
}

/* ABOUT US */
.about-section {
  background-color: var(--red-bg);
  position: relative;
  overflow: hidden;
  padding: 8rem 5%;
}

.dark-mode .about-section {
  background-color: #3d1170;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.about-text {
  animation: fadeInLeft 1s ease;
}

.about-text h2 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .about-text h2 {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.about-text p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.about-image {
  position: relative;
  animation: fadeInRight 1s ease;
}

.about-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 5px solid var(--yellow);
  transition: transform 0.3s;
}

.about-image img:hover {
  transform: scale(1.05) rotate(3deg);
}

/* Íconos flotantes sobre la imagen */
.floating-icon {
  position: absolute;
  font-size: 3.5rem;
  z-index: 1;
  animation: floatFun 10s ease-in-out infinite;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.floating-icon.taco {
  top: -15%;
  left: 5%;
  animation-delay: 0s;
  font-size: 4rem;
}

.floating-icon.avocado {
  top: 75%;
  right: -15%;
  animation-delay: -3s;
}

.floating-icon.burrito {
  bottom: -15%;
  left: 60%;
  animation-delay: -6s;
  font-size: 4.5rem;
}

.floating-icon.logo-icon {
  width: 140px;
  height: auto;
  border: none;
  box-shadow: none;
}

.about-section .logo-icon {
  top: 10%;
  right: -20%;
  left: auto;
  animation-delay: -8s;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes animatedGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes vibrant-gradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

@keyframes floatFun {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  20% {
    transform: translate(15px, -25px) rotate(10deg) scale(1.1);
  }

  40% {
    transform: translate(-20px, 10px) rotate(-15deg) scale(0.95);
  }

  60% {
    transform: translate(10px, 25px) rotate(5deg) scale(1.05);
  }

  80% {
    transform: translate(-10px, -15px) rotate(-10deg) scale(1);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes bg-gradient-animation {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

@keyframes flow-text {
  from {
    transform: rotate(-20deg) translateY(-50%) translateX(0%);
  }

  to {
    transform: rotate(-20deg) translateY(-50%) translateX(-33.33%);
  }
}

@keyframes text-entry-effect {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  80% {
    transform: translateY(-5px) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ken-burns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

.content-wrapper {
  position: relative;
  z-index: 1;
}

/* CARRUSEL SIMPLE Y FUNCIONAL */
.carousel-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 0;
  /* Espaciado vertical */
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
  scrollbar-width: none;
  /* Firefox */
}

/* Ocultar la barra de scroll y permitir que el contenido se desborde para el bucle */
.carousel-container {
  overflow: hidden;
}

.carousel-track {
  overflow-x: scroll;
}

.carousel-track::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.carousel-item {
  scroll-snap-align: start;
  flex: 0 0 calc(100% / 3 - 1rem);
  /* 3 items en PC, ajustado por el gap */
  min-width: 280px;
  /* Ancho mínimo para evitar que se encojan demasiado */
  position: relative;
  /* For z-index to work */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.carousel-track:hover .carousel-item {
  opacity: 0.6;
  transform: scale(0.95);
}

.carousel-track .carousel-item:hover {
  opacity: 1;
  transform: scale(1.05) rotate(3deg);
  z-index: 10;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* MENU CARRUSEL */
.menu-section {
  background: var(--bg-light);
}

.menu-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dark-mode .menu-item {
  background: #2a2a2a;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.menu-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.menu-item h3 {
  padding: 1rem;
  color: var(--red);
  font-size: 1.5rem;
}

.dark-mode .menu-item h3 {
  color: var(--yellow);
}

.menu-item p {
  padding: 0 1rem 1rem;
  color: #555;
}

.dark-mode .menu-item p {
  color: #ccc;
}

/* TESTIMONIOS CARRUSEL */
.testimonials-section {
  background: var(--bg-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.testimonial {
  background: var(--cream);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  border: 2px dashed var(--yellow);
}

.dark-mode .testimonial {
  background: #2a2a2a;
  border-color: var(--red);
}

.testimonial img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid var(--yellow);
  transition: transform 0.3s;
}

.testimonial img:hover {
  transform: scale(1.1);
}

.testimonial h4 {
  color: var(--red);
  margin-bottom: 0.5rem;
}

.dark-mode .testimonial h4 {
  color: var(--yellow);
}

.stars {
  color: gold;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.dark-mode .stars {
  color: #ffd700;
}

/* GALLERY CARRUSEL */
.gallery-section {
  background: var(--cream);
}

.dark-mode .gallery-section {
  background: #2a2a2a;
}

.gallery-item {
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.gallery-item img:hover {
  transform: scale(1.1);
}

/* LOCATIONS */
.locations-section {
  background-color: var(--red-bg);
  padding: 6rem 5%;
  overflow: hidden;
}

.dark-mode .locations-section {
  background-color: #3d1170;
}

.locations-cards {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.location-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  width: 350px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  border: 3px solid transparent;
}

.dark-mode .location-card {
  background: #2a2a2a;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.location-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(230, 57, 70, 0.2);
}

.location-card.active {
  border: 3px solid var(--yellow);
  background: #fff5e6;
}

.dark-mode .location-card.active {
  background: #3a2a2a;
  border-color: var(--red);
}

.burrito-tag {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--red);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  animation: bounce 1.5s infinite;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.dark-mode .burrito-tag {
  background: var(--red);
  color: white;
}

.location-card.active .burrito-tag {
  background: var(--red);
  color: white;
  animation: none;
  font-size: 1rem;
  padding: 10px 20px;
  bottom: -28px;
}

.location-card h3 {
  color: var(--red);
  margin-bottom: 1rem;
}

.dark-mode .location-card h3 {
  color: var(--yellow);
}

.location-card p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.dark-mode .location-card p {
  color: #ccc;
}

.map-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 400px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

.locations-section .section-title {
  color: white;
}

.floating-icon.map-pin {
  font-size: 3.5rem;
  top: 50%;
  left: 5%;
  animation: floatFun 8s ease-in-out infinite -2s;
}

.floating-icon.map-car {
  font-size: 3rem;
  top: 60%;
  right: 5%;
  animation: floatFun 12s ease-in-out infinite -5s;
}

/* ORDER ONLINE */
#order-online-section {
  background-color: var(--red-bg);
  text-align: center;
  padding: 6rem 5%;
  color: white;
  position: relative;
}

.dark-mode #order-online-section {
  background-color: #3d1170;
}

#order-online-section .section-title {
  color: white;
}

#order-online-section .availability-text {
  margin-top: 1.5rem;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--yellow);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.brands-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 3rem auto 0;
  justify-content: center;
}

@media (min-width: 768px) {
  .brands-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
}

@media (min-width: 1024px) {
  .brands-container {
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem;
  }

  /* Primera fila: 3 tarjetas */
  .brand-card:nth-child(1) {
    grid-column: 1 / 3;
  }

  .brand-card:nth-child(2) {
    grid-column: 3 / 5;
  }

  .brand-card:nth-child(3) {
    grid-column: 5 / 7;
  }

  /* Segunda fila: 2 tarjetas centradas */
  .brand-card:nth-child(4) {
    grid-column: 2 / 4;
  }

  .brand-card:nth-child(5) {
    grid-column: 4 / 6;
  }
}

@media (min-width: 1400px) {
  .brands-container {
    max-width: 1400px;
    gap: 3rem;
  }
}

.brand-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  transition: transform 0.3s;
  border: 2px solid transparent;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 350px;
}

.brand-card:hover {
  transform: scale(1.05);
  border-color: var(--yellow);
}

.brand-logo {
  margin-bottom: 1.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Aumentar específicamente el tamaño del logo de DinDin */
.brand-card:nth-child(5) .brand-logo {
  height: 80px;
}

.brand-card:nth-child(5) .brand-logo img {
  max-width: 120%;
  transform: scale(1.3);
}

.brand-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.brand-btn {
  background: var(--red);
  color: white;
  padding: 0.8rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.brand-btn:hover {
  background: var(--yellow);
  color: var(--red);
  transform: scale(1.05);
  border-color: var(--red);
}

.dark-mode .brand-btn {
  background: var(--red);
  color: var(--yellow);
}

.dark-mode .brand-btn:hover {
  background: #444;
  color: white;
  border-color: var(--yellow);
}

.floating-icon.order-scooter {
  top: 15%;
  left: 10%;
  font-size: 3.5rem;
  animation: floatFun 12s ease-in-out infinite;
}

.floating-icon.order-burrito {
  top: 15%;
  right: 10%;
  font-size: 4.5rem;
  animation: floatFun 10s ease-in-out infinite -4s;
}

.floating-icon.testimonial-star {
  top: 15%;
  left: 10%;
  font-size: 3.5rem;
  animation-delay: -1s;
}

.floating-icon.testimonial-bubble {
  top: 60%;
  right: 5%;
  font-size: 4.5rem;
  animation-delay: -4s;
}

.floating-icon.testimonial-thumb {
  bottom: 10%;
  left: 20%;
  font-size: 4rem;
  animation-delay: -7s;
}

/* CONTACTO */
.contact-section {
  background: var(--bg-light);
  text-align: center;
  padding: 6rem 5%;
}

.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
}

.contact-info h3 {
  color: var(--red);
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.dark-mode .contact-info h3 {
  color: var(--yellow);
}

.contact-info p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  font-size: 1.1rem;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 2px solid #eee;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  background: white;
  color: var(--text-dark);
}

.dark-mode .contact-form input,
.dark-mode .contact-form textarea {
  background: #333;
  border-color: #555;
  color: white;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--cream);
  padding: 1rem;
  border-radius: 10px;
  border: 2px dashed var(--yellow);
}

.dark-mode .captcha-container {
  background: #2a2a2a;
  border-color: var(--red);
}

.captcha-container span {
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--red);
}

.dark-mode .captcha-container span {
  color: var(--yellow);
}

.captcha-container input {
  width: 80px;
  text-align: center;
  padding: 0.5rem;
  border-radius: 5px;
  border: 2px solid var(--yellow);
}

.dark-mode .captcha-container input {
  border-color: var(--red);
  background: #333;
  color: white;
}

/* Mascota flotante */
.mascot {
  position: absolute;
  width: 180px;
  z-index: 1001;
  pointer-events: none;
  animation: floatMascot 6s ease-in-out infinite;
}

@keyframes floatMascot {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-20px) rotate(5deg);
  }

  50% {
    transform: translateY(0px) rotate(0deg);
  }

  75% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

.mascot.menu {
  top: 2rem;
  left: 2rem;
  animation-delay: 0.5s;
}

.mascot.testimonials {
  bottom: 2rem;
  right: 2rem;
  animation-delay: 0.8s;
}

.mascot.gallery {
  top: 2rem;
  right: 2rem;
  animation-delay: 1.1s;
}

.mascot.contact {
  bottom: 20%;
  left: 5%;
  animation-delay: 1.4s;
}

/* FOOTER */
footer {
  max-width: 1400px;
  margin: 2rem auto;
  border-radius: 25px;
  transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  padding: 4rem 5% 5rem;
  background-color: var(--red-bg);
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dark-mode footer {
  background-color: #3d1170;
}

section:hover,
footer:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo img {
  height: 80px;
  transition: transform 0.3s;
}

.footer-logo:hover img {
  transform: scale(1.05);
}

.footer-brand p {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.6;
}

.footer-links h3 {
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.footer-links ul {
  list-style: none;
}

.footer-links a {
  color: white;
  opacity: 0.8;
  text-decoration: none;
  transition: color 0.3s, opacity 0.3s;
  display: inline-block;
  padding: 0.3rem 0;
}

.footer-links a:hover {
  color: var(--yellow);
}

.newsletter input {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 5px;
  background: white;
  color: var(--text-dark);
}

.newsletter button {
  width: 100%;
  padding: 0.8rem;
  background: var(--yellow);
  color: var(--red);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.newsletter button:hover {
  background: var(--red);
  color: white;
  transform: scale(1.05);
}

.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-icons a {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: background 0.3s;
}

.social-icons a:hover {
  background: var(--yellow);
  transform: scale(1.2) rotate(10deg);
}

.social-icons a svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  position: static;
  margin-top: 2rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: white;
  opacity: 0.9;
  z-index: 1;
}

.footer-bottom a {
  color: var(--yellow);
  text-decoration: none;
  font-weight: bold;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

@keyframes bobbing-rocket {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* BOTONES FLOTANTES */
.floating-btn {
  position: fixed;
  bottom: 30px;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  z-index: 999;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.floating-btn:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

#orderNowBtn {
  left: 30px;
  background: var(--red);
  color: white;
}

#scrollTopBtn {
  right: 30px;
  background: var(--yellow);
  color: var(--red);
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.8rem;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(100px);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s, background-color 0.3s, color 0.3s;
}

#scrollTopBtn .arrow {
  font-size: 1.2rem;
  line-height: 0.8;
}

#scrollTopBtn .burrito {
  font-size: 1.5rem;
  line-height: 1;
}

#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: bobbing-rocket 2s ease-in-out infinite 0.5s;
}

.dark-mode #orderNowBtn {
  background: var(--yellow);
  color: var(--red);
}

.dark-mode #scrollTopBtn {
  background: var(--red);
  color: white;
}

#scrollTopBtn:hover {
  animation-play-state: paused;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hamburger-menu {
    display: block;
  }

  .hero-slider>.carousel-nav-btn {
    display: none;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(170, 1, 1, 0.95);
    /* --red-bg */
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transition: transform 0.5s ease-in-out, opacity 0.5s;
    transform: translateX(100%);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
  }

  .dark-mode .nav-links {
    background: rgba(61, 17, 112, 0.95);
    /* dark purple from #3d1170 */
  }

  .nav-links.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
  }

  .nav-links a {
    font-size: 1.5rem;
    color: white;
  }

  .nav-links a:hover {
    color: var(--yellow);
  }

  .about-content,
  .contact-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .slide h1 {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .locations-cards {
    flex-direction: column;
    align-items: center;
  }

  .location-card {
    width: 90%;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }

  .mascot,
  .floating-icon {
    display: none;
  }

  .carousel-item {
    flex-basis: 85%;
    /* 1 item visible en tablets */
    min-width: 85%;
  }

  .brands-container {
    grid-template-columns: 1fr;
  }

  .carousel-track {
    /* Asegura que el snap funcione bien en móvil */
    padding-left: 7.5%;
    padding-right: 7.5%;
  }

  .carousel-container {
    padding: 1rem 0;
  }

  #orderNowBtn,
  #scrollTopBtn {
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 1450px) {

  section,
  footer {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .carousel-item {
    flex-basis: 90%;
    /* 1 item visible en móviles pequeños */
    min-width: 90%;
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* Estilos para el nuevo fondo de ondas */
.about-section,
#order-online-section,
footer {
  position: relative;
  overflow: hidden;
}

.about-section::before,
.about-section::after,
#order-online-section::before,
#order-online-section::after,
footer::before,
footer::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300%;
  height: 150px;
  background-repeat: repeat-x;
  animation: wave-animation 15s linear infinite;
  z-index: 0;
}

.about-section::before,
#order-online-section::before,
footer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23F1C40F' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,176C672,171,768,181,864,192C960,203,1056,213,1152,197.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  animation-duration: 20s;
}

.about-section::after,
#order-online-section::after,
footer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23FFD923' fill-opacity='1' d='M0,224L48,208C96,192,192,160,288,165.3C384,171,480,213,576,229.3C672,245,768,235,864,208C960,181,1056,139,1152,133.3C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  animation-direction: reverse;
}

.dark-mode .about-section::before,
.dark-mode #order-online-section::before,
.dark-mode footer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%236a1b9a' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,176C672,171,768,181,864,192C960,203,1056,213,1152,197.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
}

.dark-mode .about-section::after,
.dark-mode #order-online-section::after,
.dark-mode footer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ad1457' fill-opacity='1' d='M0,224L48,208C96,192,192,160,288,165.3C384,171,480,213,576,229.3C672,245,768,235,864,208C960,181,1056,139,1152,133.3C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
}

@keyframes wave-animation {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-1440px);
  }
}