/* ============================================================
   KOTAPELO — HOJA DE ESTILOS ÚNICA
   ------------------------------------------------------------
   Metodología: BEM (bloque__elemento--modificador)
   Enfoque:     Mobile First (base = móvil, min-width = escritorio)
   Breakpoints: 481px · 601px · 768px · 769px · 901px · 993px ·
                1024px · 1200px
   (Los valores "raros" 481/601/769/993 son el inverso exacto de
   los antiguos max-width para NO alterar el diseño ni 1px.)

   ÍNDICE
   1. Settings ......... @font-face y variables (:root)
   2. Base ............. estilos de etiquetas y accesibilidad
   3. Layout ........... .container, .grid, .section, separadores
   4. Header / Nav ..... menú lateral y botón mágico
   5. Hero ............. portada, subportada, nubes, avión, logo
   6. Componentes ...... botones, divider, lightbox, galería…
   7. Secciones Inicio . features, innovación, métricas, cupones
   8. Página Servicios . service-card (también en Quiénes somos)
   9. Página Donación
   10. Página Sucursales tabs, contacto, formularios, mapas
   11. Footer .......... footer, peces, scroll-up
   12. Animaciones ..... todos los @keyframes
   13. Preferencias .... prefers-reduced-motion
   ============================================================ */

/* ============================================================
   1. SETTINGS — Fuentes y variables
   ============================================================ */
@font-face {
  font-family: "Kidsbar";
  src: url("assets/fonts/Kidsbar-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Colores de marca -------- */
  --body-color: #3c4956;
  --color-primario: #27749f;
  --color-secundario: #7cce59;
  --color-secundario-sombra: #458828;
  --color-terciario: #eef6f9;
  --color-terciario-sombra: #9bb9ca;
  --menu-accent: var(--accent, #61ce70);
  --menu-accent-shadow: #458828;
  --menu-accent-text: #fff;

  /* -------- Paleta de marcos / temas -------- */
  --color-frame-red: #de4f4f;
  --color-frame-blue: #2b559b;
  --color-frame-sky: #0099ff;
  --color-frame-green: #6bcb77;
  --color-frame-yellow: #ffaf00;
  --color-frame-purple: #a78bfa;
  --color-frame-orange: #ff9f43;

  /* -------- Tipografía -------- */
  --body-font: "Manrope", sans-serif;
  --second-font: "Titan One", sans-serif;
  --third-font: "Kidsbar", sans-serif;

  /* -------- Medidas y capas -------- */
  --header-height: 3.5rem;
  --z-fixed: 100;

  /* -------- Lightbox -------- */
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --backdrop-bg: rgba(0, 0, 0, 0.85);
  --accent-color: #fff;
  --transition-speed: 0.3s;

  /* -------- Avión: distancia de vuelo (mobile first) -------- */
  --distancia-avion: 230vw;
}

@media screen and (min-width: 480px) {
  :root {
    --distancia-avion: 240vw;
  }
}
@media screen and (min-width: 600px) {
  :root {
    --distancia-avion: 180vw;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --distancia-avion: 125vw;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --distancia-avion: 105vw;
  }
}

/* ============================================================
   2. BASE — Etiquetas y accesibilidad
   ============================================================ */
body {
  font-family: var(--body-font);
  color: var(--body-color);
  overflow-x: hidden; /* Previene scroll horizontal indeseado */
}

a {
  text-decoration: none;
  font-size: clamp(0.75rem, 2vw + 0.5rem, 1.2rem);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  font-size: clamp(0.75rem, 2vw + 0.5rem, 1.2rem);
  color: var(--body-color);
}

/* Anillo de foco visible solo al navegar con teclado (accesibilidad) */
:focus-visible {
  outline: 3px solid var(--color-frame-sky);
  outline-offset: 2px;
}

/* ============================================================
   3. LAYOUT — Contenedores, rejilla base y secciones
   ============================================================ */
.container {
  width: min(90%, 1380px);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: 1rem;
}

.section {
  padding-block: 5rem 0.25rem;
}
.fsection {
  padding-block: 2rem 0.25rem;
}

/* Subtítulo estándar de sección (Kidsbar) */
.section__subtitle {
  font-size: clamp(1.6rem, 2.2vw + 0.5rem, 2.4rem);
  font-family: "Kidsbar", sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-primario);
  width: 90%;
  margin: 0 auto;
}

.section__subtitle span {
  color: var(--color-secundario);
}

.section__subtitle--md {
  font-size: 2rem;
} /* Quiénes somos: "Valores"   */
.section__subtitle--sm {
  font-size: 1.8rem;
} /* Sucursales: formularios    */

@media screen and (min-width: 1024px) {
  .section__subtitle {
    margin-top: 1rem;
    width: 50%;
  }

  .grid {
    gap: 1.5rem;
  }
}

/* Párrafo introductorio centrado bajo un título */
.section__lead {
  text-align: center;
  max-width: 700px;
  margin: 1rem auto;
}

.section__lead--spaced {
  margin-bottom: 2rem;
}

/* Rejilla de 2 columnas fluidas (features + video en Inicio) */
.section__split {
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* Cabecera de bloque con título + divisor (varias páginas) */
.intro-servicios {
  margin-bottom: 3rem;
  text-align: center;
}

/* Olas SVG decorativas */
.wave {
  display: block;
  width: 100%;
}
.wave--section {
  margin: -1px;
} /* Entre secciones */
.wave--hero {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
} /* Base de la portada */

/* ============================================================
   4. HEADER / NAV — Menú lateral y botón mágico
   ============================================================ */
.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: var(--z-fixed);
}

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 1rem;
}

/* --- Panel lateral --- */
.nav__menu {
  position: fixed;
  top: 0;
  right: -120%;
  background-color: var(--color-primario);
  width: 100%;
  max-width: 400px;
  height: 100%;
  padding: 6rem 2rem;
  display: flex;
  flex-direction: column;
  transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1000;
  overflow: hidden;
  /* Patrón sutil para que no sea azul plano */
  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 20%
    );
}

/* Estado (lo activa main.js) */
.show-menu {
  right: 0;
}

body:has(.show-menu) .scrollup {
  display: none;
}

.nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .nav__list {
    row-gap: 1rem;
  }
}

.nav__link {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  /* Preparación para la animación de entrada */
  opacity: 0;
  transform: translateX(50px);
}

/* Índice de animación y color hover de cada enlace
   (antes iban como style="" en el HTML) */
.nav__list li:nth-child(1) .nav__link {
  --i: 1;
  --hover-color: var(--color-frame-sky);
}
.nav__list li:nth-child(2) .nav__link {
  --i: 2;
  --hover-color: var(--color-frame-red);
}
.nav__list li:nth-child(3) .nav__link {
  --i: 3;
  --hover-color: var(--color-frame-yellow);
}
.nav__list li:nth-child(4) .nav__link {
  --i: 4;
  --hover-color: var(--color-frame-purple);
}
.nav__list li:nth-child(5) .nav__link {
  --i: 5;
  --hover-color: var(--color-frame-orange);
}
.nav__list li:nth-child(6) .nav__link {
  --i: 6;
  --hover-color: var(--color-frame-blue);
}
.nav__list li:nth-child(7) .nav__link {
  --i: 7;
  --hover-color: var(--color-frame-green);
}
.nav__list li:nth-child(8) .nav__link {
  --i: 8;
}

/* Entrada escalonada al abrir el menú */
.show-menu .nav__link {
  animation: slideInLink 0.5s forwards;
  animation-delay: calc(0.1s * var(--i));
}

.nav__link:hover {
  background-color: white;
  color: var(--hover-color);
  transform: scale(1.1) rotate(-2deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.nav__link i {
  font-size: 2rem;
  transition: transform 0.3s;
}
.nav__link:hover i {
  transform: rotate(15deg) scale(1.2);
}

/* --- Botones abrir / cerrar (son <button>, por eso el reset) --- */
.nav__toggle,
.nav__close {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s;
}

.nav__toggle {
  margin-top: 1rem;
}

@media screen and (min-width: 1024px) {
  .nav__toggle {
    font-size: 2.5rem;
  }
}

.nav__toggle:hover {
  transform: scale(1.1);
  color: var(--color-frame-yellow);
}

.nav__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
}

.nav__close:hover {
  color: #fff;
  transform: rotate(90deg);
}

/* --- Botón especial: Espejo Mágico --- */
.nav__link--magic {
  background: var(--color-secundario);
  background-size: 300% 300%;
  color: white !important;
  font-weight: 800;
  border: 2px solid white;
  box-shadow: 0 5px 15px rgba(124, 206, 89, 0.4);
  animation:
    backgroundMove 4s ease infinite,
    slideInLink 0.5s forwards;
}

.nav__link--magic:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 1);
  background-color: transparent;
  color: white;
}

.nav__link--magic i {
  color: #fff !important;
  animation: girarEstrella 3s linear infinite;
}

/* ============================================================
   5. HERO — Portada (Inicio) y subportada (páginas internas)
   ============================================================ */
.portada {
  min-height: 65vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #63ccf2 0%,
    /* Celeste vivo pero suave                */ #9addf5 45%,
    /* Tono intermedio pastel                 */ #dff5ff 80%,
    /* Transición sutil hacia el final        */ #ffffff 100%
      /* Fundido con el fondo blanco de abajo   */
  );
}

.subportada {
  min-height: 50vh;
  position: relative;
  overflow: hidden;
  background-color: #7fceee;
}

@media screen and (min-width: 1024px) {
  .portada {
    min-height: 100vh;
  }
  .subportada {
    min-height: 60vh;
  }
}

.hero__main {
  position: relative;
  z-index: 20;
}

/* --- Logotipo del hero --- */
.hero__logo-link {
  display: flex;
  justify-content: center;
  padding-top: 5rem;
  position: relative;
  z-index: 10; /* Siempre por encima de nubes y avión */
}

.hero__logo-img {
  display: block;
  height: 150px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media screen and (min-width: 1024px) {
  .hero__logo-link {
    padding-top: 1rem;
  }
  .hero__logo-img {
    height: 160px;
  }
}

/* --- Bloque de bienvenida (Inicio) --- */
.welcome__container {
  position: relative;
  z-index: 20;
  padding: 1rem 1.25rem 0;
}

.welcome__subtitle {
  font-family: "Manrope", sans-serif;

  font-size: clamp(1.6rem, 1.5vw + 1.2rem, 2rem);
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-align: center;

  max-width: 44ch;
  margin-inline: auto;
  text-wrap: balance;
}

.welcome__subtitle span {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--color-frame-red);
}

/* Botones del hero: en móvil apilados, en escritorio en fila */
.welcome__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.welcome__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  font-family: "Kidsbar", sans-serif;
  padding: 1rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  box-sizing: border-box;
}

.welcome__btn i {
  font-size: 1.2em;
}

@media screen and (min-width: 601px) {
  .welcome__actions {
    flex-direction: row;
  }
  .welcome__btn {
    width: auto;
  }
}

.btn-welcome-solid {
  background-image: linear-gradient(180deg, #ff5e5e, var(--color-frame-red));
  color: white;
  box-shadow:
    0 8px 0 #b32118,
    0 15px 20px rgba(0, 0, 0, 0.2);
}

.btn-welcome-solid:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 0 #b32118,
    0 20px 30px rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(180deg, #ff7373, #e35d5d);
}

.btn-welcome-solid:active {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 #b32118,
    0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-welcome-ghost {
  background-image: linear-gradient(180deg, #ffffff, #fff5f5);
  color: var(--color-frame-red);
  border: 3px solid var(--color-frame-red);
  box-shadow:
    0 8px 0 #ffccd5,
    0 15px 20px rgba(0, 0, 0, 0.1);
}

.btn-welcome-ghost:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 0 #ffccd5,
    0 20px 30px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(180deg, #fff5f5, #ffe8e8);
}

.btn-welcome-ghost:active {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 #ffccd5,
    0 5px 10px rgba(0, 0, 0, 0.1);
}

/* --- Nubes animadas del cielo --- */
.clouds {
  position: absolute;
  inset: 0;
  padding-top: 50px;
  z-index: 1; /* Detrás de tarjetas y botones */
  pointer-events: none; /* No estorban al hacer clic    */
}

.clouds__item {
  position: absolute;
  opacity: 0.55;
}

/* Posiciones verticales "aleatorias" */
.clouds__item--1 {
  top: 7%;
}
.clouds__item--2 {
  top: 38%;
}
.clouds__item--3 {
  top: 22%;
}
.clouds__item--4 {
  top: 55%;
}
.clouds__item--7 {
  bottom: 140px;
}

/* Velocidades y escalas asimétricas */
.clouds__item--1 {
  animation: animate-1 28s linear infinite;
  transform: scale(0.65);
}
.clouds__item--2 {
  animation: animate-2 44s linear infinite;
  transform: scale(0.38);
}
.clouds__item--3 {
  animation: animate-3 36s linear infinite;
  transform: scale(0.58);
}
.clouds__item--4 {
  animation: animate-4 52s linear infinite;
  transform: scale(0.45);
}
.clouds__item--7 {
  animation: animate-7 40s linear infinite;
  transform: scale(0.5);
}

/* Geometría de la nube (móvil primero) */
.cloud {
  width: 260px;
  height: 70px;
  border-radius: 100px;
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  background: #fff;
}

.cloud::after,
.cloud::before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud::after {
  width: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  border-radius: 100px;
}

.cloud::before {
  width: 110px;
  height: 110px;
  right: 40px;
  top: -75px;
  border-radius: 200px;
}

@media screen and (min-width: 768px) {
  .cloud {
    width: 350px;
    height: 120px;
  }
  .cloud::before {
    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
  }
}

/* --- Avión viajero --- */
.hero__plane {
  position: absolute;
  bottom: 200px;
  left: -100px;
  width: 100%;
  pointer-events: none;
  z-index: 6;
  animation: vueloAvion 10s linear infinite;
  will-change: transform;
}

@media screen and (min-width: 1024px) {
  .hero__plane {
    animation-duration: 13s;
  } /* Más lento en PC */
}

.hero__plane-img {
  width: 320px;
  height: auto;
  transform-origin: center;
  transform-box: fill-box;
  animation: flotarDivertido 3s ease-in-out infinite;
}

/* --- Nube SVG de la subportada --- */
.wave-separator.cloud-animated {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.wave-separator.cloud-animated svg {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

@media screen and (min-width: 1024px) {
  .wave-separator.cloud-animated {
    width: 120%;
    height: 100%;
    left: -10%;
  }
}

/* ============================================================
   6. COMPONENTES COMPARTIDOS
   ============================================================ */

/* --- Divider decorativo ---
   Base: solo la línea (Sucursales).
   --scissors: versión con tijeras animadas (Inicio, Servicios, Quiénes somos) */
.divider--scissors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.25rem 0;
}

.divider__img {
  margin: 0 auto;
}

.divider__scissors {
  fill: var(--color-primario);
  animation: cortar 1s ease-in-out infinite;
  transform-origin: center 60%;
}

/* --- Botón CTA principal (naranja) --- */
.cta-container {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
  animation: flotarBoton 3s ease-in-out infinite;
}

/* Pausamos el flote al interactuar para no marear */
.cta-container:hover {
  animation-play-state: paused;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-image: linear-gradient(180deg, #ff9f43, #ff751a);
  color: white;
  font-family: "Kidsbar", sans-serif;
  padding: 1rem 3rem;
  border-radius: 50px;
  box-shadow:
    0 8px 0 #e65100,
    0 15px 20px rgba(0, 0, 0, 0.2); /* Efecto 3D */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.btn-cta i {
  font-size: 1.2em;
}

.btn-cta:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 0 #e65100,
    0 20px 30px rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(180deg, #ffb063, #ff8534);
}

.btn-cta:active {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 #e65100,
    0 5px 10px rgba(0, 0, 0, 0.2);
}

/* --- Lightbox de video (YouTube) --- */
.video__trigger {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--transition-speed) ease;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.video__trigger img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter var(--transition-speed) ease;
}

.play__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-bg);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.play__overlay i {
  font-size: 4rem;
  color: var(--accent-color);
  transform: scale(0.8);
  transition: transform var(--transition-speed)
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video__trigger:hover {
  transform: translateY(-5px);
}
.video__trigger:hover img {
  filter: blur(2px);
}
.video__trigger:hover .play__overlay {
  opacity: 1;
}
.video__trigger:hover .play__overlay i {
  transform: scale(1.1);
}

.lightbox__dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.lightbox__dialog::backdrop {
  background-color: var(--backdrop-bg);
  animation: fade-in var(--transition-speed) forwards;
}

.video__container {
  width: 80vw;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: zoom-in var(--transition-speed)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.video__container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 10;
}

.close-btn:hover {
  opacity: 1;
}

/* --- Galería con marcos de colores --- */
.galeria {
  padding: 4rem 0;
}

.galeria__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.galeria__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 6px solid transparent;
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease;
}

.galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.galeria__item:hover {
  transform: translateY(-10px) rotate(2deg);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.galeria__item:hover .galeria__img {
  transform: scale(1.1);
}

.galeria__item--red {
  border-color: #ff4d1a;
}
.galeria__item--blue {
  border-color: #0099ff;
}
.galeria__item--green {
  border-color: #00cc33;
}
.galeria__item--yellow {
  border-color: #ffcc00;
}
.galeria__item--purple {
  border-color: #a333c8;
}
.galeria__item--orange {
  border-color: #ff751a;
}

/* ============================================================
   7. SECCIONES DE INICIO
   ============================================================ */

/* --- 7.1 Sección "diversión mientras cortan tu cabello" --- */
.info-section {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature i {
  font-size: 3.5rem;
  line-height: 0.7;
}

.feature h3 {
  font-family: "Kidsbar", sans-serif;
  color: var(--color-primario);
  font-size: clamp(0.75rem, 0.5rem + 2vw, 1.2rem);
  margin-bottom: 0.2rem;
}

.feature__text {
  font-size: 0.95rem;
  color: var(--body-color);
  margin-top: 0.3rem;
  max-width: 340px;
}

.feature--red {
  color: #ed1c24;
}
.feature--green {
  color: #9bcf38;
}
.feature--yellow {
  color: #f9d71c;
}

.feature--purple {
  color: var(--color-frame-purple);
}

/* --- 7.2 Títulos grandes estilo Manrope --- */
.services-main__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.15rem);
  font-weight: 800;
  color: #1a1a2e;
  text-align: center;
  margin: 0 auto;
  width: 90%; /* Móvil: ancho cómodo (fix; antes 50% desbordaba) */
}

.services-main__title span {
  font-family: "Kidsbar", sans-serif;
}

.services-main__title--green span {
  color: var(--color-secundario);
}

.services-main__title--yellow span {
  color: var(--color-frame-yellow);
}

.services-main__title--red span {
  color: var(--color-frame-red);
}

@media screen and (min-width: 1024px) {
  .services-main__title {
    width: 50%;
  }
}

.services-main__description {
  font-family: "Manrope", sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  color: #4a5568;
  max-width: 700px;
  margin: 0 auto 0 auto;
  line-height: 1.5;
}

/* --- 7.3 Innovación: foto + píldoras --- */
.innovation {
  background-color: transparent;
  position: relative;
  padding-block: 6rem 5rem;
}

/* Móvil: una columna centrada · Escritorio: 42% / 53% */
.innovation__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
  width: 100%;
}

.innovation__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.innovation__photo {
  width: 100%;
  max-width: 290px;
  aspect-ratio: 4 / 5;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border: 4px solid #ffffff;
  z-index: 3;
}

.innovation__img-crop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Círculos decorativos */
.innovation__shape {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.innovation__shape--back {
  top: -15px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: var(--color-frame-sky);
}

.innovation__shape--dot {
  bottom: -20px;
  right: 50px;
  width: 90px;
  height: 90px;
  background-color: var(--color-frame-red);
}

.innovation__content {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.innovation__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.15rem);
  color: #1a1a2e;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.innovation__subtitle-highlight {
  font-family: "Kidsbar", sans-serif;
  color: var(--color-secundario);
  text-transform: none;
  display: block;
  margin-top: 0.25rem;
}

.innovation__pills-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  align-items: stretch;
}

.innovation-pill {
  position: relative;
  background-color: #ffffff;
  border-radius: 1.5rem;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.innovation-pill:hover {
  transform: translateX(5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.innovation-pill__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.6rem;
}

.innovation-pill__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.innovation-pill__title {
  font-family: "Kidsbar", sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.5rem);
  color: var(--color-primario);
  margin: 0;
}

/* Flecha indicadora de enlace */
.innovation-pill__link-icon {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.2rem;
  color: #a1aab3;
  opacity: 0.7;
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    opacity 0.3s ease;
  z-index: 2;
}

.innovation-pill__desc {
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
}

.innovation-pill:hover .innovation-pill__link-icon {
  transform: translate(3px, -3px);
  opacity: 1;
}

/* Temas de color de las píldoras */
.innovation-pill--purple .innovation-pill__icon {
  background-color: #f3e8ff;
  color: #a333c8;
}
.innovation-pill--purple .innovation-pill__title {
  color: #a333c8;
}
.innovation-pill--purple:hover .innovation-pill__link-icon {
  color: #a333c8;
}

.innovation-pill--red .innovation-pill__icon {
  background-color: #ffe4e6;
  color: var(--color-frame-yellow);
}
.innovation-pill--red .innovation-pill__title {
  color: var(--color-frame-yellow);
}
.innovation-pill--red:hover .innovation-pill__link-icon {
  color: var(--color-frame-red);
}

@media screen and (min-width: 481px) {
  .innovation__photo {
    max-width: 380px;
  }
  .innovation__shape--back {
    width: 140px;
    height: 140px;
  }
  .innovation-pill {
    padding: 1.5rem;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

@media screen and (min-width: 993px) {
  .innovation__layout {
    grid-template-columns: 42% 53%;
    gap: 5%;
  }
  .innovation__content {
    text-align: left;
    align-items: stretch;
  }
}

/* --- 7.4 Métricas del hero --- */
/* Móvil: 2×2 a todo el ancho (fix; antes 4 columnas al 50% desbordaban)
   Escritorio (≥1024px): 4 columnas al 50%, idéntico al diseño original */
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 1rem auto 0;
  padding-bottom: 1rem;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .metrics__grid {
    grid-template-columns: repeat(4, 1fr);
    width: 50%;
  }
}

.metric-card {
  border-radius: 20px;
  padding: 1.2rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 3px solid var(--color-frame-red);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.metric-card__number {
  font-family: "Titan One", sans-serif;
  color: var(--color-frame-red);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1;
  margin: 0;
  display: block;
}

.metric-card__text {
  font-family: "Manrope", sans-serif;
  font-size: clamp(0.8rem, 0.8vw + 0.4rem, 1rem);
  color: var(--color-primario);
  text-transform: none;
  line-height: 1.3;
  margin: 0;
  max-width: 90%;
}

/* --- 7.5 Cupones recortables (servicios en Inicio) --- */
.services-section {
  background-color: #ffffff;
  padding-block: 5rem;
  text-align: center;
}

.services__cta {
  margin-top: 2rem;
}

/* ============================================================
   8. PÁGINA SERVICIOS (service-card también se usa en
      Quiénes somos para Misión, Visión y Valores)
   ============================================================ */
.services__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  padding-bottom: 3rem;
}

.service-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-bottom: 6px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.service-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background-color: #f0fdf4;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__icon {
  transform: scale(1.1) rotate(5deg);
}

.service-card__title {
  font-family: "Kidsbar", sans-serif;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 1.8rem);
  color: var(--color-primario);
  margin: 0;
}

.service-card__text {
  line-height: 1.5;
  color: var(--body-color);
}

/* Temas de color */
.service-card--blue {
  border-bottom-color: var(--color-frame-sky);
}
.service-card--blue .service-card__icon {
  background-color: #e3f2fd;
  color: var(--color-frame-sky);
}
.service-card--blue .service-card__title {
  color: var(--color-frame-sky);
}

.service-card--red {
  border-bottom-color: var(--color-frame-red);
}
.service-card--red .service-card__icon {
  background-color: #ffebee;
  color: var(--color-frame-red);
}
.service-card--red .service-card__title {
  color: var(--color-frame-red);
}

.service-card--green {
  border-bottom-color: var(--color-frame-green);
}
.service-card--green .service-card__icon {
  background-color: #f3e5f5;
  color: var(--color-frame-green);
}
.service-card--green .service-card__title {
  color: var(--color-frame-green);
}

.service-card--purple {
  border-bottom-color: var(--color-frame-purple);
}
.service-card--purple .service-card__icon {
  background-color: #f3e5f5;
  color: var(--color-frame-purple);
}
.service-card--purple .service-card__title {
  color: var(--color-frame-purple);
}

.service-card--yellow {
  border-bottom-color: var(--color-frame-yellow);
}
.service-card--yellow .service-card__icon {
  background-color: #fffde7;
  color: #fbc02d;
}
.service-card--yellow .service-card__title {
  color: #fbc02d;
}

/* ============================================================
   9. PÁGINA QUIÉNES SOMOS y DONACIÓN
   ============================================================ */
.about__description {
  text-align: center;
  max-width: 800px;
  margin: 2rem auto;
  line-height: 1.6;
  color: var(--body-color);
}

.mission-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

/* Letras de colores de "KOTA PELO" */
.text-k {
  color: #ff0000;
}
.text-o {
  color: #0000ff;
}
.text-t {
  color: #ffcc00;
}
.text-a {
  color: #99cc00;
}

/* --- Donación de cabello --- */
/* Móvil: centrado · ≥769px: texto a la izquierda */
.donation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: 3rem;
  padding: 2rem 0;
  text-align: center;
}

.donation__img-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.donation__img {
  width: 100%;
  max-width: 400px;
  border-radius: 30px;
  border: 5px solid #fff;
  box-shadow: 20px 20px 0 var(--color-frame-purple, #a78bfa);
  transition: transform 0.3s ease;
}

.donation__img-wrapper:hover .donation__img {
  transform: scale(1.02) rotate(-1deg);
}

.donation__decoration {
  position: absolute;
  top: -20px;
  right: 10%;
  background-color: var(--color-frame-red);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: flotarDivertido 3s ease-in-out infinite;
}

.donation__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.donation__title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.donation__text {
  text-align: center;
  margin: 0 0 1rem 0;
}

.donation__text--last {
  margin-bottom: 2rem;
}

.donation__highlight {
  color: var(--color-frame-purple);
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .donation-grid {
    gap: 4rem;
    text-align: left;
  }
  .donation__content {
    align-items: flex-start;
  }
  .donation__title,
  .donation__text {
    text-align: left;
  }
  .donation__decoration {
    right: 20px;
  }
}

/* Botón morado de donación (variante de .btn-cta) */
.btn-donation {
  padding: 0.8rem 2rem;
  background-image: linear-gradient(180deg, #a78bfa, #7c3aed);
  box-shadow:
    0 6px 0 #5b21b6,
    0 10px 15px rgba(0, 0, 0, 0.1);
}

.btn-donation:hover {
  background-image: linear-gradient(180deg, #c4b5fd, #8b5cf6);
  box-shadow:
    0 8px 0 #5b21b6,
    0 15px 20px rgba(0, 0, 0, 0.2);
}

.btn-donation:active {
  box-shadow: 0 2px 0 #5b21b6;
}

/* ============================================================
   10. PÁGINA SUCURSALES — Tabs, contacto, formularios y mapas
   ============================================================ */
.contact-page__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
  align-items: start;
  justify-content: center;
  margin-inline: auto;
}

/* --- Tabs Reynosa / Tampico --- */
.location-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  background: var(--color-terciario);
  padding: 0.5rem;
  border-radius: 50px;
  width: fit-content;
  margin-inline: auto;
}

.tab-btn {
  border: none;
  background: transparent;
  padding: 0.8rem 1.5rem;
  border-radius: 40px;
  font-family: "Kidsbar", sans-serif;
  font-size: 1.1rem;
  color: var(--body-color);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn i {
  font-size: 1.2rem;
}

.tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Estado (lo activa main.js) */
.tab-btn.active {
  background-color: var(--color-primario);
  color: white;
  box-shadow: 0 4px 10px rgba(39, 116, 159, 0.3);
  transform: scale(1.05);
}

.tab-btn[data-target="tampico"].active {
  background-color: #ffc107;
  color: #fff;
  box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
}

.tab-content {
  display: none;
  animation: fade-up 0.5s ease forwards;
}
.tab-content.active {
  display: block;
}

/* --- Datos de contacto --- */
.contact-info__box {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-info__item i {
  font-size: 2rem;
  color: var(--color-secundario);
  background-color: #f0fdf4;
  padding: 0.8rem;
  border-radius: 50%;
}

.contact-info__item h3 {
  font-family: "Kidsbar", sans-serif;
  color: var(--color-primario);
  font-size: clamp(1.1rem, 2vw + 0.5rem, 1.6rem);
  margin-bottom: 0.2rem;
}

.link-destacado {
  color: var(--color-secundario);
}

/* --- Formularios --- */
.contact-page__form-wrapper {
  width: 100%;
  margin: 0 auto;
}

.contact-page__sucursales {
  border-radius: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
}

/* Franja superior de color por sucursal */
.contact-page__form-wrapper--framed {
  border-top: 5px solid var(--color-primario);
}

.contact-page__form-wrapper .form-container {
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-page__form-wrapper .section__subtitle {
  text-align: center;
  margin-bottom: 0.5rem;
}

.contact-page__form-wrapper .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-page__form-wrapper .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.contact-page__form-wrapper label {
  font-weight: 500;
  color: var(--body-color, #3c4956);
  font-family: var(--body-font, sans-serif);
  font-size: 1rem;
}

.contact-page__form-wrapper input,
.contact-page__form-wrapper textarea {
  padding: 12px 15px;
  border: 2px solid var(--color-terciario-sombra, #9bb9ca);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background-color: var(--white-color, #fff);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
}

.contact-page__form-wrapper input:focus,
.contact-page__form-wrapper textarea:focus {
  border-color: var(--color-secundario, #7cce59);
}

.contact-page__form-wrapper textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-page__form-wrapper .submit-btn {
  background-image: linear-gradient(180deg, #90d572, #7cce59);
  color: #ffffff;
  font-family: "Kidsbar", sans-serif;
  font-size: 1.3rem;
  text-align: center;
  border: 1px solid #7cce59;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  box-shadow: 0 4px 0 0 var(--color-secundario-sombra, #458828);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 1rem;
}

.contact-page__form-wrapper .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--color-secundario-sombra, #458828);
}

.contact-page__form-wrapper .submit-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--color-secundario-sombra, #458828);
}

/* --- Mapas --- */
.sucursal__map {
  margin-top: 4rem;
}

.modern-map-container {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: var(--color-terciario);
  border: 5px solid var(--white-color);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.modern-map-container--reynosa {
  border-color: var(--color-primario);
}
.modern-map-container--tampico {
  border-color: #ffc107;
}

.modern-map-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.modern-map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  transition: filter 0.3s;
}

.map-overlay-btn {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background-color: white;
  color: var(--color-primario);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: "Kidsbar", sans-serif;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 10;
}

.map-overlay-btn:hover {
  background-color: var(--color-secundario);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.map-overlay-btn i {
  font-size: 1.4rem;
}

/* --- Tema Tampico (amarillo) dentro de su pestaña ---
   Sustituye a todos los style="" repetidos del HTML original */
.tab-content--tampico .section__subtitle span {
  color: #ffc107;
}
.tab-content--tampico .link-destacado {
  color: #ffc107;
}

.tab-content--tampico .contact-info__item i {
  background-color: #fff3cd;
  color: #ffc107;
}

.tab-content--tampico .contact-page__form-wrapper--framed {
  border-top-color: #ffc107;
}

.tab-content--tampico .submit-btn {
  background-image: linear-gradient(180deg, #ffd54f, #ffc107);
  border-color: #ffc107;
  box-shadow: 0 4px 0 0 #c79100;
}

/* En el original la sombra amarilla iba inline y no cambiaba en hover/active */
.tab-content--tampico .submit-btn:hover,
.tab-content--tampico .submit-btn:active {
  box-shadow: 0 4px 0 0 #c79100;
}

.tab-content--tampico .map-overlay-btn {
  color: #bfa100;
}

/* ============================================================
   11. FOOTER, PECES Y SCROLL-UP
   ============================================================ */
.footer {
  background-color: #7fceee;
  position: relative;
  overflow: hidden;
}

.footer__container {
  position: relative;
  z-index: 2;
  padding-block: 1rem 2rem;
  display: grid;
  row-gap: 2rem;
}

.footer__menu {
  row-gap: 3rem;
  align-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.footer__logo-link {
  width: auto;
  display: block;
}

.footer__logo {
  width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer__social {
  display: flex;
  gap: 1.5rem;
}

.footer__social-link {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: clamp(1.7rem, 2vw, 3rem);
  transition: color 0.4s;
  background-color: var(--color-primario);
}

.footer__social-link:hover {
  background-color: var(--color-frame-yellow);
}

.footer__links {
  text-align: center;
  color: #fff;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
}

.footer__title {
  font-family: "Kidsbar", sans-serif;
  color: #fff;
  font-size: clamp(1.1rem, 2vw + 0.5rem, 1.6rem);
  margin-bottom: 0.2rem;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2rem;
  justify-items: start;
  text-align: left;
}

.footer__list li {
  margin: 0;
}

.footer__list a {
  color: var(--body-color);
  transition: color 0.3s;
}

.footer__sub {
  border-bottom: 1px solid var(--color-frame-orange);
  margin-top: 0.5rem;
}

.footer__copyright {
  text-align: center;
  margin-top: 2rem;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 1024px) {
  .footer__copyright {
    gap: 0.5rem;
  }
}

.footer__heart {
  color: var(--color-frame-red);
  vertical-align: middle;
}

.footer__link {
  color: white;
  font-weight: 700;
  transition: color 0.4s;
}

.footer__link:hover {
  color: var(--body-color);
}

/* --- Peces nadadores --- */
.fish {
  background-image: url("img/fish.png");
  width: 235px;
  height: 104px;
  position: absolute;
  left: 0;
  top: 0;
  animation: nadarPez 24s linear infinite;
  /* 'both' respeta la posición inicial (fuera de pantalla)
     incluso durante el delay: evita peces "congelados" al cargar */
  animation-fill-mode: both;
  will-change: transform; /* Aceleración por GPU */
  pointer-events: none;
  z-index: 0;
}

.fish--1 {
  top: 120px;
  animation-delay: -5s;
}
.fish--2 {
  top: 260px;
  animation-delay: 7s;
}

/* --- Scroll up --- */
.scrollup {
  position: fixed;
  right: 0.7rem;
  bottom: -50%;
  background-color: var(--menu-accent);
  color: white;
  display: inline-flex;
  padding: 6px;
  font-size: 1.25rem;
  border-radius: 0.25rem;
  z-index: var(--z-fixed);
  transition:
    bottom 0.4s,
    transform 0.4s;
}

.scrollup:hover {
  transform: translateY(-0.5rem);
}

/* Estado (lo activa main.js) */
.show-scroll {
  bottom: 3rem;
}

/* ============================================================
   14. SECCIONES ADICIONALES (¿Por qué vuelven? & Así de fácil)
   ============================================================ */

/* ============================================================
   WHY KOTAPELO
   Versión cálida y suave
   ============================================================ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

/* ============================================================
   CARD
   ============================================================ */

.why-card {
  --why-accent: var(--color-frame-sky);
  --why-soft: color-mix(in srgb, var(--why-accent) 14%, white);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(39, 116, 159, 0.08);
  border-bottom: 3px solid var(--why-accent);
  border-radius: 1.5rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(39, 116, 159, 0.06);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.why-card:hover {
  transform: translateY(-0.35rem);
  box-shadow: 0 1.25rem 2.5rem rgba(39, 116, 159, 0.1);
}

/* ============================================================
   VARIANTES DE COLOR
   ============================================================ */

/* ============================================================
   VARIANTES DE COLOR
   Usando la paleta global de Kotapelo
   ============================================================ */

.why-card--sky {
  --why-accent: var(--color-frame-sky);
  --why-soft: color-mix(in srgb, var(--color-frame-sky) 14%, white);
}

.why-card--green {
  --why-accent: var(--color-frame-green);
  --why-soft: color-mix(in srgb, var(--color-frame-green) 14%, white);
}

.why-card--yellow {
  --why-accent: var(--color-frame-yellow);
  --why-soft: color-mix(in srgb, var(--color-frame-yellow) 14%, white);
}

.why-card--purple {
  --why-accent: var(--color-frame-purple);
  --why-soft: color-mix(in srgb, var(--color-frame-purple) 14%, white);
}

/* ============================================================
   PARTE SUPERIOR
   ============================================================ */

.why-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.why-card__number {
  color: var(--why-accent);
  font-family: var(--second-font);
  ont-size: clamp(1.05rem, 0.5rem + 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* ============================================================
   ICONO
   ============================================================ */

.why-card__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.15rem;
  background: var(--why-soft);
  color: var(--why-accent);
  font-size: 1.8rem;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.why-card:hover .why-card__icon {
  transform: rotate(-5deg) scale(1.05);
  background: color-mix(in srgb, var(--why-soft) 75%, var(--why-accent));
}

/* ============================================================
   CONTENIDO
   ============================================================ */

.why-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  padding-top: 2rem;
}

.why-card__body h3 {
  max-width: 15rem;
  margin: 0;
  color: var(--color-primario);
  font-family: var(--third-font);
  /* font-size: clamp(1.5rem, 1.8vw, 2rem); */
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.5rem);
  font-weight: 400;
  line-height: 1;
}

.why-card__body p {
  max-width: 17rem;
  margin: 1rem 0 0;
  color: #78858d;
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 1100px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-card,
  .why-card__icon {
    transition: none;
  }
}

/* ============================================================
CÓMO VISITARNOS
Mobile First · Responsive · UI/UX
============================================================ */

.visit-process {
  position: relative;
  overflow: hidden;
  padding-block: 2.75rem 3.5rem;
}

/* ------------------------------------------------------------
INTRODUCCIÓN
------------------------------------------------------------ */

.visit-process__intro {
  text-align: center;
  margin-bottom: 2.25rem;
}

.visit-process__intro .section__lead {
  max-width: 650px;
  margin-inline: auto;
}

/* ------------------------------------------------------------
TIMELINE — MOBILE FIRST
------------------------------------------------------------ */

.visit-process__timeline {
  position: relative;
  display: grid;
  gap: 0.75rem;
  max-width: 1200px;
  margin-inline: auto;
}

/* ------------------------------------------------------------
PASO
------------------------------------------------------------ */

.visit-step {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  align-items: center;
  gap: 1rem;

  padding: 0.85rem;

  background: #fff;
  border: 1px solid rgba(39, 116, 159, 0.12);
  border-radius: 1.25rem;

  transform: translateY(-0.2rem);
  box-shadow: 0 0.75rem 1.5rem rgba(60, 73, 86, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* ------------------------------------------------------------
ICONO
------------------------------------------------------------ */

.visit-step__icon {
  position: relative;

  display: grid;
  place-items: center;

  width: 4.25rem;
  height: 4.25rem;

  border-radius: 1rem;

  background: var(--color-terciario);
  color: var(--color-primario);

  font-size: 1.9rem;

  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
}

.visit-step .visit-step__icon {
  background: var(--color-primario);
  color: #fff;
  transform: rotate(-4deg);
}

/* ------------------------------------------------------------
NÚMERO
------------------------------------------------------------ */

.visit-step__number {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;

  display: grid;
  place-items: center;

  width: 1.4rem;
  height: 1.4rem;

  border-radius: 50%;

  background: var(--color-secundario);
  color: #fff;

  font-family: var(--second-font);
  font-size: 0.7rem;

  box-shadow: 0 0 0 0.2rem #fff;
}

/* ------------------------------------------------------------
CONTENIDO
------------------------------------------------------------ */

.visit-step__content h3 {
  margin-bottom: 0.25rem;

  color: var(--color-primario);

  font-family: "Manrope", sans-serif;
  font-size: clamp(1.05rem, 2vw + 0.5rem, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
}

.visit-step__content p {
  margin: 0;

  font-size: 0.95rem;
  line-height: 1.4;
}

/* ============================================================
TABLET
============================================================ */

@media screen and (min-width: 601px) {
  .visit-process {
    padding-block: 3.5rem 4rem;
  }

  .visit-process__intro {
    margin-bottom: 3rem;
  }

  .visit-process__timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .visit-step {
    grid-template-columns: 5rem 1fr;
    padding: 1rem;
  }

  .visit-step__icon {
    width: 5rem;
    height: 5rem;
    font-size: 2.2rem;
  }
}

/* ============================================================
ESCRITORIO
============================================================ */

@media screen and (min-width: 1024px) {
  .visit-process__timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  /* Línea horizontal */

  .visit-process__timeline::before {
    content: "";

    position: absolute;
    top: 3.15rem;
    left: 9%;
    right: 9%;

    height: 0.35rem;

    background-image: radial-gradient(
      circle,
      var(--color-secundario) 0.18rem,
      transparent 0.2rem
    );

    background-size: 0.8rem 0.35rem;
    background-repeat: repeat-x;

    z-index: 0;
  }

  .visit-step {
    z-index: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    text-align: center;

    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    box-shadow: none;
  }

  .visit-step {
    transform: none;
    box-shadow: none;
  }

  .visit-step__icon {
    width: 6.3rem;
    height: 6.3rem;

    border-radius: 50%;
    border: 0.35rem solid var(--color-secundario);

    background: #fff;

    font-size: 2.5rem;

    box-shadow:
      0 0 0 0.45rem var(--color-terciario),
      0 0.5rem 1.25rem rgba(60, 73, 86, 0.12);
  }

  .visit-step:hover .visit-step__icon {
    background: var(--step-color);
    color: #fff;

    transform: translateY(-0.5rem) scale(1.04) rotate(-4deg);
  }

  .visit-step__number {
    top: -0.8rem;
    right: -0.4rem;

    width: 1.8rem;
    height: 1.8rem;

    font-size: 0.8rem;
  }

  .visit-step__content {
    max-width: 230px;
    margin-top: 1.5rem;
  }
}

/* ============================================================
ESCRITORIO GRANDE
============================================================ */

@media screen and (min-width: 1200px) {
  .visit-process__timeline {
    gap: 1.75rem;
  }

  .visit-step__content {
    max-width: 245px;
  }
}

/* ============================================================
   COLORES DE CADA PASO
   Inspirados en services__grid
   ============================================================ */

/* ------------------------------------------------------------
   AZUL — SOLICITAR
   ------------------------------------------------------------ */

.visit-step--blue {
  --step-color: #63ccf2;
  --step-color-dark: #27749f;
  --step-color-soft: #eef9fd;
}

.visit-step--blue .visit-step__icon {
  background-color: var(--step-color-soft);
  color: var(--step-color-dark);
  border-color: var(--step-color);
}

.visit-step--blue .visit-step__number {
  background-color: var(--step-color-dark);
}

/* ------------------------------------------------------------
   ROJO / ROSA — ESPERAR JUGANDO
   ------------------------------------------------------------ */

/* .visit-step--red {
  --step-color: #f28ca3;
  --step-color-dark: #d95773;
  --step-color-soft: #fff1f4;
}

.visit-step--red .visit-step__icon {
  background-color: var(--step-color-soft);
  color: var(--step-color-dark);
  border-color: var(--step-color);
} */

.visit-step--red {
  --step-color: #ff5e5e;
  --step-color-dark: #d93f3f;
  --step-color-soft: #fff1f1;
}

.visit-step--red .visit-step__icon {
  background-color: var(--step-color-soft);
  color: var(--step-color-dark);
  border-color: var(--step-color);
}

.visit-step--red .visit-step__number {
  background-color: var(--step-color-dark);
}

/* ------------------------------------------------------------
   VERDE — EL CORTE
   ------------------------------------------------------------ */

.visit-step--green {
  --step-color: #7cce59;
  --step-color-dark: #4d9f32;
  --step-color-soft: #f1faed;
}

.visit-step--green .visit-step__icon {
  background-color: var(--step-color-soft);
  color: var(--step-color-dark);
  border-color: var(--step-color);
}

.visit-step--green .visit-step__number {
  background-color: var(--step-color-dark);
}

/* ------------------------------------------------------------
   AMARILLO — EXPERIENCIA FINAL
   ------------------------------------------------------------ */

.visit-step--yellow {
  --step-color: #f5c84c;
  --step-color-dark: #c99600;
  --step-color-soft: #fff9e8;
}

.visit-step--yellow .visit-step__icon {
  background-color: var(--step-color-soft);
  color: var(--step-color-dark);
  border-color: var(--step-color);
}

.visit-step--yellow .visit-step__number {
  background-color: var(--step-color-dark);
}

/* ============================================================
   SERVICES SHOWCASE
   ============================================================ */

.service-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;

  margin-top: 3rem;
}

/* ============================================================
   CARD (tarjeta degradada, estilo cupón de curso)
   ============================================================ */

.service-showcase__card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 18rem;

  padding: 2rem 1.5rem 5.25rem;

  border-radius: 1.75rem;
  overflow: hidden;

  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--service-color) 82%, #ffffff 18%) 0%,
    var(--service-color) 55%,
    color-mix(in srgb, var(--service-color) 78%, #000000 22%) 100%
  );

  box-shadow: 0 1.5rem 2.5rem -1.25rem
    color-mix(in srgb, var(--service-color) 65%, transparent);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-showcase__card:hover {
  transform: translateY(-0.35rem);

  box-shadow: 0 2rem 3rem -1.25rem
    color-mix(in srgb, var(--service-color) 70%, transparent);
}

/* Mancha decorativa translúcida, como el detalle circular del diseño de referencia */
.service-showcase__card::after {
  content: "";

  position: absolute;
  top: -3.5rem;
  right: -3.5rem;

  width: 9rem;
  height: 9rem;

  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;

  pointer-events: none;
}

/* ============================================================
   FOTO (miniatura circular con insignia de icono)
   ============================================================ */

.service-showcase__photo {
  position: relative;

  width: 6.75rem;
  height: 6.75rem;

  margin-bottom: 1.5rem;

  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.4);

  overflow: hidden;

  box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.15);
}

.service-showcase__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;
}

.service-showcase__card:hover .service-showcase__image {
  transform: scale(1.08);
}

.service-showcase__card:hover .service-showcase__icon-badge {
  transform: scale(1.1) rotate(-6deg);
}

/* ============================================================
   CONTENIDO
   ============================================================ */

.service-showcase__body {
  position: relative;
  z-index: 1;
}

.service-showcase__title {
  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);

  font-weight: 800;

  line-height: 1.2;
}

.service-showcase__text {
  margin: 0.6rem 0 0;

  color: rgba(255, 255, 255, 0.9);

  font-size: 0.95rem;

  line-height: 1.5;
}

/* ============================================================
   BOTÓN (pastilla blanca, como "Inscribirse" en la referencia)
   ============================================================ */

.service-showcase__btn {
  position: absolute;

  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.75rem;

  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.85rem 1.25rem;

  background: #fff;
  color: var(--service-color);

  border-radius: 999px;

  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.service-showcase__btn i {
  transition: transform 0.25s ease;
}

.service-showcase__btn:hover {
  transform: translateY(-2px);

  box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.18);
}

.service-showcase__btn:hover i {
  transform: translateX(3px);
}

/* ============================================================
   COLORES
   ------------------------------------------------------------
   --service-color: tono de marca puro (icono/botón)
   --service-bg: el mismo tono oscurecido ~20%, exclusivo del
   fondo, para asegurar contraste AA con el texto en blanco
   ============================================================ */

.service-showcase__card--red {
  --service-color: #ff5e5e;
  --service-bg: color-mix(in srgb, #ff5e5e 82%, #000000 18%);
}

.service-showcase__card--sky {
  --service-color: var(--color-frame-sky);
  --service-bg: color-mix(in srgb, var(--color-frame-sky) 80%, #000000 20%);
}

.service-showcase__card--yellow {
  --service-color: var(--color-frame-yellow);
  --service-bg: color-mix(in srgb, var(--color-frame-yellow) 74%, #000000 26%);
}

.service-showcase__card--purple {
  --service-color: var(--color-frame-purple);
  --service-bg: color-mix(in srgb, var(--color-frame-purple) 78%, #000000 22%);
}
/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 1023px) {
  .service-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 600px) {
  .service-showcase {
    grid-template-columns: 1fr;

    gap: 1.75rem;
  }

  .service-showcase__card {
    min-height: 0;

    padding-bottom: 5.25rem;
  }
}

/* ============================================================
   RESEÑAS DE GOOGLE — slider moderno (mobile-first)
   ============================================================ */

.reviews {
  padding-block: 4rem;
  background: #fff;
}

.reviews__head {
  text-align: center;
  margin-bottom: 2rem;
}

.reviews__viewport {
  position: relative;
}

.reviews__nav {
  display: none; /* en móvil el swipe nativo resuelve la navegación */
}

.reviews__track {
  display: flex;
  gap: 1.25rem;

  margin: 0;
  padding: 1.25rem 1.75rem;

  list-style: none;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  cursor: grab;
}

.reviews__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.reviews__slide {
  flex: 0 0 86%;
  scroll-snap-align: start;
}

/* Tarjeta "burbuja" con comilla flotante, altura fija */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 15rem; /* altura fija: todas las tarjetas miden igual */
  padding: 2rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 0.25rem 1rem -0.5rem rgba(0, 0, 0, 0.35);

  border-bottom: 3px solid var(--review-color);
}

.review-card::before {
  content: "\201C";
  position: absolute;
  top: -1.1rem;
  left: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--review-color);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 0.4rem 0.9rem -0.2rem rgba(0, 0, 0, 0.35);
}

/* .review-card::after {
  content: "";
  position: absolute;
  right: 1.75rem;
  bottom: -0.35rem;
  width: 1.75rem;
  height: 0.4rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--review-color) 55%, #fff);
}
 */
.review-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
}

.review-card__avatar {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: visible;
}

.review-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--review-color) 40%, #fff);
}

.review-card__avatar--initial {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--review-color) 22%, #fff);
  color: var(--review-color);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
}

.review-card__g {
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: conic-gradient(
    #ea4335 0 25%,
    #fbbc05 0 50%,
    #34a853 0 75%,
    #4285f4 0
  );
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
}

.review-card__who {
  min-width: 0;
}

.review-card__name {
  margin: 0;
  color: var(--color-primario);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
}

.review-card__name span {
  color: #8b98a3;
  font-weight: 500;
}

.review-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.review-card__stars {
  display: flex;
  gap: 0.1rem;
  color: #ffb400;
  font-size: 0.8rem;
}

.review-card__rating time {
  color: #9aa5ad;
  font-size: 0.75rem;
}

/* Zona de texto: si la reseña es larga, hace scroll interno
   en vez de recortarse; el header y el enlace quedan fijos */
.review-card__text {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 1rem;
  padding-right: 0.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  color: var(--body-color);
  font-size: 0.9rem;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: var(--review-color) transparent;
}

.review-card__text::-webkit-scrollbar {
  width: 4px;
}

.review-card__text::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--review-color) 55%, #fff);
  border-radius: 1rem;
}

.review-card__link {
  align-self: flex-start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--review-color);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

.review-card__link i {
  transition: transform 0.2s ease;
}

.review-card__link:hover i {
  transform: translateX(3px);
}

.review-card--sky {
  --review-color: var(--color-frame-sky);
}
.review-card--red {
  --review-color: #ff5e5e;
}
.review-card--yellow {
  --review-color: var(--color-frame-yellow);
}
.review-card--green {
  --review-color: var(--color-frame-green);
}
.review-card--purple {
  --review-color: var(--color-frame-purple);
}
.review-card--orange {
  --review-color: var(--color-frame-orange);
}

.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.reviews__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primario) 25%, transparent);
  cursor: pointer;
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}

.reviews__dot.is-active {
  width: 1.6rem;
  background: var(--color-primario);
}

@media screen and (min-width: 700px) {
  .reviews__slide {
    flex-basis: calc(50% - 0.625rem);
  }

  .reviews__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: #fff;
    color: var(--color-primario);
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transform: translateY(-50%);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .reviews__nav:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.06);
  }

  .reviews__nav--prev {
    left: -0.25rem;
  }

  .reviews__nav--next {
    right: -0.25rem;
  }

  .reviews__track {
    padding-inline: 0.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .reviews__slide {
    flex-basis: calc((100% - 2.5rem) / 3);
  }

  .reviews__nav--prev {
    left: -1.35rem;
  }

  .reviews__nav--next {
    right: -1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track {
    scroll-behavior: auto;
  }
}

/* ============================================================
   12. ANIMACIONES — Todos los @keyframes
   ============================================================ */

/* Menú */
@keyframes slideInLink {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes girarEstrella {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Divider */
@keyframes cortar {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-15deg) scale(1.1);
  }
}

/* Lightbox */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Tabs */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Peces */
@keyframes nadarPez {
  0% {
    transform: translateX(-120vw);
  }
  100% {
    transform: translateX(120vw);
  }
}

/* Avión */
@keyframes vueloAvion {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--distancia-avion));
  }
}

@keyframes flotarDivertido {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-3deg);
  }
  50% {
    transform: translateY(5px) rotate(0deg);
  }
  75% {
    transform: translateY(15px) rotate(2deg);
  }
}

/* Botón CTA */
@keyframes flotarBoton {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Tijeras del cupón */
@keyframes recortandoEfecto {
  0% {
    transform: rotate(-10deg) scale(1.1);
  }
  100% {
    transform: rotate(15deg) scale(1.1);
  }
}

/* Nubes del hero */
@keyframes animate-1 {
  0% {
    left: 85%;
  }
  15% {
    left: 115%;
  }
  15.001% {
    left: -35%;
  }
  100% {
    left: 85%;
  }
}

@keyframes animate-2 {
  0% {
    left: 40%;
  }
  60% {
    left: 115%;
  }
  60.001% {
    left: -35%;
  }
  100% {
    left: 40%;
  }
}

@keyframes animate-3 {
  0% {
    left: 70%;
  }
  30% {
    left: 115%;
  }
  30.001% {
    left: -35%;
  }
  100% {
    left: 70%;
  }
}

@keyframes animate-4 {
  0% {
    left: 15%;
  }
  85% {
    left: 115%;
  }
  85.001% {
    left: -35%;
  }
  100% {
    left: 15%;
  }
}

@keyframes animate-7 {
  0% {
    left: -35%;
  }
  100% {
    left: 115%;
  }
}

/* ============================================================
   13. PREFERENCIAS DEL USUARIO — Accesibilidad
   ============================================================ */
/* Respeta a quienes piden menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}