/* ══════════════════════════════════════════════════════════════════════════
   HerboMax — LA PORTADA EN ESCRITORIO
   template-parts/escritorio.css · se encola solo en la portada, despues de
   style.css (y por lo tanto despues de las ~55 hojas de Woodmart).

   REGLA QUE MANDA SOBRE TODAS: el celular no puede cambiar.
   Por eso este archivo NO tiene ni una regla fuera de un @media (min-width).
   El diseno de celular vive en style.css y termina en 899 px; de 900 px hacia
   arriba empieza lo que hay aca. Nada de esto se lee por debajo de 900.

   Que resuelve, en orden:
     1 · Las medidas de la pagina (el aire lateral y el alto del hero).
     2 · El hero: un solo titular, la imagen a sangre y sin hueco bajo el boton.
     3 · La cinta de sellos, a sangre.
     4 · Objetivos: rejilla que se centra sola cuando la pestana trae 3 productos.
     5 · Packs: tarjeta vertical, como el resto de la pagina.
     6 · Testimonios.
     7 · Detalles finos: foco de teclado, hover con mouse, contraste.

   ══════════════════════════════════════════════════════════════════════════
   TRES COSAS QUE HAY QUE SABER ANTES DE TOCAR ESTE ARCHIVO
   ══════════════════════════════════════════════════════════════════════════

   A · EL SANGRADO. El contenido del sitio vive dentro de .container de
       Woodmart, que mide 1250 px como maximo. Las bandas de color (hero,
       cinta, packs, testimonios) tienen que llegar al borde de la pantalla,
       asi que se sacan del contenedor con:

           width:auto; max-width:none; margin-inline:calc(50% - 50vw);

       El width:auto NO es decorativo: .hbx-ticker trae width:100% de
       style.css, y un bloque con ancho fijo IGNORA el margen derecho negativo
       (se queda en 1250 px, corrido hacia la izquierda). Sin reponer el ancho
       automatico, la cinta no sangra: se descuadra.

       100vw incluye la barra de scroll (1440 de ventana = 1425 utiles), asi
       que la banda sobresale ~7 px por cada lado. No se ve ni provoca scroll
       horizontal porque Woodmart ya trae body{overflow-x:clip}. Igual se
       repite abajo por si algun dia lo saca: clip y no hidden, porque hidden
       convierte al body en contenedor de scroll y mata cualquier
       position:sticky del sitio.

   B · LAS FOTOS SON VERTICALES Y EL aspect-ratio CEDE. Ninguna imagen de este
       archivo usa alto en porcentaje dentro de una caja de alto indefinido.
       Cada caja es position:relative y la imagen va position:absolute con
       inset:0, que siempre resuelve. Es la leccion que costo una caja de
       159x159 crecida a 159x249.

   C · EL BANNER NO SE RECORTA NUNCA. hero-banner.jpg mide 1000x747 y trae el
       titular pintado adentro: si se recorta, se corta "TU SUENO MAS
       REGENERATIVO". Por eso va con object-fit:contain (no cover) pegado
       arriba, sobre fondo blanco. Se puede hacer porque el borde inferior del
       archivo es blanco puro de lado a lado (muestreado: #ffffff en toda la
       ultima fila): el sobrante de abajo se funde con la imagen y no se ve
       ninguna juntura.
   ══════════════════════════════════════════════════════════════════════════ */


/* ##########################################################################
   ESCRITORIO — desde 900 px
   ########################################################################## */
@media (min-width:900px){


/* ── 1 · Las medidas de la pagina ─────────────────────────────────────────
   Dos numeros de los que cuelga todo lo demas.

   --hbx-aire  Lo que hay que dejar por dentro de una banda a sangre para que
               su contenido caiga en la misma linea que el resto de la pagina.
               El contenedor de Woodmart mide 1250 px centrados, asi que el
               margen que le sobra a cada lado es (100vw - 1250px)/2. Debajo
               de 1250 px de ventana eso da negativo y manda el piso de 24 px,
               que es el aire minimo contra el borde.

   --hbx-alto-hero
               El alto del hero. Sale del propio banner: es el ancho de la
               columna de la imagen por 0,747, que es la proporcion del
               archivo (747/1000). Poner exactamente ese alto es lo que hace
               que la imagen llene su columna sin franjas y sin recorte.

               SI ALGUN DIA SE CAMBIA hero-banner.jpg hay que cambiar tambien
               ese 0.747 por el alto dividido por el ancho del archivo nuevo.
               Si no se hace no se rompe nada —la imagen sigue entera, porque
               va con object-fit:contain— pero queda una franja de blanco
               abajo, o un hero mas alto de lo que hace falta.

   --hbx-col-foto
               Cuanto de la fila se lleva la imagen. Entre 900 y 1199 px se
               lleva el 56 %: ahi el panel de compra es mas alto que el banner
               (el titulo se parte en dos lineas, el despacho en dos mas) y si
               las columnas fueran mitad y mitad quedaban 158 px de blanco
               debajo de la imagen — medido. Dandole a la imagen un poco mas
               de ancho, crece de alto y el blanco casi desaparece.
               De 1200 px hacia arriba vuelve a la mitad justa, que es donde
               se ve mejor, y se topa en 800 px para que en una pantalla de
               1900 el hero no se coma la ventana entera. */
.hbx{
  /* Woodmart cierra su contenedor en 1250 px pero le pone ademas 15 px de
     padding interior. Sin sumarlos, nuestro aire llevaba al borde de la caja
     y no al borde del texto: todo quedaba corrido 15 px respecto del resto
     del sitio. */
  --hbx-aire:max(24px, calc((100vw - 1250px) / 2 + 15px));
  --hbx-col-foto:min(56%, 800px);
  --hbx-alto-hero:max(380px, calc(min(56vw, 800px) * 0.747));
}

/* Seguro del sangrado. Woodmart ya lo trae; si algun dia lo saca, sin esto
   aparecerian ~15 px de scroll horizontal en toda la portada. clip y no
   hidden: hidden convierte al body en contenedor de scroll y rompe el
   position:sticky de la cabecera. Va con .home para no tocar el resto del
   sitio, y dentro del media query para no tocar el celular. */
body.home{ overflow-x:clip; }

/* Las cuatro bandas que llegan al borde de la pantalla. El width:auto es
   obligatorio: ver la nota A de arriba. */
.hbx-hero,
.hbx-ticker,
.hbx .hbx-seccion,
.hbx-testis{
  width:auto;
  max-width:none;
  margin-inline:calc(50% - 50vw);
}

/* Y el contenido de esas bandas vuelve a la linea del contenedor. Una sola
   regla para las tres cabeceras de seccion, que son la misma pieza. */
.hbx .hbx-cab{ padding-inline:var(--hbx-aire); }


/* ── 2 · El hero ──────────────────────────────────────────────────────────

   TRES PROBLEMAS, UNA SOLA REORGANIZACION.

   (1) DOS TITULARES PELEANDO. El banner ya trae pintado "TU SUENO MAS
       REGENERATIVO" a 55 px, y al lado se dibujaba el <h1> a 48 px. Dos
       titulares del mismo tamano, uno al lado del otro, se leen como dos
       avisos distintos pegados.

       No se borra el <h1>: "Creatina 1 kg + Magnesio Triple" es el nombre de
       lo que se esta vendiendo, y sacarlo deja al cliente sin saber que
       compra (y a Google sin encabezado). Lo que se hace es bajarlo de rango:
       de 48 px a 34 (y a 28 por debajo de 1200 px, donde ademas hace falta
       por espacio). Con eso el banner queda como la unica pieza grande —es un
       aviso, se explica solo— y la columna de la derecha deja de ser un
       segundo aviso para ser lo que de verdad es: la ficha de compra (bajada,
       nombre, precio, boton, datos, despacho).

       34 px pasa a ser el techo de la pagina: es el texto vivo mas grande de
       toda la portada, por encima de los titulos de seccion (32) y por debajo
       del unico titular que sigue siendo grande, el que viene pintado dentro
       del banner. La jerarquia queda dicha una sola vez y para toda la pagina.

       Un solo tamano para todas las ofertas, no uno por oferta: el panel de
       compra tiene que verse igual mientras el carrusel se desliza.

   (2) EL TERCIO VACIO BAJO EL BOTON. La causa era que el alto de la fila lo
       decidia la foto y la columna de texto se centraba dentro, dejando el
       sobrante repartido — y en pantalla ancha ese sobrante llegaba a 150 px
       justo debajo del boton, que es donde mas se nota. Ahora el alto del
       hero es un numero definido (--hbx-alto-hero, sacado del banner) y las
       dos columnas lo llenan: la imagen porque se estira, el panel porque se
       centra en un alto que ya no le queda grande.

   (3) EL BANNER SE VEIA COMO UNA FOTO PEGADA. Tenia 40 px de lavanda
       alrededor y su propio fondo claro adentro: un rectangulo dentro de un
       panel. Ahora la imagen ocupa su mitad completa —toca el borde de
       arriba, el de abajo y el de la pantalla por la izquierda— y su unico
       limite es la juntura con el panel lavanda. Ya no hay marco: la imagen
       ES la mitad izquierda del hero. */

.hbx-hero{ padding:0; }

/* La rejilla del slide. La columna de la imagen se topa en 800 px: de ahi
   para arriba el ancho que sobra se lo lleva el panel, en vez de estirar la
   imagen hasta un hero de 950 px de alto en una pantalla de 1900. */
.hbx-slide{
  grid-template-columns:minmax(0, var(--hbx-col-foto)) minmax(0, 1fr);
  gap:0;
  padding:0;
  align-items:stretch;
  min-height:var(--hbx-alto-hero);
}

/* La mitad de la imagen es BLANCA en todas las ofertas, tenga banner o no. Dos
   motivos: el banner trae fondo blanco propio y asi no se nota donde termina
   el archivo, y las otras dos ofertas muestran frascos fotografiados sobre
   blanco con mix-blend-mode:multiply, que sobre blanco no cambia nada. El
   lavanda de la marca queda entero para el panel de compra: el hero se lee
   como dos mitades a proposito, no como una foto encima de un color. */
.hbx-foto{
  background:#fff;
  min-height:var(--hbx-alto-hero);
}

/* EL BANNER. contain y no cover, pegado arriba: ver la nota C de la cabecera.
   Recortarlo cortaria el titular que trae pintado. El sobrante que pueda
   quedar abajo (solo entre 900 y ~1200 px, donde el panel es mas alto que la
   imagen) es blanco contra el borde blanco del archivo: no se ve la juntura.
   La imagen va en absoluto con inset:0, que siempre resuelve — leccion B. */
.hbx-foto:not(.hbx-duo) img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center top;
}

/* LAS OFERTAS SIN BANNER: los dos frascos compuestos. Comparten el mismo
   --hbx-alto-hero que el banner, que es lo que impide que el carrusel salte
   de alto al deslizar de una forma a la otra.

   Del tamano de los frascos NO se toca nada: style.css ya los deja en
   width:38%; height:100%; object-fit:contain, y eso sigue sirviendo aca.
   Se probo cambiarlos a width:auto para que se ajustaran solos y salio mal:
   estas fotos van con loading="lazy" porque nacen fuera de la pantalla
   —viven en el segundo slide del carrusel—, y una foto sin descargar no tiene
   tamano propio, asi que con width:auto la casilla media 0 px de ancho... y
   una casilla de 0 px nunca entra en pantalla, asi que el navegador nunca
   descargaba la foto. Quedaba en blanco para siempre. Con el 38% la casilla
   existe desde el principio y la foto llega sola.

   Lo unico que se agrega es el tope de alto, que es la red de la leccion B:
   el height:100% de style.css se apoyaba en el aspect-ratio de la casilla,
   que aca se quita. Si ese porcentaje no resolviera, el frasco se iria a su
   tamano natural (700 px) y estiraria el hero. El tope es una longitud
   calculada, que resuelve siempre. */
.hbx-foto.hbx-duo{
  aspect-ratio:auto;
  gap:16px;
  padding:44px 28px 44px var(--hbx-aire);
}
.hbx-foto.hbx-duo img{
  max-height:calc(var(--hbx-alto-hero) - 88px);
}
.hbx-mas{ font-size:2.5rem; }

/* El banderin de la oferta se alinea con el margen de la pagina, no con el
   borde de la pantalla: la banda sangra, el contenido no. */
.hbx-cinta{
  top:28px;
  left:var(--hbx-aire);
  font-size:.75rem;
  padding:8px 18px;
}

/* EL PANEL DE COMPRA. Se centra en el alto del hero. El aire de la derecha es
   el mismo --hbx-aire de toda la pagina, asi que el borde derecho del panel
   cae exactamente sobre el borde derecho del contenedor: el hero sangra pero
   su contenido sigue cuadrado con el resto de la portada. */
.hbx-txt{
  align-self:center;
  padding:40px var(--hbx-aire) 40px clamp(32px, 3.5vw, 64px);
}

.hbx-bajada{
  font-size:.75rem;
  margin-bottom:12px;
}

/* De 48 px a 28 (y a 34 desde 1200 px): el problema (1) de mas arriba.
   Entre 900 y 1199 px se queda en 28 no solo por jerarquia sino por espacio:
   cada linea que el titulo se ahorra es una linea menos de alto del panel, y
   el alto del panel es lo que decide cuanto blanco queda bajo el banner. */
.hbx-h1{
  font-size:1.75rem;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.12;
  margin:0 0 14px;
  max-width:20ch;
}

.hbx-precio{ margin-bottom:16px; }
.hbx-precio b{ font-size:2.375rem; }
.hbx-precio s{ font-size:1.0625rem; }

/* En celular el boton toma el ancho completo porque se aprieta con el pulgar.
   En escritorio un boton de 565 px de ancho no se lee como boton, se lee como
   barra: se le da el ancho de su texto con un minimo digno.
   width:fit-content y no display:inline-flex: en linea, el boton arrastra el
   hueco del interlineado y se descuadra el aire de abajo. */
.hbx-btn{
  width:fit-content;
  min-width:250px;
  max-width:none;
  padding-inline:40px;
}

.hbx-specs{
  gap:26px;
  margin-top:20px;
  padding-top:13px;
}

.hbx-envio{ margin-top:14px; }

/* LOS PUNTOS DEL CARRUSEL. Se sacan del flujo y se pegan abajo a la izquierda
   del panel, en la misma linea vertical que el texto: asi se leen como parte
   de la ficha de compra y no como un adorno suelto en el medio de una banda
   que ahora mide toda la pantalla. left:50% es la juntura entre las dos
   mitades, y el margen repite la sangria del panel.

   El alto se repone a mano: Woodmart le pone min-height a todo <button>, y el
   punto —que style.css declara de 4 px— terminaba dibujado como una pastilla
   de 26x42. Se corrige SOLO aca, de 900 px hacia arriba, porque el celular no
   se toca; en celular sigue viendose como hoy. Queda anotado en el traspaso.
   El area que se puede pinchar sigue siendo de 44 px por el ::before. */
/* left tiene que ser la MISMA medida que la columna de la foto, no un 50%
   escrito a mano: la juntura la decide --hbx-col-foto, que vale min(56%,800px)
   hasta 1199 px y min(50%,800px) despues, y encima se topa en 800 px mientras
   el 50% sigue creciendo. Con el 50%, a 1024 px los puntos se dibujaban ENCIMA
   del banner, partidos por la costura. */
.hbx-puntos{
  position:absolute;
  left:var(--hbx-col-foto);
  bottom:28px;
  z-index:2;
  justify-content:flex-start;
  gap:8px;
  padding:0;
  /* En escritorio los puntos son el unico control visible del carrusel, y el
     apagado era #c9bfe4 sobre el lavanda #e5e0f5 del hero: casi invisible. */
  margin-left:clamp(32px, 3.5vw, 64px);
}
.hbx-punto{
  width:30px;
  height:5px;
  min-height:0;
}
.hbx-punto::before{ inset:-20px -4px; }


/* ── 3 · La cinta de sellos ───────────────────────────────────────────────
   Va a sangre (la regla de arriba ya se la aplico) y sin relleno lateral: es
   una cinta que corre, tiene que entrar y salir por los bordes de la
   pantalla.

   Y DE PASO SE ARREGLA UN HUECO QUE YA EXISTIA. La cinta imprime la lista dos
   veces y la corre media pista (translateX(-50%)); cuando ha corrido justo esa
   mitad, la segunda copia esta donde arranco la primera y el bucle no se nota.
   Eso solo funciona si UNA copia es mas ancha que la pantalla. Los cinco
   sellos suman ~960 px, asi que de 960 px de ventana hacia arriba —o sea en
   cualquier notebook— al final de cada vuelta se abria una franja en blanco a
   la derecha. Se veia como si la cinta se cortara.

   min-width:100vw obliga a que cada copia mida al menos una pantalla: la pista
   pasa a medir dos pantallas, media pista es exactamente una, y nunca queda
   hueco. space-evenly reparte los sellos en ese ancho en vez de
   dejarlos amontonados a la izquierda. */
.hbx-ticker-grupo{
  min-width:100vw;
  justify-content:space-evenly;
  gap:56px;
  padding:18px 28px;
}


/* ── 4 · Rotulos de seccion ───────────────────────────────────────────────
   LA REFERENCIA usa rotulos de 16 px, mayusculas, peso 400: un solo renglon
   discreto por seccion. NO se copia tal cual, y el motivo es que nuestra
   identidad ya tiene dos niveles y los dos dicen algo distinto: el
   .hbx-eyebrow morado en mayusculas ("COMPRA JUNTO Y AHORRA") es el rotulo
   —ese SI es el equivalente al de la referencia— y el .hbx-h2 es la pregunta
   en voz de la marca ("Con que necesitas ayuda?"). Aplanar los dos a 16 px
   deja la portada sin voz y borra el morado, que es lo primero que se
   reconoce de HerboMax.

   Lo que SI se toma de la referencia es el equilibrio: el titulo baja de 30 a
   32 px pero deja de competir, porque el eyebrow sube un punto y toma el peso
   de rotulo, y sobre todo porque ahora hay mucho mas aire entre secciones. El
   texto vivo mas grande de la portada queda en 34 px (el <h1> del hero) y
   ningun titulo de seccion lo pasa. */
.hbx .hbx-seccion,
.hbx-testis{ padding:72px 0; }

.hbx-eyebrow{
  font-size:.75rem;
  margin-bottom:12px;
}
.hbx-h2{
  font-size:2rem;
  line-height:1.1;
}
.hbx-sub{
  font-size:1rem;
  max-width:52ch;
  margin-top:14px;
}


/* ── 5 · Objetivos ────────────────────────────────────────────────────────
   EL PROBLEMA DEL RITMO: la rejilla era de 4 columnas fijas, pero solo la
   pestana "Energia" tiene 4 productos. Las otras tres tienen 3, y la cuarta
   columna quedaba vacia a la derecha: al cambiar de pestana la fila se veia
   coja, como si faltara un producto.

   Se cambia a flex con wrap y justify-content:center. Con 4 productos se ven
   4 parejos; con 3, las tarjetas crecen hasta su tope y la fila se centra
   sola. Ninguna pestana queda coja y la tarjeta nunca pasa de 296 px, que es
   donde el frasco todavia se ve bien sin quedar enorme.

   El 190 px de la base esta elegido a mano, no al ojo: es el ancho a partir
   del cual caben CUATRO tarjetas en la pantalla mas angosta de escritorio
   (900 px). Con una base mas generosa —se probo con 240— a 1024 px solo
   entraban tres y la cuarta se iba sola a una segunda fila. Una tarjeta
   huerfana debajo de tres se lee como un error de la pagina.

   Medido: en 1900 y 1440 px (contenido 1250) da 4 tarjetas de 294 px; en 1280
   da 4 de 290; en 1024 da 4 de 226; en 900 da 4 de 195. Y las pestanas de 3
   productos dan siempre 3 tarjetas de 296 px centradas. */
.hbx-tabs{
  padding:26px var(--hbx-aire) 0;
  gap:10px;
}
.hbx-tab{ font-size:1rem; }

/* Rejilla fija y alineada a la izquierda, no flex centrado. Cada pestana trae
   distinta cantidad de productos: con flex centrado, la fila cambiaba de ancho
   y de posicion al cambiar de pestana, y las tarjetas saltaban de un lado a
   otro delante del cliente. Con 4 columnas fijas, la fila arranca siempre en
   el mismo sitio y la tarjeta mide siempre lo mismo. */
.hbx-grilla{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  padding:30px var(--hbx-aire) 0;
}
.hbx-prod{
  flex:1 1 190px;
  max-width:296px;
  border-radius:20px;
}
.hbx-prod-cuerpo{ padding:18px; }
.hbx-prod-cuerpo h3{ font-size:1.0625rem; }
.hbx-prec2 b{ font-size:1.25rem; }
.hbx-agregar{
  min-height:48px;
  margin-top:14px;
}

/* En celular esta pastilla tomaba el ancho de la pantalla menos los margenes.
   En escritorio, un boton de 1250 px de ancho no es un boton. */
.hbx-todos{
  width:fit-content;
  max-width:none;
  padding-inline:44px;
  margin:36px auto 0;
}


/* ── 6 · Packs ────────────────────────────────────────────────────────────
   DECISION: la tarjeta pasa de horizontal a VERTICAL, y la seccion de dos
   columnas a una fila que se centra sola.

   La tarjeta horizontal (foto a la izquierda, todo lo demas a la derecha) se
   diseno para el celular, donde el ancho es escaso y el alto sobra. En
   escritorio se da vuelta el problema: a 575 px de ancho, la casilla de fotos
   se quedaba en 160 px y los dos frascos —que son verticales— salian
   diminutos al lado de un bloque de texto enorme. Un pack se vende por la
   foto de lo que trae; ahi la foto era lo mas chico de la tarjeta.

   Vertical ademas le da a la portada un solo ritmo: objetivos y packs son la
   misma forma de tarjeta repetida, que es lo que hace la referencia.

   Y flex con wrap en vez de rejilla, con la MISMA base y el MISMO tope que
   las tarjetas de objetivos (190 y 296 px), por dos razones:

   1. Toda la portada queda sobre una sola cuadricula. En 1440 px una tarjeta
      de pack mide 294 px, exactamente lo mismo que una de producto: las dos
      secciones se leen como una sola pagina y no como dos maquetas pegadas.

   2. No deja tarjetas huerfanas. Hoy hay CUATRO packs vivos (el de colageno
      no se dibuja porque le falta un producto en la tienda), y con esta base
      caben las cuatro en una fila desde 900 px. Con grid-template-columns la
      cuarta se iba sola a una segunda fila, pegada a la izquierda, que se lee
      como un error de la pagina. Si algun dia vuelve el quinto pack, flex
      pone cuatro y centra la quinta abajo, que sigue siendo correcto. */
.hbx-pk-carril{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
  padding:30px var(--hbx-aire) 0;
}
.hbx-pk{
  flex:1 1 190px;
  max-width:296px;
  grid-template-columns:minmax(0, 1fr);
  border-radius:20px;
}

/* La casilla de fotos pasa a ser la cabeza de la tarjeta. El aspect-ratio le
   da un alto definido a las dos fotos, que van en absoluto dentro de sus
   casillas (leccion B): asi todos los packs tienen exactamente la misma
   cabeza, aunque los frascos que muestran sean de distinto porte.

   Cuadrada y no 4:3, por lo mismo que la tarjeta de producto: los frascos son
   VERTICALES. En una casilla apaisada de 294x220 los dos frascos quedaban de
   146 px de alto; en una cuadrada de 294x294 llegan a 219 y se les lee la
   etiqueta. Y de paso es la misma caja que usa .hbx-prod-foto. */
.hbx-pk-fotos{
  aspect-ratio:1/1;
  min-height:0;
  padding:22px 16px;
}
.hbx-pk-mas{ font-size:1.25rem; }

/* Ya no hay nada a la izquierda: el borde que separaba las dos mitades pasa a
   ser el que separa la foto del texto. */
.hbx-pk-cuerpo{
  border-left:0;
  border-top:1.5px solid var(--borde, #e6e2f0);
  padding:18px;
}
.hbx-pk-cuerpo h3{ font-size:1.0625rem; }
.hbx-pk-precio b{ font-size:1.375rem; }
.hbx-pk-banda{ font-size:.75rem; }

/* CONTRASTE. style.css le puso a este boton --naranja (#ff5500), que con
   texto blanco da 3,21:1 y no llega al 4,5:1 que pide WCAG AA. Es el unico
   boton de la portada que quedo con el naranja vivo: .hbx-btn y .hbx-agregar
   ya usan --naranja-btn (#cc4400, 4,78:1). Aca se corrige de 900 px hacia
   arriba, que es lo unico que este archivo puede tocar.
   OJO: EN CELULAR SIGUE MAL. Hay que arreglarlo en style.css; queda avisado
   en el informe de este cambio. */
.hbx-pk-add{
  background:var(--naranja-btn, #cc4400);
  min-height:48px;
  margin-top:14px;
}
.hbx-pk-add:active{ background:#a83700; }

.hbx-packs .hbx-todos{ margin-top:36px; }


/* ── 7 · Testimonios ──────────────────────────────────────────────────────
   Sin opiniones, la seccion muestra el estado vacio, que es UNA sola tarjeta.
   En una banda de 1250 px, 520 px de ancho la dejaban como una nota perdida
   en el medio. Se le da el ancho de un texto comodo de leer y aire de sobra. */
.hbx-testi-carril{
  padding:30px var(--hbx-aire) 0;
  gap:24px;
}
.hbx-testi-vacio{
  max-width:680px;
  padding:40px 44px 34px;
  border-radius:24px;
}
.hbx-testi-titulo{ font-size:1.5rem; }
.hbx-testi-texto{ font-size:1rem; }

/* ── el carril de verdad: CUATRO a la vista, el resto hacia la derecha ─────
   Es lo que pidio el dueno: "la idea entonces es que se vean 4 y las demas
   vayan apareciendo hacia la derecha".

   Antes esto era una rejilla de dos columnas (esta en style.css). Con dos o
   tres opiniones se veia bien, pero con ocho quedaba un bloque de 2x4: un
   muro de tarjetas de media pantalla de alto.

   EL :has() ES LA PIEZA CLAVE. Solo convierte el carril cuando adentro hay
   tarjetas de verdad (.hbx-testi). El estado vacio es un .hbx-testi-vacio,
   asi que no entra aca y conserva su tarjeta unica centrada. Sin este
   filtro, la seccion vacia se volveria un carril de una sola columna
   angosta.

   Y SI EL NAVEGADOR NO CONOCE :has(), no aplica nada de este bloque y queda
   la rejilla de dos columnas de antes: mas larga, pero entera y legible.
   Nunca queda rota.

   La clase va repetida (.hbx-testi-carril.hbx-testi-carril) por lo de
   siempre en este proyecto: hay que ganarle a style.css sin usar
   !important. */
.hbx-testi-carril.hbx-testi-carril:has(.hbx-testi){
  grid-template-columns:none;
  grid-auto-flow:column;

  /* Cuatro tarjetas a la vista y un pedazo de la quinta asomandose.
     Se divide por 4.3 y no por 4 justamente para eso: con cuatro exactas la
     fila termina limpia en el borde y nada dice que haya mas. Ese trozo de
     tarjeta cortada es lo unico que le avisa a la vista que el carril sigue,
     y funciona mejor que cualquier flecha -- que es lo que el dueno ya
     mando a sacar del hero.

     Se calcula y no se usa repeat(4,1fr): en un contenedor que se desliza,
     1fr se mide contra TODO el contenido -- las ocho tarjetas -- y no contra
     lo que se ve, asi que cada tarjeta saldria angostisima. */
  grid-auto-columns:calc((100% - 3 * 24px) / 4.3);

  overflow-x:auto;
  overscroll-behavior-x:contain;

  /* "proximity" y no "mandatory": con mandatory el navegador obliga a caer
     siempre en una tarjeta, y si alguien arrastra apenas un poco lo devuelve
     al punto de partida, que se siente como que la pagina pelea. */
  scroll-snap-type:x proximity;
  scroll-padding-inline-start:var(--hbx-aire);

  /* Aire abajo para la barra de desplazamiento, que aca conviene que se vea:
     es la pista de que hay mas tarjetas al lado. */
  padding-bottom:16px;
}
.hbx-testi-carril.hbx-testi-carril:has(.hbx-testi) .hbx-testi{
  scroll-snap-align:start;
}


/* ── 8 · La barra de compra fija ──────────────────────────────────────────
   Es una pieza de celular: se pega abajo para que el pulgar la alcance. En
   escritorio no hay pulgar y el boton del hero esta siempre a la vista.
   style.css ya la esconde desde 900 px; se repite aca por si alguna vez se
   toca esa hoja, porque una barra fija tapando el pie en escritorio es de las
   cosas que el dueno veria antes que nadie. */
.hbx-barra{ display:none; }
body.hbx-con-barra{ padding-bottom:0; }


/* ── 9 · Teclado y mouse ──────────────────────────────────────────────────
   En escritorio se navega con teclado mucho mas que en celular, y Woodmart
   borra los contornos de foco de sus botones. Se reponen los nuestros. */
.hbx-tab:focus-visible,
.hbx-punto:focus-visible,
.hbx-btn:focus-visible,
.hbx-agregar:focus-visible,
.hbx-pk-add:focus-visible,
.hbx-todos:focus-visible,
.hbx-prod-foto:focus-visible{
  outline:2px solid var(--morado, #581fb6);
  outline-offset:3px;
}

/* Hover solo donde de verdad hay un mouse: en una tablet con dedo, :hover se
   queda pegado despues de tocar. La tarjeta se levanta un pelo y toma sombra;
   se nombran las propiedades una por una, nunca transition:all. */
@media (hover:hover){
  .hbx-prod,
  .hbx-pk{
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .hbx-prod:hover,
  .hbx-pk:hover{
    border-color:var(--borde-2, #cfc8e2);
    box-shadow:0 10px 26px rgba(20, 23, 58, .10);
    transform:translateY(-3px);
  }
  .hbx-pk-destacado:hover{ border-color:var(--morado, #581fb6); }
}


} /* fin @media (min-width:900px) */


/* ##########################################################################
   ESCRITORIO DE VERDAD — desde 1200 px

   Aca el panel de compra ya cabe holgado, asi que el hero vuelve a la mitad
   justa: la imagen ocupa exactamente medio ancho y su alto es ese medio ancho
   por 0,747, o sea que el banner llena su columna al milimetro —sin recorte y
   sin una franja de blanco— y las dos columnas terminan a la misma altura.
   Es el punto donde desaparecen del todo los dos problemas que el dueno
   describio: el hueco bajo el boton y la foto pegada dentro del panel.
   ########################################################################## */
@media (min-width:1200px){
  .hbx{
    --hbx-col-foto:min(50%, 800px);
    --hbx-alto-hero:max(380px, calc(min(50vw, 800px) * 0.747));
  }

  .hbx-txt{ padding-block:48px; }

  /* Los 34 px prometidos: el texto vivo mas grande de la portada. */
  .hbx-h1{
    font-size:2.125rem;
    letter-spacing:-.035em;
    line-height:1.1;
    margin-bottom:18px;
  }
  .hbx-precio{ margin-bottom:22px; }
  .hbx-precio b{ font-size:2.75rem; }
  .hbx-precio s{ font-size:1.125rem; }
  .hbx-specs{
    gap:34px;
    margin-top:26px;
    padding-top:16px;
  }
  .hbx-specs dt{ font-size:1.25rem; }
  .hbx-envio{ margin-top:18px; }
}


/* ##########################################################################
   ESCRITORIO ANCHO — desde 1280 px
   Aca ya sobra ancho: lo unico que cambia es el aire. Mas alto de banda entre
   secciones y la ficha de compra un poco mas suelta.
   ########################################################################## */
@media (min-width:1280px){
  .hbx .hbx-seccion,
  .hbx-testis{ padding:88px 0; }

  .hbx-txt{ padding-block:56px; }
  .hbx-grilla,
  .hbx-pk-carril,
  .hbx-testi-carril{
    gap:28px;
    padding-top:34px;
  }
  .hbx-tabs{ padding-top:30px; }
}


/* ##########################################################################
   QUIEN PIDIO MENOS MOVIMIENTO
   style.css ya apaga TODAS las transiciones dentro de .hbx con !important, o
   sea que el hover de arriba no se anima. Falta apagar el desplazamiento en
   si: sin esto la tarjeta seguiria dando un salto seco de 3 px.
   ########################################################################## */
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  .hbx-prod:hover,
  .hbx-pk:hover{ transform:none; }
}


/* ══ Flechas del carrusel, solo en escritorio ══════════════════════════
   En el celular el carrusel se desliza con el dedo y eso basta. Con un mouse
   no hay gesto equivalente: la barra de scroll esta escondida a proposito
   (scrollbar-width:none) y sin flechas no habia NINGUNA forma de ver la
   segunda ni la tercera oferta. Los puntos se podian tocar, pero nadie
   los mira como boton.
   Las dibuja portada.js solo cuando hay mas de una oferta. */
@media (min-width:900px){
  .hbx-punto{ background:#7a6ba8; }
  .hbx-punto.on{ background:var(--morado,#581fb6); }

  .hbx-flecha{
    position:absolute;
    top:calc(var(--hbx-alto-foto, 420px) / 2);
    transform:translateY(-50%);
    z-index:3;
    width:44px; height:44px;
    display:grid; place-items:center;
    border:none; border-radius:999px;
    background:rgba(255,255,255,.92);
    color:var(--texto,#14173a);
    box-shadow:0 2px 12px rgba(20,23,58,.18);
    cursor:pointer;
    transition:background .15s, box-shadow .15s;
  }
  .hbx-flecha:hover{ background:#fff; box-shadow:0 4px 18px rgba(20,23,58,.26); }
  .hbx-flecha:focus-visible{ outline:2px solid var(--morado,#581fb6); outline-offset:3px; }
  .hbx-flecha[disabled]{ opacity:.35; cursor:default; }
  .hbx-flecha--izq{ left:20px; }
  .hbx-flecha--der{ left:calc(var(--hbx-col-foto) - 64px); }
}


/* La foto de la tarjeta esta pegada a los bordes y .hbx-prod tiene
   overflow:hidden: un anillo de foco hacia AFUERA quedaba cortado por tres
   lados. Se dibuja hacia adentro. */
@media (min-width:900px){
  .hbx-prod-foto:focus-visible{
    outline:2px solid var(--morado,#581fb6);
    outline-offset:-3px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   B · EL HERO PARTIDO EN DOS  (estructura tipo "Dua")

   QUE PIDIO EL DUENO
   La primera pantalla con la estructura de dua.cl: el bloque de texto con
   el titular y el boton de comprar a la IZQUIERDA, y la foto ocupando la
   mitad DERECHA. Arriba, nuestra cabecera y nuestro menu tal como estan.

   SOLO LA ESTRUCTURA. LOS COLORES NO SE TOCAN.
   Dua usa verde #0d612d sobre crema #f3f6ef -- los medi en su sitio -- y
   una primera version de este bloque copiaba ese esquema poniendo el
   panel en morado solido con el texto en blanco. El dueno lo corrigio:
   queria la disposicion, no la paleta.

   Asi que aca no hay ni una regla de color. Y no hace falta ninguna: el
   hero entero ya es lavanda (style.css:53) y la mitad de la foto ya es
   blanca (mas arriba en este archivo), asi que al invertir las columnas
   el lavanda queda en el panel y el blanco en la foto, solos.

   EL MARCADO NO SE TOCA. front-page.php ya dibuja cada oferta como
   [.hbx-foto][.hbx-txt]; el orden visual se invierte con `order`, que es
   solo de pintado. Sin `order`, dar vuelta las columnas obligaria a
   cambiar el HTML, y el orden del HTML es el que oye un lector de
   pantalla y el que sigue la tecla de tabulacion: ahi la foto va primero
   a proposito, porque es lo que identifica la oferta.

   TODO DENTRO DE min-width:900px. En el telefono el hero sigue siendo el
   aprobado: foto arriba, texto abajo. No cambia ni un pixel.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:900px){

  /* Mitades iguales, como la referencia. La columna de la foto ya no se
     topa en 800 px: aca la foto es la protagonista de su mitad. */
  /* El panel es angosto y la foto manda, que es lo que pidio el dueno.
     Pidio 20%. No se puede: a 1440 px eso deja el panel en 288 px y, con
     el margen de pagina adentro, 240 px utiles. El boton "Comprar ahora"
     mide 250: NO CABE. Y el titulo se parte en CUATRO lineas, estirando
     el hero 100 px de alto. Medido, no estimado.

     26% es el mas angosto donde todo entra: 374 px de panel a 1440, con
     302 utiles, boton de 250 y titulo en dos lineas. La foto se lleva
     1066 px, o sea el 74%.

     El minmax(360px, 26%) es la red: por debajo de ~1385 px el 26% seria
     mas angosto que 360 y el boton volveria a no caber, asi que ahi manda
     el minimo. Medido a 1100: panel 360, foto 740, todo entra. */
  /* El ancho lo fija el bloque de mas abajo (version del dueno, 21%).
     Esta regla se queda como referencia de la version anterior. */
  .hbx-slide{
    grid-template-columns:minmax(360px, 26%) minmax(0, 1fr);
  }

  /* ── el panel de compra, ahora a la IZQUIERDA ── */
  /* align-self:stretch para que el lavanda llegue de arriba abajo de su
     mitad; centrado antes dejaba el color solo detras del texto. */
  .hbx-slide .hbx-txt{
    order:1;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    /* El aire de la izquierda es el de la pagina, para que el titular
       arranque en el mismo riel que el resto de la portada. El de la
       derecha es fijo: es una juntura interna, no un borde de pagina. */
    /* El margen lateral ya NO es el --hbx-aire de la pagina (110 px a
       1440). Con un panel de 374 px se comia el 30% del ancho y el boton
       no cabia. Con el panel angosto, alinear el titulo al riel de la
       pagina cuesta mas de lo que aporta. */
    padding-block:48px;
    padding-inline:clamp(24px, 2.5vw, 40px);
    text-align:left;
  }

  /* ── la foto, ahora a la DERECHA ── */
  .hbx-slide .hbx-foto{
    order:2;
  }

  /* El boton pasa de barra a pastilla: en la referencia no cruza la
     columna, se ajusta a su texto. Es disposicion, no color: sigue siendo
     el mismo naranja de siempre. */
  .hbx-slide .hbx-txt .hbx-btn{
    width:auto;
    align-self:flex-start;
    padding:0 34px;
  }
}

/* Los puntos del carrusel colgaban de la columna de la foto, que antes era
   la izquierda. Al invertir las columnas hay que moverlos a la mitad
   derecha, o quedarian encima del panel tapando el boton. */
@media (min-width:900px){
  .hbx-puntos{
    left:auto;
    right:var(--hbx-aire);
  }
  /* Y las flechas, por lo mismo: van sobre la foto, que ahora esta a la
     derecha. La izquierda arranca pasada la juntura de las dos mitades. */
  .hbx-flecha--izq{ left:calc(50% + 20px); }
  .hbx-flecha--der{ left:auto; right:20px; }
}


/* ── El panel angosto, version del dueno (Claude Design) ──────────────
   El dueno volvio con el diseno hecho: panel al 21% y la foto llevandose
   el 79%. Antes yo habia dicho que 20% no se podia, y tenia razon CON EL
   BOTON DE UNA LINEA: media 250 px y en el panel quedaban 212.

   Su diseno resuelve eso de otra forma: el boton pasa a ocupar el ancho
   del panel y se parte en dos lineas ("Comprar / ahora"). Asi ya no hay
   un ancho minimo que respetar, y el panel puede bajar hasta donde el
   titulo siga siendo legible. Por eso el minimo baja de 360 a 280 px. */
@media (min-width:900px){

  .hbx-slide{
    grid-template-columns:minmax(280px, 21%) minmax(0, 1fr);
  }

  .hbx-slide .hbx-txt{
    padding-block:44px;
    padding-inline:clamp(20px, 3vw, 45px);
  }

  /* ── la bajada pasa de renglon suelto a etiqueta naranja ── */
  .hbx-slide .hbx-txt .hbx-bajada{
    align-self:flex-start;
    max-width:100%;
    margin:0 0 22px;
    padding:11px 18px;
    border-radius:14px;
    background:var(--naranja,#ff5500);
    color:#fff;
    font-size:.8125rem;
    letter-spacing:.09em;
    line-height:1.25;
  }

  /* ── el titulo, en mayusculas ── */
  .hbx-slide .hbx-txt .hbx-h1{
    text-transform:uppercase;
    font-weight:700;
    font-size:clamp(1.5rem, 2.1vw, 2rem);
    line-height:1.06;
    letter-spacing:-.02em;
    margin-bottom:8px;
    /* Un nombre largo sin espacios (BISGLICINATO) en una columna angosta
       se sale por el lado si no se le deja partir. */
    overflow-wrap:anywhere;
  }

  /* La linea de formato, debajo del titulo, chica y en morado. */
  .hbx-slide .hbx-txt .hbx-form-hero{
    margin:0 0 18px;
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--morado,#581fb6);
    line-height:1.4;
  }

  /* ── el precio, apilado: en 212 px no caben precio y tachado al lado ── */
  .hbx-slide .hbx-txt .hbx-precio{
    display:block;
    margin:0 0 16px;
  }
  .hbx-slide .hbx-txt .hbx-precio b{
    display:block;
    font-size:clamp(1.9rem, 2.6vw, 2.5rem);
  }
  .hbx-slide .hbx-txt .hbx-precio s{
    display:block;
    margin-top:2px;
    font-size:1.0625rem;
  }

  /* ── el ahorro, ahora palido en vez de naranja solido ──────────────
     En el diseno del dueno la pastilla del ahorro deja de competir con el
     boton: fondo naranja muy claro y el texto en naranja oscuro. Se usa
     #cc4400 y no el naranja vivo porque sobre un fondo claro el vivo da
     2,6:1 de contraste y no se lee; el oscuro da 4,8. */
  .hbx-slide .hbx-txt .hbx-ahorro{
    display:inline-flex;
    margin-top:10px;
    padding:6px 14px;
    background:#ffe9de;
    color:#a83700;
    font-size:.8125rem;
  }

  /* ── el boton: ancho del panel y libre de partirse en dos lineas ──
     Esto es lo que hace posible el panel angosto. width:100% en vez de
     ajustarse al texto, y sin nowrap, asi que "Comprar ahora" se acomoda
     en dos renglones cuando la columna es angosta. El alto pasa a auto
     con padding para que crezca con las lineas en vez de recortarlas. */
  .hbx-slide .hbx-txt .hbx-btn{
    /* display:block y NO flex, y esta es la pieza clave de todo el panel
       angosto. El boton venia como contenedor flex, y en flex el texto de
       adentro se vuelve un item que NO SE PARTE: exigia sus 250 px enteros
       aunque en la columna solo hubiera 216, y se salia 34 px por encima de
       la foto. Medido. Como bloque, el texto envuelve y el boton se ajusta
       a la columna. min-width:0 remata: un item de flex no baja de su ancho
       minimo si no se le dice. */
    display:block;
    width:100%;
    min-width:0;
    align-self:stretch;
    min-height:0;
    padding:16px 20px;
    border-radius:14px;
    font-size:1.0625rem;
    line-height:1.25;
    text-align:center;
    overflow-wrap:anywhere;
  }

  .hbx-slide .hbx-txt .hbx-specs{
    flex-wrap:wrap;
    gap:14px 18px;
  }

  .hbx-slide .hbx-txt .hbx-envio{
    align-items:flex-start;
    margin-top:14px;
    font-size:.8125rem;
    line-height:1.4;
  }
}


/* ══ Arreglos del hero partido, vistos en el sitio vivo ═══════════════ */
@media (min-width:900px){

  /* LA CINTA SOBRE LA FOTO, FUERA.
     Decia "Promocion de lanzamiento" justo cuando la etiqueta naranja del
     panel dice "Pack de lanzamiento": dos pastillas naranjas con el mismo
     mensaje en la misma pantalla. Se queda la del panel, que es la que el
     dueno diseno.
     Ademas venia rota: heredaba el line-height:0 de .hbx-foto (que existe
     para matar el hueco bajo las imagenes) y quedaba de 16 px de alto con
     el texto saliendose por arriba y por abajo. Se deja la correccion
     escrita por si algun dia se vuelve a mostrar. */
  .hbx-slide .hbx-cinta{ line-height:1.3; }
  .hbx-slide .hbx-foto .hbx-cinta{ display:none; }

  /* LAS FLECHAS, LAS DOS AL BORDE DERECHO.
     Estaban en left:calc(50% + 20px), que suponia el hero partido por la
     mitad. Con el panel al 21% la foto empieza en el 21%, no en el 50%:
     la flecha izquierda caia en MEDIO de la foto (medido: x=732 con la
     foto empezando en x=295). Puestas las dos juntas a la derecha, el
     calculo deja de depender del ancho del panel, que ademas el dueno
     puede querer mover otra vez. */
  .hbx-flecha--izq{ left:auto; right:80px; }
  .hbx-flecha--der{ left:auto; right:20px; }
}


/* ══ LAS FLECHAS Y LOS PUNTOS DEL HERO ════════════════════════════════
   QUE PASABA: las dos flechas eran dos circulos blancos siempre puestos
   sobre el borde derecho de la foto. Y justo ahi el banner tiene el
   fondo claro, asi que quedaban flotando en blanco sobre blanco, sin
   nada que las sostuviera. El dueno lo describio como "no me gusta como
   se ve" y tenia razon: se leian como dos botones sueltos, no como
   parte del diseno.

   QUE SE HACE AHORA: el carrusel avanza solo cada 5 segundos
   (assets/portada.js), asi que las flechas dejan de ser la unica forma
   de ver la segunda oferta y pueden quedarse quietas hasta que hagan
   falta. Aparecen al acercar el raton al hero y se van al alejarlo.

   OJO CON EL TECLADO: no basta con :hover. Quien navega con la tecla de
   tabulacion nunca pasa el raton por encima, asi que con solo :hover las
   flechas serian invisibles PERO enfocables: el foco se perderia en un
   punto que no se ve. Por eso tambien :focus-within, y la flecha
   enfocada se muestra siempre. */
@media (min-width:900px){

  .hbx-flecha{
    opacity:0;
    transition:opacity .22s ease, background-color .15s ease, box-shadow .15s ease;
  }
  .hbx-hero:hover .hbx-flecha,
  .hbx-hero:focus-within .hbx-flecha{
    opacity:1;
  }
  .hbx-flecha:focus-visible{
    opacity:1;
  }
  /* En una pantalla tactil grande no hay raton que acercar, asi que ahi
     se quedan siempre a la vista. */
  @media (hover:none){
    .hbx-flecha{ opacity:1; }
  }

  /* Menos blancas y mas de la marca: sobre el fondo claro del banner un
     blanco al 92% no se distingue de la foto. */
  .hbx-flecha{
    background:rgba(255,255,255,.72);
    color:var(--morado,#581fb6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 2px 10px rgba(20,23,58,.14);
  }
  .hbx-flecha:hover{
    background:#fff;
    box-shadow:0 4px 16px rgba(20,23,58,.22);
  }
}

/* ── los puntos, que ahora avisan cuanto falta ────────────────────────
   Esta es la senal sutil que reemplaza a las flechas siempre puestas: el
   punto activo se va llenando de morado durante los 5 segundos que dura
   cada oferta. El cliente entiende solo que hay mas y que van a cambiar,
   sin ningun texto que lo explique.

   La clase hbx-auto la pone y la quita portada.js: solo esta mientras el
   avance automatico corre de verdad. Si el cliente toma el control, la
   clase se va y el relleno desaparece: el punto vuelve a ser un punto.

   Va SIN media query: en el telefono el carrusel tambien avanza solo, y
   ahi la senal hace mas falta todavia porque no hay flechas. */
.hbx-punto{ position:relative; overflow:hidden; }

.hbx-punto::after{
  content:'';
  position:absolute;
  inset:0;
  width:0;
  background:var(--morado,#581fb6);
  border-radius:inherit;
}

.hbx-hero.hbx-auto .hbx-punto.on::after{
  animation:hbx-punto-llena 5s linear forwards;
}

@keyframes hbx-punto-llena{
  from{ width:0; }
  to{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .hbx-punto::after{ animation:none !important; }
  .hbx-flecha{ opacity:1 !important; transition:none; }
}

/* ══ LAS BANDAS BLANCAS A LOS LADOS DEL BANNER ═══════════════════════
   QUE VEIA EL DUENO: el banner no llenaba su mitad. A 1900 px la columna
   de la foto mide 1501 x 603 -- proporcion 2,49, muy alargada -- y el
   banner mide 1000 x 747, o sea 1,34, casi cuadrado. Con object-fit
   contain la imagen se encoge hasta caber entera y quedan 347 px de
   blanco a CADA lado. Medido.

   POR QUE NO SE ARREGLA CON cover: para llenar esa caja habria que
   recortar 259 px arriba y 259 abajo de una imagen de 747 de alto. Queda
   el 31% del banner: se pierden el titular pintado y los frascos. Peor
   el remedio.

   LO QUE SE HACE MIENTRAS TANTO: continuar cada banda con el color del
   borde del banner por ese lado. Se muestrearon los pixeles del archivo:
   el borde izquierdo es blanco puro y el derecho es lavanda
   rgb(231,218,236). Con ese degradado las bandas dejan de leerse como un
   hueco y el banner parece seguir hacia los lados.

   EL ARREGLO DE VERDAD ES OTRO, y depende del dueno: un banner ancho.
   Para esta franja hace falta una imagen de proporcion ~2,5 (por ejemplo
   2400 x 960). Con eso llena de borde a borde sin bandas y sin recortar
   nada. Mientras no exista, este degradado es lo mejor posible con el
   archivo que hay. */
@media (min-width:900px){
  /* El banner LLENA su mitad, de borde a borde. Lo pidio el dueno y es lo
     correcto: con contain quedaban bandas a los lados y una linea visible
     donde terminaba la foto, porque el color de la banda nunca calzaba
     exacto con el borde del archivo en ese punto.

     LO QUE CUESTA: cover recorta arriba y abajo. Medido a 1440 px, que es
     la pantalla mas comun: recorta 95 px por lado y queda el 78% del alto.
     El titular pintado ("TU SUENO MAS REGENERATIVO") y los dos frascos
     sobreviven enteros. Comprobado mirando la pagina, no calculando.

     OJO EN PANTALLAS MUY ANCHAS: a 1900 px la columna es mas alargada y el
     recorte sube a 259 px por lado, o sea que se ve el 54% del alto. Eso
     NO se arregla con CSS: viene de que el banner es casi cuadrado
     (1000x747) y la franja es muy alargada. La solucion es un banner de
     proporcion ~2,5 -- por ejemplo 2400x960 --, y con ese el recorte baja
     casi a cero en todas las pantallas.

     El fondo lavanda queda debajo para el instante en que la foto todavia
     no cargo: sin el se ve un rectangulo blanco parpadear. */
  .hbx-slide .hbx-foto:not(.hbx-duo){
    background:var(--lavender, #e5e0f5);
  }
  .hbx-slide .hbx-foto:not(.hbx-duo) img{
    object-fit:cover;
    object-position:center;
  }
}

/* ══ FUERA LAS FLECHAS DEL CARRUSEL — SE MUDO ═════════════════════════
   Esta regla estaba aca, y aca estaba mal: esta hoja entera vive dentro de
   @media (min-width:900px), asi que escondia las flechas en el computador y
   las dejaba sueltas en el telefono, donde ademas no tenian NINGUN estilo.
   Se veian como dos cajas grises y empujaban 42 px la pagina.

   Vive ahora en style.css, sin media query, para que valga en los dos
   tamanos. La explicacion completa esta alla. */


/* ══ LAS OFERTAS SIN BANNER: EL FRASCO PERDIDO EN EL BLANCO ═══════════
   QUE VEIA EL DUENO: en la oferta del Pack Colageno, un solo frasco
   chico en medio de una mitad blanca enorme.

   POR QUE PASABA, dos cosas sumadas:

   1. El tamano del frasco estaba calculado para el layout ANTERIOR, donde
      la mitad de la foto era el 56% del hero. Ahora es el 79%: la columna
      pasó de ~800 px a 1138, y el frasco se quedo en 380. Medido: 380 de
      frasco y 758 px de blanco al lado.

   2. Esa oferta compone DOS frascos, pero el Colageno en polvo
      (HM-COLP-300) no existe como producto en la tienda, asi que su foto
      no se dibuja y queda uno solo. Eso no se arregla con CSS: hay que
      crear el producto. Mientras no exista, al menos que el que si esta
      se vea grande y centrado.

   QUE SE HACE:
   · El medio pasa de blanco a lavanda. Con uno o dos frascos recortados,
     el blanco se lee como un hueco; el lavanda lo lee como fondo.
   · El frasco crece: de 380x450 a 552x482 cuando va solo, medido.
   · only-of-type y NO only-child: el <img> nunca es hijo unico porque la
     cinta de la oferta comparte la caja. Con only-child la regla no
     calzaba con nada y el frasco no crecia -- probado.
   · El tope de alto va en px derivado de --hbx-alto-hero, no en
     porcentaje: el alto del padre lo decide su propio contenido, asi que
     un max-height:% no resuelve y el frasco se iba a 907 px dentro de una
     columna de 684, desbordandola. Tambien probado. */
@media (min-width:900px){
  .hbx-slide .hbx-foto.hbx-duo{
    background:var(--lavender, #e5e0f5);
    padding:44px clamp(28px, 4vw, 72px);
    gap:clamp(16px, 3vw, 48px);
  }
  .hbx-slide .hbx-foto.hbx-duo img{
    max-height:calc(var(--hbx-alto-hero, 538px) - 56px);
    width:34%;
  }
  .hbx-slide .hbx-foto.hbx-duo img:only-of-type{
    width:54%;
  }
}