/* =========================================================
   layout.css — esqueleto COMPARTIDO de pagina (extraido de
   home.css en la fase 5 del refactor): familia .section,
   grillas .pg, .scroller, trust, testimonios y FBT.
   Lo cargan TODAS las paginas; home.css quedo solo en la home.
   ========================================================= */

/* =========================================================
   home.css — landing de tienda tipo e-commerce
   Secciones: hero banners · chips categorías · ofertas del día
              destacados · reboot (módulo) · best sellers ·
              marcas · banner builder · trust · newsletter
   ========================================================= */
.section {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--sp-7) var(--app-px);
}
.section--tight { padding: var(--sp-5) var(--app-px); }
/* Banda full-bleed: dibuja un fondo de 100vw detrás de la sección
   sin romper el centrado/max-width. Usá para crear ritmo vertical
   alternando bg-deep o bg-elevated en sections clave. */
.section--band-deep,
.section--band-elev {
  position: relative;
  isolation: isolate;
}
.section--band-deep::before,
.section--band-elev::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%;
  /* `100vw` incluye el ancho de la barra de scroll en Windows/Chrome, así que
     la banda sobresalía ~8px y la página se podía arrastrar de costado. Esta
     resta le saca justo lo que ocupa la barra: 100% es el ancho Útil. */
  width: calc(100vw - (100vw - 100%));
  transform: translateX(-50%);
}
.section--band-deep::before { background: var(--bg-deep); }
.section--band-elev::before { background: var(--bg-elevated); }
/* Hairline divider opcional arriba/abajo de bandas */
.section--band-deep + .section,
.section + .section--band-deep,
.section + .section--band-elev,
.section--band-elev + .section {
  position: relative;
}
/* Visual divider sutil (solo entre sections regulares y bandas) */
.section--band-deep::after,
.section--band-elev::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: calc(100vw - (100vw - 100%));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, var(--line) 30%, var(--line) 70%, transparent 100%);
}
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  position: relative;
}
/* Hairline decorativa que cruza horizontalmente debajo del title */
.section__head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--c-cyan-400) 0,
    var(--c-cyan-400) 28px,
    var(--line) 28px,
    var(--line) 100%);
  opacity: 0.45;
}
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: clamp(0.16em, 0.18em, 0.22em);
  text-transform: uppercase;
  color: var(--accent);
}
.section__eyebrow::before {
  content: '';
  width: 14px; height: 2px; background: var(--fg); display: inline-block;
}
/* Eyebrow variants — Renata: romper la monotonía de "9 sections con
   el mismo eyebrow". Cada section comercial debería sentirse distinta. */
.section__eyebrow--ghost { color: var(--fg-dim); }
.section__eyebrow--ghost::before { display: none; }
.section__eyebrow--mag { color: var(--c-mag-500); }
.section__eyebrow--mag::before { background: var(--c-mag-500); }
.section__eyebrow--sale {
  background: var(--c-mag-500);
  color: var(--c-white);
  padding: 4px 10px;
  letter-spacing: 0.18em;
  border-radius: var(--rad-sm);
}
.section__eyebrow--sale::before { display: none; }
.section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
  margin-top: 8px;
  color: var(--fg);
}
/* Count chip junto al title — para mostrar # productos, % off, etc */
.section__count {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-3);
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  vertical-align: middle;
  transform: translateY(-4px);
}
.section__count--accent {
  background: color-mix(in srgb, var(--c-cyan-400) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-cyan-400) 35%, transparent);
  color: var(--accent-text);
}
.section__count--mag {
  background: color-mix(in srgb, var(--c-mag-500) 14%, transparent);
  border-color: color-mix(in srgb, var(--c-mag-500) 40%, transparent);
  color: var(--c-mag-400);
}
.section__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.section__cta:hover {
  color: var(--accent-text);
  border-color: var(--c-cyan-400);
  background: color-mix(in srgb, var(--c-cyan-400) 8%, transparent);
}
/* Flecha del pack (SVG enmascarado como el chevron del breadcrumb), no un
   carácter de texto. .section__cta es inline-flex → gap + align-items:center la
   ubican; el hover la desplaza (transform). */
.section__cta::after {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  background-color: var(--accent);
  -webkit-mask: var(--icon-arrow-right) no-repeat center / contain;
  mask: var(--icon-arrow-right) no-repeat center / contain;
  transition: transform var(--t-fast) var(--ease-out);
}
.section__cta:hover::after { transform: translateX(4px); }
.scroller {
  position: relative;
  /* Bleed = grace zone (100px donde la card se ve completa más allá
     del max-content) + fade zone (80px donde se aplica el degradado).
     Total max = 180px por lado. Clampeado al espacio real disponible
     para que en viewports chicos no haya overflow horizontal. */
  --bleed: min(180px, max(0px, (100vw - var(--max-content)) / 2));
  margin-inline: calc(var(--bleed) * -1);
  /* El track recorta el eje vertical (colateral de overflow-x:auto), así que
     necesita padding generoso arriba y abajo para que la sombra de las cards
     —tanto en reposo (0 6px 16px) como en hover (--shadow-lg, 0 12px 32px que
     sube ~24px y baja ~40px)— no se corte. Ese padding agregaría aire entre
     bloques, así que lo descontamos con márgenes negativos equivalentes:
     la sombra se desvanece entera y el layout queda idéntico (gap arriba y
     abajo sin cambios). */
  margin-top: -20px;
  margin-bottom: -34px;
}
.scroller__track.pg--h {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  /* scroll-snap quitado: forzaba "saltos a posiciones" cuando el
     drag/momentum terminaba. Patrón Amazon/ML/B&H: scroll libre. */
  /* Padding lateral = --bleed: el primer card queda alineado donde
     estaba antes (en el borde del max-content container), pero el
     track tiene espacio extra para que las cards extras se asomen
     dentro del bleed area antes del fade. */
  /* Padding holgado arriba y abajo: deja respirar la sombra de las cards
     (reposo y hover) que el overflow recortaría. Se compensa con los
     márgenes negativos de .scroller para no agregar aire entre bloques. */
  padding: 24px var(--bleed) 42px;
  scroll-padding-inline: var(--bleed);
  grid-template-columns: none;
  cursor: default;
  outline: none;
  /* Edge fade adaptativo: --mask-start y --mask-end son toggleables via
     clases is-at-start / is-at-end (set por JS según scrollLeft).
     Las vars están registradas via @property arriba → la transition
     hace que aparezcan/desaparezcan suaves en lugar de hard-cut. */
  --mask-start: 80px;
  --mask-end: 80px;
  transition: --mask-start 280ms var(--ease-out), --mask-end 280ms var(--ease-out);
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--mask-start),
    black calc(100% - var(--mask-end)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--mask-start),
    black calc(100% - var(--mask-end)),
    transparent 100%
  );
}
/* Cursor grab solo cuando hay overflow (is-scrollable). Si todo el
   contenido cabe, no hay nada que arrastrar y mostrar grab confunde. */
.scroller.is-scrollable .scroller__track.pg--h { cursor: grab; }
.scroller.is-scrollable .scroller__track.pg--h.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}
/* Foco visible para keyboard nav: outline cyan brutalist sin bordes redondos */
.scroller__track.pg--h:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: -2px;
}
/* Bloquear HTML5 drag nativo en links e imgs — sino el browser
   inicia drag-and-drop del <a> y el mouseup nunca llega al JS. */
.scroller__track.pg--h img,
.scroller__track.pg--h a {
  -webkit-user-drag: none;
  user-drag: none;
}
.scroller.is-at-start .scroller__track.pg--h { --mask-start: 0; }
.scroller.is-at-end   .scroller__track.pg--h { --mask-end: 0; }
.scroller__track.pg--h::-webkit-scrollbar { display: none; }
/* Shelf carousel: 4 cards visibles + peek del 5to (~30% asomándose)
   = invita visualmente al scroll. Fórmula: width = (track - N gaps) / (N + 0.3). */
.scroller__track.pg--h > .p-card,
.scroller__track.pg--h > .skel-card {
  flex: 0 0 calc((100% - 4 * var(--sp-3)) / 4.3);
}
@media (max-width: 1024px) {
.scroller__track.pg--h > .p-card,
  .scroller__track.pg--h > .skel-card {
    flex: 0 0 calc((100% - 3 * var(--sp-3)) / 3.3);
  }
}
@media (max-width: 760px) {
.scroller__track.pg--h > .p-card,
  .scroller__track.pg--h > .skel-card {
    flex: 0 0 calc((100% - 2 * var(--sp-3)) / 2.3);
  }
}
@media (max-width: 480px) {
/* Teléfono: ~2 cards visibles + peek (no UNA gigante por pantalla). */
.scroller__track.pg--h > .p-card,
  .scroller__track.pg--h > .skel-card {
    flex: 0 0 calc((100% - 1.3 * var(--sp-3)) / 2.15);
  }
/* El piloto sólo tiene cuatro cards densas y mensajes largos de bloqueo.
   Una por vez evita truncar “Precio no publicado” y deja asomar la siguiente. */
.e1-private-candidates .scroller__track.pg--h > .p-card {
  flex-basis: calc(100% - 3rem);
}
}
.scroller__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--c-blue-950);
  color: var(--c-white);
  border: 1px solid var(--line);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), opacity 220ms var(--ease-out);
}
.scroller__arrow:hover { background: var(--c-cyan-400); color: var(--c-blue-900); border-color: var(--accent-text); }
/* Arrows: compensan el bleed para quedar visualmente al borde del
   max-content container (donde estaban antes), no del scroller-extended. */
.scroller__arrow--prev { left: calc(var(--bleed) - 20px); }
.scroller__arrow--next { right: calc(var(--bleed) - 20px); }
/* Edge state: si estás al inicio, prev se desvanece (no hay a dónde ir).
   Igual con next al llegar al final. JS togglea is-at-start/is-at-end. */
.scroller.is-at-start .scroller__arrow--prev,
.scroller.is-at-end   .scroller__arrow--next {
  opacity: 0;
  pointer-events: none;
}
/* =========================================================
   PRODUCT GRIDS — generic
   ========================================================= */
.pg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.pg--6 { grid-template-columns: repeat(6, 1fr); }
/* =========================================================
   FREQUENTLY BOUGHT TOGETHER — chain de productos
   ========================================================= */
.fb-together {
  padding: var(--sp-5);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
}
.fb-together__chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.fb-together__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 110px;
  max-width: 160px;
  text-align: center;
}
.fb-together__thumb {
  width: 90px;
  height: 90px;
  background: var(--c-blue-950);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.fb-together__thumb svg { width: 100%; height: 100%; }
.fb-together__name {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-together__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--c-mag-500);
  letter-spacing: -0.01em;
}
.fb-together__plus {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--accent-text);
  opacity: 0.7;
}
.fb-together__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.fb-together__total-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.fb-together__total-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--c-mag-500);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 4px;
}
/* =========================================================
   TESTIMONIOS — rating agregado + cards
   ========================================================= */
.test-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-5);
  align-items: start;
}
/* test-summary es bg-dark intencional. Textos blancos fijos
   para garantizar contraste sobre el azul en cualquier tema. */
.test-summary {
  padding: var(--sp-5);
  background: var(--c-blue-900);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--c-white);
}
.test-summary__score {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  gap: 4px var(--sp-2);
  align-items: center;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.test-summary__num {
  grid-row: 1 / 3;
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.2rem;
  color: var(--c-cyan-400);
  line-height: 1;
  letter-spacing: -0.04em;
}
.test-summary__max {
  grid-row: 1;
  grid-column: 2;
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  align-self: end;
}
.test-summary__big-stars {
  grid-row: 2;
  grid-column: 2;
  font-size: 1.1rem;
  color: var(--c-cyan-400);
  letter-spacing: 2px;
}
.test-summary__total {
  grid-row: 3;
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.test-summary__total b { color: var(--c-white); font-weight: 800; }
.test-summary__bars { display: flex; flex-direction: column; gap: 6px; }
.test-summary__row {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: var(--sp-2);
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
}
.test-summary__stars { color: var(--c-cyan-400); letter-spacing: 1px; }
.test-summary__bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.test-summary__bar span {
  display: block;
  height: 100%;
  background: var(--c-cyan-400);
}
.test-summary__pct { text-align: right; font-size: 0.66rem; }
.test-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.test-card {
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
}
.test-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-cyan-400);
}
.test-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.test-card__stars {
  color: var(--accent-text);
  letter-spacing: 2px;
  font-size: 0.9rem;
}
.test-card__verified {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 2px 6px;
  border: 1px solid var(--c-cyan-400);
}
.test-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.test-card__text {
  font-size: 0.82rem;
  color: var(--fg-mute);
  line-height: 1.45;
  flex: 1;
}
.test-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.test-card__name { color: var(--fg); }
.test-card__date { color: var(--fg-dim); }
/* =========================================================
   TRUST — 4 columnas con detalle
   ========================================================= */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.trust__item {
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust__icon {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--accent-text);
  line-height: 1;
}
.trust__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
}
.trust__desc {
  font-size: 0.8rem;
  color: var(--fg-mute);
  line-height: 1.4;
}
.trust__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--sp-1);
}
.trust__chip {
  padding: 3px 7px;
  background: var(--accent-text);
  color: var(--bg-deep);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
.pg { grid-template-columns: repeat(3, 1fr); }
.pg--6 { grid-template-columns: repeat(4, 1fr); }
.trust { grid-template-columns: repeat(2, 1fr); }
.scroller__arrow { display: none; }
.test-grid { grid-template-columns: minmax(0, 1fr); }
.test-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.pg { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.pg--6 { grid-template-columns: repeat(2, 1fr); }
.trust { grid-template-columns: minmax(0, 1fr); }
.fb-together__thumb { width: 70px; height: 70px; }
.fb-together__item { min-width: 90px; }
.trust-strip { gap: var(--sp-3); font-size: 0.64rem; padding: 8px var(--app-px); }
.test-items { grid-template-columns: minmax(0, 1fr); }
.test-summary__num { font-size: 2.4rem; }
}
@media (max-width: 480px) {
.pg, .pg--6, .reboot-module__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Sección "Comprá por categoría" — apagada por decisión del dueño
   (antes la ocultaba el dev-panel font-tester, hoy retirado). */
.section--shop-by-cat { display: none; }