/* ═══════════════════════════════════════════════════════════════════════
   TOMANA — ESTRUCTURA
   Solo disposición y comportamiento. Ni un color ni un tamaño literal:
   todo sale de tokens.css. Normalmente no hace falta tocar este archivo.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Red de seguridad contra desbordes laterales. Se usa 'clip' y no 'hidden'
   a propósito: 'hidden' crea un contenedor de scroll y rompe el
   position:sticky de la cabecera. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-tinta);
  font-family: var(--f-texto);
  font-size: var(--t-md);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  line-height: var(--lh-apretado);
  letter-spacing: var(--track-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* Sin esto, una animación infinita (la deriva del héroe) seguiría
       repintando a 0.01ms por ciclo: peor que no desactivarla. */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilidades ------------------------------------------------------------ */

.caja {
  width: 100%;
  max-width: var(--ancho-caja);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px; top: var(--e-2); z-index: 100;
  background: var(--c-acento); color: var(--c-acento-texto);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
}
.saltar:focus { left: var(--e-4); }

.trampa { position: absolute; left: -9999px; }

.seccion { padding-block: var(--e-seccion); }
.seccion + .seccion { padding-top: 0; }

.seccion__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-6);
}

.eyebrow {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--c-tinta-tenue);
  font-weight: var(--peso-medio); margin-bottom: var(--e-3);
}

.titulo-pag { font-size: var(--t-3xl); }
.titulo-sec { font-size: var(--t-xl); }

.sub {
  color: var(--c-tinta-suave);
  max-width: var(--ancho-texto);
  margin-top: var(--e-4);
}

.enlace-mas {
  font-size: var(--t-sm); color: var(--c-tinta-suave);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  text-decoration: none; border-bottom: 1px solid var(--c-borde-fuerte);
  padding-bottom: 2px; transition: color var(--trans-rapida);
}
.enlace-mas:hover { color: var(--c-tinta); }

/* Botones --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio);
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: var(--e-3) var(--e-6);
  border-radius: var(--r-full); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--trans-rapida), color var(--trans-rapida),
              border-color var(--trans-rapida);
}

.btn--pri { background: var(--c-acento); color: var(--c-acento-texto); }
.btn--pri:hover { background: var(--c-acento-hover); }

.btn--sec {
  background: transparent; color: var(--c-tinta);
  border-color: var(--c-borde-fuerte);
}
.btn--sec:hover { border-color: var(--c-tinta); }

.btn--mini { padding: var(--e-2) var(--e-3); font-size: var(--t-xs);
             background: transparent; border-color: var(--c-borde); }
.btn--mini:hover { border-color: var(--c-tinta); }

.btn--quitar {
  background: none; border: 0; padding: var(--e-2);
  color: var(--c-tinta-tenue); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.btn--quitar:hover { color: var(--c-error); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Avisos ---------------------------------------------------------------- */

.aviso {
  padding: var(--e-4) var(--e-5); border-radius: var(--r-md);
  font-size: var(--t-base); margin-block: var(--e-4);
}
.aviso--ok    { background: var(--c-exito-fondo); color: var(--c-exito); }
.aviso--error { background: var(--c-error-fondo); color: var(--c-error); }
.aviso--gris  { background: var(--c-superficie-alt); color: var(--c-tinta-suave); }

/* Barra superior y cabecera --------------------------------------------- */

.barra-sup {
  background: var(--c-acento); color: var(--c-acento-texto);
  font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
.barra-sup__in {
  display: flex; justify-content: center; gap: var(--e-5);
  padding-block: var(--e-2); text-align: center;
}
.barra-sup__sep { display: none; }
@media (min-width: 760px) { .barra-sup__sep { display: inline; } }

.cab {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-superficie);
  border-bottom: var(--borde);
}

.cab__in {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--e-3);
  min-height: 72px;
}

/* Cada elemento con su celda explícita: sin esto el carrito se auto-coloca
   en la siguiente fila libre y aparece suelto bajo el logo. */
.cab__logo    { grid-column: 1; grid-row: 1; }
.cab__carrito { grid-column: 3; grid-row: 1; }
.cab__menu    { grid-column: 4; grid-row: 1; }

.cab__logo { display: flex; align-items: center; text-decoration: none; }
.cab__logo img { width: auto; max-height: 40px; }
.cab__logo strong {
  font-family: var(--f-display); font-size: var(--t-lg);
  letter-spacing: 0.16em; text-transform: uppercase;
}

.cab__menu {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px; padding: 0 8px;
  background: none; border: 0; cursor: pointer;
}
.cab__menu span { display: block; height: 1.5px; background: var(--c-tinta); }

.nav { grid-column: 1 / -1; grid-row: 2; display: none; }
.nav[data-abierto="true"] { display: block; }

.nav__lista {
  list-style: none; margin: 0; padding: 0 0 var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-1);
}
.nav__lista a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) 0;
  text-decoration: none; font-size: var(--t-base);
  color: var(--c-tinta-suave); transition: color var(--trans-rapida);
}
.nav__lista a:hover, .nav__lista a[aria-current="page"] { color: var(--c-tinta); }

/* El icono se atenúa en reposo para que la fila de texto siga mandando;
   al pasar o en la página activa recupera el color pleno. */
.nav__ico {
  width: 26px; height: 26px; flex: none;
  opacity: .55;
  transition: opacity var(--trans-rapida);
}
.nav__lista a:hover .nav__ico,
.nav__lista a[aria-current="page"] .nav__ico { opacity: 1; }

.cab__carrito {
  position: relative; display: inline-flex; align-items: center;
  justify-self: end; padding: var(--e-2); text-decoration: none;
  color: var(--c-tinta);
}
.cab__badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--c-acento); color: var(--c-acento-texto);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: var(--peso-fuerte); line-height: 1;
}

@media (min-width: 900px) {
  .cab__in { grid-template-columns: auto 1fr auto; }
  .cab__menu { display: none; }
  .nav { display: block; grid-column: 2; grid-row: 1; }
  .nav__lista {
    flex-direction: row; justify-content: center;
    gap: var(--e-5); padding: 0;
  }
  .nav__lista a {
    flex-direction: column; gap: var(--e-2);
    padding: 0; font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: center;
  }
  .nav__ico { width: 22px; height: 22px; }
}

/* Hero con video de fondo -----------------------------------------------
   El clip va en bucle, mudo y sin controles: es decoración, no contenido.
   Encima lleva un velo en degradado para que el titular mantenga contraste
   pase lo que pase en la imagen. El <video> nunca es el único portador de
   información: si no carga, queda el póster.                              */

.hero {
  position: relative;
  display: grid;
  isolation: isolate;
  background: var(--c-tinta);
  min-height: clamp(460px, 64vh, 720px);
  /* IMPRESCINDIBLE: la deriva del fondo escala el video a 1.1, y ese 10%
     sobrante se derramaría sobre la sección de abajo y crearía scroll
     horizontal. Aquí se recorta. */
  overflow: hidden;
}

.hero__media,
.hero__velo,
.hero__in { grid-area: 1 / 1; }

/* Cada diapositiva ocupa la misma celda que las demás y trae su propia
   foto, velo y texto. Sin JavaScript solo existe la primera: las demás
   llegan con [hidden]. */
.hero__diapo {
  grid-area: 1 / 1;
  display: grid;
  min-width: 0;
}

.hero__media {
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Doble velo: uno vertical para el pie y otro lateral para el bloque de
   texto. Con dos degradados suaves el contraste aguanta sin ensuciar la
   imagen con una capa plana. */
.hero__velo {
  z-index: 1;
  background:
    linear-gradient(to right,  rgba(13,34,51,.88) 0%, rgba(13,34,51,.62) 42%, rgba(13,34,51,.18) 72%, rgba(13,34,51,.05) 100%),
    linear-gradient(to top,    rgba(13,34,51,.55) 0%, rgba(13,34,51,0) 45%);
}

.hero__in {
  z-index: 2;
  align-self: center;
  max-width: 44rem;
  padding-block: var(--e-8);
  color: #fff;
}

.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero h1 { font-size: var(--t-3xl); color: #fff; }
.hero p  { margin-top: var(--e-5); font-size: var(--t-lg); color: rgba(255,255,255,.86); max-width: 38ch; }
.hero__acciones { margin-top: var(--e-6); display: flex; gap: var(--e-3); flex-wrap: wrap; }

.hero .btn--pri { background: #fff; color: var(--c-tinta); }
.hero .btn--pri:hover { background: rgba(255,255,255,.88); }
.hero .btn--sec { color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn--sec:hover { border-color: #fff; }

/* Franja de reacciones ---------------------------------------------------
   Clips verticales 9:16 en scroll horizontal. Solo se reproducen los que
   están en pantalla: lo gobierna un IntersectionObserver en app.js.        */

.reacciones {
  background: var(--c-tinta); color: #fff;
  padding-block: var(--e-seccion);
  /* .tira sangra con márgenes negativos hasta el borde; sin este recorte
     esa sangría se convierte en scroll horizontal del documento. */
  overflow: hidden;
}
.reacciones .eyebrow { color: rgba(255,255,255,.6); }
.reacciones h2 { color: #fff; }
.reacciones .sub { color: rgba(255,255,255,.75); }
.reacciones .enlace-mas { color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.35); }
.reacciones .enlace-mas:hover { color: #fff; }

/* Cabecera de la sección, con la llamada a Instagram al lado */
.reacciones__cab {
  display: grid; gap: var(--e-5); margin-bottom: var(--e-6);
}
@media (min-width: 900px) {
  .reacciones__cab { grid-template-columns: 1fr auto; align-items: end; gap: var(--e-8); }
}

.ig {
  display: flex; align-items: start; gap: var(--e-3);
  max-width: 44ch;
  font-size: var(--t-base);
  color: rgba(255,255,255,.78);
  border-left: 2px solid var(--c-marca);
  padding-left: var(--e-4);
}
.ig__logo { flex: none; color: var(--c-marca); margin-top: 2px; }
.ig b { color: #fff; font-weight: var(--peso-medio); white-space: nowrap; }

/* Carrusel infinito ------------------------------------------------------
   La pista lleva la lista de clips DUPLICADA y se desplaza hasta -50%:
   al llegar, el primer duplicado está exactamente donde empezó el original,
   así que el salto de vuelta es invisible.

   Los clips usan margin-right en lugar de gap a propósito: con gap el
   último elemento no lleva separación y ese -50% dejaría de caer en el
   punto exacto, provocando un tirón en cada vuelta. */

.carrusel { overflow: hidden; padding-block: var(--e-2) var(--e-4); }

.carrusel__pista {
  display: flex;
  width: max-content;
  animation: tm-desliza 72s linear infinite;
}

/* No se detiene con el mouse: para eso está el botón de pausa (.pausa). */
.carrusel--pausa .carrusel__pista { animation-play-state: paused; }

@keyframes tm-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.carrusel .clip {
  width: clamp(180px, 22vw, 240px);
  flex: none;
  margin-right: var(--e-4);
}

/* Sin movimiento: el carrusel se detiene y pasa a scroll manual. */
@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; }
  .carrusel__pista { animation: none; }
}

.clip {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 9 / 16;
}
.clip video, .clip img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--trans-media);
}
.clip:hover video, .clip:hover img { transform: scale(1.04); }

.clip__pie {
  position: absolute; inset: auto 0 0 0;
  padding: var(--e-5) var(--e-4) var(--e-4);
  background: linear-gradient(to top, rgba(13,34,51,.9), rgba(13,34,51,0));
  font-size: var(--t-sm);
  line-height: var(--lh-medio);
}
.clip__pie b { display: block; font-weight: var(--peso-medio); }
.clip__pie span { color: rgba(255,255,255,.7); font-size: var(--t-xs); }

/* Video de reacción en la ficha de producto */
.ficha__reaccion {
  margin-top: var(--e-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 16;
  max-width: 300px;
}
.ficha__reaccion video { width: 100%; height: 100%; object-fit: cover; }

/* Con movimiento reducido no se reproduce nada: se queda el póster. */
@media (prefers-reduced-motion: reduce) {
  .hero__media, .clip video, .ficha__reaccion video { display: none; }
  .hero__poster, .clip img { display: block; }
}

/* Franja de confianza justo bajo el héroe: da densidad sin ruido. */
.tiras-conf {
  background: var(--c-acento); color: var(--c-acento-texto);
  font-size: var(--t-sm);
}
.tiras-conf__in {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e-3) var(--e-7); padding-block: var(--e-4); text-align: center;
}
.tiras-conf span { display: inline-flex; align-items: center; gap: var(--e-2); }
.tiras-conf b { font-weight: var(--peso-fuerte); }

/* Banda promocional con imagen ancha (colecciones, temporadas) */
.promo {
  position: relative; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: #fff;
  box-shadow: var(--sombra-md);
}
.promo picture { display: block; }
.promo img { width: 100%; aspect-ratio: 1400 / 233; object-fit: cover; }

/* En móvil la banda 1400×254 se queda en unos 60 px de alto: el rótulo
   superpuesto no cabe y se saldría por arriba. Ahí entra el recorte 3:1 y
   el rótulo deja de flotar para apoyarse debajo, sobre fondo sólido. */
@media (max-width: 760px) {
  .promo img { aspect-ratio: 3 / 1; }
  .promo__cap {
    position: static;
    display: grid; justify-items: start; gap: var(--e-4);
    padding: var(--e-5);
    background: var(--c-tinta);
  }
}
.promo__cap {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-6);
  background: linear-gradient(to top, rgba(13,34,51,.82), rgba(13,34,51,0));
}
.promo__cap h3 { font-size: var(--t-xl); color: #fff; }
.promo__cap p  { color: rgba(255,255,255,.85); font-size: var(--t-base); margin-top: var(--e-1); }
.promo__cap .btn { background: #fff; color: var(--c-tinta); border-color: #fff; }

/* Bloque editorial: foto e idea, a dos columnas */
.editorial { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 860px) {
  .editorial { grid-template-columns: 1.2fr 1fr; gap: var(--e-8); }
  .editorial--invertido > :first-child { order: 2; }
}
.editorial img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sombra-sm); }
.editorial h2 { font-size: var(--t-2xl); }
.editorial p  { margin-top: var(--e-4); color: var(--c-tinta-suave); }

/* Pasos numerados */
.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--rejilla-hueco);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: paso;
}
.pasos li {
  counter-increment: paso;
  padding: var(--e-6);
  background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-lg);
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block; margin-bottom: var(--e-3);
  font-family: var(--f-display); font-size: var(--t-xl);
  font-weight: var(--peso-fuerte); color: var(--c-marca);
}
.pasos strong { display: block; margin-bottom: var(--e-2); }
.pasos span { color: var(--c-tinta-suave); font-size: var(--t-base); }

/* Rejilla de productos --------------------------------------------------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--rejilla-min), 1fr));
  gap: var(--rejilla-hueco);
}

.tarjeta { display: flex; flex-direction: column; }

.tarjeta__link { text-decoration: none; color: inherit; }

.tarjeta__img {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio-producto);
  background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-lg);
}
.tarjeta__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--trans-media);
}

.etiq {
  position: absolute; top: var(--e-3); left: var(--e-3);
  padding: 4px var(--e-3); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.etiq--rojo { background: var(--c-oferta); color: #fff; }
.etiq--gris { background: var(--c-superficie-alt); color: var(--c-tinta-suave); }

.tarjeta__nombre {
  font-size: var(--t-base); font-family: var(--f-texto);
  font-weight: var(--peso-medio); letter-spacing: 0;
  line-height: var(--lh-medio); margin-top: var(--e-4);
}

.tarjeta__precio { margin-top: var(--e-2); font-size: var(--t-base); }
.tarjeta__precio s { color: var(--c-tinta-tenue); margin-right: var(--e-2); }
.tarjeta .btn { margin-top: var(--e-4); align-self: start; }

.precio--consultar { color: var(--c-tinta-suave); font-style: italic; }

/* Categorías ------------------------------------------------------------- */


/* Ventajas --------------------------------------------------------------- */

.ventajas { background: var(--c-superficie-alt); }
.ventajas__in {
  display: grid; gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-block: var(--e-8);
}
.ventaja { display: flex; flex-direction: column; gap: var(--e-2); }
.ventaja strong { font-size: var(--t-base); }
.ventaja span { color: var(--c-tinta-suave); font-size: var(--t-base); }

/* Banner ancho ----------------------------------------------------------- */

.banner-ancho { width: 100%; border-radius: var(--r-lg); }

/* Migas ------------------------------------------------------------------ */

.miga { padding-block: var(--e-5) 0; font-size: var(--t-sm); color: var(--c-tinta-tenue); }
.miga a { color: var(--c-tinta-suave); text-decoration: none; }
.miga a:hover { color: var(--c-tinta); text-decoration: underline; }

/* Ficha de producto ------------------------------------------------------ */

.ficha {
  display: grid; gap: var(--e-7);
  padding-block: var(--e-seccion);
}
@media (min-width: 900px) {
  .ficha { grid-template-columns: 1.15fr 1fr; gap: var(--e-9); align-items: start; }
  .ficha__info { position: sticky; top: 104px; }
}

.ficha__principal {
  width: 100%; aspect-ratio: var(--ratio-producto); object-fit: cover;
  background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-lg);
}

.ficha__minis {
  list-style: none; margin: var(--e-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--e-3);
}
.mini {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--trans-rapida);
}
.mini img { aspect-ratio: var(--ratio-producto); object-fit: cover; }
.mini:hover { border-color: var(--c-borde-fuerte); }
.mini--on { border-color: var(--c-tinta); }

.ficha__video { width: 100%; margin-top: var(--e-4); border-radius: var(--r-lg); }

.ficha__cat {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--c-tinta-tenue);
}
.ficha__nombre { font-size: var(--t-2xl); margin-top: var(--e-3); }
.ficha__precio { margin-top: var(--e-5); font-size: var(--t-lg); }
.ficha__precio s { color: var(--c-tinta-tenue); margin-right: var(--e-2); font-size: var(--t-base); }
.ficha__desc { margin-top: var(--e-4); color: var(--c-tinta-suave); max-width: var(--ancho-texto); }

.ficha__form {
  margin-top: var(--e-6); padding-top: var(--e-6);
  border-top: var(--borde);
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-4);
}
.ficha__form label { display: block; font-size: var(--t-sm); color: var(--c-tinta-suave); margin-bottom: var(--e-2); }
.ficha__form input[type=number] { width: 88px; }
.ficha__form .btn { flex: 1 1 200px; }

.ficha__puntos {
  list-style: none; margin: var(--e-6) 0 0; padding: var(--e-5) 0 0;
  border-top: var(--borde);
  display: flex; flex-direction: column; gap: var(--e-2);
  font-size: var(--t-base); color: var(--c-tinta-suave);
}

/* Formularios ------------------------------------------------------------ */

input[type=text], input[type=email], input[type=tel],
input[type=number], textarea, select {
  width: 100%; padding: var(--e-3) var(--e-4);
  font: inherit; font-size: var(--t-base);
  color: var(--c-tinta); background: var(--c-superficie);
  border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-md);
  transition: border-color var(--trans-rapida);
}
input:focus, textarea:focus, select:focus { border-color: var(--c-tinta); outline-offset: 1px; }
textarea { min-height: 8rem; resize: vertical; }

.campo { margin-bottom: var(--e-5); }
.campo label { display: block; font-size: var(--t-sm); font-weight: var(--peso-medio); margin-bottom: var(--e-2); }
.campo small { display: block; margin-top: var(--e-2); color: var(--c-tinta-tenue); font-size: var(--t-xs); }

.campos-2 { display: grid; gap: var(--e-4); }
@media (min-width: 640px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

/* Carrito ---------------------------------------------------------------- */

.tabla-carrito { width: 100%; border-collapse: collapse; margin-top: var(--e-6); }
.tabla-carrito th {
  text-align: left; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--c-tinta-tenue);
  font-weight: var(--peso-medio); padding-bottom: var(--e-3);
  border-bottom: var(--borde);
}
.tabla-carrito td { padding-block: var(--e-5); border-bottom: var(--borde); vertical-align: middle; }

.linea { display: flex; align-items: center; gap: var(--e-4); text-decoration: none; }
.linea img { width: 70px; border-radius: var(--r-md); border: var(--borde); }

.form-cant { display: flex; align-items: center; gap: var(--e-2); }
.form-cant input { width: 72px; }

@media (max-width: 760px) {
  .tabla-carrito thead { display: none; }
  .tabla-carrito tr { display: grid; gap: var(--e-3); padding-block: var(--e-5); border-bottom: var(--borde); }
  .tabla-carrito td { border: 0; padding: 0; display: flex; justify-content: space-between; gap: var(--e-4); }
  .tabla-carrito td::before {
    content: attr(data-th); color: var(--c-tinta-tenue); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  }
  .tabla-carrito td:first-child::before { display: none; }
}

.resumen {
  display: grid; gap: var(--e-6); margin-top: var(--e-7);
  padding: var(--e-6); background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-lg);
}
@media (min-width: 760px) { .resumen { grid-template-columns: 1fr auto; align-items: start; } }
.resumen__cifras p { display: flex; justify-content: space-between; gap: var(--e-6); padding-block: var(--e-2); }
.resumen__cifras p span { color: var(--c-tinta-suave); }
.resumen__nota { display: block !important; color: var(--c-tinta-tenue); font-size: var(--t-sm); margin-top: var(--e-3); }
.resumen__acciones { display: flex; flex-direction: column; gap: var(--e-3); align-items: stretch; }

/* Checkout --------------------------------------------------------------- */

.checkout { display: grid; gap: var(--e-7); padding-block: var(--e-seccion); }
@media (min-width: 900px) { .checkout { grid-template-columns: 1.35fr 1fr; gap: var(--e-9); align-items: start; } }

.panel {
  padding: var(--e-6); background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-lg);
}
@media (min-width: 900px) { .panel--pegado { position: sticky; top: 104px; } }

.panel h2 { font-size: var(--t-lg); margin-bottom: var(--e-5); }

.mini-linea {
  display: flex; gap: var(--e-4); align-items: center;
  padding-block: var(--e-3); border-bottom: var(--borde);
}
.mini-linea:last-of-type { border-bottom: 0; }
.mini-linea img { width: 54px; border-radius: var(--r-sm); border: var(--borde); }
.mini-linea__txt { flex: 1; font-size: var(--t-base); }
.mini-linea__txt small { display: block; color: var(--c-tinta-tenue); font-size: var(--t-xs); }

/* Boletín ---------------------------------------------------------------- */

.boletin { background: var(--c-superficie-alt); margin-top: var(--e-seccion); }
.boletin__in {
  display: grid; gap: var(--e-6); padding-block: var(--e-8); align-items: center;
}
@media (min-width: 860px) { .boletin__in { grid-template-columns: 1fr 1fr; gap: var(--e-9); } }
.boletin h2 { font-size: var(--t-xl); }
.boletin p { margin-top: var(--e-3); color: var(--c-tinta-suave); }
.boletin__form { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.boletin__form input { flex: 1 1 240px; }

/* Pie -------------------------------------------------------------------- */

.pie { border-top: var(--borde); margin-top: var(--e-seccion); background: var(--c-superficie); }
.pie__cols {
  display: grid; gap: var(--e-7); padding-block: var(--e-8);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pie h3 {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); font-family: var(--f-texto);
  font-weight: var(--peso-medio); margin-bottom: var(--e-4);
}
.pie p { color: var(--c-tinta-suave); font-size: var(--t-base); max-width: 34ch; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.pie ul a { color: var(--c-tinta-suave); text-decoration: none; font-size: var(--t-base); }
.pie ul a:hover { color: var(--c-tinta); text-decoration: underline; }
.pie__legal {
  padding-block: var(--e-5); border-top: var(--borde);
  color: var(--c-tinta-tenue); font-size: var(--t-sm);
}

/* Error / vacío ----------------------------------------------------------- */

.estado-vacio { padding-block: var(--e-9); text-align: center; }
.estado-vacio .code {
  font-family: var(--f-display); font-size: var(--t-3xl);
  color: var(--c-tinta-tenue); margin-bottom: var(--e-3);
}

/* Utilidades ------------------------------------------------------------
   Existen para que ninguna plantilla necesite atributos style="", que la
   Content-Security-Policy bloquea (style-src 'self', sin unsafe-inline).  */

.centrado     { margin-inline: auto; }
.mt-6         { margin-top: var(--e-6); }
.medida       { max-width: var(--ancho-texto); }
.col-estrecha { max-width: 52rem; }
.nota-sm      { font-size: var(--t-sm); }
.campo--corto { max-width: 220px; }

.titulo-bloque { margin: var(--e-7) 0 var(--e-5); }

.resumen__cifras--total {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: var(--borde);
}


/* ═══════════════════════════════════════════════════════════════════
   TOMANA — CAPA DE MOVIMIENTO (añadir al final de app.css)
   Solo CSS: sin scripts, sin tocar PHP. Todo respeta
   prefers-reduced-motion mediante el bloque que ya existe en app.css.
   ═══════════════════════════════════════════════════════════════════ */

/* Transición entre páginas (navegación real, sin JS) */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: tm-sale var(--trans-rapida) both; }
::view-transition-new(root) { animation: tm-entra var(--trans-media) both; }

@keyframes tm-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes tm-sale  { to   { opacity: 0; transform: translateY(-8px); } }

/* Deriva lenta de la foto del héroe: la imagen manda, el movimiento no se nota */
.hero__media {
  animation: tm-deriva 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes tm-deriva { from { transform: scale(1.04); } to { transform: scale(1.1) translate3d(-1.2%, -1%, 0); } }

/* Tarjeta de producto: la foto respira, el nombre se subraya */
.tarjeta__img img { transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter var(--trans-media); }
.tarjeta__link:hover .tarjeta__img img { transform: scale(1.12); }
.tarjeta__img::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-tinta); opacity: 0;
  transition: opacity var(--trans-media); pointer-events: none;
}
.tarjeta__link:hover .tarjeta__img::after { opacity: .04; }

.tarjeta__nombre { position: relative; display: inline; background-repeat: no-repeat;
  background-image: linear-gradient(var(--c-tinta), var(--c-tinta));
  background-size: 0% 1px; background-position: 0 100%;
  transition: background-size var(--trans-media); }
.tarjeta__link:hover .tarjeta__nombre { background-size: 100% 1px; }

/* Botón principal: el bermellón entra desde abajo */
.btn--pri { position: relative; overflow: hidden; z-index: 0; }
.btn--pri::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-oferta);
  transform: translateY(101%);
  transition: transform var(--trans-media);
}
.btn--pri:hover::before, .btn--pri:focus-visible::before { transform: none; }
.btn--pri:hover { background: var(--c-acento); }

/* Categorías: el icono sube antes que la tarjeta */
/* Enlaces de texto y navegación: subrayado que crece */
.enlace-mas, .nav__lista a { background-repeat: no-repeat;
  background-image: linear-gradient(var(--c-oferta), var(--c-oferta));
  background-size: 0% 1px; background-position: 0 100%;
  transition: background-size var(--trans-media), color var(--trans-rapida); }
.enlace-mas:hover, .nav__lista a:hover { background-size: 100% 1px; }

/* Clases nuevas de utilidad, por si la plantilla las necesita más adelante */
.tm-señal { color: var(--c-oferta); }
.tm-aire  { padding-block: var(--e-9); }

/* La banda promocional con video usa 16:9, no la proporción del banner
   estático que sustituye. */
.promo__media {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  display: block;
}

/* Dos fondos de héroe: horizontal en escritorio, vertical en móvil.
   El que no aplica va con display:none, así nunca intersecta y el
   observer no llega a descargarlo. Solo se baja un video. */
.hero__media--alto  { display: none; }
@media (max-width: 760px) {
  .hero__media--ancho { display: none; }
  .hero__media--alto  { display: block; }
}

/* Número de ranking en la tarjeta ---------------------------------------
   Va sobre la imagen, abajo a la izquierda. Se marca aria-hidden y el
   número se repite en el <h3> para lectores de pantalla, así no se lee
   como una cifra suelta sin contexto. */
.rank {
  position: absolute;
  left: var(--e-3); bottom: var(--e-3);
  min-width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  padding: 0 .4rem;
  background: var(--c-tinta); color: #fff;
  border-radius: var(--r-full);
  font-family: var(--f-display);
  font-size: var(--t-base); font-weight: var(--peso-fuerte);
  line-height: 1; font-variant-numeric: tabular-nums;
}
/* Los tres primeros se distinguen del resto. */
.rank--podio { background: var(--c-marca); }

/* Banda a todo el ancho (playeras de pareja) ----------------------------
   La imagen conserva su proporción hasta 1500 px; a partir de ahí se
   recorta en alto para que no se coma la pantalla en monitores anchos. */
.banda { display: block; line-height: 0; }
.banda picture { display: block; }
.banda img { width: 100%; height: auto; display: block; }
@media (min-width: 1500px) {
  .banda img { height: 360px; object-fit: cover; object-position: center; }
}
.banda__cab { margin-top: var(--e-7); }

/* Rejilla forzada a 3 columnas en escritorio */
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(var(--rejilla-min), 1fr)); }
@media (min-width: 900px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

/* Bloque "próximamente" -------------------------------------------------
   Sin imagen a propósito: la colección todavía no existe y una foto
   inventada prometería algo que no hay. */
.proximo {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  text-align: center;
  border: 1px dashed var(--c-borde-fuerte);
  border-radius: var(--r-lg);
  background: var(--c-superficie);
}
.proximo__etiqueta {
  display: inline-block;
  padding: .3rem .8rem; margin-bottom: var(--e-4);
  background: var(--c-oferta); color: #fff;
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.proximo h2 { font-size: var(--t-2xl); }
.proximo p { margin: var(--e-4) auto 0; max-width: 52ch; color: var(--c-tinta-suave); }
.proximo .btn { margin-top: var(--e-6); }

/* El antetítulo dentro de la banda promocional va sobre fondo oscuro */
.promo__cap .eyebrow { color: rgba(255,255,255,.7); margin-bottom: var(--e-2); }


/* Tallas en la ficha y en el carrito ------------------------------------
   .ficha__form es una fila flex: dentro de ella los campos no llevan margen
   propio, el hueco lo pone el gap. La nota del juego de dos y el botón
   ocupan el ancho completo para que la fila no quede coja. */
.ficha__form .campo { margin-bottom: 0; }
.campo--talla { flex: 1 1 180px; }
.campo--talla select { width: 100%; }
.ficha__form .nota-sm { flex: 1 1 100%; margin: 0; }
.linea__talla {
  display: block; margin-top: 2px;
  color: var(--c-tinta-tenue); font-size: var(--t-xs);
}

/* Filtro por destinatario ----------------------------------------------
   Son enlaces, no botones: funcionan sin JavaScript, se pueden compartir y
   el navegador los trata como navegación de verdad. */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin: var(--e-5) 0 var(--e-4);
}
.filtro {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-full);
  color: var(--c-tinta-suave);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida), color var(--trans-rapida);
}
.filtro:hover { border-color: var(--c-tinta); color: var(--c-tinta); }
.filtro--on {
  background: var(--c-tinta); border-color: var(--c-tinta); color: #fff;
}
.filtro__n {
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
  color: var(--c-tinta-tenue);
}
.filtro--on .filtro__n { color: rgba(255,255,255,.65); }


/* Total del pedido: se separa del subtotal para que no se confundan. */
.resumen__total {
  margin-top: var(--e-2); padding-top: var(--e-3);
  border-top: var(--borde);
  font-size: var(--t-lg);
}
.resumen__total strong { font-family: var(--f-display); font-weight: var(--peso-fuerte); }

/* Compartir producto ----------------------------------------------------- */
.compartir { margin-top: var(--e-5); }
.compartir__btn { display: inline-flex; align-items: center; gap: var(--e-2); }
.compartir__pie {
  margin: 0;
  color: var(--c-tinta-tenue); font-size: var(--t-xs);
}
.compartir--ok .compartir__btn {
  border-color: var(--c-exito); color: var(--c-exito);
}

/* Calculadora de envío --------------------------------------------------
   Es un formulario GET con enlaces: funciona sin JavaScript, el resultado
   se puede compartir y el botón de atrás hace lo que debe. */
.calc {
  margin-top: var(--e-6);
  padding: var(--e-5);
  border: var(--borde); border-radius: var(--r-lg);
  background: var(--c-superficie);
}
.calc--compacta { margin-top: var(--e-5); padding: var(--e-4); }
.calc__form label {
  display: block; font-size: var(--t-sm);
  font-weight: var(--peso-medio); margin-bottom: var(--e-2);
}
.calc__fila { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.calc__fila input { flex: 1 1 160px; min-width: 0; }
.calc__fila .btn { flex: 0 0 auto; }
.calc__aviso { margin-top: var(--e-2); color: var(--c-error); font-size: var(--t-sm); }
.calc__zona {
  margin-top: var(--e-4);
  color: var(--c-tinta-tenue); font-size: var(--t-xs);
}

.calc__ops { list-style: none; margin: var(--e-3) 0 0; padding: 0; }
.calc__op {
  display: grid; gap: var(--e-1);
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: var(--e-3);
  border: 1px solid transparent; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background-color var(--trans-rapida), border-color var(--trans-rapida);
}
.calc__op:hover { background: var(--c-realce); }
.calc__op--on { border-color: var(--c-acento); background: var(--c-realce); }
.calc__op-nombre { font-weight: var(--peso-medio); font-size: var(--t-base); }
.calc__op-nombre small {
  display: block; font-weight: var(--peso-normal);
  color: var(--c-tinta-tenue); font-size: var(--t-xs);
}
.calc__op-costo { text-align: right; font-variant-numeric: tabular-nums; }
.calc__op-fecha {
  grid-column: 1 / -1;
  color: var(--c-tinta-suave); font-size: var(--t-sm);
}
.calc__gratis {
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: var(--borde);
  font-size: var(--t-sm); color: var(--c-tinta-suave);
}

/* Lista simple para páginas de texto */
.lista-simple { list-style: none; margin: var(--e-4) 0 0; padding: 0; }
.lista-simple li { padding: var(--e-3) 0; border-bottom: var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }

/* Acciones de compartir: botón nativo y enlace directo a WhatsApp. */
.compartir__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }
.compartir__wa { display: inline-flex; align-items: center; gap: var(--e-2); }
.compartir__wa[hidden] { display: none; }

/* Hero en carrusel ------------------------------------------------------
   app.js quita el [hidden] de todas las diapositivas y alterna la clase
   --on: así el cambio es un fundido y no un salto. Las que no se ven
   quedan con visibility:hidden para que el teclado y los lectores de
   pantalla no entren en sus enlaces.                                     */

.hero--carrusel .hero__diapo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease, visibility 0s linear 800ms;
}
.hero--carrusel .hero__diapo--on {
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms ease, visibility 0s;
  z-index: 1;
}
/* Deja aire abajo para que los controles no pisen los botones. */
.hero--carrusel .hero__in { padding-bottom: calc(var(--e-8) + 2.75rem); }

.hero__titulo { font-size: var(--t-3xl); color: #fff; }
.hero .hero__sello {
  display: inline-block;
  padding: .3em .8em;
  border-radius: 999px;
  background: #f28c0f;          /* cempasúchil */
  color: var(--c-tinta);
  font-weight: var(--peso-fuerte);
}

.hero__controles {
  position: absolute;
  inset: auto 0 var(--e-5) 0;
  z-index: 3;
  display: flex; align-items: center; gap: var(--e-4);
}
.hero__controles[hidden] { display: none; }

.hero__puntos { display: flex; gap: var(--e-2); }
.hero__punto {
  width: 10px; height: 10px; padding: 0;
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--trans-rapida), transform var(--trans-rapida);
}
.hero__punto[aria-current="true"] { background: #fff; transform: scale(1.15); }
.hero__punto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Botón de pausa, compartido por los dos carruseles (ambos van sobre fondo
   oscuro). El icono se dibuja con bordes: dos barras o un triángulo. */
.pausa {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: .45rem .9rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(13,34,51,.45);
  color: #fff;
  font: inherit; font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida);
}
.pausa:hover { border-color: #fff; background: rgba(13,34,51,.7); }
.pausa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pausa__ico {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.pausa[aria-pressed="true"] .pausa__ico {
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.carrusel__pie { display: flex; justify-content: flex-end; }
.carrusel__pie[hidden] { display: none; }

/* El aviso de Instagram ahora es un enlace: que se note al pasar. */
a.ig { text-decoration: none; transition: color var(--trans-rapida), border-color var(--trans-rapida); }
a.ig:hover, a.ig:focus-visible { color: #fff; border-left-color: #fff; }
a.ig:hover b, a.ig:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }

.hero__diapo[hidden] { display: none; }

/* Con movimiento reducido el bloque de arriba esconde .hero__media porque
   pensaba en el video. Las fotos fijas sí se quedan. */
@media (prefers-reduced-motion: reduce) {
  .hero--carrusel .hero__diapo,
  .hero--carrusel .hero__diapo--on { transition: none; }
  img.hero__media { display: block; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  img.hero__media--ancho { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  img.hero__media--alto { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVEGAR COMO DELEITE (27/09/2026)
   Detalles pequeños que hacen que la página responda: nada se mueve solo
   ni tapa el contenido; todo contesta a lo que hace quien navega.
   ═══════════════════════════════════════════════════════════════════ */

/* Los enlaces a #ancla bajan suave y no quedan tapados por la cabecera. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

::selection { background: var(--c-marca); color: #fff; }

/* En celular el recuadro gris del toque sobra: cada control ya tiene su
   propio estado. */
a, button, .btn { -webkit-tap-highlight-color: transparent; }

/* Botones que se sienten al apretar. */
.btn, .pausa, .filtro, .mini { transition-property: background, color, border-color, transform, box-shadow; }
.btn:active, .pausa:active, .filtro:active { transform: scale(.97); }

/* Cabecera: al bajar gana una sombra suave para separarse del contenido. */
.cab { transition: box-shadow var(--trans-media); }
.cab--sombra { box-shadow: 0 6px 20px -12px rgba(13,34,51,.35); }

/* Menú del celular: entra deslizándose en vez de aparecer de golpe. */
@keyframes tm-menu { from { opacity: 0; transform: translateY(-6px); } }
.nav[data-abierto="true"] { animation: tm-menu 220ms ease-out; }

/* Tarjeta: además del zoom, la caja se eleva con una sombra suave. Solo en
   dispositivos con mouse: en táctil no hay hover. */
.tarjeta__img { transition: box-shadow var(--trans-media), border-color var(--trans-media); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta__link:hover .tarjeta__img {
    box-shadow: 0 14px 30px -18px rgba(13,34,51,.45);
    border-color: var(--c-borde-fuerte);
  }
}

/* Ficha: la foto grande vive en un marco que recorta la lupa. */
.ficha__lupa {
  position: relative; overflow: hidden;
  background: var(--c-superficie);
  border: var(--borde); border-radius: var(--r-lg);
  touch-action: pan-y;         /* el deslizamiento lateral lo toma app.js */
}
.ficha__lupa .ficha__principal {
  border: 0; border-radius: 0;
  transition: opacity 260ms ease, transform 180ms ease-out;
}
.ficha__principal--cambia { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .ficha__lupa { cursor: zoom-in; }
  .ficha__lupa--activa .ficha__principal { transform: scale(2); }
}
.mini { transition: border-color var(--trans-rapida), transform var(--trans-rapida); }
@media (hover: hover) and (pointer: fine) {
  .mini:hover { transform: translateY(-2px); }
}

/* ═══════════════════════════════════════════════════════════════════
   LAS OCHO ANIMACIONES QUE ELIGIÓ EL DUEÑO (27/09/2026)
   Todas contestan a algo que hace quien navega; ninguna tapa contenido.
   Con movimiento reducido, el bloque general de arriba las deja en 0.01ms.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Agregar al carrito: el botón se vuelve palomita y la bolsa brinca. */
.btn--hecho, .btn--hecho:hover { background: var(--c-exito); color: #fff; }
.btn--hecho::before { display: none; }
.btn__palomita {
  width: 16px; height: 16px; flex: none;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: tm-palomita 380ms 80ms ease-out forwards;
}
@keyframes tm-palomita { to { stroke-dashoffset: 0; } }
.btn--cargando { opacity: .75; pointer-events: none; }

@keyframes tm-rebote {
  0% { transform: scale(1); } 35% { transform: scale(1.55); }
  60% { transform: scale(.9); } 100% { transform: scale(1); }
}
.cab__badge--rebote { animation: tm-rebote 520ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tm-sacude { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } }
.cab__carrito--sacude svg { animation: tm-sacude 420ms ease-in-out; }

/* 2. Menú de celular: las tres rayitas se vuelven X. */
.cab__menu { position: relative; }
.cab__menu span { transition: transform 280ms ease, opacity 180ms ease; transform-origin: center; }
.cab__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cab__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.cab__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 3. Onda al tocar un botón, desde el punto exacto del toque. */
.btn, .pausa { position: relative; overflow: hidden; isolation: isolate; }
.onda {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: .28;
  transform: scale(0); pointer-events: none;
  animation: tm-onda 600ms ease-out forwards;
}
@keyframes tm-onda { to { transform: scale(2.6); opacity: 0; } }

/* 4. Confeti: una sola ráfaga en la página de gracias. */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confeti i {
  position: absolute; top: -12px;
  width: 8px; height: 12px; border-radius: 2px;
  animation: tm-confeti linear forwards;
}
@keyframes tm-confeti {
  to { transform: translate3d(var(--dx), 105vh, 0) rotate(var(--giro)); }
}

/* 6. Volver arriba: aparece cuando ya bajaste bastante. */
.arriba {
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-superficie); color: var(--c-tinta);
  border: 1px solid var(--c-borde-fuerte);
  box-shadow: 0 10px 24px -14px rgba(13,34,51,.5);
  cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.3, 1.4, .5, 1), border-color var(--trans-rapida);
}
.arriba--visible { opacity: 1; transform: none; pointer-events: auto; }
.arriba:hover { border-color: var(--c-tinta); }
.arriba svg { width: 20px; height: 20px; }

/* 7. Esqueleto: mientras la foto no llega, su lugar brilla suave. app.js
   pone --cargando solo en las que faltan y lo quita al cargar, así la
   animación no corre detrás de fotos ya listas. */
.tarjeta__img--cargando, .ficha__lupa--cargando {
  background: linear-gradient(100deg, var(--c-superficie-alt) 30%, var(--c-superficie) 50%, var(--c-superficie-alt) 70%);
  background-size: 250% 100%;
  animation: tm-brillo 1.3s linear infinite;
}
@keyframes tm-brillo { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* 8. Aviso flotante: sube desde abajo y se va solo. */
.aviso-flota {
  position: fixed; left: 50%; bottom: var(--e-5); z-index: 80;
  display: flex; align-items: center; gap: var(--e-4);
  max-width: calc(100vw - 2 * var(--e-4));
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  background: var(--c-tinta); color: #fff;
  border-radius: var(--r-full);
  box-shadow: 0 16px 34px -16px rgba(13,34,51,.65);
  font-size: var(--t-sm);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform 420ms cubic-bezier(.3, 1.4, .5, 1), opacity 260ms ease;
}
.aviso-flota--visible { transform: translate(-50%, 0); opacity: 1; }
.aviso-flota--error { background: var(--c-error); }
.aviso-flota a {
  color: #fff; font-weight: var(--peso-medio); white-space: nowrap;
  padding: var(--e-2) var(--e-4); border-radius: var(--r-full);
  background: rgba(255,255,255,.14); text-decoration: none;
}
.aviso-flota a:hover { background: rgba(255,255,255,.24); }
/* Si el aviso está arriba, el botón de volver arriba se hace a un lado. */
.aviso-flota--visible ~ .arriba { transform: translateY(-64px); }

/* En pantallas de compu el botón va centrado abajo. Se centra con margen y
   no con transform, para que la animación de entrada siga intacta. En
   celular se queda a la derecha, donde lo alcanza el pulgar. */
@media (min-width: 760px) {
  .arriba { right: auto; left: 50%; margin-left: -23px; }
}

/* ═══════════════════════════════════════════════════════════════════
   COLECCIONES DE TEMPORADA (27/09/2026)
   ═══════════════════════════════════════════════════════════════════ */

/* Mosaico de fondo en toda la página de la colección. El archivo se llama
   mosaico-<valor de para>.webp; cada temporada suma su línea aquí. */
.mosaico { background-repeat: repeat; background-size: 460px; }
.mosaico--dia-de-muertos { background-image: url(/assets/img/brand/mosaico-dia-de-muertos.webp); }
.mosaico--halloween      { background-image: url(/assets/img/brand/mosaico-halloween.webp?v=2); }
.mosaico--navidad       { background-image: url(/assets/img/brand/mosaico-navidad.webp); }

/* Sobre el mosaico, todo lo que lleva texto va en blanco para leerse. */
.mosaico .miga { background: var(--c-superficie); padding-block: var(--e-3); border-bottom: var(--borde); }
.mosaico .filtro { background: var(--c-superficie); }
.mosaico .filtro--on { background: var(--c-tinta); }
.mosaico .seccion > .sub {
  display: inline-block; padding: var(--e-1) var(--e-4);
  background: var(--c-superficie); border-radius: var(--r-full);
}
.mosaico .tarjeta {
  background: var(--c-superficie);
  border-radius: var(--r-lg);
  padding: var(--e-3) var(--e-3) var(--e-4);
  box-shadow: 0 10px 26px -18px rgba(13,34,51,.45);
}

/* Banner de colección: noche azul, papel picado arriba y tres piezas
   sueltas como fotos sobre la mesa. */
.banner-col {
  position: relative; overflow: hidden;
  display: grid; gap: var(--e-6); align-items: center;
  padding: 104px var(--e-7) var(--e-7);
  margin-bottom: var(--e-6);
  background: var(--c-tinta); color: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -30px rgba(13,34,51,.8);
}
@media (min-width: 860px) {
  .banner-col { grid-template-columns: 1.05fr 1fr; padding: 112px var(--e-8) var(--e-8); }
}

.banner-col__papel { position: absolute; top: 0; left: 0; width: 100%; height: 92px; }
.banner-col__bandera {
  transform-box: fill-box; transform-origin: 50% 0;
  animation: tm-mece 3.4s ease-in-out infinite alternate;
}
.banner-col__papel > g:nth-of-type(odd) .banner-col__bandera { animation-delay: -1.7s; }
.banner-col__papel > g:nth-of-type(3n) .banner-col__bandera { animation-duration: 4.1s; }
@keyframes tm-mece { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

.banner-col__sello {
  display: inline-block;
  padding: .3em .9em; margin-bottom: var(--e-4);
  background: #f28c0f; color: var(--c-tinta);
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: var(--peso-fuerte);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.banner-col__titulo { font-size: var(--t-2xl); color: #fff; line-height: 1.02; }
.banner-col__titulo span {
  display: block; font-size: 1.35em; font-weight: var(--peso-fuerte);
  color: #f28c0f;
}
.banner-col__texto { margin-top: var(--e-4); max-width: 42ch; color: rgba(255,255,255,.82); }

.banner-col__fotos {
  display: flex; justify-content: center; align-items: center;
  padding-block: var(--e-3);
}
.banner-col__fotos img {
  width: 38%; max-width: 190px;
  aspect-ratio: 3 / 4; object-fit: cover;
  border: 6px solid #fff; border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.6);
  transition: transform 400ms cubic-bezier(.3, 1.4, .5, 1);
}
.banner-col__fotos img:nth-child(1) { transform: rotate(-8deg) translateY(8px); margin-right: -6%; }
.banner-col__fotos img:nth-child(2) { transform: rotate(3deg) translateY(-10px); position: relative; z-index: 1; }
.banner-col__fotos img:nth-child(3) { transform: rotate(9deg) translateY(10px); margin-left: -6%; }
@media (hover: hover) and (pointer: fine) {
  .banner-col__fotos img:hover { transform: rotate(0) translateY(-14px) scale(1.06); z-index: 2; position: relative; }
}
@media (max-width: 760px) {
  .banner-col { padding: 84px var(--e-5) var(--e-6); }
  .banner-col__papel { height: 72px; }
  .banner-col__fotos img { width: 31%; border-width: 4px; }
}

/* Rejilla en celular, estilo Amazon: dos columnas y fotos 3:4. No se
   tocan las imágenes (son 1:1): solo se muestran recortadas de los lados,
   donde el mameluco no tiene nada. Las playeras de pareja sí llegan a la
   orilla: esas se muestran completas dentro del marco (su fondo es blanco). */
@media (max-width: 760px) {
  .rejilla, .rejilla--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5) var(--e-3);
  }
  .tarjeta__img { aspect-ratio: 3 / 4; border-radius: var(--r-md); }
  .tarjeta--playeras-pareja .tarjeta__img img { object-fit: contain; background: #fff; }
  .tarjeta__nombre { font-size: var(--t-sm); margin-top: var(--e-2); }
  .tarjeta__precio { font-size: var(--t-sm); margin-top: var(--e-1); }
  .rank { min-width: 1.7rem; height: 1.7rem; font-size: var(--t-sm); }
  .etiq { top: var(--e-2); left: var(--e-2); font-size: 10px; }
  .mosaico .tarjeta { padding: var(--e-2) var(--e-2) var(--e-3); }
}

/* Logo un poco más grande (27/09/2026): 40 → 46 px en celular, 54 en compu. */
.cab__logo img { max-height: 46px; }
@media (min-width: 900px) { .cab__logo img { max-height: 54px; } .cab__in { min-height: 80px; } }

/* Entrada de temporada en el menú: su nombre va en color cempasúchil
   oscuro para que se note que es especial, sin gritar. */
.nav__temporada a { color: #b85c00; }
.nav__temporada a:hover, .nav__temporada a[aria-current="page"] { color: #8a4500; }
.nav__temporada .nav__ico { opacity: .85; }

/* Playeras: la versión negra entra como cortinilla de izquierda a derecha
   al pasar el mouse (27/09/2026). Solo con mouse; en táctil se ve la blanca
   y el color se elige en la ficha. */
.tarjeta__cortina {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 600ms cubic-bezier(.65, 0, .35, 1), transform var(--trans-media);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta__link:hover .tarjeta__cortina { clip-path: inset(0 0 0 0); }
}
@media (hover: none), (pointer: coarse) {
  .tarjeta__cortina { display: none; }
}

/* Flechas del carrusel del inicio: en el ecuador, una a cada lado; redondas y
   del mismo estilo que el botón de pausa. En celular no salen (taparían el
   texto): ahí se desliza con el dedo. */
.hero__flecha {
  position: absolute; top: 50%; z-index: 3;
  margin-top: -23px;
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(13,34,51,.45); color: #fff;
  cursor: pointer;
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida), transform var(--trans-rapida);
}
.hero__flecha svg { width: 20px; height: 20px; }
.hero__flecha--izq { left: var(--e-4); }
.hero__flecha--der { right: var(--e-4); }
.hero__flecha[hidden] { display: none; }
@media (max-width: 760px) { .hero__flecha { display: none !important; } }
.hero--carrusel { touch-action: pan-y; }
.hero__flecha:hover { border-color: #fff; background: rgba(13,34,51,.7); }
.hero__flecha:active { transform: scale(.92); }
.hero__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Que el texto del hero no quede debajo de las flechas laterales. */
@media (min-width: 761px) {
  .hero--carrusel .hero__in { padding-inline: max(var(--gutter), 78px); }
  .hero--carrusel .hero__controles { padding-inline: max(var(--gutter), 78px); }
}

/* Selector de Color en círculos (27/09/2026). Son radios de verdad: se
   eligen con teclado, se leen en voz alta y viajan en el mismo POST que las
   tallas. El tono del círculo lo pone app.js desde data-hex; las clases de
   abajo son el respaldo sin JavaScript. */
.campo--color { border: 0; padding: 0; margin: 0; min-width: 0; flex: 1 1 100%; }
.campo--color legend {
  padding: 0; margin-bottom: var(--e-2);
  font-size: var(--t-sm); color: var(--c-tinta-suave);
}
.campo--color legend b { color: var(--c-tinta); font-weight: var(--peso-medio); }
.muestras { display: flex; gap: var(--e-4); padding: 4px; }
.muestra { position: relative; display: inline-grid; cursor: pointer; }
.muestra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ficha__form .muestra { display: inline-grid; margin: 0; }   /* le gana a .ficha__form label */
.muestra__circulo {
  display: block; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--c-borde-fuerte);
  box-shadow: 0 0 0 3px var(--c-fondo), 0 0 0 4px transparent;
  transition: box-shadow var(--trans-rapida), transform var(--trans-rapida);
}
.muestra--blanca .muestra__circulo { background: #fff; }
.muestra--negra  .muestra__circulo { background: #151515; border-color: #151515; }
.muestra:hover .muestra__circulo { transform: scale(1.06); }
.muestra input:checked + .muestra__circulo {
  box-shadow: 0 0 0 3px var(--c-fondo), 0 0 0 5px var(--c-tinta);
}
.muestra input:focus-visible + .muestra__circulo {
  box-shadow: 0 0 0 3px var(--c-fondo), 0 0 0 5px var(--c-acento);
}
.ficha__minis li[hidden] { display: none; }

/* Checkout: dirección con CP de SEPOMEX (27/09/2026). */
.opcional { color: var(--c-tinta-tenue); font-weight: var(--peso-normal); font-size: var(--t-xs); }
.campo__error { color: var(--c-error) !important; }


/* Existencias en vivo desde el panel (27/09/2026). */
.ficha__detalles { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-4); margin: var(--e-4) 0 0; font-size: var(--t-sm); }
.ficha__detalles dt { color: var(--c-tinta-tenue); }
.ficha__detalles dd { margin: 0; color: var(--c-tinta-suave); }
.existencias { flex: 1 1 100%; margin: 0; padding: var(--e-2) var(--e-4); border-radius: var(--r-md); font-size: var(--t-sm); font-weight: var(--peso-medio); }
.existencias[hidden] { display: none; }
.existencias--pocas { background: #fdf1e0; color: #8a4500; }
.existencias--agotado { background: var(--c-error-fondo); color: var(--c-error); }

/* ═══════════════════════════════════════════════════════════════════
   ORDENAR (10/10/2026) — en categorías y colecciones. Es un formulario
   GET: sin JavaScript se aplica con el botón; con JavaScript, al elegir.
   ═══════════════════════════════════════════════════════════════════ */
.orden-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-top: var(--e-4);
}
.orden-barra .sub { margin-top: 0; }
.orden { display: inline-flex; align-items: center; gap: var(--e-2); }
.orden__etq { font-size: var(--t-sm); color: var(--c-tinta-suave); }
.orden .orden__sel {
  width: auto; padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm); border-radius: var(--r-full); cursor: pointer;
}
.orden__btn {
  padding: var(--e-2) var(--e-4); font: inherit; font-size: var(--t-sm);
  color: #fff; background: var(--c-tinta); border: 0; border-radius: var(--r-full); cursor: pointer;
}
.orden__btn[hidden] { display: none; }
.mosaico .orden-barra .sub,
.mosaico .orden {
  display: inline-flex; padding: var(--e-1) var(--e-1) var(--e-1) var(--e-4);
  background: var(--c-superficie); border-radius: var(--r-full);
}
.mosaico .orden-barra .sub { padding-right: var(--e-4); }

/* Ver más + "Mostrando X de Y productos", al pie de la rejilla (10/10/2026). */
.orden-barra { justify-content: flex-end; }
.mas {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-4);
  margin-top: var(--e-7); text-align: center;
}
.mas__cuenta { color: var(--c-tinta-suave); font-size: var(--t-sm); }
.mas__btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.mosaico .mas__cuenta {
  padding: var(--e-1) var(--e-4); background: var(--c-superficie); border-radius: var(--r-full);
}

/* ═══════════════════════════════════════════════════════════════════
   TIENDA (10/10/2026) — inspiración adidas.mx sobre la vista de siempre.
   Fotos grandes y pegadas, sin esquinas redondas; abajo puntos de color,
   precio, nombre y tipo de prenda. Al pasar el mouse: el mismo zoom de
   siempre (la foto NO cambia de color), el nombre se subraya y la tarjeta
   se marca con una línea fina. Nada de blur ni fondos fijos: ligero.
   Respaldo de antes: ~/respaldos/vista-predeterminada-tomana-20261010/.
   ═══════════════════════════════════════════════════════════════════ */
.caja--ancha { max-width: 1680px; }

.rejilla { gap: var(--e-7) 4px; }
@media (min-width: 1100px) { .rejilla:not(.rejilla--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1099px) { .rejilla:not(.rejilla--3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tarjeta { position: relative; background: var(--c-superficie); transition: box-shadow var(--trans-rapida); }
.tarjeta__img { border: 0; border-radius: 0; background: #fff; }
.tarjeta__img img { transform: scale(1.06); }
.tarjeta:hover .tarjeta__img img { transform: scale(1.16); }
.tarjeta:hover .tarjeta__img::after { opacity: .04; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { box-shadow: 0 0 0 1px var(--c-tinta); }
  .tarjeta__link:hover .tarjeta__img { box-shadow: none; }
}
.tarjeta--playeras-pareja .tarjeta__img img,
.tarjeta--playeras-pareja:hover .tarjeta__img img { transform: none; }

.tarjeta__info { padding: var(--e-3) var(--e-3) var(--e-4); }
.tarjeta__colores { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--e-2); }
.tarjeta__color {
  width: 24px; height: 24px; padding: 3px;
  background: none; border: 1px solid transparent; border-radius: 50%;
  cursor: pointer; transition: border-color var(--trans-rapida);
}
.tarjeta__color:hover { border-color: var(--c-borde-fuerte); }
.tarjeta__color--on, .tarjeta__color--on:hover { border-color: var(--c-tinta); }
.tarjeta__punto {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(13,34,51,.28);
}
.tarjeta__punto--blanco, .tarjeta__punto--blanca { background: #fff; }
.tarjeta__punto--negro, .tarjeta__punto--negra { background: #151515; }
.tarjeta__punto--azul-marino { background: #1c2a4d; }
.tarjeta__punto--rojo { background: #c8202b; }

.tarjeta__precio { margin: 0; font-family: var(--f-display); font-size: var(--t-base); font-weight: var(--peso-fuerte); }
.tarjeta__precio strong { font-weight: var(--peso-fuerte); }
.tarjeta__nombre { margin-top: 2px; font-size: var(--t-sm); font-weight: var(--peso-normal, 400); }
.tarjeta__nombre a { color: inherit; text-decoration: none; }
.tarjeta:hover .tarjeta__nombre { background-size: 100% 1px; }
.tarjeta__sub { margin-top: 2px; font-size: var(--t-xs); color: var(--c-tinta-suave); }

.etiq {
  top: var(--e-3); left: var(--e-3); border-radius: 0;
  background: #fff; color: var(--c-tinta);
  font-weight: var(--peso-fuerte); letter-spacing: .08em;
  box-shadow: 0 1px 0 rgba(13,34,51,.08);
}
.etiq--rojo { background: var(--c-oferta); color: #fff; }

/* Sobre el mosaico de una colección: tarjeta blanca sin marco extra. */
.mosaico .tarjeta { padding: 0; border-radius: 0; box-shadow: none; }

@media (max-width: 760px) {
  .rejilla { gap: var(--e-5) 2px; margin-inline: calc(var(--gutter) * -1); }
  .tarjeta__img { border-radius: 0; }
  .tarjeta__info { padding: var(--e-2) var(--e-3) var(--e-3); }
  .tarjeta__nombre { font-size: var(--t-sm); margin-top: 0; }
  .tarjeta__color { width: 22px; height: 22px; }
}

/* HOME: el logo de TOMANA más grande arriba; al bajar, regresa a su
   tamaño para no comerse la pantalla. */
.home .cab__logo img { max-height: 64px; transition: max-height var(--trans-media); }
.home .cab__in { transition: min-height var(--trans-media); }
@media (min-width: 900px) {
  .home .cab__logo img { max-height: 92px; }
  .home .cab__in { min-height: 116px; }
}
.home .cab--sombra .cab__logo img { max-height: 46px; }
@media (min-width: 900px) {
  .home .cab--sombra .cab__logo img { max-height: 54px; }
  .home .cab--sombra .cab__in { min-height: 80px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LISTADOS ESTILO ADIDAS (10/10/2026)
   Título corto en mayúsculas con el conteo, filtros en UNA tira que se
   desliza de lado (rectángulos, no píldoras) y los productos arriba.
   ═══════════════════════════════════════════════════════════════════ */
.seccion--listado { padding-top: var(--e-5); }
.titulo-pag--listado {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05;
  margin-top: var(--e-3);
}
.titulo-pag__n { font-weight: 400; font-size: .55em; color: var(--c-tinta-suave); letter-spacing: 0; vertical-align: middle; }

.seccion--listado .filtros {
  flex-wrap: nowrap; overflow-x: auto; gap: var(--e-2);
  margin: var(--e-4) 0 var(--e-2); padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.seccion--listado .filtros::-webkit-scrollbar { display: none; }
.seccion--listado .filtro {
  flex: none; border-radius: 0; padding: 8px 14px;
  font-size: 12px; font-weight: var(--peso-fuerte); letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-tinta); border-color: var(--c-tinta); background: var(--c-superficie);
}
.seccion--listado .filtro:hover { background: var(--c-tinta); color: #fff; }
.seccion--listado .filtro:hover .filtro__n { color: rgba(255,255,255,.65); }
.seccion--listado .filtro--on { background: var(--c-tinta); color: #fff; }

.seccion--listado .orden-barra { margin: 0 0 var(--e-4); }
.seccion--listado .orden__etq {
  font-size: 12px; font-weight: var(--peso-fuerte); letter-spacing: .06em; text-transform: uppercase; color: var(--c-tinta);
}
.seccion--listado .orden .orden__sel {
  border-radius: 0; border-color: var(--c-tinta); font-size: 13px; padding: 8px 12px;
}

@media (max-width: 760px) {
  .seccion--listado { padding-top: var(--e-3); }
  .seccion--listado .filtros { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .seccion--listado .orden-barra { margin-bottom: var(--e-3); }
  .seccion--listado .orden__etq { display: none; }
}

/* Ficha: sin hueco arriba y con la galería protagonista (adidas). */
.ficha { padding-block: var(--e-4) var(--e-seccion); }
@media (min-width: 900px) {
  .ficha { grid-template-columns: 1.7fr 1fr; gap: var(--e-8); }
}
.ficha__minis { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.aviso--gris { border-radius: 0; background: #eceff1; color: #000; }

/* Carrusel del top en HOME (adidas): una fila que se desliza, 4 visibles en
   computadora, 2 y un pedazo en celular; flecha cuadrada a la derecha. */
.carrusel { position: relative; }
.rejilla.rejilla--carrusel {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 3 * 12px) / 4); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: 0;
}
.rejilla--carrusel::-webkit-scrollbar { display: none; }
.rejilla--carrusel > .tarjeta { scroll-snap-align: start; }
@media (max-width: 1099px) { .rejilla.rejilla--carrusel { grid-auto-columns: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 760px) {
  .rejilla.rejilla--carrusel { grid-auto-columns: 44%; gap: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
.carrusel__flecha {
  position: absolute; top: 28%; z-index: 3;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: #fff; color: #000; border: 1px solid #000; border-radius: 0;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.carrusel__flecha--der { right: 8px; }
.carrusel__flecha--izq { left: 8px; }
.carrusel__flecha[hidden] { display: none; }
.carrusel__flecha:hover { background: #000; color: #fff; }
@media (hover: none) { .carrusel__flecha { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   IDENTIDAD TOMANA (10/10/2026)
   Lo que quedó de adidas es la estructura (fotos grandes, rejilla pegada,
   filtros en una tira, carrusel, colores visibles). Lo demás es TOMANA:
   - el azul del logo y su trazo oscuro; acento cempasúchil/coral,
   - esquinas redondeadas como el recuadro del logo (12–20 px),
   - Outfit gruesa SIN mayúsculas forzadas; nada de subtítulos en versalitas,
   - el texto del hero va en una "etiqueta" blanca, apenas inclinada, como
     la etiqueta de un regalo,
   - títulos de sección con un trazo de marcador detrás de la palabra.
   Ligero: sin blur, sin fondos fijos. Animaciones: las de siempre.
   ═══════════════════════════════════════════════════════════════════ */

/* Barra superior: azul de la marca, en minúsculas. */
.barra-sup { background: var(--c-marca); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.barra-sup__in { padding-block: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; }

/* Encabezado */
.cab { border-bottom: 1px solid var(--c-borde); }
.cab__in { gap: var(--e-4); }
.cab__acciones { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 2px; }
.cab__menu { grid-column: 4; }
.cab__icono {
  position: relative; display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px; color: var(--c-tinta); text-decoration: none;
  transition: background var(--trans-rapida), color var(--trans-rapida);
}
.cab__icono:hover { background: var(--c-superficie-alt); color: var(--c-marca-honda); }
.cab__icono .cab__badge { top: 2px; right: 0; }
.cab__favs .cab__badge { background: var(--c-oferta); }
.cab__badge[hidden] { display: none; }
.cab__punto { position: absolute; right: 9px; bottom: 9px; width: 8px; height: 8px; border-radius: 50%; background: #1aa36b; box-shadow: 0 0 0 2px #fff; }

.cab__buscar { position: relative; display: none; align-items: center; }
.cab__buscar-campo {
  width: 220px; height: 42px; padding: 0 44px 0 16px;
  font: inherit; font-size: 15px; color: var(--c-tinta);
  background: var(--c-superficie-alt); border: 1px solid transparent; border-radius: 999px;
  transition: border-color var(--trans-rapida), width var(--trans-media), background var(--trans-rapida);
}
.cab__buscar-campo:focus { outline: none; background: #fff; border-color: var(--c-marca); width: 280px; }
.cab__buscar-btn { position: absolute; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--c-marca-honda); cursor: pointer; border-radius: 50%; }
@media (min-width: 1100px) {
  .cab__buscar { display: flex; margin-right: 6px; }
  .cab__lupa { display: none; }
}
@media (max-width: 1099px) {
  .cab--buscando .cab__buscar { display: flex; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); z-index: 60; }
  .cab--buscando .cab__buscar-campo, .cab--buscando .cab__buscar-campo:focus { width: 100%; height: 48px; background: #fff; border-color: var(--c-marca); box-shadow: 0 12px 30px -12px rgba(13,34,51,.35); }
}
@media (max-width: 420px) { .cab__cuenta { display: none; } }   /* en el menú del celular */

/* Sugerencias del buscador */
.sugerencias {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px; z-index: 70;
  background: #fff; border: 1px solid var(--c-borde); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(13,34,51,.45);
}
.sugerencias[hidden] { display: none; }
.sugerencia { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; color: var(--c-tinta); text-decoration: none; }
.sugerencia:hover, .sugerencia:focus { background: var(--c-superficie-alt); outline: none; }
.sugerencia img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: #f2f6f9; }
.sugerencia__nombre { font-size: 14px; line-height: 1.25; }
.sugerencia__precio { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.sugerencias__todos { display: block; padding: 12px 16px; font-weight: 600; color: var(--c-marca-honda); text-decoration: none; border-top: 1px solid var(--c-borde); }
.sugerencias__nada { padding: 14px 16px; color: var(--c-tinta-suave); font-size: 14px; }

/* Menú: Outfit, sin mayúsculas; la página activa con fondo azul claro. */
@media (min-width: 900px) {
  .nav__lista a { flex-direction: row; gap: 7px; padding: 8px 12px; border-radius: 12px;
    font-family: var(--f-display); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-tinta); }
  .nav__lista a:hover, .nav__lista a[aria-current="page"] { color: var(--c-marca-honda); background: var(--c-superficie-alt); }
  .nav__ico { width: 20px; height: 20px; opacity: 1; }
  .nav__temporada a, .nav__temporada a:hover { color: #c2410c; }
}

/* Títulos: Outfit gruesa, sin versalitas; marcador detrás. */
.titulo-sec, .seccion__cab h2, .titulo-pag, .ficha__nombre, .banner-col__titulo, .hero h1, .hero__titulo {
  font-family: var(--f-display); text-transform: none; letter-spacing: -0.02em;
}
.titulo-sec, .seccion__cab h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.1; }
.seccion__cab h2, h2.titulo-sec {
  display: inline; background-repeat: no-repeat; background-position: 0 88%; background-size: 100% .34em;
  background-image: linear-gradient(rgba(242,140,15,.38), rgba(242,140,15,.38));
}
.titulo-pag--listado { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; text-transform: none; letter-spacing: -0.02em; }
.titulo-pag__n {
  display: inline-grid; place-items: center; min-width: 2.2em; height: 1.6em; padding: 0 .5em; margin-left: .3em; vertical-align: middle;
  font-family: var(--f-display); font-size: .42em; font-weight: 700; color: var(--c-marca-honda);
  background: var(--c-superficie-alt); border-radius: 999px;
}
.enlace-mas { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--c-marca-honda); }

/* Hero: el texto va en una etiqueta de regalo blanca, apenas inclinada. */
.hero__in { color: var(--c-tinta); }
.hero__in > :is(h1, .hero__titulo, p, .hero__acciones) { position: relative; }
@media (min-width: 761px) {
  .hero__in {
    max-width: 560px; margin-left: max(var(--gutter), calc((100vw - var(--ancho-caja)) / 2 + var(--gutter)));
    padding: 34px 36px 32px; align-self: end; margin-bottom: 56px;
    background: #fff; border-radius: 22px; transform: rotate(-1.2deg);
    box-shadow: 0 30px 60px -30px rgba(13,34,51,.55);
  }
  .hero__velo { background: linear-gradient(to right, rgba(13,34,51,.25), rgba(13,34,51,0) 55%); }
}
@media (max-width: 760px) {
  .hero__in {
    margin: auto var(--gutter) 24px; align-self: end; padding: 22px 22px 20px;
    background: #fff; border-radius: 18px; transform: rotate(-1deg);
  }
  .hero__velo { background: none; }
}
.hero h1, .hero__titulo { color: var(--c-tinta); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.02; text-shadow: none; }
.hero p { color: var(--c-tinta-suave); font-size: var(--t-base); margin-top: var(--e-3); max-width: none; }
.hero__acciones { margin-top: var(--e-5); }
.hero .btn--pri { background: var(--c-marca); color: #fff; }
.hero .btn--sec { color: var(--c-tinta); border-color: var(--c-tinta); }

/* Botones: redondeados, en Outfit, sin mayúsculas ni contorno desplazado.
   Se queda el relleno coral que sube al pasar el mouse. */
.btn { border-radius: 14px; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; padding: 13px 24px; box-shadow: none; }
.btn::after { content: none; }
.btn--pri { background: var(--c-marca); color: #fff; }
.btn--sec { background: #fff; color: var(--c-tinta); border: 2px solid var(--c-tinta); }
.btn--sec:hover { background: var(--c-tinta); color: #fff; border-color: var(--c-tinta); }

/* Filtros y Ordenar: etiquetas redondeadas azul claro. */
.seccion--listado .filtro, .filtro {
  border-radius: 12px; border: 0; background: var(--c-superficie-alt); color: var(--c-marca-honda);
  font-family: var(--f-display); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 9px 16px;
}
.seccion--listado .filtro:hover, .filtro:hover { background: #d3e8f5; color: var(--c-marca-honda); }
.seccion--listado .filtro:hover .filtro__n { color: var(--c-marca-honda); }
.seccion--listado .filtro--on, .filtro--on, .filtro--on:hover { background: var(--c-marca-honda); color: #fff; }
.filtro--on .filtro__n, .seccion--listado .filtro--on .filtro__n { color: rgba(255,255,255,.7); }
.seccion--listado .orden__etq { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--c-tinta-suave); }
.seccion--listado .orden .orden__sel, .orden .orden__sel { border-radius: 12px; border: 1px solid var(--c-borde-fuerte); font-size: 14px; padding: 9px 14px; }

/* Tarjetas: fondo azul muy claro (no el gris de adidas), esquinas
   redondeadas y, al pasar el mouse, un aro azul de la marca. */
.rejilla { gap: var(--e-7) 12px; }
.tarjeta { border-radius: 18px; }
.tarjeta__img { background: #f1f6fa; border-radius: 18px; }
.tarjeta__img img { mix-blend-mode: multiply; }
.tarjeta--playeras-pareja .tarjeta__img img { mix-blend-mode: normal; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { box-shadow: none; }
  .tarjeta:hover .tarjeta__img { box-shadow: 0 0 0 2px var(--c-marca); }
}
.tarjeta__info { padding: 12px 4px 4px; }
.tarjeta__precio { font-family: var(--f-display); font-size: 16px; font-weight: 700; color: var(--c-tinta); }
.tarjeta__nombre { font-size: 15px; color: var(--c-tinta); }
.tarjeta__sub { font-size: 13px; }
.etiq { top: 12px; left: 12px; border-radius: 999px; background: var(--c-tinta); color: #fff;
  font-family: var(--f-display); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 4px 10px; box-shadow: none; }
.etiq--rojo { background: var(--c-oferta); }
.rank { left: 12px; bottom: 12px; background: var(--c-marca); border-radius: 12px; }
.rank--podio { background: var(--c-oferta); }
@media (max-width: 760px) {
  .rejilla { gap: var(--e-5) 6px; margin-inline: 0; }
  .tarjeta__img, .tarjeta { border-radius: 14px; }
  .tarjeta__info { padding: 8px 2px 2px; }
}

/* Corazón de favoritos */
.corazon-form { margin: 0; }
.tarjeta__fav { position: absolute; top: 10px; right: 10px; z-index: 2; }
.corazon {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--c-tinta); border: 0; border-radius: 50%;
  box-shadow: 0 4px 14px -6px rgba(13,34,51,.45);
  transition: transform var(--trans-rapida), color var(--trans-rapida);
}
.corazon svg path { fill: transparent; transition: fill var(--trans-rapida); }
.corazon:hover { transform: scale(1.08); color: var(--c-oferta); }
.corazon--on { color: var(--c-oferta); }
.corazon--on svg path { fill: var(--c-oferta); }
.corazon--late { animation: tm-late 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tm-late { 40% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .corazon--late { animation: none; } }
.ficha__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); }
.ficha__fav .corazon { width: 46px; height: 46px; box-shadow: 0 0 0 1px var(--c-borde) inset; }

/* Ficha */
.ficha__nombre { font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; margin-top: 0; }
.ficha__precio { font-family: var(--f-display); font-weight: 700; }
.ficha__lupa, .mini { border-radius: 18px; border: 0; background: #f1f6fa; }
.mini { border: 2px solid transparent; border-radius: 12px; }
.mini--on { border-color: var(--c-marca); }
.ficha__lupa .ficha__principal, .mini img { mix-blend-mode: multiply; }
.muestras { gap: 8px; padding: 0; flex-wrap: wrap; }
.muestra:has(.muestra__foto) .muestra__circulo { display: none; }
.muestra__foto {
  width: 80px; height: 80px; object-fit: cover; background: #f1f6fa; mix-blend-mode: multiply;
  border-radius: 12px; box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--trans-rapida);
}
.muestra:hover .muestra__foto { box-shadow: 0 0 0 2px var(--c-borde-fuerte); }
.muestra input:checked ~ .muestra__foto { box-shadow: 0 0 0 2px var(--c-marca); }
.muestra input:focus-visible ~ .muestra__foto { outline: 2px solid var(--c-marca-honda); outline-offset: 3px; }
.aviso--gris { border-radius: 14px; background: var(--c-superficie-alt); color: var(--c-tinta); }

/* Carrusel del top: flecha redonda azul. */
.carrusel__flecha { border-radius: 50%; border: 0; background: var(--c-marca); color: #fff; box-shadow: 0 10px 24px -10px rgba(13,34,51,.5); }
.carrusel__flecha:hover { background: var(--c-marca-honda); color: #fff; }

/* Buscar, favoritos y cuenta */
.busqueda { display: flex; gap: 10px; margin: var(--e-4) 0 var(--e-6); max-width: 640px; }
.busqueda__campo { flex: 1; height: 52px; padding: 0 18px; font: inherit; border: 1px solid var(--c-borde-fuerte); border-radius: 14px; }
.busqueda__campo:focus { outline: none; border-color: var(--c-marca); }
.vacio { padding: var(--e-7) 0; }
.vacio__titulo { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; margin-bottom: var(--e-2); }
.vacio .btn { margin-top: var(--e-5); }
.nota-cuenta { margin: 0 0 var(--e-5); color: var(--c-tinta-suave); }
.seccion--cuenta { padding-top: var(--e-6); }
.cuenta-caja { max-width: 440px; margin: 0 auto; }
.cuenta-caja .titulo-pag, .cuenta-panel .titulo-pag { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; margin-bottom: var(--e-5); }
.form-cuenta { display: grid; gap: var(--e-4); }
.form-cuenta .btn { justify-self: start; }
.form-cuenta .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.cuenta-alt { margin-top: var(--e-4); color: var(--c-tinta-suave); }
.cuenta-grid { display: grid; gap: var(--e-5); }
@media (min-width: 900px) { .cuenta-grid { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; } }
.cuenta-bloque { background: #f7fafc; border: 1px solid var(--c-borde); border-radius: 18px; padding: var(--e-5); }
.cuenta-bloque .titulo-bloque { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.cuenta-bloque .btn { margin-top: var(--e-3); }
.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.pedido { background: #fff; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--c-borde); }
.pedido__cab { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; }
.pedido__estado { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--c-superficie-alt); color: var(--c-marca-honda); font-weight: 600; }
.pedido__lineas { margin-top: 6px; color: var(--c-tinta-suave); font-size: 14px; }
.pedido__total { margin-top: 4px; font-weight: 700; }
.cuenta-salir { margin-top: var(--e-6); }
.aviso--error { border-radius: 14px; }

/* Ajustes tras revisar en pantalla (10/10/2026) */
.nav__lista a { white-space: nowrap; }
@media (min-width: 900px) { .nav__lista { gap: 2px; } .nav__lista a { padding: 8px 10px; } }
@media (min-width: 1100px) and (max-width: 1319px) { .cab__buscar { display: none; } .cab__lupa { display: inline-grid; }
  .cab--buscando .cab__buscar { display: flex; position: absolute; right: var(--gutter); top: calc(100% + 8px); z-index: 60; }
  .cab--buscando .cab__buscar-campo, .cab--buscando .cab__buscar-campo:focus { width: 360px; height: 48px; background: #fff; border-color: var(--c-marca); box-shadow: 0 12px 30px -12px rgba(13,34,51,.35); } }
@media (min-width: 761px) {
  .hero--carrusel .hero__in, .hero__in { padding: 30px 34px 28px; }
  .hero h1, .hero__titulo { font-size: clamp(2rem, 3.2vw, 2.8rem); }
}
@media (max-width: 760px) { .hero--carrusel .hero__in, .hero__in { padding: 20px 20px 18px; } }
/* El logo nunca cede espacio: el menú es el que se ajusta. */
.cab__logo { flex-shrink: 0; }
.cab__logo img { max-width: none; }
@media (min-width: 900px) { .cab__in { grid-template-columns: auto minmax(0, 1fr) auto; } .nav { min-width: 0; } }
@media (min-width: 900px) and (max-width: 1240px) { .nav__ico { display: none; } .nav__lista a { padding: 8px 8px; font-size: 14px; } }
/* Cuadro de búsqueda a la vista solo en pantallas muy anchas; si no, lupa
   que abre el cuadro debajo del encabezado. */
@media (min-width: 1100px) and (max-width: 1559px) {
  .cab__buscar { display: none; } .cab__lupa { display: inline-grid; }
  .cab--buscando .cab__buscar { display: flex; position: absolute; right: var(--gutter); top: calc(100% + 8px); z-index: 60; }
  .cab--buscando .cab__buscar-campo, .cab--buscando .cab__buscar-campo:focus { width: 380px; height: 48px; background: #fff; border-color: var(--c-marca); box-shadow: 0 12px 30px -12px rgba(13,34,51,.35); }
}
.cab { position: sticky; }
.cab__in { position: relative; }
/* Decisión final: lupa en todas las pantallas; el cuadro se abre debajo. */
@media (min-width: 1100px) {
  .cab__buscar { display: none; } .cab__lupa { display: inline-grid; }
  .cab--buscando .cab__buscar { display: flex; position: absolute; right: var(--gutter); top: calc(100% + 8px); z-index: 60; }
  .cab--buscando .cab__buscar-campo, .cab--buscando .cab__buscar-campo:focus { width: 380px; height: 48px; background: #fff; border-color: var(--c-marca); box-shadow: 0 12px 30px -12px rgba(13,34,51,.35); }
}
.cab--buscando .cab__lupa { background: var(--c-superficie-alt); color: var(--c-marca-honda); }
/* Contraseñas y búsqueda con el mismo estilo que los demás campos. */
input[type=password], .form-cuenta input[type=search] {
  width: 100%; padding: var(--e-3) var(--e-4); font: inherit; font-size: var(--t-base);
  color: var(--c-tinta); background: var(--c-superficie);
  border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-md);
  transition: border-color var(--trans-rapida);
}
input[type=password]:focus { border-color: var(--c-tinta); outline-offset: 1px; }
.form-cuenta input { border-radius: 12px; }
.nav__solo-movil { display: none; }
@media (max-width: 899px) { .nav__solo-movil { display: block; border-top: 1px solid var(--c-borde); margin-top: var(--e-2); padding-top: var(--e-2); } }

/* Inicio más bajo (11/10/2026): el carrusel cabe en la pantalla debajo del
   encabezado (en una laptop se leía a medias). La etiqueta va centrada. */
.hero { min-height: 0; height: clamp(360px, calc(100svh - 170px), 540px); }
.hero__diapo, .hero__media { height: 100%; min-height: 0; }
.hero__media { object-fit: cover; }
@media (min-width: 761px) {
  .hero__in, .hero--carrusel .hero__in {
    align-self: center; margin-top: 0; margin-bottom: 0;
    max-width: 480px; padding: 22px 26px 20px;
  }
  .hero h1, .hero__titulo { font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
  .hero p { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .hero__acciones { margin-top: 16px; gap: 10px; }
  .hero__acciones .btn { padding: 10px 18px; font-size: 14px; }
}
@media (max-width: 760px) {
  .hero { height: clamp(420px, calc(100svh - 150px), 560px); }
  .hero h1, .hero__titulo { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  .hero p { font-size: 14px; line-height: 1.45; }
  .hero__acciones .btn { padding: 10px 16px; font-size: 14px; }
}
@media (max-width: 760px) {
  .hero__in, .hero--carrusel .hero__in { width: auto; max-width: none; margin: auto 16px 18px; }
  .hero__controles { top: 14px; bottom: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   CARRUSEL DE COLECCIONES (11/10/2026)
   Cinco diapositivas armadas con fotos de producto, cada una distinta:
   dueto (Sex Reveal), mosaico (ciudades), polaroid (parejas), dividido
   (papá) y cinta (abuelos). Las fotos llegan con data-src (app.js).
   ═══════════════════════════════════════════════════════════════════ */
.hd { position: relative; overflow: hidden; background: var(--hd-fondo, #0d2233); }
.hd__fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hd__in {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  align-items: center; gap: 44px;
  padding-block: 36px; padding-inline: max(var(--gutter), 84px);
}
.hd__texto { max-width: 470px; }
.hero .hd__titulo {
  margin: 0; color: var(--hd-tinta, #fff);
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1; text-shadow: none;
}
.hd__titulo span { display: block; color: var(--hd-realce, #f28c0f); }
.hero .hd__p {
  display: block; margin-top: 16px; max-width: 40ch; background: none; padding: 0;
  font-size: 16px; line-height: 1.55; color: var(--hd-suave, rgba(255,255,255,.82));
}
.hd__btn { margin-top: 24px; }
.hd__visual { position: relative; height: 100%; min-height: 0; }
.hd__foto { margin: 0; }
.hd__foto img { display: block; width: 100%; height: 100%; object-fit: cover; background: #f1f6fa; }

/* 1. Dueto — Sex Reveal: rosa y azul partidos en diagonal, ♀ ♂ enormes. */
.hd--dueto { --hd-fondo: linear-gradient(112deg, #fde4ef 0 54%, #d8edfa 54% 100%); --hd-tinta: var(--c-tinta); --hd-suave: var(--c-tinta-suave); --hd-realce: #d6337f; }
.hd__simbolo { position: absolute; fill: none; stroke-width: 4; stroke-linecap: round; opacity: .22; }
.hd__simbolo--ella { stroke: #e84393; width: 360px; left: 34%; bottom: -70px; transform: rotate(-12deg); }
.hd__simbolo--el { stroke: #0083bd; width: 330px; right: -40px; top: -60px; transform: rotate(10deg); }
.hd--dueto .hd__visual { display: flex; align-items: center; justify-content: center; }
.hd--dueto .hd__foto {
  width: min(44%, 300px); aspect-ratio: 1; padding: 10px; background: #fff; border-radius: 24px;
  box-shadow: 0 26px 50px -24px rgba(13,34,51,.5);
}
.hd--dueto .hd__foto img { border-radius: 16px; mix-blend-mode: multiply; }
.hd--dueto .hd__foto--1 { transform: rotate(-6deg) translateY(10px); margin-right: -18px; }
.hd--dueto .hd__foto--2 { transform: rotate(5deg) translateY(-14px); }
.hd__pregunta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 3;
  width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-oferta); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 30px;
  box-shadow: 0 12px 26px -10px rgba(214,52,31,.7);
}

/* 2. Mosaico — ciudades: azul noche y una rejilla de fotos de colores. */
.hd--mosaico { --hd-fondo: #0d2233; }
.hd--mosaico .hd__visual {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px; height: 100%; max-height: 470px;
}
.hd--mosaico .hd__foto { border-radius: 16px; overflow: hidden; }
.hd--mosaico .hd__foto--1 { grid-row: span 2; }
.hd--mosaico .hd__foto img { mix-blend-mode: normal; }
.hd--mosaico .hd__foto:nth-child(n+6) { display: none; }

/* 3. Polaroid — parejas: crema con puntitos y fotos sueltas con su nombre. */
.hd--polaroid { --hd-fondo: radial-gradient(rgba(242,140,15,.22) 1.4px, transparent 1.6px) 0 0 / 22px 22px, #fff4e6; --hd-tinta: var(--c-tinta); --hd-suave: var(--c-tinta-suave); --hd-realce: var(--c-oferta); }
.hd--polaroid .hd__foto {
  position: absolute; width: 38%; background: #fff; padding: 10px 10px 0; border-radius: 6px;
  box-shadow: 0 22px 40px -22px rgba(13,34,51,.55);
}
.hd--polaroid .hd__foto img { aspect-ratio: 1; height: auto; border-radius: 2px; }
.hd--polaroid figcaption { padding: 9px 2px 11px; font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--c-tinta); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd--polaroid .hd__foto--1 { left: 0; top: 6%; transform: rotate(-7deg); }
.hd--polaroid .hd__foto--2 { left: 24%; top: 26%; transform: rotate(4deg); z-index: 2; }
.hd--polaroid .hd__foto--3 { left: 48%; top: 2%; transform: rotate(-3deg); }
.hd--polaroid .hd__foto--4 { left: 64%; top: 30%; transform: rotate(7deg); z-index: 3; }

/* 4. Dividido — papá: mitad azul de la marca con el texto, mitad la foto. */
.hd--dividido { --hd-fondo: linear-gradient(90deg, var(--c-marca) 0 46%, #eef5fa 46% 100%); --hd-realce: #ffd166; }
.hd__grande { position: absolute; right: 0; top: 0; width: 54%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 18px 0; }
.hd--dividido .hd__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hd--dividido .hd__visual { display: flex; align-items: flex-end; justify-content: flex-start; padding-bottom: 8px; }
.hd--dividido .hd__foto--2 {
  width: 170px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-left: -110px;
  border: 6px solid #fff; box-shadow: 0 18px 36px -16px rgba(13,34,51,.55);
}
.hd--dividido .hd__btn { background: #fff; color: var(--c-marca-honda); }

/* 5. Cinta — abuelos: azul hondo, texto al centro y una tira de fotos. */
.hd--cinta { --hd-fondo: radial-gradient(120% 90% at 50% 0%, #1d5f96 0%, #124a7a 55%, #0d2233 100%); }
.hd--cinta .hd__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; justify-items: center; text-align: center; gap: 20px; padding-top: 34px; padding-bottom: 0; }
.hd--cinta .hd__texto { max-width: 640px; }
.hd--cinta .hd__titulo span { display: inline; }
.hero .hd--cinta .hd__p { margin-inline: auto; }
.hd--cinta .hd__btn { margin-top: 18px; }
.hd--cinta .hd__visual { width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 14px; height: auto; }
.hd--cinta .hd__foto { width: 17%; max-width: 190px; aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 18px 36px -18px rgba(0,0,0,.6); }
.hd--cinta .hd__foto:nth-child(odd) { transform: translateY(18px) rotate(-2deg); }
.hd--cinta .hd__foto:nth-child(even) { transform: rotate(2deg); }

/* Celular: la imagen arriba y el texto abajo, en todas. */
@media (max-width: 760px) {
  .hd__in { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 16px 16px 22px; }
  .hd__visual { grid-row: 1; height: 100%; }
  .hd__texto { grid-row: 2; }
  .hero .hd__titulo { font-size: clamp(1.6rem, 7vw, 2rem); }
  .hero .hd__p { font-size: 14px; margin-top: 8px; }
  .hd__btn { margin-top: 14px; padding: 10px 16px; font-size: 14px; }
  .hd__simbolo--ella { width: 220px; left: -40px; bottom: -40px; }
  .hd__simbolo--el { width: 200px; }
  .hd--dueto .hd__foto { width: 40%; }
  .hd__pregunta { width: 54px; height: 54px; font-size: 22px; }
  .hd--mosaico .hd__visual { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; }
  .hd--mosaico .hd__foto--1 { grid-row: auto; }
  .hd--mosaico .hd__foto:nth-child(6) { display: block; }
  .hd--polaroid .hd__foto { width: 36%; padding: 6px 6px 0; }
  .hd--polaroid figcaption { font-size: 10px; padding: 5px 1px 7px; }
  .hd--dividido { --hd-fondo: linear-gradient(180deg, #eef5fa 0 52%, var(--c-marca) 52% 100%); }
  .hd__grande { width: 100%; height: 52%; padding: 12px 0 0; }
  .hd--dividido .hd__foto--2 { width: 96px; margin-left: auto; border-width: 4px; }
  .hd--cinta .hd__in { grid-template-rows: auto 1fr; padding-top: 22px; }
  .hd--cinta .hd__texto { grid-row: 1; } .hd--cinta .hd__visual { grid-row: 2; gap: 8px; }
  .hd--cinta .hd__foto { width: 30%; border-width: 3px; border-radius: 14px; }
  .hd--cinta .hd__foto:nth-child(n+4) { display: none; }
}
/* Ajustes tras revisar las diapositivas en pantalla */
.hd--polaroid .hd__foto { width: 33%; }
.hd--polaroid .hd__foto--1 { left: 4%;  top: 0;   transform: rotate(-6deg); }
.hd--polaroid .hd__foto--2 { left: 40%; top: 4%;  transform: rotate(4deg); z-index: 1; }
.hd--polaroid .hd__foto--3 { left: 14%; top: 48%; transform: rotate(3deg); z-index: 2; }
.hd--polaroid .hd__foto--4 { left: 52%; top: 50%; transform: rotate(-5deg); z-index: 3; }
.hd--dividido { --hd-fondo: linear-gradient(90deg, var(--c-marca) 0 46%, #fff 46% 100%); }
.hd--cinta .hd__in { padding-bottom: 64px; }
.hd--cinta .hd__visual { align-items: center; }
@media (max-width: 760px) {
  .hd__in { padding-top: 58px; }
  .hd--polaroid .hd__foto { width: 34%; }
  .hd--polaroid .hd__foto--1 { left: 2%; top: 0; } .hd--polaroid .hd__foto--2 { left: 34%; top: 2%; }
  .hd--polaroid .hd__foto--3 { left: 66%; top: 0; } .hd--polaroid .hd__foto--4 { display: none; }
  .hd--dividido { --hd-fondo: linear-gradient(180deg, #fff 0 50%, var(--c-marca) 50% 100%); }
  .hd--dividido .hd__in { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding-top: 58px; }
  .hd__grande { top: 46px; height: calc(50% - 46px); padding: 0; }
  .hd--dividido .hd__visual { grid-row: 1; align-items: flex-end; justify-content: flex-end; }
  .hd--dividido .hd__texto { grid-row: 2; }
  .hd--dividido .hd__foto--2 { margin: 0 4px -10px 0; }
  .hd--cinta .hd__in { padding-top: 60px; padding-bottom: 16px; gap: 12px; }
}
@media (min-width: 761px) { .hd--cinta .hd__visual { margin-bottom: 8px; } .hd--cinta .hd__in { padding-bottom: 76px; } }
@media (min-width: 761px) { .hd--cinta .hd__foto { width: auto; height: min(17vw, calc(100% - 4px)); max-height: 190px; } .hd--cinta .hd__visual { height: 100%; align-items: center; } .hd--cinta .hd__in { grid-template-rows: auto minmax(0, 1fr); padding-bottom: 70px; } }
@media (min-width: 761px) { .hero__controles--arriba { top: 18px; bottom: auto; } .hd--cinta .hd__in { padding-bottom: 30px; } .hd--cinta .hd__foto { max-height: 210px; } }