/* ===========================================================
   BM Toys Mexico. Hoja de estilo unica del sitio.
   Paleta del logotipo: rojo institucional, azul, amarillo.
   El logo siempre va sobre fondo blanco (regla de marca).
   =========================================================== */

:root {
  /* ---------- Paleta ----------
     Objetivo: divertida para los niños, confiable para los papas.
     Lo divertido lo ponen el coral, el amarillo y los pasteles.
     Lo confiable lo pone la tinta azul marino y el fondo crema.

     Botones (tokens del cliente):
       primario   #ff5a5f, hover #e8484d
       secundario #ffd23f con texto #1f2a44 */

  /* Acción */
  --btn-primary: #ff5a5f;
  --btn-primary-hover: #e8484d;
  --btn-secondary: #ffd23f;
  --btn-secondary-text: #1f2a44;

  /* Los mismos tokens con nombre de color, para usarlos fuera de los botones */
  --coral: #ff5a5f;
  --coral-dark: #e8484d;
  --coral-wash: #fff0f0;
  --sun: #ffd23f;
  --sun-deep: #f0a81e;

  /* Rojo del logotipo. Se reserva para la marca: header y sellos. */
  --red: #e11d2a;
  --red-dark: #b8141f;
  --red-soft: #ff7b7f;
  --red-wash: #fdecec;

  /* Apoyo */
  --blue: #2f6fe4;
  --blue-dark: #1f3f8f;
  --blue-soft: #6aa9ff;

  /* Pasteles decorativos: las formas de fondo, nunca el texto */
  --mint: #9be8c8;
  --lav: #c6b8f5;
  --peach: #ffc9a3;
  --sky: #bfe0ff;
  --rose: #ff9ec4;

  /* Tinta y neutros */
  --navy: #1f2a44;
  --navy-deep: #141c30;
  --ink: #1f2a44;
  --muted: #5c6782;
  --line: rgba(31, 42, 68, 0.12);
  /* La misma linea fina, pero para fondos oscuros. */
  --line-light: rgba(255, 255, 255, 0.12);

  /* Papel: blanco, no crema. Paper-2 es un gris frio casi imperceptible,
     solo para separar una franja de la siguiente sin volver a tintar de calido. */
  --paper: #ffffff;
  --paper-2: #f5f6fa;
  --paper-warm: #ffffff;

  /* Compatibilidad con reglas que todavia nombran al amarillo asi */
  --yellow: var(--sun);
  /* Los dos colores de TikTok, que ya se usaban sueltos por la hoja. */
  --tt-cyan: #25f4ee;
  /* El rojo radial del menu movil y de la barra del encabezado. */
  --red-radial: radial-gradient(circle at 50% 42%, #c4121c 0%, #9c0f17 48%, #5f0910 100%);
  --yellow-deep: var(--sun-deep);

  --shell: 1200px;
  --r-lg: 28px;
  --r-md: 18px;
  --shadow-sm: 0 10px 24px -16px rgba(31, 42, 68, 0.45);
  --shadow-md: 0 22px 44px -26px rgba(31, 42, 68, 0.5);
  --shadow-lg: 0 36px 70px -34px rgba(31, 42, 68, 0.55);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
/* Toque premium: hasta el texto seleccionado y la barra de scroll llevan
   el color de marca, en vez de quedarse en el azul/gris por defecto. */
::selection {
  background: var(--coral);
  color: #fff;
}
::-webkit-scrollbar {
  width: 11px;
}
::-webkit-scrollbar-track {
  background: var(--paper-2);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--coral), var(--blue));
  border-radius: 999px;
  border: 2px solid var(--paper-2);
}
/* El navegador aplica [hidden] solo a elementos HTML: un <svg hidden> se
   seguia pintando a 300x150. Esta regla lo cubre para cualquier elemento. */
[hidden] {
  display: none !important;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3 {
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  letter-spacing: -0.02em;
}
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 99;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
}
:where(a, button):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Barra de progreso de lectura.
   Escala en vez de cambiar el ancho: vive en el compositor y no provoca
   recalculo de layout en cada evento de scroll. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  height: 4px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--blue));
}
/* El lapiz que va dibujando esa linea. Es un elemento aparte y no un
   hijo de .progress porque la barra se escala con scaleX y el lapiz
   saldria estirado. main.js mueve los dos en el mismo frame. */
.pencil {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 81;
  width: 26px;
  height: 26px;
  margin: -4px 0 0 -13px;
  color: var(--navy);
  transform: translateX(0);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.pencil svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 22px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.btn .ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn .chev {
  font-size: 1.15em;
  line-height: 1;
  opacity: 0.9;
  transition: transform 0.2s ease;
}
.btn:hover .chev {
  transform: translateX(3px);
}
.btn-lg {
  padding: 16px 28px;
  font-size: 0.84rem;
}
.btn-red {
  background: var(--btn-primary);
  color: #fff;
  box-shadow: 0 16px 30px -14px rgba(255, 90, 95, 0.75);
}
.btn-red:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-3px);
  /* El brillo crece en vez de solo subir el boton: se siente mas premium. */
  box-shadow:
    0 20px 38px -14px rgba(255, 90, 95, 0.85),
    0 0 0 6px rgba(255, 90, 95, 0.14);
}
.btn-white {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--line);
}
.btn-white:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-3px);
}
/* Mayoristas pide un rojo mas intenso que el coral de .btn-red: el rojo
   institucional de la marca, no el de los CTA de WhatsApp. */
.btn-red-deep {
  background: var(--red);
  color: #fff;
  box-shadow: 0 16px 30px -14px rgba(225, 29, 42, 0.75);
}
.btn-red-deep:hover {
  background: var(--red-dark);
  transform: translateY(-3px);
  box-shadow:
    0 20px 38px -14px rgba(225, 29, 42, 0.85),
    0 0 0 6px rgba(225, 29, 42, 0.14);
}
.btn-navy {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 16px 32px -18px rgba(31, 42, 68, 0.9);
}
.btn-navy:hover {
  transform: translateY(-3px);
}
.btn-yellow {
  background: var(--btn-secondary);
  color: var(--btn-secondary-text);
  box-shadow: 0 16px 30px -16px rgba(255, 210, 63, 0.9);
}
.btn-yellow:hover {
  background: #ffc61f;
  transform: translateY(-3px);
}
/* En Negocios y distribuidores el amarillo pasa a rojo, pedido del
   cliente para esta seccion especifica (el resto del sitio conserva
   .btn-yellow tal cual). */
.wholesale .btn-yellow {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 16px 30px -16px rgba(255, 90, 95, 0.9);
}
.wholesale .btn-yellow:hover {
  background: var(--coral-dark);
}
.btn-ghost-light {
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-ghost-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}
/* Pastilla delineada en blanco, el remate del menu rojo. */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 13px 24px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.header-cta .ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-cta:hover {
  background: #fff;
  color: var(--coral-dark);
  transform: translateY(-2px);
}
/* Boton ES/EN: el idioma activo se ve solido, el otro apagado. main.js
   togglea data-lang en el boton mismo para decidir cual resalta. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.lang-toggle:hover {
  border-color: #fff;
}
/* Mismo gesto que el boton "Chatea con nosotros": blanco con letras
   rojas al tocarlo. */
.lang-toggle:hover,
.lang-toggle:active {
  background: #fff;
  color: var(--coral-dark);
}
.lang-toggle .lt-sep {
  opacity: 0.5;
}
.lang-toggle .lt-es,
.lang-toggle .lt-en {
  opacity: 0.55;
}
.lang-toggle[data-lang="es"] .lt-es,
.lang-toggle[data-lang="en"] .lt-en {
  opacity: 1;
}

/* ---------- Barra de utilidades ----------
   Va sobre el header, en crema, con los cuatro datos que el visitante
   quiere confirmar antes de mirar nada mas. */
.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  max-height: 200px;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
}
/* Se esconde al avanzar el scroll (lo activa main.js junto con
   .is-stuck del header), vuelve a aparecer arriba del todo. */
.topbar.is-hidden {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}
.topbar-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.topbar p {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 13px 20px;
}
.topbar p + p {
  border-left: 1px solid var(--line);
}
.topbar svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar span {
  display: flex;
  flex-direction: column;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--muted);
}
.topbar b {
  font-family: Montserrat, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--red);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Sin overflow ni clip-path aqui: el menu movil (position:fixed) vive
     dentro de este header, y recortar el header tambien lo recorta a el.
     El brillo que si necesita recorte vive aparte, en .header-sheen, que
     no contiene al menu. */
  /* El degradado va aqui y no en .header-inner: el inner es el
     contenedor centrado y dejaba una franja distinta a cada orilla. */
  background: var(--red-radial);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--yellow), var(--blue), var(--yellow)) 1;
  transition: box-shadow 0.25s ease;
}
/* Brillo que recorre el header. Vive en su propio div (no un ::before del
   header) para poder recortarlo con overflow:hidden sin que ese recorte
   alcance tambien al menu movil, que es otro hijo del header. Position
   sticky mas overflow hidden en el MISMO elemento puede dejar sus hijos
   sin responder al toque en iOS Safari, pero aqui el overflow esta en un
   hijo, no en el .site-header que lleva el sticky, asi que no aplica. */
.header-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.header-sheen::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1) 50%, transparent);
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen {
  0%,
  100% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(340%);
  }
}
.site-header.is-stuck {
  box-shadow: 0 10px 34px rgba(148, 16, 26, 0.4);
}
.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 96px;
}

/* El logo siempre sobre fondo blanco: regla de marca. Un poco mas grande
   que antes (84 -> 92px) para que los trazos delgados del isotipo
   (el doble contorno del octagono) se lean nitidos, no apretados. */
/* El logo va siempre sobre blanco: regla de marca. El archivo "blanco"
   que hay en la carpeta no sirve para esto, es un cuadro blanco solido
   sin transparencia y sobre el rojo se ve como una mancha. */
.logo-chip {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 7px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 12px 26px -12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.04) inset;
  transition: transform 0.25s ease;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.logo:hover .logo-chip {
  transform: translateY(-2px) rotate(-2deg);
}
.logo.pop .logo-chip {
  animation: pop 0.6s ease;
}
@keyframes pop {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: scale(1.12) rotate(-8deg);
  }
  60% {
    transform: scale(0.96) rotate(5deg);
  }
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-inline: auto;
  /* Se estira a todo el alto y el ancho disponible del header (antes el
     cuadro del menu era solo del tamano de las letras): asi las pelotas
     de fondo cubren toda la barra, no solo el texto. */
  flex: 1;
  align-self: stretch;
}
.nav > a {
  position: relative;
  /* Explicito y no "auto": asi gana siempre a .nav-balls sin depender
     del orden en el HTML. */
  z-index: 1;
  padding: 10px 13px;
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  /* Sombra negra en la letra en vez de una pastilla de fondo: cuando una
     pelota de color pasa detras, la letra se sigue leyendo igual. Mas
     discreta ahora que las pelotas van atenuadas. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition:
    color 0.18s ease,
    background 0.18s ease;
}
.nav > a:hover {
  color: #fff;
  background: var(--line-light);
}
.nav > a.is-active {
  color: var(--btn-secondary);
}
/* Mismo look que el boton "Chatea con nosotros": pastilla delineada en
   blanco. Solo en escritorio (el menu movil tiene su propio diseno de
   lista, un borde ahi se veria fuera de lugar). El link de TikTok queda
   fuera porque ya trae su propia pastilla negra, otro borde encima se
   veria doble. */
@media (min-width: 1081px) {
  .nav > a:not(.n-tiktok) {
    padding: 9px 16px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    color: #fff;
  }
  .nav > a:not(.n-tiktok):hover {
    background: #fff;
    color: var(--coral-dark);
    text-shadow: none;
  }
}
.n-num {
  display: none;
}
/* El link de TikTok del menu ya no dice "TikTok": lleva el mismo
   gesto que la insignia del hero, icono + @bmtoysmx en una pastilla
   negra, dentro del renglon normal del menu. */
.n-tiktok-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, #111, #000);
  color: #fff;
  text-shadow: none;
}
.n-tiktok-badge svg {
  width: 13px;
  height: 13px;
}
/* Mismo brillo azul fosforescente que la insignia de TikTok del hero
   (.hero-tiktok:hover): un anillo cian al pasar el cursor. */
.n-tiktok:hover .n-tiktok-badge {
  box-shadow: 0 0 0 2px rgba(37, 244, 238, 0.5);
}
.nav-extra {
  display: none;
}

/* El logotipo y la equis solo existen en el menu movil. */
.nav-top,
.nav-logo,
.nav-close {
  display: none;
}
/* El sello y los botones de navegacion solo existen en el menu movil.
   .hero-stamp se declara despues y le ganaria a un .nav-stamp pelado. */
.nav .nav-stamp,
.nav > .f-addr-apps {
  display: none;
}
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  /* Sin esto, Safari en iPhone a veces espera a ver si el toque es un
     doble-tap para hacer zoom antes de disparar el clic, el botón se
     siente "no responde" en el primer toque. */
  touch-action: manipulation;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: #fff;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Formas de color de fondo. Las usan Nosotros y la banda de TikTok. */
.blob {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ---------- Hero ----------
   Mitad texto sobre blanco con efectos, mitad video. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
  overflow: hidden;
}

/* El texto va primero, en la columna izquierda. El video es la segunda
   columna. Se llama .hero-panel y no .hero-text para no chocar con el
   parrafo <p class="hero-text"> que ya existia para el copy descriptivo.
   El hueco de 48px que separa texto y video queda del lado derecho
   (la costura), y el borde exterior de la pagina es el izquierdo. */
.hero-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 74px 0 74px 24px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-left: auto;
  padding-right: 48px;
}

/* --- Fondo dinamico: las mismas 5 figuras de .toy (mas abajo) tileadas
   como patron y desplazandose lento. Mismo dibujo de linea, nada nuevo
   que aprender. Se desvanece hacia abajo con mask para no pelearse con
   el texto ni con las figuras pastel de encima. */

/* --- Efectos: formas pastel y juguetes flotando --- */
.fun {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pastel {
  position: absolute;
  border-radius: 50%;
  /* Van y vienen de lado a lado, cada uno a su ritmo. */
  animation: pastel-vaiven 18s ease-in-out infinite alternate;
}
.p-sky {
  animation-duration: 22s;
  animation-delay: -6s;
}
.p-rose {
  animation-duration: 26s;
  animation-delay: -12s;
}
.p-mint {
  animation-duration: 20s;
  animation-delay: -3s;
}
@keyframes pastel-vaiven {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(38px, -18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pastel {
    animation: none;
  }
}
.p-sun {
  top: -90px;
  left: -70px;
  width: 260px;
  height: 260px;
  background: var(--sun);
  opacity: 0.85;
}
.p-sky {
  top: 32%;
  left: -110px;
  width: 210px;
  height: 210px;
  border-radius: 50% 50% 50% 12%;
  background: var(--blue);
  opacity: 0.9;
}
.p-rose {
  bottom: -80px;
  left: 6%;
  width: 200px;
  height: 200px;
  background: var(--rose);
  opacity: 0.32;
}
.p-mint {
  top: 12%;
  right: 6%;
  width: 150px;
  height: 150px;
  background: var(--mint);
  opacity: 0.55;
}

.toy {
  position: absolute;
  color: var(--blue);
  opacity: 0.55;
  animation: bob 7s ease-in-out infinite;
}
.toy svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t1 {
  width: 46px;
  height: 46px;
  top: 14%;
  right: 14%;
  color: var(--coral);
  animation-delay: 0s;
}
.t2 {
  width: 36px;
  height: 36px;
  top: 46%;
  right: 5%;
  color: var(--sun-deep);
  animation: spin-slow 16s linear infinite;
}
.t3 {
  width: 40px;
  height: 40px;
  bottom: 16%;
  right: 20%;
  color: var(--blue);
  animation-delay: 1.6s;
}
.t4 {
  width: 32px;
  height: 32px;
  top: 30%;
  left: 8%;
  color: var(--navy);
  opacity: 0.35;
  animation-delay: 3.2s;
}
.t5 {
  width: 38px;
  height: 38px;
  bottom: 28%;
  left: 3%;
  color: var(--coral-dark);
  opacity: 0.4;
  animation-delay: 4.5s;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-16px) rotate(6deg);
  }
}
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

/* Confeti. Se llama .conf y no .dot porque .dot ya existe en Nosotros
   con 44px: el confeti heredaba ese tamaño y tapaba el texto. */
.conf {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  animation: confeti 5s ease-in-out infinite;
}
.c1 {
  top: 22%;
  right: 30%;
  background: var(--sun);
}
.c2 {
  top: 58%;
  right: 10%;
  background: var(--rose);
  animation-delay: 0.9s;
}
.c3 {
  top: 72%;
  right: 38%;
  background: var(--blue-soft);
  animation-delay: 1.8s;
}
.c4 {
  top: 38%;
  right: 42%;
  background: var(--coral);
  animation-delay: 2.7s;
  width: 9px;
  height: 9px;
}
.c5 {
  top: 86%;
  right: 12%;
  background: var(--mint);
  animation-delay: 3.6s;
}
@keyframes confeti {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-22px) rotate(140deg);
    opacity: 1;
  }
}

/* --- Texto --- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  opacity: 0;
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.hero-title {
  font-weight: 900;
  line-height: 0.86;
  text-transform: uppercase;
}
/* La frase de busqueda, dentro del mismo encabezado pero del tamano del
   texto normal: el eslogan sigue mandando a la vista y Google lee las dos.
   No se esconde, porque un encabezado que el visitante no ve es justo lo
   que los buscadores castigan. */
.hero-title .h1-clave {
  /* El titulo va con interlineado 0.86, asi que sus letras sobresalen de su
     propia caja: el hueco real es menor que el que se pide aqui. Por eso 42
     y no 20. Mas oscura que el parrafo que sigue, para que los dos bloques
     de texto no compitan. */
  margin-top: 42px;
  width: auto;
  max-width: 34ch;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  animation: none;
}
/* Letras dinamicas: cada palabra entra con su propio rebote y responde
   al mouse por separado, en vez de llegar las tres como un bloque fijo.
   width:fit-content para que el area de hover sea la del texto, no la
   de toda la columna. */
.hero-title span {
  display: block;
  width: fit-content;
  font-size: clamp(3.2rem, 7.4vw, 6rem);
  letter-spacing: -0.04em;
  animation: palabra-entra 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Clickeable: confeti al tocarla, el mismo gesto que el logo. */
  cursor: pointer;
}
.hero-title span.pop {
  animation: pop 0.6s ease;
}
@keyframes palabra-entra {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Las tres palabras van en el MISMO rojo de marca: el amarillo del trazo
   bajo IMAGINA queda como el unico contraste de color. */
.hero-title .l1 {
  color: var(--red);
  animation-delay: 0.05s;
}
.hero-title .l1:hover {
  transform: rotate(-2deg) scale(1.03);
}
.hero-title .l2 {
  color: var(--red);
  animation-delay: 0.2s;
}
.hero-title .l2:hover {
  transform: rotate(2deg) scale(1.03);
}
/* La tercera lleva el trazo debajo, el gesto de jugueteria. */
.hero-title .l3 {
  position: relative;
  display: inline-block;
  color: var(--red);
  animation-delay: 0.35s;
}
.hero-title .l3:hover {
  transform: rotate(-2deg) scale(1.03);
}
/* Ya no es amarillo ni va de borde a borde: un trazo rojo, pegado a la
   izquierda, a la mitad del ancho de la palabra, mas abajo, sin
   inclinacion. */
.hero-title .l3::after {
  content: "";
  position: absolute;
  left: 0;
  width: 46%;
  bottom: -0.26em;
  height: 0.08em;
  border-radius: 999px;
  background: var(--red);
}
.hero-text {
  max-width: 44ch;
  /* 14 y no 24: la bajada del titulo y este parrafo son el mismo bloque de
     lectura, y 24 los separaba como si fueran dos ideas distintas. */
  margin: 14px 0 30px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-chat {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  font-size: 0.86rem;
  font-weight: 600;
  color: #11803f;
}
.hero-chat b {
  color: #0b5e2d;
}
.hc-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
}
.hc-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: ping 2s ease-out infinite;
}
.hero-chat button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-chat button:hover {
  color: var(--blue-dark);
}

/* --- Solo video, mas grande, el mismo efecto que las tarjetas de TikTok ---
   Vuelve a ser una sola pieza (ya no hay foto arriba): un video más grande
   con el MISMO tratamiento que #videoGrid .video (aro rojo + degradado
   oscuro abajo), para que se sienta parte de la misma familia visual. */
/* La foto va a sangre en su mitad del hero (sin tarjeta, sin aro) y se
   funde con el blanco de la columna del texto por un degradado, como en
   la referencia que paso el cliente. */
.hero-media {
  position: relative;
  align-self: stretch;
  width: auto;
  margin: 0;
  overflow: hidden;
  background: var(--navy-deep);
}
/* Boton de play: el video no arranca solo, se queda en la portada
   hasta que lo toquen. main.js lo esconde y arranca el video al dar
   click, el mismo gesto de las tarjetas de TikTok. */
.hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-lg);
  color: var(--red);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.3s ease;
  /* Sombra roja que late sola, para que de curiosidad de darle play
     sin tener que pasar el mouse primero. */
  animation: play-late 2.2s ease-out infinite;
}
.hero-play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}
.hero-play:hover {
  animation-play-state: paused;
  transform: scale(1.1);
  box-shadow:
    var(--shadow-lg),
    0 0 0 10px rgba(255, 255, 255, 0.18);
}
.hero-play.is-hidden {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}
@keyframes play-late {
  0% {
    box-shadow:
      var(--shadow-lg),
      0 0 0 0 rgba(225, 29, 42, 0.55);
  }
  70% {
    box-shadow:
      var(--shadow-lg),
      0 0 0 22px rgba(225, 29, 42, 0);
  }
  100% {
    box-shadow:
      var(--shadow-lg),
      0 0 0 0 rgba(225, 29, 42, 0);
  }
}
/* El zoom lento y continuo (Ken Burns) es el "efecto dinamico": no
   depende de pasar el mouse. */
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: contrast(1.12) saturate(1.1);
  animation: hero-foto-ken-burns 14s ease-in-out infinite alternate;
  transition: filter 0.4s ease;
}
.hero-media:hover video {
  filter: contrast(1.14) saturate(1.22);
}
@keyframes hero-foto-ken-burns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video {
    animation: none;
    transform: none;
  }
}
/* El degradado que funde la foto con el blanco del texto: blanco solido
   en el borde que mira a la izquierda y transparente hacia el centro.
   Lleva tambien un velo oscuro abajo para que la insignia de TikTok no
   se pierda sobre las partes claras de la foto. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 90deg y no 100deg: inclinado, el blanco tapaba el filo arriba pero
     lo dejaba ver abajo. Arranca solido para que no quede costura. */
  background:
    linear-gradient(90deg, #fff 0%, #fff 7%, rgba(255, 255, 255, 0.82) 18%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(to top, rgba(5, 10, 30, 0.45) 0%, transparent 24%);
}
/* "Efecto flex": una franja de luz diagonal que recorre la tarjeta cada
   tantos segundos, como el brillo del header pero mas angosta y mas
   lenta. El toque "super pro" que pidio el cliente. */
.hero-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hero-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 26%;
  transform: translateX(-200%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: hero-flex 6s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes hero-flex {
  0% {
    transform: translateX(-200%) skewX(-18deg);
  }
  30%,
  100% {
    transform: translateX(560%) skewX(-18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shine::before {
    display: none;
  }
}
.hero-stamp {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.95);
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--muted);
  box-shadow: var(--shadow-md);
}
.hero-stamp b {
  font-family: Montserrat, sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--coral-dark);
}
/* Horario de la tienda, debajo de la direccion y del mismo gris, para
   que se lea como parte del mismo dato y no compita con el titulo. */
.hero-stamp i {
  margin-top: 2px;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
}
/* Insignia de TikTok, sobre el video (abajo), esquina opuesta al sello. */
.hero-tiktok {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(120deg, #111, #000);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  font-family: Montserrat, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.hero-tiktok svg {
  width: 16px;
  height: 16px;
}
.hero-tiktok:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(37, 244, 238, 0.5);
}

/* ---------- Carrusel de sellos ---------- */
.trust {
  background: linear-gradient(100deg, var(--paper-2) 0%, var(--paper) 35%, var(--paper-warm) 70%, var(--paper-2) 100%);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.trust-marquee {
  overflow: hidden;
  padding-block: 20px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.trust-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: slide 36s linear infinite;
}
.trust-marquee:hover .trust-track {
  animation-play-state: paused;
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 6px 34px;
  border-right: 1px solid var(--line);
}
.trust-item span {
  font-family: Montserrat, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.tico {
  width: 36px;
  height: 36px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tico-fill {
  fill: currentColor;
  stroke: none;
}
.tico-mx {
  width: 48px;
  height: 30px;
}
.c-red {
  color: var(--coral-dark);
}
.c-blue {
  color: var(--blue);
}
.c-yellow {
  color: var(--sun-deep);
}
.c-navy {
  color: var(--navy);
}

/* ---------- Encabezados de seccion ---------- */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.sec-head-center {
  justify-content: center;
  text-align: center;
}
/* Boton para desplegar una seccion que empieza cerrada (Nosotros y
   Donde comprar). El contenido que controla lleva .toggle-box, que
   colapsa con max-height en vez de display:none para poder animar. */
.sec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  margin-bottom: 20px;
  border: 2px solid var(--coral);
  border-radius: 999px;
  background: transparent;
  color: var(--coral);
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.sec-toggle .chev {
  transition: transform 0.3s ease;
}
.sec-toggle:hover {
  background: var(--coral);
  color: #fff;
}
.sec-toggle:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.sec-toggle[aria-expanded="true"] .chev {
  transform: rotate(90deg);
}
.sec-toggle[aria-expanded="true"] .st-label::after {
  content: " (ocultar)";
}
.toggle-box {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.35s ease;
}
.toggle-box.is-open {
  max-height: 900px;
  opacity: 1;
}
/* El degradado se recorta sobre las letras. El guion amarillo es un hijo con
   fondo propio, asi que no se ve afectado. */
.sec-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.6rem, 3.1vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(95deg, var(--navy) 20%, var(--blue-dark) 70%, var(--coral-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tt-title {
  background: linear-gradient(95deg, #fff 20%, #cfe6ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash {
  width: 58px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--yellow), var(--yellow-deep));
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.pill:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}
.eyebrow {
  margin: 0 0 8px;
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-dark);
}
.eyebrow-light {
  color: var(--yellow);
}

/* ---------- Categorias ---------- */
.cats {
  position: relative;
  overflow: hidden;
  padding: 64px 0 54px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 50%, var(--paper) 100%);
}
/* Carrusel automatico, igual mecanismo y mismo tamano que los videos
   de TikTok: la lista se duplica en main.js y se desliza sola, se
   pausa al pasar el mouse. */
/* El carril se arrastra con el dedo (scroll nativo, con su inercia) y
   main.js lo sigue empujando solo cuando nadie lo toca. Por eso scrollea
   de verdad en vez de animarse con @keyframes. */
.cat-grid-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cat-grid-wrap::-webkit-scrollbar {
  display: none;
}
.cat-grid {
  display: flex;
  gap: 16px;
  width: max-content;
  height: 420px;
}
.cat-grid > li {
  flex: none;
  width: 236px;
  height: 100%;
  list-style: none;
}
.cat-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 4px solid transparent;
  transition: border-color 0.3s ease;
}
.cat-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.cat-card:hover img {
  transform: scale(1.09);
}
.cat-card .veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(5, 18, 52, 0.88) 0%, rgba(5, 18, 52, 0.25) 42%, rgba(5, 18, 52, 0) 68%);
}
.cat-card .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 17px;
}
.cat-card .bar b {
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.cat-card .go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.cat-card:hover .go {
  transform: translateX(4px);
}
.cat-card .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.t-red {
  background: linear-gradient(150deg, #ff6f73, var(--coral-dark));
}
.t-red .tag {
  background: var(--coral-dark);
}
.t-red::before {
  border-color: var(--coral);
}
.t-blue {
  background: linear-gradient(150deg, #4f90ff, var(--blue-dark));
}
.t-blue .tag {
  background: var(--blue-dark);
}
.t-blue::before {
  border-color: var(--blue);
}
.t-yellow {
  background: linear-gradient(150deg, var(--sun), #f08b1e);
}
.t-yellow .tag {
  background: #d97706;
}
.t-yellow::before {
  border-color: var(--sun-deep);
}
.t-pink {
  background: linear-gradient(150deg, var(--rose), #e4559a);
}
.t-pink .tag {
  background: #d6377f;
}
.t-pink::before {
  border-color: var(--rose);
}
.t-navy {
  background: linear-gradient(150deg, var(--blue), var(--navy));
}
.t-navy .tag {
  background: var(--navy);
}
.t-navy::before {
  border-color: var(--blue);
}
.t-red:hover .go {
  background: var(--coral);
  color: #fff;
}
.t-blue:hover .go {
  background: var(--blue);
  color: #fff;
}
.t-yellow:hover .go {
  background: var(--sun-deep);
  color: #fff;
}
.t-pink:hover .go {
  background: var(--rose);
  color: #fff;
}
.t-navy:hover .go {
  background: var(--blue-dark);
  color: #fff;
}
.cats-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}
.cats-note svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---------- Nosotros ---------- */
.about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 37%) minmax(0, 1fr) minmax(200px, 230px);
  align-items: center;
  gap: 40px;
  padding: 48px 0 70px;
  overflow: hidden;
}
.about-yellow {
  top: -70px;
  left: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--yellow);
  z-index: 0;
}
.about-blue {
  bottom: -90px;
  left: -60px;
  width: 270px;
  height: 210px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(160deg, var(--blue-soft), var(--blue));
  z-index: 0;
}
/* Rojo y verde de mas, para completar los cuatro colores de marca (ya
   estaban amarillo y azul). Esquinas que el amarillo/azul no ocupan. */
.about-red {
  top: 10%;
  right: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(226, 16, 30, 0.3);
  z-index: 0;
}
.about-green {
  bottom: 4%;
  right: 18%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  z-index: 0;
}
.about-yellow,
.about-blue,
.about-red,
.about-green {
  position: absolute;
  animation: deco-flota 11s ease-in-out infinite;
}
.about-blue {
  --dx: -30px;
  --dy: 34px;
  animation-delay: -5s;
}
.about-red {
  --dx: 34px;
  --dy: -26px;
  animation-delay: -9s;
}
.about-green {
  --dx: -26px;
  --dy: 30px;
  animation-delay: -13s;
}
@media (prefers-reduced-motion: reduce) {
  .about-yellow,
  .about-blue,
  .about-red,
  .about-green {
    animation: none;
  }
}
/* La proporcion del marco es 16:9. "Efecto flex": el mismo aro rojo que
   .video::before en las tarjetas de TikTok, mas el brillo diagonal de
   .hero-shine (ver mas abajo), para que el carrusel se sienta de la
   misma familia que esas tarjetas. */
.about-photo {
  position: relative;
  z-index: 1;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--navy-deep);
  box-shadow:
    var(--shadow-lg),
    0 0 0 2px rgba(225, 29, 42, 0.18),
    0 0 50px -16px rgba(225, 29, 42, 0.55);
  transition: box-shadow 0.4s ease;
}
.about-photo:hover {
  box-shadow:
    var(--shadow-lg),
    0 0 0 2px rgba(225, 29, 42, 0.35),
    0 0 64px -12px rgba(225, 29, 42, 0.75);
}
.about-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 3px solid var(--red);
  pointer-events: none;
}
/* La foto de los niños jugando, llenando el marco (16:9). */
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(1.08) contrast(1.04);
  transition: transform 0.5s ease;
  /* Un poco mas grande que su marco a proposito: main.js la desliza
     despacio al pasar por aqui (capasParallaxLocal) y este sobrante
     evita que el movimiento descubra un borde vacio. Mas alejada que
     antes, para que se vea la escena completa. */
  transform: scale(1.04);
}
.about-photo:hover img {
  transform: scale(1.08);
}
/* Mismo brillo "flex" que el hero (@keyframes hero-flex), con otro
   retraso para que no crucen las dos tarjetas al mismo tiempo. */
.about-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.about-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 30%;
  transform: translateX(-200%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: hero-flex 5s ease-in-out infinite;
  animation-delay: 1.8s;
}
@media (prefers-reduced-motion: reduce) {
  .about-shine::before {
    display: none;
  }
}
/* Degradado blanco, angosto y en el borde que mira al texto (la foto esta
   a la izquierda, el texto a la derecha). Mismo lenguaje que el hero,
   ya no el tinte rojo y crema de antes. */
.about-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(260deg, #fff 0%, rgba(255, 255, 255, 0.4) 8%, rgba(255, 255, 255, 0) 16%);
}
/* Degradado rojo de marca sobre el carrusel, abajo y en el borde que
   mira al texto, el mismo gesto que .v-red .veil-top de TikTok. */
.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Degradado rojo de marca abajo (en vez del azul-negro de TikTok) y un
     velo oscuro angosto arriba, solo para que el sello siga leyendose. */
  background:
    linear-gradient(to top, rgba(161, 15, 25, 0.85) 0%, rgba(161, 15, 25, 0.3) 38%, transparent 64%),
    linear-gradient(to bottom, rgba(5, 10, 30, 0.45) 0%, transparent 24%);
}

.about-copy {
  position: relative;
  z-index: 1;
  max-width: 470px;
}
/* Mismo gesto que los demas titulos: la barrita amarilla al final. */
.about-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--navy);
}
.about-title span {
  flex: 0 0 100%;
}
.about-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue-dark), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-text {
  margin: 16px 0 24px;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--muted);
}
.about-text b {
  color: var(--navy);
}
.about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Montserrat, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}
.link-arrow:hover {
  color: var(--blue-dark);
}
.about-points {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  padding-right: 24px;
}
.about-points li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pt {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}
.pt b {
  font-family: Montserrat, sans-serif;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--navy);
}
.dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.dot svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-yellow {
  background: linear-gradient(140deg, var(--sun), var(--sun-deep));
  color: var(--btn-secondary-text);
}
.d-red {
  background: linear-gradient(140deg, #ff7b7f, var(--coral));
  color: #fff;
}
.d-blue {
  background: linear-gradient(140deg, var(--blue-soft), var(--blue));
  color: #fff;
}

/* ---------- Marcas ---------- */
.brands {
  padding: 20px 0 16px;
  background: var(--paper);
}
.brands .sec-head {
  margin-bottom: 14px;
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 54px;
  width: max-content;
  animation: slide 24s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-track img {
  height: 56px;
  width: auto;
  opacity: 0.9;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.marquee-track img:hover {
  opacity: 1;
  transform: scale(1.08);
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- TikTok: banda oscura que cierra la pagina ---------- */
.tiktok {
  position: relative;
  overflow: hidden;
  padding: 66px 0 60px;
  background: linear-gradient(135deg, var(--navy), var(--blue-dark) 50%, var(--navy-deep));
  color: #fff;
}
/* Circulos de fondo que comparten Mayoreo y TikTok: dos grandes de color
   de marca en esquinas opuestas y dos amarillos chicos. Son clases
   compartidas y no pseudo-elementos de cada seccion, justamente para que
   las dos bandas se vean identicas sin repetir las reglas. */
.deco-blue {
  top: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(15, 111, 214, 0.45);
}
.deco-red {
  bottom: -120px;
  left: 12%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(226, 16, 30, 0.25);
}
.deco-sun {
  top: 18%;
  right: 8%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--sun);
  opacity: 0.8;
}
.deco-sun-sm {
  bottom: 10%;
  right: 24%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sun-deep);
  opacity: 0.6;
}
/* Variantes de posicion, para que una seccion no repita el acomodo de
   la anterior. Resetean el lado contrario porque la clase base ya fijo
   top/right o bottom/left. */
.deco-left {
  top: auto;
  right: auto;
  bottom: -110px;
  left: -90px;
}
.deco-right {
  bottom: auto;
  left: auto;
  top: -80px;
  right: 6%;
}
.deco-low {
  top: auto;
  right: auto;
  bottom: 12%;
  left: 7%;
}
.deco-high {
  bottom: auto;
  right: auto;
  top: 16%;
  left: 22%;
}
/* Dos circulos rojos de mas, solo para el footer: uno grande arriba a la
   mitad, uno chico abajo a la izquierda. Posiciones que ningun otro
   .deco-* usa, para que de verdad se sientan "aleatorios". */
.deco-red-xl {
  top: -60px;
  left: 38%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(226, 16, 30, 0.3);
}
.deco-red-sm {
  bottom: 6%;
  left: 2%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.55;
}
/* Verde, el mismo tono de WhatsApp que ya usa el resto del sitio. */
.deco-green {
  top: 30%;
  right: -50px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.3);
}
/* Dos verdes mas, solo para el footer: posiciones propias para no caer
   encima de ningun otro circulo de esa seccion. */
.deco-green-a {
  top: 62%;
  left: 24%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.4;
}
.deco-green-b {
  bottom: -40px;
  right: 30%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.22);
}
/* Dinamismo: los circulos flotan despacio, cada uno con su propio
   recorrido y su propio retraso para que nunca se muevan en bloque. */
.deco-blue,
.deco-red,
.deco-sun,
.deco-sun-sm,
.deco-red-xl,
.deco-red-sm,
.deco-green,
.deco-green-a,
.deco-green-b {
  animation: deco-flota 11s ease-in-out infinite;
}
.deco-red {
  --dx: -34px;
  --dy: 26px;
  animation-delay: -4s;
}
.deco-sun {
  --dx: 28px;
  --dy: 34px;
  animation-delay: -8s;
}
.deco-sun-sm {
  --dx: -24px;
  --dy: -28px;
  animation-delay: -12s;
}
.deco-red-xl {
  --dx: 38px;
  --dy: 30px;
  animation-delay: -2s;
}
.deco-red-sm {
  --dx: -30px;
  --dy: -20px;
  animation-delay: -10s;
}
.deco-green {
  --dx: -26px;
  --dy: 36px;
  animation-delay: -6s;
}
.deco-green-a {
  --dx: 24px;
  --dy: -30px;
  animation-delay: -3s;
}
.deco-green-b {
  --dx: -32px;
  --dy: -18px;
  animation-delay: -11s;
}
@keyframes deco-flota {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--dx, 30px), var(--dy, -34px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .deco-blue,
  .deco-red,
  .deco-sun,
  .deco-sun-sm,
  .deco-red-xl,
  .deco-red-sm,
  .deco-green,
  .deco-green-a,
  .deco-green-b {
    animation: none;
  }
}
/* En las secciones claras los mismos circulos irian demasiado fuertes. */
.where .blob,
.cats .blob {
  opacity: 0.18;
}

/* ---------- Pelotas de plastico (intro y menu movil) ----------
   Un decorado aparte del sistema .deco-*: en vez de circulos planos,
   esferas con un brillo (radial-gradient) arriba a la izquierda, como
   una pelota de juguete de verdad. Viven solo en #intro y en el menu,
   donde el cliente las pidio especificamente. */
.ball {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: ball-flota 8s ease-in-out infinite;
}
/* Planas, como las del hero (.pastel), no esferas con brillo: al
   cliente le gustaban mas asi. */
.ball-red {
  background: var(--coral);
  opacity: 0.85;
}
/* Dos tonos mas de la misma familia para que las pelotas del menu
   tengan profundidad sin salirse del rojo corporativo. */
.ball-red-claro {
  background: #ff8b8f;
  opacity: 0.7;
}
.ball-red-oscuro {
  background: #8d0f17;
  opacity: 0.9;
}
.ball-blue {
  background: var(--blue);
  opacity: 0.9;
}
.ball-yellow {
  background: var(--sun);
}
.ball-green {
  background: var(--mint);
}
.ball-pink {
  background: var(--rose);
  opacity: 0.8;
}
@keyframes ball-flota {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--dx, 24px), var(--dy, -18px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ball {
    animation: none;
  }
}
/* El contenedor de las pelotas del menu: main.js mueve a ESTE div segun
   la direccion del scroll (arriba/abajo), cada pelota de adentro sigue
   flotando con su propia animacion, las dos cosas se combinan solas. */
.nav-balls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Atenuadas: en el encabezado son fondo, no protagonistas. En el
     panel movil se suben de nuevo, que ahi si son el motivo. */
  opacity: 0.38;
  transition: transform 0.15s ease-out;
}
.tiktok .shell {
  position: relative;
}
.tt-head {
  align-items: center;
}
.eyebrow-tt {
  color: #25f4ee;
}
.pill-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.pill-light svg {
  width: 16px;
  height: 16px;
}
.pill-light:hover {
  border-color: var(--tt-cyan);
  color: var(--tt-cyan);
  background: rgba(37, 244, 238, 0.08);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stats li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-light);
  backdrop-filter: blur(6px);
}
.stat-ico {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
}
.stats b {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
}
.stats li:nth-child(1) {
  color: var(--coral);
}
.stats li:nth-child(2) {
  color: #25f4ee;
}
.stats li:nth-child(3) {
  color: var(--sun);
}
.stats li:nth-child(4) {
  color: #fff;
}
.stats span {
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* TikTok Shop: tarjeta ancha con copy a la izquierda y los tres pasos a la
   derecha. Mismo azul que .wholesale y el footer, el borde claro es lo
   unico que la separa del fondo de la seccion (que ya comparte ese tono). */
/* Ya no comparte el azul plano de .wholesale/.site-footer: casi negro,
   con los dos colores de TikTok como resplandor en las esquinas, para
   que la tarjeta se distinga del fondo de su propia seccion en vez de
   fundirse con el. */
.shop {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  margin-bottom: 22px;
  padding: 34px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(37, 244, 238, 0.22), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(254, 44, 85, 0.22), transparent 55%), #0a0e1c;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.shop::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #25f4ee, #fe2c55);
}
.shop-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: Montserrat, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.shop-tag svg {
  width: 13px;
  height: 13px;
}
.shop h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 900;
  line-height: 1.12;
}
.shop h3 em {
  font-style: normal;
  background: linear-gradient(100deg, #25f4ee, #fe2c55);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shop p {
  margin: 12px 0 22px;
  max-width: 420px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.shop p b {
  color: #fff;
}
.shop-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-tt {
  background: linear-gradient(120deg, #25f4ee, #fe2c55);
  color: #fff;
  box-shadow: 0 16px 34px -16px rgba(254, 44, 85, 0.9);
}
.btn-tt:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.shop-steps {
  display: grid;
  align-content: center;
  gap: 12px;
}
.shop-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}
.shop-steps li:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateX(5px);
}
.sn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #25f4ee, #fe2c55);
  font-family: Montserrat, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
}
.st {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}
.st b {
  font-family: Montserrat, sans-serif;
  font-size: 0.92rem;
  color: #fff;
}

/* Carrusel automatico, igual que el de las marcas: la lista se duplica
   en main.js y se desliza sola. Se pausa al pasar el mouse para poder
   leer una tarjeta con calma. */
.videos-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.videos {
  display: flex;
  gap: 16px;
  width: max-content;
  height: 420px;
  animation: slide-videos 36s linear infinite;
}
.videos-wrap:hover .videos {
  animation-play-state: paused;
}
.videos > li {
  flex: none;
  width: 236px;
  height: 100%;
  list-style: none;
}
.video {
  display: block;
  width: 100%;
  height: 100%;
}
.video .views {
  opacity: 1;
}
@keyframes slide-videos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ---------- Mayoreo ---------- */
.wholesale {
  position: relative;
  margin-top: 46px;
  background: linear-gradient(135deg, var(--navy), var(--blue-dark) 50%, var(--navy-deep));
  color: #fff;
  overflow: hidden;
}
.wholesale-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 46px;
  align-items: center;
  padding-block: 66px;
}
/* Mismo gesto que los titulos de seccion (.sec-title): mayusculas y la
   barrita amarilla al final. Aqui el fondo es oscuro, por eso el texto
   se queda en blanco en vez del degradado azul de aquellos. */
/* El titulo se arma con .sec-title y se pinta con .tt-title, los mismos
   del bloque de TikTok. Aqui solo queda lo que cambia. */
.w-title {
  line-height: 1.12;
}
.w-title em {
  font-style: normal;
}
.w-text {
  margin: 16px 0 26px;
  max-width: 460px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.steps {
  display: grid;
  gap: 14px;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}
.steps li:hover {
  background: linear-gradient(100deg, rgba(255, 210, 30, 0.22), rgba(255, 255, 255, 0.1));
  transform: translateX(6px);
}
.steps b {
  font-family: Montserrat, sans-serif;
  font-size: 1.45rem;
  color: var(--yellow);
}

/* ---------- Donde comprar ---------- */
.where {
  position: relative;
  overflow: hidden;
  padding: 68px 0 58px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 55%, var(--paper) 100%);
}
/* Signos de interrogacion decorativos, flotan como los .blob pero son
   letra, no circulo. Opacos para no competir con el texto real. */
.qmark {
  position: absolute;
  z-index: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  animation: deco-flota 10s ease-in-out infinite;
}
.qmark-a {
  top: 10%;
  left: 5%;
  font-size: 3.6rem;
  color: var(--blue);
  opacity: 0.16;
}
.qmark-b {
  top: 58%;
  right: 6%;
  font-size: 5rem;
  color: var(--coral);
  opacity: 0.14;
  animation-delay: -3.5s;
}
.qmark-c {
  bottom: 6%;
  left: 20%;
  font-size: 2.6rem;
  color: var(--sun-deep);
  opacity: 0.22;
  animation-delay: -6s;
}
@media (prefers-reduced-motion: reduce) {
  .qmark {
    animation: none;
  }
}
/* Acordeon, el mismo gesto que las categorias y los videos de TikTok: la
   tarjeta bajo el mouse se ensancha y las demas ceden. La altura de la
   fila es fija para que al abrir una no brinque toda la seccion. */
.where-grid {
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 268px;
}
.where-card {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition:
    flex 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.where-card:hover,
.where-card:focus-within {
  box-shadow: var(--shadow-md);
  border-color: rgba(225, 29, 42, 0.3);
}
/* Encogida por default: el acordeon abre con CLICK (no con hover, para
   que funcione igual en tactil), una tarjeta a la vez, y es
   main.js el que pone/quita .is-open en .where-card. */
.where-card.is-open {
  flex: 2.4 1 0;
  box-shadow: var(--shadow-md);
  border-color: rgba(225, 29, 42, 0.3);
}
/* La descripcion solo se ve cuando la tarjeta esta abierta: encogida de
   verdad, no solo angosta con el texto recortado. */
.wc-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 14px;
  color: #fff;
}
.wc-ico svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-red {
  background: linear-gradient(140deg, #ff7b7f, var(--coral));
}
.i-green {
  background: linear-gradient(140deg, #4ae27b, #25d366);
}
.i-yellow {
  background: linear-gradient(140deg, var(--yellow), var(--yellow-deep));
  color: var(--navy);
}
.i-dark {
  background: linear-gradient(140deg, #333, #000);
}
.where-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
}
.where-card p {
  /* El margen lo decide si esta abierta o no (ver arriba), aqui solo
     tipografia. */
  line-height: 1.6;
  color: var(--muted);
  font-size: 0.93rem;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--blue);
}
.link:hover {
  color: var(--blue-dark);
}
.map {
  position: relative;
  margin-top: 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 340px;
  padding: 4px;
  background: linear-gradient(120deg, var(--red), var(--yellow) 45%, var(--blue));
  box-shadow: var(--shadow-sm);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(var(--r-lg) - 5px);
}
/* Un solo boton de Waze, azul y blanco (los colores de marca de Waze),
   debajo del mapa en vez de encimado como pastilla flotante: el mapa
   ya trae sus propios controles de Google por dentro, no hacia falta
   duplicarlos ahi arriba. */
.map-waze-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 13px 20px;
  border-radius: var(--r-lg);
  background: #33ccff;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.map-waze-btn svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
.map-waze-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---------- Footer ---------- */
/* El mismo azul de .wholesale (Surtes tu negocio), para que las bandas
   oscuras del sitio compartan un solo tono en vez de variar cada una. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--blue-dark) 50%, var(--navy-deep));
  color: rgba(255, 255, 255, 0.76);
}
.footer-top {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(15, 111, 214, 0.35), transparent 58%),
    radial-gradient(70% 100% at 92% 110%, rgba(226, 16, 30, 0.3), transparent 60%);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--yellow), var(--blue)) 1;
  padding: 40px 0 28px;
}
/* Carril de autos: van de izquierda a derecha y vuelven por el mismo
   camino (no es un salto al reiniciar, es ida y vuelta real via
   alternate). Vive en .f-social (debajo de los iconos) y en el menu
   movil, cada uno con su propio carril del ancho que le toque. Al
   pasar el mouse cambia de color, un auto distinto nada mas con el
   color del texto. */
.race-lane {
  position: relative;
  height: 64px;
  margin-top: 14px;
}
/* El puente que cruzan: un arco bajito, apenas insinuado, detras de
   las letras del footer (no les quita lectura, da el pretexto para
   que el auto suba un poco a la mitad del camino). */
.race-bridge {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 78%;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.3), rgba(255, 210, 63, 0));
  border-top: 2px solid rgba(255, 210, 63, 0.35);
}
.race-car {
  position: absolute;
  top: 70%;
  left: 0;
  width: 18px;
  height: 30px;
  margin-top: -15px;
  color: var(--coral);
  animation: race-cruza 3.4s ease-in-out infinite alternate;
  transition: color 0.2s ease;
}
.race-car:hover {
  color: #25f4ee;
}
.race-car-b {
  animation-delay: -1.7s;
}
.race-car svg {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}
/* Suben el puente y bajan del otro lado, como si lo sintieran: se
   inclinan un poco al subir y al bajar en vez de deslizarse plano. */
@keyframes race-cruza {
  0% {
    left: 0;
    top: 70%;
    transform: rotate(-8deg);
  }
  48% {
    top: 6%;
    transform: rotate(0deg);
  }
  52% {
    top: 6%;
    transform: rotate(0deg);
  }
  100% {
    left: calc(100% - 18px);
    top: 70%;
    transform: rotate(8deg);
  }
}
/* Carrera a todo lo ancho del footer (ya no solo bajo Solicitar
   catalogo): el carrito de madera, el dino y los autos, mas grandes y
   mas lentos, sin obstaculos. */
.fc-race {
  position: relative;
  height: 86px;
  overflow: hidden;
  transition: height 0.4s ease;
}
/* Al ganar el carril crece para que quepan las letras completas, sin
   recortarlas dentro de la franja angosta de los autos. */
.fc-race.is-won {
  height: 150px;
  overflow: visible;
}
/* El mismo titulo del hero (misma clase, mismo rebote por palabra),
   escondido hasta ganar: no es una copia parecida, es el mismo. */
.fc-race .fc-win {
  position: absolute;
  /* Anclado abajo y con el alto que pida su contenido, en vez de
     estirado a la franja de 150px: asi el fondo oscuro crece hacia
     arriba y GANASTE no queda pegado a la orilla. */
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 6;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 26px 16px 20px;
  text-align: center;
  background: rgba(10, 14, 28, 0.78);
  border-radius: var(--r-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.fc-race .fc-win.is-visible {
  opacity: 1;
  /* Hasta no ganar, el panel esta invisible y deja pasar el mouse a los
     autos de atras. Ya ganado si recibe clics, que trae formulario. */
  pointer-events: auto;
}
/* Equis para quitarse el mensaje del premio de encima. */
.fc-race .fc-cerrar {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.fc-race .fc-cerrar:hover {
  background: rgba(255, 255, 255, 0.16);
}
/* Pantalla de premio con letras de videojuego. */
.fc-race .fc-win .fc-win-tag,
.fc-race .fc-win .fc-win-premio {
  margin: 0;
  font-family: "Press Start 2P", Montserrat, sans-serif;
  line-height: 1.25;
  text-transform: uppercase;
}
.fc-race .fc-win .fc-win-tag {
  font-size: clamp(0.95rem, 3.4vw, 1.5rem);
  color: var(--sun);
  /* Sombra dura tipo arcade, sin desenfoque. */
  text-shadow:
    2px 2px 0 #c4121c,
    4px 4px 0 rgba(0, 0, 0, 0.45);
  animation: fc-parpadeo 1.1s steps(2, end) infinite;
}
.fc-race .fc-win .fc-win-premio {
  margin-top: 2px;
  font-size: clamp(0.7rem, 2.3vw, 1rem);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
@keyframes fc-parpadeo {
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fc-race .fc-win .fc-win-tag {
    animation: none;
  }
}
/* Formulario para reclamar el cupon. */
.fc-form {
  display: grid;
  gap: 8px;
  width: min(320px, 90%);
  margin-top: 14px;
  text-align: left;
}
.fc-campo span {
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.fc-campo input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink);
}
.fc-error {
  font-size: 0.74rem;
  font-style: normal;
  color: var(--sun);
}
.fc-go {
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--navy);
  font-family: Montserrat, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.fc-go:hover {
  filter: brightness(1.08);
}
/* El cupon, con el recorte de ticket arriba y abajo. */
.fc-ticket {
  width: min(320px, 90%);
  margin-top: 14px;
}
.fc-ticket-cuerpo {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  background: #fff;
  color: var(--ink);
  border-radius: 4px;
  /* Dientes de ticket arriba y abajo. */
  mask:
    radial-gradient(5px at 5px 50%, transparent 98%, #000) -5px 0 / 10px 100% repeat-y,
    linear-gradient(#000 0 0) 5px 0 / calc(100% - 10px) 100% no-repeat;
  -webkit-mask:
    radial-gradient(5px at 5px 50%, transparent 98%, #000) -5px 0 / 10px 100% repeat-y,
    linear-gradient(#000 0 0) 5px 0 / calc(100% - 10px) 100% no-repeat;
}
.fc-ticket-cuerpo b {
  font-family: Montserrat, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--red-dark);
}
.fc-ticket-premio {
  font-family: "Press Start 2P", Montserrat, sans-serif;
  font-size: 0.62rem;
  line-height: 1.6;
  color: var(--navy);
}
.fc-ticket-codigo {
  padding: 7px 0 6px;
  border-top: 1px dashed rgba(14, 42, 107, 0.3);
  font-family: "Press Start 2P", Montserrat, sans-serif;
  font-size: 0.78rem;
  color: var(--coral-dark);
}
/* El codigo de barras del folio, dibujado en SVG por main.js. Va en negro
   aunque el folio sea rojo: un lector de tienda necesita el contraste. */
.fc-ticket-barras {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px dashed rgba(14, 42, 107, 0.3);
  color: #111;
}
.fc-ticket-datos {
  font-size: 0.74rem;
  color: var(--muted);
}
.fc-ticket-cuerpo small {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
}
/* La letra chica del cupon: mas pequena y separada por una linea, como en
   un ticket de caja, para que no compita con la instruccion de arriba. */
.fc-ticket-legal {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px dashed rgba(14, 42, 107, 0.22);
  font-size: 0.61rem;
}
.fc-ticket-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.fc-imprimir,
.fc-enviar {
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.fc-imprimir:hover,
.fc-enviar:hover {
  background: #fff;
  color: var(--coral-dark);
}
/* Al imprimir solo sale el cupon, no la pagina entera. */
@media print {
  body > *:not(.site-footer),
  .site-footer > *:not(.footer-top),
  .footer-top > *:not(.fc-race),
  .fc-race > *:not(.fc-win),
  .fc-win > *:not(.fc-ticket),
  .fc-ticket-acciones {
    display: none !important;
  }
  .fc-race .fc-win {
    position: static;
    background: none;
    opacity: 1;
  }
  .fc-ticket {
    width: auto;
    margin: 0;
  }
  .fc-ticket-cuerpo {
    mask: none;
    -webkit-mask: none;
    border: 1px dashed #999;
  }
}
.fc-race .dino {
  width: 64px;
  height: 64px;
}
.fc-race .dino-rex {
  animation-direction: reverse;
  animation-delay: -4s;
}
.race-loop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.race-loop .race-car {
  position: absolute;
  top: 12%;
  left: 0%;
  width: 30px;
  height: 50px;
  margin-top: 0;
  opacity: 0;
  animation: race-recto 9s ease-in-out infinite alternate backwards;
  pointer-events: auto;
  cursor: pointer;
}
.race-loop .race-car svg {
  transform: none;
}
/* Cada auto en su propio carril (top distinto): con hasta 8 corriendo
   a la vez nunca se cruzan ni se encimnan. */
.race-loop .race-car-lane-0 {
  top: 12%;
}
.race-loop .race-car-lane-1 {
  top: 28%;
}
.race-loop .race-car-lane-2 {
  top: 44%;
}
.race-loop .race-car-lane-3 {
  top: 60%;
}
.race-loop .race-car-lane-4 {
  top: 76%;
}
.race-loop .race-car-lane-5 {
  top: 92%;
}
.race-loop .race-car-lane-6 {
  top: 20%;
}
.race-loop .race-car-lane-7 {
  top: 84%;
}
/* Al pasarle el cursor se detiene donde va, sin saltar de lugar. El
   .is-frozen lo pone main.js y dura 4s de verdad (no solo mientras el
   mouse esta encima): asi da tiempo a ir pasando por los 9. */
.race-loop .race-car:hover,
.race-loop .race-car.is-frozen {
  animation-play-state: paused;
}
/* Delay POSITIVO (no negativo): el auto arranca invisible, en cuanto le
   toca su turno aparece en el punto de salida y recien ahi se mueve.
   Asi van saliendo uno por uno en vez de aparecer todos a medio camino,
   y cada uno corre a su propio ritmo para que se sienta una carrera. */
.race-loop .race-car-lane-0 {
  animation-delay: 0s;
  animation-duration: 8.5s;
}
.race-loop .race-car-lane-1 {
  animation-delay: 0.6s;
  animation-duration: 9.5s;
}
.race-loop .race-car-lane-2 {
  animation-delay: 1.2s;
  animation-duration: 10.5s;
}
.race-loop .race-car-lane-3 {
  animation-delay: 1.8s;
  animation-duration: 9s;
}
.race-loop .race-car-lane-4 {
  animation-delay: 2.4s;
  animation-duration: 11s;
}
.race-loop .race-car-lane-5 {
  animation-delay: 3s;
  animation-duration: 9.8s;
}
.race-loop .race-car-lane-6 {
  animation-delay: 3.6s;
  animation-duration: 10s;
}
/* Derecho de un lado al otro y de regreso por el mismo camino (alternate
   invierte la misma animacion en vez de saltar al reiniciar). El 0%
   arranca invisible: con "backwards" esa es la pinta que tiene durante
   el delay, y al tocarle el turno aparece ya en la salida. */
@keyframes race-recto {
  0% {
    left: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  3% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .race-car {
    animation: none;
  }
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* Las dos columnas arrancan arriba, asi CONTACTO queda a la misma
     altura que el borde superior del logotipo. El aire va en el
     padding del grid, no en un margen del logo. */
  align-items: start;
  padding-top: 18px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 20px 40px;
}
/* Mismo logotipo en blanco del menu movil: con fondo transparente va
   directo sobre el azul del pie, sin pastilla. */
.footer-logo-chip {
  display: grid;
  place-items: center;
  width: min(150px, 100%);
  aspect-ratio: 1;
  height: auto;
}
.footer-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.f-brand {
  max-width: 320px;
}
.f-lema,
.f-tagline {
  font-size: 0.82rem;
  line-height: 1.55;
}
.f-lema {
  margin: 14px 0 0;
}
.f-tagline {
  /* Sin margen arriba: el espacio con el lema queda igual que el
     interlineado de estos mismos renglones. */
  margin: 0 0 18px;
}
.f-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.f-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.f-social a:hover {
  background: var(--coral);
  transform: translateY(-3px);
}
.f-social svg {
  width: 18px;
  height: 18px;
}
.site-footer h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-light);
}
.site-footer h3 svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.f-col ul {
  display: grid;
  /* minmax(0,1fr): sin esto las filas no pueden encogerse por debajo de
     su contenido y la lista se sale de su columna en celular. */
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.f-col,
.f-contact li > span,
.f-contact li > a {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Solo los enlaces de la columna Empresa (<nav>), no los datos de
   Contacto, que viven en un <div> con la misma clase. */
nav.f-col a {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.f-col a {
  font-size: 0.82rem;
  transition:
    color 0.2s ease,
    padding 0.2s ease;
}
.f-col a:hover {
  color: #fff;
  padding-left: 4px;
}
.f-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* Horario de la tienda: en el footer y en la tarjeta de donde comprar
   se marca un poco mas que la direccion, es el dato que mas preguntan. */
.f-horario {
  display: block;
  margin-top: 4px;
  /* En mayusculas por CSS y no por el texto: el horario puede venir del
     panel escrito en minusculas y aqui siempre va en altas. */
  text-transform: uppercase;
  color: var(--sun);
}
.wc-horario {
  margin-top: 4px;
  font-weight: 700;
  color: var(--coral-dark);
}
.f-addr-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Los botones del pie y del menu movil, con el mismo gesto de
   "Seguir @bmtoysmx" pero un punto mas compactos: viven en una columna
   angosta, no en un encabezado. */
.f-contact .pill {
  padding: 9px 14px;
  font-size: 0.68rem;
  /* Fijo y no heredado: el pie y el menu tienen interlineados distintos
     y los botones salian con dos pixeles de diferencia. */
  line-height: 1.25;
}
.f-contact .pill svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  /* Sin esto .f-contact svg lo deja amarillo fijo y el icono no sigue
     al texto cuando el boton cambia de color. */
  stroke: currentColor;
}
/* Los iconos de Maps y Waze llevan los colores de cada app, asi se
   reconocen de un vistazo. Traen sus propios fill y stroke en el SVG,
   por eso aqui se apagan los heredados. */
.ico-marca {
  stroke: none !important;
}
/* El circulo detras de cada icono, el mismo gesto que .f-social. */
.f-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.f-contact svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 32px;
  padding: 18px 24px;
  font-size: 0.72rem;
  text-align: center;
}
.f-left,
.f-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
}
.f-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
}
.f-legal a {
  color: rgba(255, 255, 255, 0.76);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.f-legal a:hover {
  color: #fff;
}
/* El dinosaurio patrulla la franja de abajo de lado a lado, como un
   personaje de videojuego: corre, llega al borde, se voltea (scaleX) y
   regresa. Las patas se mueven aparte en un elemento interno para poder
   combinar el "correr" horizontal con el "salto" vertical sin que una
   animacion pise a la otra. */
/* Carril a todo el ancho del hero (.hero ya es position:relative y
   ocupa toda la pagina, no solo la columna del texto): los carritos
   cruzan las dos columnas, de borde a borde. */
.hero-dino-lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  /* Suficiente para las dos filas: el carrito normal (bottom 4px) y el
     que corre al reves, mas arriba (bottom 70px) y mas alto el. */
  height: 142px;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
/* Carritos de madera (antes eran dinosaurios): mismo recorrido y el
   mismo mecanismo, solo cambio el dibujo. pointer-events:auto porque
   .fun (su contenedor en el hero) lo pone en none para el resto de la
   decoracion, y aqui si necesitamos el hover para poder pausarlos. */
.dino {
  position: absolute;
  bottom: 4px;
  left: 0;
  z-index: 0;
  width: 64px;
  height: 64px;
  color: #b5651d;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  pointer-events: auto;
  cursor: pointer;
  animation: dino-correr 13s linear infinite;
}
.dino:hover,
.dino:hover svg,
.dino:hover img,
.dino.is-frozen,
.dino.is-frozen svg,
.dino.is-frozen img {
  animation-play-state: paused;
}
/* El segundo carrito del hero: mismo recorrido pero tocado al reves
   (animation-direction) y un poco mas alto, para que no se encime con
   el primero. */
.dino-2 {
  bottom: 70px;
  color: #8b4513;
  animation-direction: reverse;
  animation-delay: -6s;
}
.dino svg,
.dino img {
  width: 100%;
  height: 100%;
  animation: dino-salta 2.4s ease-in-out infinite;
}
/* Cactus fijos en la franja: el dino los "salta" al pasar. No estan
   sincronizados al milimetro con el salto, es un gesto decorativo, no
   un juego de verdad. */
.lego {
  position: absolute;
  bottom: 4px;
  z-index: 0;
  width: 34px;
  height: 18px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.lego.lego-lg {
  width: 56px;
  height: 18px;
}
.lego svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
@keyframes dino-correr {
  0% {
    left: -4%;
    transform: scaleX(1);
  }
  47% {
    left: 96%;
    transform: scaleX(1);
  }
  50% {
    left: 96%;
    transform: scaleX(-1);
  }
  97% {
    left: -4%;
    transform: scaleX(-1);
  }
  100% {
    left: -4%;
    transform: scaleX(1);
  }
}
@keyframes dino-salta {
  0%,
  14% {
    transform: translateY(0);
  }
  26% {
    transform: translateY(-20px);
  }
  38%,
  58% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-20px);
  }
  82%,
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dino {
    animation: none;
    left: 16px;
  }
  .dino svg {
    animation: none;
  }
}
.footer-bottom p {
  margin: 0;
}
.f-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
}
.f-credit a {
  color: rgba(255, 255, 255, 0.76);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.f-credit a:hover {
  color: #fff;
}

/* ---------- Flotantes ---------- */
.wa-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(37, 211, 102, 0.85);
  transition: transform 0.2s ease;
}
.wa-float:hover {
  transform: scale(1.08);
}
.wa-float svg {
  width: 30px;
  height: 30px;
}
/* Con el menu movil abierto, estas burbujas (incluida la de Chatwoot,
   que trae su propio z-index que no controlamos) se escondian: el
   menu es position:fixed pero su z-index (59) pierde contra el 70-72
   de estos botones, asi que quedaban flotando encima del panel rojo.
   La barra de progreso y el lapiz (.progress/.pencil) tienen el mismo
   problema mas grave: viven FUERA del header en el HTML con z-index
   80/81, asi que se dibujan encima de TODO el header (el menu movil es
   hijo del header, nunca puede ganarles con su propio z-index). */
body.nav-open .wa-float,
body.nav-open .to-top,
body.nav-open .chat-teaser,
body.nav-open .bot-launcher,
body.nav-open .progress,
body.nav-open .pencil {
  display: none !important;
}
.to-top {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.to-top:hover {
  background: var(--blue);
}

/* ---------- Animacion de entrada ----------
   El contenido es visible por defecto. Solo se oculta cuando el script del
   <head> confirma que puede animarlo, asi nunca queda texto invisible si el
   observer no llega a correr. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.js-anim .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
/* ---------- Responsive ----------
   Los breakpoints van de mayor a menor para que el mas chico gane. */

/* Pantallas medianas: el hero sigue a dos columnas pero con menos adorno. */
@media (max-width: 1280px) {
  .p-sun {
    width: 200px;
    height: 200px;
  }
}

/* Nosotros: la foto y el texto se quedan juntos, los sellos bajan a una fila. */
@media (max-width: 1180px) {
  .about {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    row-gap: 30px;
  }
  .about-points {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    padding-inline: 24px;
  }
  /* El blob azul vivia donde ahora caen los sellos: estorba la lectura. */
  .about-blue {
    display: none;
  }
  .about-yellow {
    width: 200px;
    height: 200px;
    top: -60px;
    left: -70px;
  }
}

@media (max-width: 1080px) {
  /* Menu movil: panel a media pantalla de ancho pero a todo el alto
     (desde arriba del todo, no solo debajo del header), oscuro, con
     numeracion, datos de contacto y su propio boton para cerrarlo. */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    /* El alto real que se ve en el celular: con inset:0 el navegador
       cuenta tambien la franja de la barra de direcciones, que aparece
       y desaparece al scrollear. */
    height: 100dvh;
    width: 50%;
    min-width: 280px;
    z-index: 59;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Heredaba justify-content: center del menu de escritorio. Cuando el
       contenido es mas alto que la pantalla, centrar empuja la primera
       fila (el logotipo) arriba del borde y el scroll ya no la alcanza. */
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 34px 24px 40px;
    /* El mismo rojo de la pantalla de carga, para que el menu se sienta
       parte de lo mismo. Va como fondo del elemento y no como capa
       encima: el panel scrollea por dentro y una capa absoluta solo
       alcanzaba a tapar la primera pantalla. */
    background: var(--red-radial);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.35s;
  }
  .nav.open {
    transform: none;
    visibility: visible;
  }
  /* Sobre el rojo oscuro las pelotas si se pueden ver en sus cuatro
     colores sin robarle lectura al texto. */
  .nav-balls {
    opacity: 1;
  }
  .nav .ball {
    opacity: 0.55;
  }
  /* El mismo sello blanco del hero, pero dentro del flujo del panel:
     sin posicion absoluta y a lo ancho de la columna. */
  .nav .nav-stamp {
    display: flex;
    position: relative;
    /* .hero-stamp trae left/top de su posicion absoluta en el hero: en
       relative seguirian corriendo la caja 20px sin mover el hueco que
       ocupa, y los botones se le montaban encima. */
    inset: auto;
    overflow: hidden;
    flex: none;
    align-self: stretch;
    margin: 14px 0 10px;
    padding: 8px 12px;
    font-size: 0.64rem;
    line-height: 1.3;
  }
  .nav .nav-stamp b {
    font-size: 0.7rem;
  }
  .nav .nav-stamp i {
    font-size: 0.6rem;
  }
  /* Maps y Waze pegados al sello, del tamano de un dato y no de un CTA. */
  .nav > .f-addr-apps {
    display: flex;
    flex: none;
    gap: 8px;
    margin-bottom: 12px;
  }
  /* Destello que cruza el sello una vez cada ocho segundos. El recorte
     vive en el propio sello, que no contiene nada posicionado fijo. */
  .nav .nav-stamp::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60%;
    left: -70%;
    pointer-events: none;
    background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 210, 63, 0.45) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: sello-destello 8s ease-in-out infinite;
  }
  @keyframes sello-destello {
    0%,
    72% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(320%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav .nav-stamp::after {
      animation: none;
    }
  }
  .nav .pill {
    padding: 6px 10px;
    font-size: 0.6rem;
    gap: 6px;
  }
  .nav .pill svg {
    width: 13px;
    height: 13px;
  }
  /* Arriba del todo: el logotipo de la marca y la equis, en la misma
     linea. En escritorio el logo no va, ahi ya esta en el header. */
  /* Centrado vertical con margenes automaticos y no con
     justify-content: center. Los margenes auto reparten el aire que
     sobra pero nunca empujan la primera fila fuera del area que se
     puede scrollear, que fue el bug del logotipo recortado. */
  .nav-top {
    margin-top: auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  /* Version en blanco con fondo transparente (SVG), va directo sobre el
     rojo del panel, sin pastilla. */
  .nav-logo {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
  }
  .nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .nav-close {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-close:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  .nav > a {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    color: #fff;
    /* La pastilla oscura es cosa del menu de escritorio: aqui el panel
       ya es rojo oscuro de por si y cada fila lleva su propia linea.
       Por lo mismo sobra la sombra en la letra, se ve mas limpia. */
    background: transparent;
    text-shadow: none;
  }
  .nav > a:hover,
  .nav > a:focus-visible {
    background: transparent;
    padding-left: 10px;
  }
  .nav > a.is-active {
    color: var(--btn-secondary);
  }
  .n-num {
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--yellow);
  }
  .nav > a.is-active .n-num {
    color: var(--yellow);
  }

  .nav-extra {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 28px;
    margin-bottom: auto;
  }
  .nav-extra .btn-red {
    background: #fff;
    color: var(--red-dark);
  }
  .nav-extra .btn-red:hover {
    background: var(--yellow);
    color: var(--navy);
  }
  .nav-extra .btn {
    width: 100%;
    justify-content: center;
  }
  .nav-social {
    display: flex;
    gap: 10px;
  }
  .nav-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  /* Cada red con su propio color, como los botones de Maps y Waze:
     se reconocen de un vistazo sin leer. */
  .nav-social a[aria-label="Instagram"] {
    background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
  }
  .nav-social a[aria-label="Facebook"] {
    background: #1877f2;
  }
  .nav-social a[aria-label="TikTok"] {
    background: #010101;
  }
  .nav-social a[aria-label="Mercado Libre"] {
    background: #ffe600;
    color: #2d3277;
  }
  .nav-social a:hover {
    filter: brightness(1.15);
  }
  .nav-social svg {
    width: 19px;
    height: 19px;
  }

  .burger {
    display: block;
    /* .nav pasa a position:fixed en este ancho (sale del flujo) y
       .header-cta se oculta, asi que sin esto el burger quedaba pegado
       al logo en vez de en su propia esquina. */
    margin-left: auto;
  }
  .header-cta {
    display: none;
  }
  .cat-grid {
    height: 380px;
  }
  .about {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-copy {
    padding-inline: 24px;
    max-width: none;
  }
  .wholesale-inner {
    grid-template-columns: 1fr;
  }
  .shop {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .p-sky,
  .p-rose,
  .t4,
  .t5 {
    display: none;
  }
  .conf {
    display: none;
  }
}

/* El hero aguanta sus dos columnas hasta bastante angosto: solo por
   debajo de 820px la foto se va arriba, a ancho completo, y el texto
   debajo. Antes se partia en 1024px y en una laptop normal ya se veia
   apilado, con la foto de banner en vez de a la mitad. */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-media {
    order: -1;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    height: 380px;
    margin: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .hero-panel {
    padding: 44px 24px 48px;
  }
  .hero-copy {
    margin: 0;
    padding-right: 0;
    max-width: none;
  }
}

@media (max-width: 1080px) {
  /* Dos y dos, en vez de que auto-fit deje una sola abajo. */
  .topbar-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .topbar p:nth-child(odd) {
    border-left: 0;
  }
  .topbar p:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  /* Antes se escondia en movil, ahora se queda: mismo carril 2x2 que
     ya usa iPad, solo mas angosto. */
  .topbar p {
    gap: 5px;
    padding: 4px 8px;
  }
  .topbar svg {
    width: 12px;
    height: 12px;
  }
  .topbar b {
    font-size: 0.6rem;
  }
  /* En movil solo se quedan las letras rojas (el renglon chico de
     abajo se quita, no hay espacio para las dos lineas). */
  .topbar span.topbar-sub {
    display: none;
  }
  /* Mas chicos y lejos del titulo: en pantallas angostas "top:10%"
     cae demasiado cerca del encabezado. */
  .qmark-a {
    top: 2%;
    font-size: 2.2rem;
  }
  .qmark-b {
    font-size: 3.2rem;
  }
  .hero-media {
    height: 240px;
  }
  .hero-tiktok {
    padding: 8px 12px;
    font-size: 0;
  }
  .hero-tiktok svg {
    width: 15px;
    height: 15px;
  }
  .hero-panel {
    padding: 34px 24px 40px;
  }
  .p-mint,
  .t3 {
    display: none;
  }
  /* Rediseño para movil: nada de carril horizontal (5 tarjetas nunca
     caben bien en una pantalla angosta, sea carrusel o acordeon). Una
     columna simple, cada tarjeta a su propia altura, todo legible sin
     tener que deslizar a los lados. */
  .where-grid {
    display: grid;
    gap: 14px;
    height: auto;
  }
  .where-card,
  .where-card.is-open,
  .where-card:hover,
  .where-card:focus-within {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .where-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    padding: 18px;
    text-align: left;
  }
  .where-card .wc-ico {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
  }
  .where-card h3 {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
  }
  .where-card p,
  .where-card .link {
    grid-column: 1 / -1;
  }
  .where-card p {
    margin: 0;
  }
  .stats li {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 18px 20px;
  }
  .stat-ico {
    display: none;
  }
  .about-points {
    grid-template-columns: 1fr;
  }
  /* En celular quedan Catalogo y Contacto, lado a lado, con la marca a
     todo lo ancho arriba. Empresa se oculta: sus seis enlaces ya estan
     en el menu movil y aqui solo alargaban el pie. */
  .f-col-empresa {
    display: none;
  }
  .footer-grid {
    /* minmax(0,1fr) y no 1fr: si no, la direccion larga del contacto
       estira su columna y la otra queda flaquita. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding-top: 8px;
  }
  .f-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
  .footer-logo-chip {
    width: min(118px, 100%);
  }
  .site-footer h3 {
    margin-bottom: 14px;
    padding-bottom: 8px;
  }
  .trust-item {
    padding-inline: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee-track,
  .trust-track,
  .ticker-track,
  .pulse::after,
  .scroll-hint span,
  .header-sheen::before,
  .hero-copy > *,
  .hero-title span {
    animation: none;
  }
  .chat-teaser,
  .prechat,
  .pc-card,
  .hero-title span {
    transition: none;
  }
  .hc-dot::after {
    animation: none;
  }
}

/* ---------- Confeti del easter egg del logo ---------- */
.confetti {
  position: fixed;
  /* Mas alto que el overlay de intro (300): el logo del intro tambien
     lanza confeti al cargar y tiene que verse encima. */
  z-index: 310;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  animation: fall 1.5s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), 70vh) rotate(var(--dr));
  }
}

/* ---------- Con Chatwoot activo sobra la burbuja de WhatsApp ---------- */
/* Antes se escondia con el chat activo (las dos burbujas pisaban la
   misma esquina). Ahora el WhatsApp vive en la esquina IZQUIERDA y
   Chatwoot en la derecha, asi que ya no hace falta ocultarlo. */
body.has-chatwoot .to-top {
  bottom: 92px;
  right: 24px;
}

/* ---------- Portadas de TikTok con tratamiento de marca ---------- */
.video {
  position: relative;
  display: block;
  aspect-ratio: 9 / 15;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0b1430;
  box-shadow: var(--shadow-md);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
.video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 3px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}
.video:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 34px 56px -22px rgba(0, 0, 0, 0.85);
}
.v-red::before {
  border-color: var(--red);
}
.v-blue::before {
  border-color: var(--blue);
}
.v-yellow::before {
  border-color: var(--yellow);
}
.v-cyan::before {
  border-color: #25f4ee;
}
.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.7s ease,
    filter 0.4s ease;
}
.video:hover img {
  transform: scale(1.08);
  filter: saturate(1.15);
}
/* Velo de marca: unifica portadas que vienen de capturas distintas. */
.video .veil-top {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.v-red .veil-top {
  background: linear-gradient(160deg, rgba(226, 16, 30, 0.45), transparent 46%);
}
.v-blue .veil-top {
  background: linear-gradient(160deg, rgba(15, 111, 214, 0.45), transparent 46%);
}
.v-yellow .veil-top {
  background: linear-gradient(160deg, rgba(249, 168, 37, 0.45), transparent 46%);
}
.v-cyan .veil-top {
  background: linear-gradient(160deg, rgba(37, 244, 238, 0.4), transparent 46%);
}
.video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(5, 10, 30, 0.92) 0%, rgba(5, 10, 30, 0.35) 38%, transparent 62%);
}
.v-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7);
}
.v-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.v-tag {
  position: absolute;
  top: 15px;
  right: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.v-red .v-tag {
  background: rgba(226, 16, 30, 0.9);
}
.v-blue .v-tag {
  background: rgba(15, 111, 214, 0.9);
}
.v-yellow .v-tag {
  background: rgba(249, 168, 37, 0.92);
  color: #3a2300;
}
.v-cyan .v-tag {
  background: rgba(37, 244, 238, 0.92);
  color: #06343a;
}
.v-foot {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
}
.v-title {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.v-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}
.v-meta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.play {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 16px solid #111;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.video:hover .play {
  transform: scale(1.14);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.16);
}

/* La burbuja de Chatwoot ya no se usa como boton del sitio (ver
   .bot-launcher), sus estilos vivian aqui y se fueron con ella.
   Las animaciones siguen porque el boton nuevo las reutiliza. */
@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes bubble-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ---------- Efectos dinamicos ---------- */
/* Entrada escalonada del hero */
.hero-copy > * {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-copy > *:nth-child(1) {
  animation-delay: 0.05s;
}
.hero-copy > *:nth-child(2) {
  animation-delay: 0.18s;
}
.hero-copy > *:nth-child(3) {
  animation-delay: 0.31s;
}
.hero-copy > *:nth-child(4) {
  animation-delay: 0.44s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Brillo que barre las tarjetas de categoria */
.cat-card .shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
  transform: translateX(-120%);
}
.cat-card:hover .shine {
  animation: sweep 0.9s ease;
}
@keyframes sweep {
  to {
    transform: translateX(120%);
  }
}

/* Subrayado animado en los enlaces de seccion */
.link-arrow,
.link {
  position: relative;
}
.link-arrow::after,
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transition: right 0.3s ease;
}
.link-arrow:hover::after,
.link:hover::after {
  right: 0;
}

/* Franja de texto en movimiento entre secciones */
.ticker {
  overflow: hidden;
  padding: 14px 0;
  background: linear-gradient(100deg, var(--navy-deep), var(--blue-dark) 45%, var(--navy) 100%);
  color: #fff;
  border-block: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--yellow), var(--red), var(--yellow)) 1;
}
.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: slide 28s linear infinite;
}
.ticker span {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  font-family: Montserrat, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker i {
  font-style: normal;
  color: var(--yellow);
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}

/* ---------- Aviso de chat en el hero ---------- */
.hero-chat {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  font-size: 0.86rem;
  font-weight: 600;
  color: #15803d;
}
.hero-chat b {
  color: #0f6a33;
}
.hc-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
}
.hc-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: ping 2s ease-out infinite;
}
.hero-chat button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-chat button:hover {
  color: var(--blue-dark);
}

/* ---------- Tarjeta de chat en Donde comprar ---------- */
/* El mismo degradado cyan-azul-magenta, ahora con un resplandor que lo
   levanta de la tarjeta y un punto verde de "en linea" en la esquina,
   como el badge de un avatar: se lee de inmediato que es chat EN VIVO. */
.i-chat {
  position: relative;
  background: linear-gradient(140deg, #25f4ee, var(--blue) 55%, #fe2c55);
  box-shadow:
    0 10px 22px -10px rgba(254, 44, 85, 0.55),
    0 0 0 1px rgba(37, 244, 238, 0.3) inset;
}
.i-chat svg {
  stroke-width: 2;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
}
.i-chat::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid #fff;
}
/* Se distingue del resto a proposito: fondo oscuro y borde que
   respira en cyan, el lenguaje "tech" del chat en vivo en vez del
   blanco cálido de las demas tarjetas. */
.where-chat {
  background: linear-gradient(165deg, #0b1430, #141c3d 70%);
  border: 1px solid rgba(37, 244, 238, 0.35);
  box-shadow:
    0 0 0 1px rgba(37, 244, 238, 0.12) inset,
    0 18px 34px -18px rgba(37, 244, 238, 0.35);
  animation: chat-respira 3.2s ease-in-out infinite;
}
.where-chat h3,
.where-chat p {
  color: #fff;
}
.where-chat .link {
  color: #25f4ee;
}
.where-chat h3 .live {
  background: rgba(37, 211, 102, 0.2);
  color: #4ade80;
}
@keyframes chat-respira {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(37, 244, 238, 0.12) inset,
      0 18px 34px -18px rgba(37, 244, 238, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(37, 244, 238, 0.3) inset,
      0 18px 40px -14px rgba(37, 244, 238, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .where-chat {
    animation: none;
  }
}
.where-card h3 .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.14);
  font-family: Inter, sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
  vertical-align: middle;
}
.where-card h3 .live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
}
.where-card button.link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--blue);
}

/* ---------- Globo de bienvenida del chat ---------- */
.chat-teaser {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 72;
  width: min(268px, calc(100vw - 44px));
  padding: 14px 14px 13px;
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 18px 36px -16px rgba(8, 28, 76, 0.42),
    0 0 0 1px rgba(14, 42, 107, 0.07);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-teaser.show {
  opacity: 1;
  transform: none;
}
.ct-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.ct-close:hover {
  background: rgba(14, 42, 107, 0.08);
  color: var(--navy);
}
.ct-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.ct-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 3px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(14, 42, 107, 0.1);
}
.ct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ct-head b {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--navy);
}
.ct-head em {
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: #15803d;
}
.ct-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
}
.chat-teaser p {
  margin: 0 0 11px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
.ct-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #25f4ee, var(--blue) 50%, #fe2c55);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.ct-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

@media (max-width: 760px) {
  .chat-teaser {
    right: 16px;
    bottom: 90px;
  }
}

/* ---------- Asistente del sitio ----------
   Panel de chat guiado (assets/js/asistente.js). Es el unico boton de
   chat del sitio: la burbuja de Chatwoot va oculta y solo aparece
   cuando la persona pide hablar con el equipo. Mismo lenguaje visual
   que tenia esa burbuja, cian a rosa con anillo girando. */
.bot-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 73;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, #25f4ee 0%, var(--blue) 45%, #fe2c55 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.22),
    0 14px 32px -10px rgba(254, 44, 85, 0.75),
    0 0 26px rgba(37, 244, 238, 0.45);
  animation: bubble-float 4s ease-in-out infinite;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.bot-launcher:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.3),
    0 18px 40px -10px rgba(254, 44, 85, 0.9),
    0 0 40px rgba(37, 244, 238, 0.65);
}
.bot-launcher svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Anillo de energia girando detras del boton. */
.bot-launcher::before {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(37, 244, 238, 0) 0deg,
    rgba(37, 244, 238, 0.85) 90deg,
    rgba(37, 244, 238, 0) 170deg,
    rgba(254, 44, 85, 0.85) 270deg,
    rgba(254, 44, 85, 0) 350deg
  );
  opacity: 0.7;
  /* El boton crea su propio contexto de apilado (z-index), asi que un
     hijo con z-index -1 se pinta ENCIMA de su fondo y lo deslavaba. Con
     el centro recortado el anillo solo se ve por fuera, como debe. */
  mask: radial-gradient(closest-side, transparent 62%, #000 63%);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63%);
  animation: ring-spin 4s linear infinite;
}
/* Punto verde de "en linea" sobre el boton. */
.bot-launcher i {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #25d366;
}
body.bot-abierto .bot-launcher,
body.cw-abierto .bot-launcher {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .bot-launcher,
  .bot-launcher::before {
    animation: none;
  }
}
.bot {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  display: none;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 44px));
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 30px 60px -20px rgba(8, 28, 76, 0.55),
    0 0 0 1px rgba(14, 42, 107, 0.08);
}
.bot.abierto {
  display: flex;
  animation: bot-entra 0.28s ease both;
}
@keyframes bot-entra {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
/* La burbuja de Chatwoot se queda escondida siempre: el boton del sitio
   es el del asistente, y Chatwoot se abre desde ahi cuando piden hablar
   con una persona (su ventana trae su propia equis para cerrarse).
   hideMessageBubble del SDK no siempre la oculta, por eso tambien aqui. */
.woot--bubble-holder,
.woot-widget-bubble {
  display: none !important;
}
body.bot-abierto .chat-teaser,
body.bot-abierto .wa-float {
  display: none !important;
}
.bot-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0b1020 0%, #14224a 55%, #0b1020 100%);
  color: #fff;
}
/* Linea de energia cian a rosa bajo el encabezado. */
.bot-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #25f4ee, var(--blue) 50%, #fe2c55);
}
.bot-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
}
.bot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bot-head b {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 0.86rem;
}
.bot-head em {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
}
.bot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
}
.bot-x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.bot-x:hover {
  background: rgba(255, 255, 255, 0.3);
}
.bot-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--paper);
}
.bot-msg {
  max-width: 85%;
  margin: 0 0 10px;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.bot-msg.de-bot {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.bot-msg.de-mi {
  margin-left: auto;
  background: var(--coral);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* Los tres puntitos de "esta escribiendo". */
.bot-msg.escribiendo {
  display: flex;
  gap: 4px;
  width: 54px;
  padding: 13px;
}
.bot-msg.escribiendo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: bot-punto 1s ease-in-out infinite;
}
.bot-msg.escribiendo i:nth-child(2) {
  animation-delay: 0.15s;
}
.bot-msg.escribiendo i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes bot-punto {
  0%,
  60%,
  100% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
}
.bot-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
  background: var(--paper);
}
.bot-chip {
  padding: 8px 13px;
  border: 1px solid var(--coral);
  border-radius: 999px;
  background: #fff;
  color: var(--coral-dark);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.bot-chip:hover {
  background: var(--coral);
  color: #fff;
}
.bot-chip.es-cta {
  background: var(--coral);
  color: #fff;
}
.bot-chip.es-cta:hover {
  background: var(--coral-dark);
}
.bot-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.bot-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--ink);
}
.bot-form input:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
}
.bot-form button {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.bot-form button:hover {
  background: var(--coral-dark);
}
/* Microfono para dictar. Solo existe si el navegador trae la API de voz:
   asistente.js lo borra cuando no la hay o cuando niegan el permiso. */
.bot-form .bot-mic {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
}
.bot-mic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bot-form .bot-mic:hover {
  background: #fff;
  border-color: var(--blue);
}
/* Mientras escucha: rojo lleno y un pulso para que se note que esta vivo. */
.bot-form .bot-mic.escuchando {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  animation: mic-pulso 1.4s ease-in-out infinite;
}
@keyframes mic-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 111, 228, 0.5);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(47, 111, 228, 0);
  }
}
@media (max-width: 760px) {
  .bot {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }
}

/* ---------- Entrada del logotipo al cargar la pagina ----------
   Pantalla completa, el logo rebota, salen chispas de colores y se
   desvanece. main.js le agrega la clase .hide a los ~1.3s. Si el sistema
   pide menos movimiento, html.sin-intro la saca del documento antes de
   que se pinte el primer frame (vease el script en el <head>). */
.sin-intro .intro {
  display: none;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* Columna con separacion propia en vez de subir el texto con un
     margen negativo fijo: ese margen no encogia junto con el logo (que
     mide 68vw en celular) y dejaba un hueco enorme entre los dos. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 16px);
  overflow: hidden;
  cursor: pointer;
  /* Fondo rojo de marca, con un halo mas claro detras del logo para que
     el recuadro blanco no quede plano encima del rojo. */
  background: radial-gradient(circle at 50% 42%, #ff4b52 0%, var(--red) 45%, #8f0d16 100%);
  transition:
    opacity 0.45s ease,
    visibility 0.45s;
}
/* Grid de una sola columna: .intro-logo y .intro-welcome caen cada uno
   en su propia fila automatica, centrados, sin pedirselo explicito. */
.intro-welcome {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 92vw;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.6rem, 7.6vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}
/* Mismo gesto exacto que las palabras del hero (@keyframes
   palabra-entra): un rebote hacia arriba, no letra por letra. */
.intro-welcome .iw-line {
  display: block;
  animation: palabra-entra 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: 0.45s;
}
/* "I welcome" debajo, en Arial (no la letra grande de marca) pero
   grande de verdad: el triple de su tamano original. */
.intro-welcome .iw-sub {
  display: block;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.8rem, 3.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  animation: palabra-entra 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}
/* Rayos que salen del centro y giran despacio, el toque de fiesta
   detras del logo. Van en ::before para no agregar mas markup. */
.intro::before {
  content: "";
  position: absolute;
  width: 150vmax;
  height: 150vmax;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.14) 0deg 12deg,
    transparent 12deg 30deg,
    rgba(255, 255, 255, 0.14) 30deg 42deg,
    transparent 42deg 60deg
  );
  animation: intro-rayos 18s linear infinite;
}
@keyframes intro-rayos {
  to {
    transform: rotate(360deg);
  }
}
.intro.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.intro-logo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(320px, 68vw);
  height: min(320px, 68vw);
  padding: 20px;
  border-radius: 64px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  animation:
    intro-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    intro-wiggle 1.3s ease-in-out 0.8s 2;
}
.intro-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes intro-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes intro-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
/* El aro que se expande justo cuando el logo aterriza, como un rebote
   visible. */
.intro-burst {
  position: absolute;
  z-index: 0;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  animation: intro-ring 0.7s ease-out 0.5s both;
}
@keyframes intro-ring {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(9);
  }
}
/* Catorce confetis de colores que salen disparados del logo, el toque de
   fiesta infantil. Cada uno define su propio destino con --dx/--dy. */
.intro-spark {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: intro-spark 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.is-1 {
  --dx: -150px;
  --dy: -110px;
  background: var(--sun);
}
.is-2 {
  --dx: 150px;
  --dy: -110px;
  background: var(--blue-soft);
  border-radius: 50%;
}
.is-3 {
  --dx: -190px;
  --dy: 20px;
  background: var(--mint);
  border-radius: 50%;
}
.is-4 {
  --dx: 190px;
  --dy: 20px;
  background: var(--rose);
}
.is-5 {
  --dx: -90px;
  --dy: 160px;
  background: #fff;
  border-radius: 50%;
}
.is-6 {
  --dx: 90px;
  --dy: 160px;
  background: var(--lav);
}
.is-7 {
  --dx: -40px;
  --dy: -190px;
  background: #fff;
  animation-delay: 0.4s;
}
.is-8 {
  --dx: 40px;
  --dy: -190px;
  background: var(--sky);
  border-radius: 50%;
  animation-delay: 0.42s;
}
.is-9 {
  --dx: -220px;
  --dy: -40px;
  background: var(--peach);
  animation-delay: 0.38s;
}
.is-10 {
  --dx: 220px;
  --dy: -40px;
  background: var(--sun-deep);
  border-radius: 50%;
  animation-delay: 0.36s;
}
.is-11 {
  --dx: -120px;
  --dy: 210px;
  background: var(--blue-soft);
  animation-delay: 0.44s;
}
.is-12 {
  --dx: 120px;
  --dy: 210px;
  background: var(--mint);
  border-radius: 50%;
  animation-delay: 0.41s;
}
.is-13 {
  --dx: 0px;
  --dy: -225px;
  background: #fff;
  animation-delay: 0.33s;
}
.is-14 {
  --dx: 0px;
  --dy: 225px;
  background: var(--rose);
  border-radius: 50%;
  animation-delay: 0.46s;
}
@keyframes intro-spark {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.4) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1) rotate(160deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro,
  .intro::before,
  .intro-logo,
  .intro-welcome,
  .intro-welcome .iw-line,
  .intro-welcome .iw-sub,
  .intro-burst,
  .intro-spark {
    animation: none;
    transition: none;
  }
}

/* ---------- Pre-chat: nombre y WhatsApp antes de abrir el chat ---------- */
.prechat {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 20, 50, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.prechat.show {
  opacity: 1;
}
.pc-card {
  position: relative;
  width: min(380px, 100%);
  padding: 30px 26px 24px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
  box-shadow: 0 40px 70px -24px rgba(8, 28, 76, 0.6);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.prechat.show .pc-card {
  transform: none;
}
.pc-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.pc-close:hover {
  background: rgba(14, 42, 107, 0.08);
  color: var(--navy);
}
.pc-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  padding: 7px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(14, 42, 107, 0.1),
    0 10px 22px -12px rgba(0, 0, 0, 0.5);
}
.pc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pc-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
}
.pc-card p {
  margin: 8px 0 20px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.pc-f {
  display: block;
  margin-bottom: 14px;
  text-align: left;
}
.pc-f > span {
  display: block;
  margin-bottom: 6px;
  font-family: Montserrat, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pc-f input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-2);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.pc-f input:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
}
.pc-tel {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.pc-tel i {
  display: grid;
  place-items: center;
  padding: 0 13px;
  border-radius: 14px;
  background: rgba(37, 211, 102, 0.14);
  font-style: normal;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  color: #15803d;
}
.pc-error {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--coral-dark);
}
/* display:block le gana al atributo hidden, hay que apagarlo a mano. */
.pc-error[hidden] {
  display: none;
}
.pc-go {
  width: 100%;
  margin-top: 6px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #2fd16c, #12a150);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.pc-go:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.pc-skip {
  margin-top: 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pc-skip:hover {
  color: var(--navy);
}