/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-size: 16px; overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  background: var(--white);
  color: var(--black);
  overflow-x: clip;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --black:    #0A0A0A;
  --white:    #FFFFFF;
  --g50:      #F5F5F5;
  --g100:     #EEEEEE;
  --g300:     #C4C4C4;
  --g400:     #909090;   /* borde de controles interactivos — AA 1.4.11 ≈3.2:1 sobre blanco */
  --g500:     #6E6E6E;
  --g600:     #555555;   /* gris medio-oscuro: texto enfático secundario (cantidades, listas) */
  --g700:     #3D3D3D;   /* gris oscuro: banners, barras de anuncio */
  --yellow:   #FFD100;   /* solo ofertas/badges */
  --blue:        #002D72;   /* azul corporativo GDP */
  --blue-80:     #1A4490;
  --blue-60:     #2C5BA8;   /* hover sobre fondo azul */
  --blue-10:     #EBF0F8;
  --white-15:    #ffffff26; /* separadores sobre fondo azul */
  --terracota:   #8B3A2A;   /* destacados cálidos: banners, campañas, badges */

  /* Colores de feedback / estado — alertas y badges. No usar como color principal de UI. */
  --green:       #C5E63D;   /* verde lima: badge "Nuevo", alerta success, hover cart-pill */
  --green-dark:  #2F4A05;   /* contraste de texto/icono sobre --green */
  --yellow-dark: #7A5C00;   /* contraste de texto/icono sobre --yellow (warning) */
  --red:         #A21C1C;   /* alerta error */
  --red-10:      #FDECEC;   /* fondo suave para error inline */
  --red-accent:  #EE333E;   /* punto/dot de aviso (oferta, referencia PDP) */
  --red-promo:   #D42B2B;   /* etiqueta "NEW" en barra promo */
  --green-eco:       #2D7A4F;   /* verde WeForest — pilar eco */
  --green-eco-dark:  #1F5A38;   /* hover WeForest */

  /* Pills de estado — fondos sólidos claros + texto oscuro (contraste AA ≥ 4.5). Sin transparencias. */
  --pill-success-bg: #E3F3E8;  --pill-success-fg: #15683A;
  --pill-warn-bg:    #FBEBCF;  --pill-warn-fg:    #8A5800;
  --pill-info-bg:    #E3ECFB;  --pill-info-fg:    #1A4490;
  --pill-neutral-bg: #ECEEF1;  --pill-neutral-fg: #44494F;

  --container: 100%;
  --gap:       clamp(24px, 4vw, 64px);
  --header-h:  172px;

  /* Grid global — 24 columnas, 16px gutter */
  --grid-cols:   24;
  --grid-gutter: var(--sp-16);
  --radius:    8px;

  /* Alturas de controles interactivos — usar siempre estos tokens */
  --ctrl-h-xs: 26px;   /* micro-controles (suggest cards en drawer) */
  --ctrl-h-sm: 32px;   /* controles compactos */
  --ctrl-h:    44px;   /* controles estándar (qty + btn-add-cart) — = altura del botón default */
  --ctrl-h-lg: 48px;   /* controles grandes */

  /* Escala tipográfica
     Figma text styles → Heading/XL · Label/SM · Body/SM · Body/MD · Body/LG · Accent/Script */
  --fs-2xs:  10px;   /* badges, códigos, contadores */
  --fs-3xs:  12px;   /* nav, breadcrumbs, micro-labels */
  --fs-xs:   14px;   /* Label/SM — labels, eyebrows */
  --fs-sm:   16px;   /* secundario, captions */
  --fs-base: 14px;   /* Body/SM — cuerpo secundario */
  --fs-md:   16px;   /* Body/MD — cuerpo, botones */
  --fs-lg:   16px;   /* Body/LG — cuerpo principal */
  --fs-xl:   18px;   /* subheadings */
  --fs-2xl:  20px;   /* precios, headings */
  --fs-3xl:  24px;   /* Accent/Script — Caveat decorativo */
  --fs-4xl:  32px;   /* Heading/XL — títulos de sección */

  /* ── Escala de espaciado — 8-point grid ──────────────────────────────────
     Usar SIEMPRE estas variables para padding, margin y gap.
     Nunca valores px literales en propiedades de espaciado.
     Nomenclatura: --sp-N donde N = píxeles exactos (múltiplo de 8).
     Excepciones tipográficas menores (2–6px para iconografía) pueden ser literales.
  ──────────────────────────────────────────────────────────────────────── */
  --sp-4:   4px;    /* medio paso — solo detalles de iconografía */
  --sp-8:   8px;
  --sp-12:  12px;   /* 1.5 × 8 — gaps compactos */
  --sp-16:  16px;
  --sp-20:  20px;   /* 2.5 × 8 */
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;

  /* Overlay / card inner padding — alias semántico sobre la escala */
  --overlay-p: var(--sp-8);
}

/* ═══════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════ */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gap);
}
/* ═══════════════════════════════════════════
   GRID — 24 columnas, 16px gutter (Bootstrap 5)
═══════════════════════════════════════════ */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-.5 * var(--grid-gutter));
  margin-left:  calc(-.5 * var(--grid-gutter));
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(.5 * var(--grid-gutter));
  padding-left:  calc(.5 * var(--grid-gutter));
}
.col-1  { flex: 0 0 auto; width: calc(100% / 24 *  1); }
.col-2  { flex: 0 0 auto; width: calc(100% / 24 *  2); }
.col-3  { flex: 0 0 auto; width: calc(100% / 24 *  3); }
.col-4  { flex: 0 0 auto; width: calc(100% / 24 *  4); }
.col-5  { flex: 0 0 auto; width: calc(100% / 24 *  5); }
.col-6  { flex: 0 0 auto; width: calc(100% / 24 *  6); }
.col-7  { flex: 0 0 auto; width: calc(100% / 24 *  7); }
.col-8  { flex: 0 0 auto; width: calc(100% / 24 *  8); }
.col-9  { flex: 0 0 auto; width: calc(100% / 24 *  9); }
.col-10 { flex: 0 0 auto; width: calc(100% / 24 * 10); }
.col-11 { flex: 0 0 auto; width: calc(100% / 24 * 11); }
.col-12 { flex: 0 0 auto; width: calc(100% / 24 * 12); }
.col-13 { flex: 0 0 auto; width: calc(100% / 24 * 13); }
.col-14 { flex: 0 0 auto; width: calc(100% / 24 * 14); }
.col-15 { flex: 0 0 auto; width: calc(100% / 24 * 15); }
.col-16 { flex: 0 0 auto; width: calc(100% / 24 * 16); }
.col-17 { flex: 0 0 auto; width: calc(100% / 24 * 17); }
.col-18 { flex: 0 0 auto; width: calc(100% / 24 * 18); }
.col-19 { flex: 0 0 auto; width: calc(100% / 24 * 19); }
.col-20 { flex: 0 0 auto; width: calc(100% / 24 * 20); }
.col-21 { flex: 0 0 auto; width: calc(100% / 24 * 21); }
.col-22 { flex: 0 0 auto; width: calc(100% / 24 * 22); }
.col-23 { flex: 0 0 auto; width: calc(100% / 24 * 23); }
.col-24 { flex: 0 0 auto; width: 100%; }
@media (min-width: 720px) {
  .col-md-1  { flex: 0 0 auto; width: calc(100% / 24 *  1); }
  .col-md-2  { flex: 0 0 auto; width: calc(100% / 24 *  2); }
  .col-md-3  { flex: 0 0 auto; width: calc(100% / 24 *  3); }
  .col-md-4  { flex: 0 0 auto; width: calc(100% / 24 *  4); }
  .col-md-5  { flex: 0 0 auto; width: calc(100% / 24 *  5); }
  .col-md-6  { flex: 0 0 auto; width: calc(100% / 24 *  6); }
  .col-md-7  { flex: 0 0 auto; width: calc(100% / 24 *  7); }
  .col-md-8  { flex: 0 0 auto; width: calc(100% / 24 *  8); }
  .col-md-9  { flex: 0 0 auto; width: calc(100% / 24 *  9); }
  .col-md-10 { flex: 0 0 auto; width: calc(100% / 24 * 10); }
  .col-md-11 { flex: 0 0 auto; width: calc(100% / 24 * 11); }
  .col-md-12 { flex: 0 0 auto; width: calc(100% / 24 * 12); }
  .col-md-13 { flex: 0 0 auto; width: calc(100% / 24 * 13); }
  .col-md-14 { flex: 0 0 auto; width: calc(100% / 24 * 14); }
  .col-md-15 { flex: 0 0 auto; width: calc(100% / 24 * 15); }
  .col-md-16 { flex: 0 0 auto; width: calc(100% / 24 * 16); }
  .col-md-17 { flex: 0 0 auto; width: calc(100% / 24 * 17); }
  .col-md-18 { flex: 0 0 auto; width: calc(100% / 24 * 18); }
  .col-md-19 { flex: 0 0 auto; width: calc(100% / 24 * 19); }
  .col-md-20 { flex: 0 0 auto; width: calc(100% / 24 * 20); }
  .col-md-21 { flex: 0 0 auto; width: calc(100% / 24 * 21); }
  .col-md-22 { flex: 0 0 auto; width: calc(100% / 24 * 22); }
  .col-md-23 { flex: 0 0 auto; width: calc(100% / 24 * 23); }
  .col-md-24 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1100px) {
  .col-lg-1  { flex: 0 0 auto; width: calc(100% / 24 *  1); }
  .col-lg-2  { flex: 0 0 auto; width: calc(100% / 24 *  2); }
  .col-lg-3  { flex: 0 0 auto; width: calc(100% / 24 *  3); }
  .col-lg-4  { flex: 0 0 auto; width: calc(100% / 24 *  4); }
  .col-lg-5  { flex: 0 0 auto; width: calc(100% / 24 *  5); }
  .col-lg-6  { flex: 0 0 auto; width: calc(100% / 24 *  6); }
  .col-lg-7  { flex: 0 0 auto; width: calc(100% / 24 *  7); }
  .col-lg-8  { flex: 0 0 auto; width: calc(100% / 24 *  8); }
  .col-lg-9  { flex: 0 0 auto; width: calc(100% / 24 *  9); }
  .col-lg-10 { flex: 0 0 auto; width: calc(100% / 24 * 10); }
  .col-lg-11 { flex: 0 0 auto; width: calc(100% / 24 * 11); }
  .col-lg-12 { flex: 0 0 auto; width: calc(100% / 24 * 12); }
  .col-lg-13 { flex: 0 0 auto; width: calc(100% / 24 * 13); }
  .col-lg-14 { flex: 0 0 auto; width: calc(100% / 24 * 14); }
  .col-lg-15 { flex: 0 0 auto; width: calc(100% / 24 * 15); }
  .col-lg-16 { flex: 0 0 auto; width: calc(100% / 24 * 16); }
  .col-lg-17 { flex: 0 0 auto; width: calc(100% / 24 * 17); }
  .col-lg-18 { flex: 0 0 auto; width: calc(100% / 24 * 18); }
  .col-lg-19 { flex: 0 0 auto; width: calc(100% / 24 * 19); }
  .col-lg-20 { flex: 0 0 auto; width: calc(100% / 24 * 20); }
  .col-lg-21 { flex: 0 0 auto; width: calc(100% / 24 * 21); }
  .col-lg-22 { flex: 0 0 auto; width: calc(100% / 24 * 22); }
  .col-lg-23 { flex: 0 0 auto; width: calc(100% / 24 * 23); }
  .col-lg-24 { flex: 0 0 auto; width: 100%; }
}

/* Figma text style: Label/SM */
.label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: 44px;
  padding: 0 28px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background .2s, color .2s, border-color .2s;
}
.btn svg { flex-shrink: 0; }
/* Tamaños — se combinan con la variante de color: .btn.btn-blue.btn-sm */
.btn-sm { height: 32px; padding: 0 var(--sp-16); font-size: var(--fs-3xs); gap: 6px; }
.btn.btn-icon-only { padding: 0; width: var(--ctrl-h); aspect-ratio: 1; }
.btn.btn-sm.btn-icon-only { width: var(--ctrl-h-sm); }
.btn-lg { height: 56px; padding: 0 var(--sp-48); font-size: var(--fs-md); gap: var(--sp-8); letter-spacing: .06em; }
/* Primario */
.btn-blue         { background: var(--blue); color: var(--white); }
.btn-blue:hover   { background: var(--blue-80); }
.btn-yellow       { background: var(--yellow); color: var(--blue); }
.btn-yellow:hover { background: var(--white); color: var(--blue); }
/* Botón blanco — siempre sobre fondo oscuro (heros, banners con foto) */
.btn-white        { background: var(--white); color: var(--blue); }
.btn-white:hover  { background: var(--blue-80); color: var(--white); }
/* Secundario — ghost */
.btn-outline-blue         { border: 1.5px solid var(--blue); color: var(--blue); }
.btn-outline-blue:hover   { background: var(--blue); color: var(--white); }
/* Secundario ghost — siempre sobre fondo oscuro (heros, banners con foto) */
.btn-outline-white        { border: 1.5px solid rgba(255,255,255,.7); color: var(--white); }
.btn-outline-white:hover  { background: var(--white); border-color: var(--white); color: var(--blue); }
/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════════════════ */
.announcement {
  background: var(--g700);
  height: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.announcement-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-left 28s linear infinite;
}
.ann-item {
  display: flex;
  align-items: center;
  gap: var(--sp-48);
  padding-right: var(--sp-48);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g100); /* sólido ~9.4:1 sobre el gris de la barra (antes blanco 70% ≈ 6.3:1) */
  flex-shrink: 0;
}
.ann-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
/* Header: en flujo (relative) por defecto; al pasar su borde inferior se fija
   arriba (fixed + slide-down). Comportamiento ÚNICO para todas las páginas que
   montan el header — no depende de la clase del body. El salto se compensa con
   padding-top en el body desde gdpInitStickyHeader. */
.header {
  position: relative;
  z-index: 200;
  background: var(--white);
  transition: box-shadow .3s;
}
.header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  animation: headerSlideDown .25s ease forwards;
}

/* ── Fila 1: barra de utilidades ── */
.header-utility { height: 44px; border-bottom: 1px solid var(--g100); }
.header-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  height: 100%;
  width: 100%;
}
.util-left  { display: flex; align-items: center; height: 100%; }
.util-right { display: flex; align-items: center; gap: var(--sp-12); flex-shrink: 0; }

.util-partner      { display: flex; align-items: center; padding-right: var(--sp-16); flex-shrink: 0; }
.util-partner-logo { height: 22px; width: auto; object-fit: contain; display: block; max-width: none; }
.util-sep          { width: 1px; height: 18px; background: var(--g100); flex-shrink: 0; margin-right: var(--sp-8); }

.util-nav { display: flex; align-items: center; }
.util-nav a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--blue);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.util-nav a svg { flex-shrink: 0; }
.util-nav a:hover { background: var(--g50); }

.util-account {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--blue);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .15s;
}
.util-account:hover { background: var(--g50); }

/* ── Selector de idioma ── */
.util-lang { position: relative; }
.util-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--blue);
  padding: 6px 10px;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.util-lang-btn:hover,
.util-lang.is-open .util-lang-btn { background: var(--g50); }
.util-lang-chevron { transition: transform .2s; }
.util-lang.is-open .util-lang-chevron { transform: rotate(180deg); }
.util-lang-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--g100);
  min-width: 148px;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  list-style: none;
  padding: var(--sp-4) 0;
  margin: 0;
}
.util-lang-opt {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  width: 100%;
  padding: var(--sp-8) var(--sp-16);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--black);
  text-align: left;
  transition: background .15s;
}
.util-lang-opt span { font-weight: 400; color: var(--g500); }
.util-lang-opt:hover { background: var(--g50); }
.util-lang-opt.is-active { color: var(--blue); }
.util-lang-opt.is-active span { color: var(--blue); }

/* ── Fila 2: barra de marca ── */
.header-brand { height: 80px; border-bottom: 1px solid var(--g100); }
.header-brand-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-32);
  height: 100%;
  width: 100%;
}
.logo-link { flex-shrink: 0; display: flex; align-items: center; }
.logo-img  { height: 34px; width: auto; display: block; }

.header-search {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  background: var(--g50);
  border: 1.5px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.header-search:focus-within {
  border-color: var(--blue);
  background: var(--white);
}
.search-btn {
  flex-shrink: 0;
  width: 48px;
  height: 44px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  cursor: pointer;
  transition: color .15s;
  padding-left: var(--sp-4);
}
.search-btn:hover { color: var(--blue-80); }
.search-input {
  flex: 1;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0 var(--sp-20) 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--black);
  outline: none;
}
.search-input::placeholder { color: var(--g300); }

.nav-secondary {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-secondary a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--blue);
  padding: 6px var(--sp-16);
  border-left: 1px solid var(--g100);
  white-space: nowrap;
  transition: color .15s;
}
.nav-secondary a:first-child { border-left: none; padding-left: 0; }
.nav-secondary a:hover { color: var(--blue-80); }
.nav-new { color: var(--red-promo) !important; letter-spacing: .03em; }

/* ── Fila 3: nav de categorías (barra sticky) ── */
.header-cats { height: 48px; background: var(--blue); position: relative; }
.header-cats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.nav-cats { display: flex; align-items: center; height: 100%; }
.nav-cats > a,
.nav-item > .nav-item-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
  border-right: 1px solid var(--white-15);
  white-space: nowrap;
  transition: background .15s;
  text-decoration: none;
}
.nav-cats > a:first-child,
.nav-item:first-child > .nav-item-link {
  padding-left: 14px;
  border-left: 1px solid var(--white-15);
}
.nav-cats > a:hover { background: var(--blue-60); }

/* ── Nav item con mega-menú ── */
.nav-item {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-item:hover > .nav-item-link,
.nav-item > .nav-item-link:focus { background: var(--blue-60); }

/* ── Mega-menú ── */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--g100);
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  z-index: 500;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.nav-item:hover .mega-menu,
.mega-menu:focus-within {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease;
}

.mega-inner { padding: var(--sp-40) 0 0; position: relative; }

.mega-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-48);
}

/* Descripción lateral */
.mega-desc { display: flex; flex-direction: column; gap: var(--sp-12); }
.mega-desc-label { margin-bottom: var(--sp-4); }
.mega-desc-title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black);
  letter-spacing: -.01em;
}
.mega-desc-sub {
  font-size: var(--fs-sm);
  color: var(--g500);
  line-height: 1.5;
}
.mega-desc-cta {
  margin-top: var(--sp-8);
  align-self: flex-start;
}

/* Columnas de enlaces */
.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sp-16);
}
.mega-col {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-col li { border-bottom: 1px solid var(--g100); }
.mega-col li:first-child { border-top: 1px solid var(--g100); }
.mega-col a {
  display: block;
  padding: var(--sp-8) 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  transition: color .15s, padding-left .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-col a:hover { color: var(--blue); padding-left: 6px; }

/* Botón cierre */
.mega-close {
  position: absolute;
  top: 0;
  right: var(--gap);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--g100);
  cursor: pointer;
  color: var(--g500);
  transition: color .15s, background .15s;
}
.mega-close:hover { color: var(--black); background: var(--g50); }

/* Pie del mega-menú */
.mega-footer {
  margin-top: var(--sp-32);
  border-top: 1px solid var(--g100);
  background: var(--g50);
}
.mega-footer-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding-top: 14px;
  padding-bottom: 14px;
}
.mega-footer strong {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  padding-right: var(--sp-16);
  border-right: 1px solid var(--g300);
}
.mega-footer span {
  font-size: var(--fs-xs);
  color: var(--g500);
  letter-spacing: .04em;
}

/* Escudo: solo en sticky */
.header.scrolled .logo-shield { border-right: none; }
.logo-shield {
  display: none;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  padding: 0 18px 0 0;
  border-right: 1px solid var(--white-15);
}
.logo-shield-img { height: 28px; width: auto; }
.header.scrolled .logo-shield-img { filter: brightness(0) invert(1); }

/* Cart sticky-only */
.cart-pill.sticky-only { display: none; flex-shrink: 0; }

/* ── Estado scrolled ── */
.header.scrolled .header-utility        { display: none; }
.header.scrolled .header-brand          { display: none; }
.header.scrolled .logo-shield           { display: flex; }
.header.scrolled .cart-pill.sticky-only { display: flex; margin-left: auto; background: var(--white-15); color: var(--white); }
.header.scrolled .cart-pill.sticky-only:hover { background: var(--blue-60); color: var(--white); }
.header.scrolled .cart-pill.sticky-only:hover .cart-count { background: var(--white); color: var(--blue); }
.header.scrolled .nav-cats { flex: 1; justify-content: center; }

/* ── Burger + cart-pill-mobile (ocultos en desktop) ── */
.burger-btn { display: none; }
.cart-pill.cart-pill-mobile { display: none; }

/* ── Cart pill (compartido) ── */
.cart-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 7px 14px;
  background: var(--blue-10);
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cart-pill:hover { background: var(--green); color: var(--blue); }
.cart-pill:hover .cart-count { background: var(--blue); color: var(--green); }
.cart-count {
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

/* ═══════════════════════════════════════════
   HERO — slider
═══════════════════════════════════════════ */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h) - 32px);
  min-height: 560px;
  overflow: hidden;
}
.hero-swiper { width: 100%; height: 100%; }
.hero-swiper .swiper-slide { height: 100%; }
.hero-slide {
  width: 100%;
  height: 100%;
  margin-left: 0; /* anula el margin negativo de .row para que el slide ocupe viewport completo */
  margin-right: 0;
}
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-64) var(--gap);
  height: 100%; /* columna siempre ocupa toda la altura del hero-slide */
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
  overflow: hidden;
}
.hero-line {
  width: 28px; height: 1.5px;
  background: var(--blue);
  flex-shrink: 0;
}
.hero-title {
  font-size: clamp(44px, 5vw, 96px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-20);
}
.hero-title em {
  font-style: italic;
  font-weight: 300;
  display: block;
}
.hero-sub {
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--g500);
  line-height: 1.65;
  max-width: 360px;
  margin-bottom: var(--sp-40);
}
.hero-ctas { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.hero-media {
  position: relative;
  overflow: hidden;
  background: var(--g100);
  padding: 0; /* imagen siempre a sangre — el hero tiene overflow:hidden */
  height: 100%; /* columna siempre ocupa toda la altura del hero-slide */
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero-badge {
  position: absolute;
  top: 32px; right: 32px;
  background: var(--white);
  color: var(--blue);
  padding: var(--sp-16) var(--sp-24);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.hero-badge strong {
  display: block;
  font-size: var(--fs-4xl);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 2px;
}

/* Variante catálogo: imagen a sangre, igual que el resto de slides */
.hero-media--catalog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Controles hero: esquina inferior derecha, encima de la imagen */
.hero-controls {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  z-index: 10;
}

/* Paginación hero */
.hero-pagination {
  display: flex !important;
  gap: 6px;
}
.hero-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 2px;
  border-radius: 0;
  background: var(--white);
  opacity: 1 !important;
  transition: width .3s;
  cursor: pointer;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 40px;
  background: var(--white);
}
.hero-pagination .swiper-pagination-bullet-active::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--blue);
  animation: hero-bullet-progress 6s linear forwards;
}

/* Navegación hero (prev/next) */
.hero-nav {
  display: flex;
  gap: var(--sp-8);
}
.hero-nav-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--g400); /* AA 1.4.11 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  cursor: pointer;
  color: var(--black);
  transition: border-color .2s, background .2s, color .2s;
}
.hero-nav-btn:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

/* ═══════════════════════════════════════════
   TAGLINES — frases destacadas
═══════════════════════════════════════════ */
.taglines {
  padding: var(--sp-24) 0;
  text-align: center;
  background: var(--white);
}
.tagline-main {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: var(--sp-8);
}
.tagline-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  color: var(--g500);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   STRIP (marquee negro)
═══════════════════════════════════════════ */
.strip {
  background: var(--blue);
  padding: var(--sp-16) 0;
  overflow: hidden;
}
.strip-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-left 22s linear infinite;
}
.strip-item {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding-right: var(--sp-24);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  flex-shrink: 0;
}
.strip-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   CATEGORIES — píldoras con thumbnail
═══════════════════════════════════════════ */
.categories { padding: var(--sp-48) 0; background: var(--white); border-top: 1px solid var(--g100); }
.cat-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-48);
}
.cat-pills-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-16);
}
.cat-pill {
  display: flex;
  align-items: stretch;
  gap: var(--sp-16);
  padding: 0 var(--sp-16) 0 0;
  background: var(--g50);
  border-radius: var(--radius);
  height: 88px;
  transition: background .2s, transform .25s cubic-bezier(.16,1,.3,1);
}
.cat-pill:hover {
  background: var(--blue-10);
}
.cat-pill-thumb {
  width: 88px;
  align-self: stretch;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
}
.cat-pill-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.cat-pill:hover .cat-pill-thumb img { transform: scale(1.08); }
.cat-pill-name {
  align-self: center;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.2;
  color: var(--black);
  text-wrap: pretty;
  transition: color .2s;
}
.cat-pill:hover .cat-pill-name { color: var(--blue); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cat-pills-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .cat-pills-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cat-pills-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-pill { padding: 0; gap: var(--sp-12); height: 64px; }
  .cat-pill-thumb { width: 64px; }
  .cat-pill-name { font-size: var(--fs-md); }
}
@media (max-width: 480px) {
  .cat-pills-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   OFERTAS — artículos destacados
═══════════════════════════════════════════ */
.offers { background: var(--white); padding: var(--sp-40) 0; }
.offers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-40);
}
/* ── Grid de artículos destacados: 2 cols externas, 3 cols internas por card ── */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-16);
}

/* Card: imagen | info (con precio) | commerce (solo acciones) */
.offers-grid .offer-card {
  display: grid;
  grid-template-columns: 136px 1fr 200px;
  height: auto;
  min-height: 160px;
}

/* Col 1: imagen */
.offers-grid .offer-card-img {
  aspect-ratio: unset;
  width: auto;
  min-width: 0;
  flex-shrink: unset;
  border-radius: var(--radius) 0 0 var(--radius);
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.offers-grid .offer-card-img > img {
  position: static;
  object-fit: contain;
  object-position: center;
  height: 112px;
  padding: var(--sp-8) var(--sp-8) 0;
  flex: 0 0 auto;
}
.offers-grid .offer-brand-wrap {
  position: static;
  align-self: flex-start;
  margin: 0 0 var(--sp-8) var(--sp-16);
}

/* Col 2: código + nombre + pack + precio */
.offers-grid .offer-card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-20) var(--sp-16);
  justify-content: flex-start;
}
.offers-grid .offer-name {
  -webkit-line-clamp: 2;
  min-height: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
}

/* Col 3: acciones pegadas al fondo */
.offers-grid .offer-card-commerce {
  display: flex;
  flex-direction: column;
  padding: var(--sp-20) var(--sp-16);
  justify-content: flex-end;
}

/* Acciones en columna: qty + botón ancho completo */
.offers-grid .offer-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
}
.offers-grid .qty-selector  { align-self: stretch; justify-content: space-between; }
.offers-grid .qty-input     { flex: 1; }
.offers-grid .btn-add-cart  { width: 100%; flex: none; font-size: var(--fs-sm); }
.offers-grid .offer-card-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-right: var(--sp-32);
  grid-column: 1;
}
.offers-grid .offer-card-copy .offer-save {
  top: 0;
  right: 0;
}

/* ── Swiper overrides para el slider de artículos ── */
.offers-swiper { overflow: visible; }
.offers-swiper .swiper-slide { height: auto; }
.offers-swiper-wrap {
  overflow: visible;
  padding-bottom: var(--sp-4);
}
.swiper-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.swiper-btn {
  width: 40px; height: 40px;
  border: 1.5px solid var(--g400); /* AA 1.4.11 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--white);
  flex-shrink: 0;
}
.swiper-btn:hover { border-color: var(--blue); background: var(--blue); }
.swiper-btn:hover svg { stroke: var(--white); }
.swiper-btn svg { stroke: var(--black); transition: stroke .2s; }
.swiper-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ── Tarjeta de producto ── */
.offer-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
  border: 1px solid var(--g100);
  transition: box-shadow .25s;
}
.offer-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.offer-save {
  position: absolute;
  top: var(--sp-12);
  right: var(--sp-12);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  line-height: 0;
  pointer-events: none;
}
.offer-card-img {
  aspect-ratio: 1;
  overflow: visible;
  background: var(--white);
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* absolute → el img rellena el contenedor sin empujar su altura; aspect-ratio: 1 la controla solo */
.offer-card-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: var(--sp-8); }
.offer-brand-wrap {
  position: absolute;
  bottom: var(--sp-8);
  left: var(--sp-16);
  background: transparent;
  padding: 0;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}
.offer-brand-logo {
  display: block;
  width: 72px;
  height: auto;
  object-fit: contain; /* override global img { object-fit: cover } */
}
.offer-badge {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  padding: var(--sp-4) 10px;
  border-radius: 8px;
}
.offer-badge--discount {
  background: var(--red);
  color: var(--white);
  border-radius: 0;
  left: 0; /* bandera toca el borde — override del left: 8px base */
  padding: var(--sp-4) 20px var(--sp-4) 10px; /* extra derecha para la muesca */
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.offer-badge--new {
  background: none;
  padding: 0;
  top: var(--sp-8);
  left: var(--sp-8);
}
.offer-badge--new img {
  display: block;
  height: 48px;
  width: auto;
}
.offer-card-body {
  padding: 0 var(--sp-16) var(--sp-16);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-8);
}
.offer-card-copy,
.offer-card-buy-meta { display: contents; }
.offer-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}
.offer-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}
.offer-finishes {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  line-height: 0;
  flex-shrink: 0;
}
.offer-finish-swatch {
  width: 12px;
  height: 12px;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
}
.offer-finish-more {
  font-size: var(--fs-base);
  line-height: 1;
  font-weight: 400;
  color: var(--g500);
}
.offer-code {
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 6px;
}
.offer-code--dot::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-accent);
  flex-shrink: 0;
}
.offer-name {
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--black);
  text-transform: uppercase;
  min-height: calc(13px * 1.35 * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.offer-pack {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--sp-16);
  font-size: var(--fs-xs);
  color: var(--g500);
}
.offer-pack-label strong {
  color: var(--black);
  font-weight: 500;
}
.offer-pack-unit { color: var(--black); font-weight: 400; }
.offer-pack-unit b { font-weight: 500; }
.offer-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
}
.offer-price { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; color: var(--black); }
.offer-price-unit { font-size: var(--fs-xs); color: var(--g500); }
.offer-price-old { display: none; font-size: var(--fs-sm); color: var(--red); text-decoration: line-through; }
.offer-card:has(.offer-badge--discount) .offer-price-old { display: inline; }
.offer-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  margin-top: auto;
  padding-top: var(--sp-12);
}
.offer-personalizable {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: var(--sp-4) 0;
  cursor: pointer;
}
.offer-personalizable--hidden { visibility: hidden; }
.qty-selector {
  display: flex;
  align-items: stretch;
  height: var(--ctrl-h);           /* altura explícita → el borde queda dentro del box */
  border: 1.5px solid var(--g400); /* AA 1.4.11: borde de control ≥3:1 (antes --g100) */
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}
.qty-btn {
  width: 32px;
  height: 100%;                    /* hereda --ctrl-h del padre */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--g500);
  cursor: pointer;
  transition: background .15s, color .15s;
  border: none;
  background: none;
  font-family: inherit;
}
.qty-btn:hover { background: var(--g50); color: var(--black); }
.qty-input {
  width: 40px;
  height: 100%;                    /* hereda --ctrl-h del padre */
  border: none;
  border-left: 1.5px solid var(--g400);  /* AA 1.4.11: líneas del qty ≥3:1 */
  border-right: 1.5px solid var(--g400);
  text-align: center;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--black);
  outline: none;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-selector--sm { height: var(--ctrl-h-sm); }
/* Variante compacta: altura --ctrl-h-sm + botones/input estrechos. Para tablas con poco ancho (p.ej. Mis productos en móvil). */
.qty-selector--compact { height: var(--ctrl-h-sm); }
.qty-selector--compact .qty-btn { width: 26px; }
.qty-selector--compact .qty-input { width: 28px; }
/* btn-add-cart — usa .btn.btn-blue como base; misma altura (44px) que el botón default y que el qty-selector */
.btn.btn-add-cart {
  height: var(--ctrl-h);   /* 44px → = botón default, alineado con qty-selector */
  flex: 1;
  width: 100%;             /* rellena la columna 1fr del grid de .offer-actions */
}

/* ═══════════════════════════════════════════
   NUESTRAS COLECCIONES
═══════════════════════════════════════════ */
.collections {
  padding: var(--sp-32) 0;
  overflow: hidden;
}
.collections-header {
  padding-inline: var(--gap);
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-40);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.collections-track-wrap { overflow: hidden; }
.collections-track {
  display: flex;
  align-items: center;
  gap: 0;
  will-change: transform;
  animation: marquee-left 15s linear infinite;
}
.collection-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--sp-32);
  height: 104px;
  border-right: 1px solid var(--g100);
  cursor: pointer;
  transition: background .2s;
}
.collection-item:first-child { border-left: 1px solid var(--g100); }
.collection-item:hover { background: var(--g50); }
.collection-item img {
  height: 48px;
  width: auto;
  display: block;
  filter: opacity(.8);
  transition: filter .3s;
}
.collection-item:hover img { filter: opacity(1); }

/* ═══════════════════════════════════════════
   SECTORES — profesionales
═══════════════════════════════════════════ */
.sectors {
  padding: var(--sp-48) 0;
  background: var(--g50);
  border-top: 1px solid var(--g100);
}
.sectors-header {
  text-align: center;
  margin-bottom: 56px;
}
.sectors-header .label { margin-bottom: var(--sp-12); }
.sectors-header .section-title {
  font-size: clamp(20px, 2.2vw, 32px);
  max-width: 640px;
  margin-inline: auto;
}
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
}
.sector-card {
  cursor: pointer;
  display: block;
  background: var(--g50);
  border-radius: var(--radius);
  overflow: hidden;
}
.sector-card-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--g100);
  position: relative;
}
.sector-card-img img {
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.sector-card:hover .sector-card-img img { transform: scale(1.06); }
.sector-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,45,114,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.sector-card:hover .sector-card-overlay { opacity: 1; }
.sector-card-overlay span {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
}
.sector-card-name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--black);
  padding: var(--sp-16) 0 var(--sp-24);
  transition: color .2s;
}
.sector-card:hover .sector-card-name { color: var(--blue); }

/* ═══════════════════════════════════════════
   PRODUCTS GRID — más vendidos
═══════════════════════════════════════════ */
.bestsellers { padding: var(--sp-48) 0; }
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-48);
}
/* Figma text style: Heading/XL */
.section-title {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1.05;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
}
.product-card { cursor: pointer; }
.product-card-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--g50);
  margin-bottom: var(--sp-16);
  position: relative;
}
.product-card-img img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-add {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 36px; height: 36px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.product-card:hover .product-card-add { opacity: 1; transform: translateY(0); }
.product-cat {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: var(--sp-8);
}
.product-name {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: var(--sp-8);
}
.product-price { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }

/* ═══════════════════════════════════════════
   PORTADAS BANNER
═══════════════════════════════════════════ */
.portadas-banner { padding: 0 0 var(--sp-48); }
.portadas-banner .wrap { padding-inline: var(--gap); }
.portadas-banner-inner {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius);
}
.portadas-banner-media {
  position: absolute;
  inset: 0;
}
.portadas-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.portadas-banner-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-32);
  padding: 56px clamp(var(--sp-32), 4vw, 72px);
  max-width: 520px;
}
.portadas-banner-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.portadas-banner-title {
  font-size: clamp(32px, 3.5vw, 64px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--black);
}
.portadas-banner-title em {
  font-style: italic;
  font-weight: 300;
  display: block;
}

/* ═══════════════════════════════════════════
   LOOKS — editorial
═══════════════════════════════════════════ */
.looks { padding: var(--sp-48) 0; background: var(--g50); }
.looks-grid {
  display: grid;
  grid-template-columns: 14fr 10fr;
  grid-template-rows: repeat(2, 300px);
  gap: var(--grid-gutter);
  margin-top: var(--sp-48);
}
.look-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--radius);
  display: block;
  text-decoration: none;
  color: inherit;
}
.looks-grid .look-item:first-child { grid-row: span 2; }
.look-item img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.look-item:hover img { transform: scale(1.05); }
.look-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--overlay-p);
  color: var(--white);
}
.look-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.look-count { font-size: var(--fs-sm); opacity: .65; }

/* ═══════════════════════════════════════════
   PROMO LOOKS — grid editorial 5 piezas
═══════════════════════════════════════════ */
.promo-looks { padding: 0; background: var(--white); }
.promo-looks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 200px 280px;
  gap: var(--sp-16);
}
.promo-looks-grid .look-item:nth-child(1) { grid-column: 1;     grid-row: 1 / 3; }
.promo-looks-grid .look-item:nth-child(2) { grid-column: 2 / 4; grid-row: 1;     }
.promo-looks-grid .look-item:nth-child(3) { grid-column: 1;     grid-row: 3;     }
.promo-looks-grid .look-item:nth-child(4) { grid-column: 2;     grid-row: 2 / 4; }
.promo-looks-grid .look-item:nth-child(5) { grid-column: 3;     grid-row: 2 / 4; }

/* ═══════════════════════════════════════════
   TRUST — Generando confianza desde 1884
═══════════════════════════════════════════ */
.trust {
  background: var(--white);
  border-top: 1px solid var(--g100);
  padding: var(--sp-48) 0;
}
.trust-inner {
  align-items: flex-start;
}
.trust-sidebar .label { margin-bottom: var(--sp-16); }
.trust-title {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--black);
}
.trust-year {
  display: block;
  font-size: clamp(64px, 7vw, 100px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--g400); /* gris más claro que cumple 3:1 AA texto grande sobre blanco */
  margin-top: var(--sp-16);
  user-select: none;
}
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--g100);
}
.trust-pillar {
  padding: 0 28px;
  border-right: 1px solid var(--g100);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.trust-icon {
  width: 36px;
  height: 36px;
  color: var(--blue);
  margin-bottom: 6px;
  flex-shrink: 0;
}
.trust-icon svg { width: 100%; height: 100%; }
.trust-pillar--eco .trust-icon { color: var(--green-eco); }
.trust-pillar-title {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--black);
  line-height: 1.1;
}
.trust-pillar-label {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--g500);
}

/* ═══════════════════════════════════════════
   STATS — barra negra
═══════════════════════════════════════════ */
.stats { background: var(--blue); padding: var(--sp-40) 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
  text-align: center;
}
.stat-num {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--white);
  margin-bottom: var(--sp-8);
}
.stat-num span { color: rgba(255,255,255,.45); }
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7); /* AA: ~7:1 sobre --blue (antes .4 ≈ 3.3:1, fallaba) */
}

/* ═══════════════════════════════════════════
   BRANDS — Colecciones
═══════════════════════════════════════════ */
.brands {
  padding: var(--sp-48) 0;
  background: var(--white);
  border-top: 1px solid var(--g100);
}

/* logo area below the card image */
.brand-card-logo {
  padding: 18px var(--sp-12) var(--sp-24);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  transition: color .2s;
}
.sector-card:hover .brand-card-logo { color: var(--blue); }

/* shared wordmark base */
.bw {
  font-size: var(--fs-lg);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  line-height: 1.1;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sector-card:hover .bw { color: var(--blue); }

/* FINGER FOOD — italic first word + bold second */
.bw--fingerfood { font-size: var(--fs-lg); gap: 7px; letter-spacing: .02em; }
.bw--fingerfood em { font-style: italic; font-weight: 300; }

/* THE PACK — small "The" stacked over bold "Pack" */
.bw--thepack { flex-direction: column; gap: 1px; }
.bw--thepack span { font-size: 9px; font-weight: 400; letter-spacing: .2em; opacity: .55; }

/* PAPEL ANTIGRASA — condensed two-line */
.bw--antigrasa { font-size: var(--fs-base); letter-spacing: .06em; }

/* WE FOREST — leaf icon + text */
.bw--weforest { font-size: var(--fs-md); letter-spacing: .08em; color: var(--green-eco); }
.sector-card:hover .bw--weforest { color: var(--green-eco-dark); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer { padding: 0; }

/* ── Footer fila 1: azul — nav + social + certificaciones ── */
.footer-main {
  background: var(--blue);
  color: var(--white);
  padding: var(--sp-48) 0 var(--sp-40);
}
.footer-top {
  /* row interno de .footer-main — sin padding propio, .footer-main lo gestiona */
}
.footer-brand p {
  font-size: var(--fs-md);
  color: rgba(255,255,255,.6);
  line-height: 1.7;
  max-width: 260px;
}
.footer-col h4 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--sp-16);
}
.footer-col li { margin-bottom: var(--sp-12); }
.footer-col a {
  font-size: var(--fs-md);
  font-weight: 500;
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--blue);
}

/* ── Footer logo — blanco sobre negro ── */
.footer-logo {
  filter: brightness(0) invert(1);
  opacity: .85;
  margin-bottom: var(--sp-24);
  display: block;
  width: 150px;
  height: 21px;
}

/* ── Footer contact ── */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
  font-style: normal;
}
.footer-contact-link {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-md);
  font-weight: 500;
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
.footer-contact-link:hover { color: var(--white); }
.footer-contact-link svg { flex-shrink: 0; opacity: .5; }

/* ── Footer social icons ── */
.footer-social {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-20);
  margin-bottom: var(--sp-24);
}
.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--white);
  flex-shrink: 0;
  transition: background .2s;
}
.footer-social-btn:hover { background: rgba(255,255,255,.26); }
.footer-social-btn svg { display: block; }

/* ── Footer certifications — fourth column in blue area ── */
.footer-certifications {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.footer-cert-group h4 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--sp-12);
}
.footer-cert-group > img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
}
.footer-eco-logos {
  display: flex;
  gap: var(--sp-16);
  align-items: flex-start;
}
.footer-eco-logos img {
  display: block;
  height: 88px;
  width: auto;
}

/* ── Footer fila 2: blanco — distinciones ── */
.footer-distinctions-band {
  background: var(--white);
  color: var(--black);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--g100);
}

/* ── Footer distinciones ── */
.footer-distinctions-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-24);
}
.footer-distinctions-list img {
  display: block;
  max-height: 56px;
  width: auto;
  max-width: 160px;
}

/* ── Footer fila 3: blanco — logos pago · transporte · varios ── */
.footer-logos-band {
  background: var(--white);
  border-top: 1px solid var(--g100);
  padding: var(--sp-16) 0;
}
.footer-logos-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-24);
}
.footer-logos-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: nowrap; /* nunca saltar de línea en desktop */
}
.footer-logos-group--payment { gap: var(--sp-4); }
/* Todos los logos sobre fondo blanco: colores naturales, sin filtros */
.footer-logos-band img {
  display: block;
  height: 28px;
  width: auto;
}
.footer-logos-group--payment img { border-radius: 4px; }
/* Transporte: más pequeños para equilibrar con los de pago */
.footer-logos-group--shipping img { height: 18px; }
/* Separador vertical — oscuro sobre blanco */
.footer-logos-sep {
  display: block;
  width: 1px;
  height: 28px;
  background: var(--g100);
  flex-shrink: 0;
}

/* ── Footer fila 4: blanco — copyright ── */
.footer-legal-band {
  background: var(--white);
  color: var(--blue);
  padding: var(--sp-20) 0;
  border-top: 1px solid var(--g100);
}

/* ── Footer legal links ── */
.footer-legal {
  display: flex;
  gap: var(--sp-16);
}
.footer-legal a {
  font-size: var(--fs-sm);
  color: var(--blue);
  transition: color .2s;
}
.footer-legal a:hover { color: var(--blue-80); }

/* ═══════════════════════════════════════════
   ANIMATION SYSTEM
   Hero: CSS keyframes. Scroll reveals: CSS transitions + IntersectionObserver.
   GSAP se usa SOLO para marquees y parallax del hero — nunca para estados iniciales.
═══════════════════════════════════════════ */

/* ── Marquee — keyframe compartido por los 3 tracks ── */
@keyframes marquee-left { to { transform: translateX(-50%); } }

/* ── Hero entrada — keyframes CSS ── */
@keyframes fade-up-sm { from { opacity:0; transform:translateY(16px);  } to { opacity:1; transform:none; } }
@keyframes fade-up-lg { from { opacity:0; transform:translateY(70px);  } to { opacity:1; transform:none; } }
@keyframes fade-up-md { from { opacity:0; transform:translateY(24px);  } to { opacity:1; transform:none; } }
@keyframes hero-media { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0 0% 0 0); } }
@keyframes hero-bullet-progress { from { width: 0%; } to { width: 100%; } }
@keyframes badge-pop  { from { opacity:0; transform:scale(.75);        } to { opacity:1; transform:scale(1); } }

#heroEyebrow { animation: fade-up-sm  .7s  .10s cubic-bezier(.16,1,.3,1)     both; }
#heroTitle   { animation: fade-up-lg 1.1s  .40s cubic-bezier(.16,1,.3,1)     both; }
#heroSub     { animation: fade-up-md  .8s  .85s cubic-bezier(.16,1,.3,1)     both; }
#heroCtas    { animation: fade-up-sm  .7s 1.05s cubic-bezier(.16,1,.3,1)     both; }
#heroMedia   { animation: hero-media 1.3s  .10s cubic-bezier(.16,1,.3,1)     both; }
#heroBadge   { animation: badge-pop   .6s 1.20s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Scroll reveals ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal="from-left"] { transform: translateX(-48px); }
[data-reveal="scale"] {
  transform: scale(.93);
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
[data-reveal].visible { opacity:1; transform:none; }

/* ── Stagger delays ── */
[data-delay="1"] { transition-delay: .07s; }
[data-delay="2"] { transition-delay: .14s; }
[data-delay="3"] { transition-delay: .21s; }
[data-delay="4"] { transition-delay: .28s; }
[data-delay="5"] { transition-delay: .35s; }
[data-delay="6"] { transition-delay: .42s; }

/* ── Accesibilidad: reducir movimiento ── */
@media (prefers-reduced-motion: reduce) {
  #heroEyebrow, #heroTitle, #heroSub, #heroCtas, #heroMedia, #heroBadge { animation: none; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .announcement-track, .strip-track, .collections-track { animation-play-state: paused; }
}

/* ── Helpers de layout ── */
.section-header .label,
.offers-header  .label  { margin-bottom: var(--sp-12); }

.offers-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

/* ── Responsive: trust module — columna única al activarse el header mobile ── */
@media (max-width: 1200px) {
  .trust-year { display: none; }
  .trust-title, .trust-sidebar .label { text-align: center; }
  .trust-title br { display: none; }
  .trust-pillars { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--g100); }
  .trust-pillar { padding: var(--sp-24) 0; border-right: none; border-bottom: 1px solid var(--g100); }
  .trust-pillar:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════════
   CUSTOM — Diseños personalizados
═══════════════════════════════════════════ */
.custom { padding: var(--sp-16) 0 var(--sp-48); }

.custom-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(var(--sp-32), 5vw, 80px);
  min-height: 360px;
  padding: var(--sp-64) clamp(var(--sp-32), 5vw, 72px);
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.custom-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 90% at 100% 50%, rgba(255,209,0,.14), transparent 60%),
    radial-gradient(ellipse 70% 90% at 0% 100%, rgba(26,68,144,.65), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── decoración: rejilla de iconos ── */
.custom-pattern {
  position: absolute;
  inset: 0;
  opacity: .38;
  color: rgba(255,255,255,.85);
  pointer-events: none;
  z-index: 1;
}
.custom-pattern svg {
  width: 100%;
  height: 100%;
}

/* ── esquinas decorativas (tipo marco) ── */
.custom-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255,255,255,.35);
  z-index: 3;
  pointer-events: none;
}
.custom-corner.tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.custom-corner.tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.custom-corner.bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.custom-corner.br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

/* ── badge vertical ── */
.custom-badge {
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  z-index: 3;
}
.custom-badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
}

/* ── copy ── */
.custom-copy {
  position: relative;
  z-index: 4;
  padding-left: 36px;
}
.custom-title {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-24);
  line-height: .9;
  position: relative;
}
.custom-title-bold {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--white);
}
.custom-title-script {
  font-family: 'Caveat', cursive;
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--yellow);
  margin-top: -8px;
  margin-left: clamp(60px, 8vw, 110px);
  line-height: 1;
}
.custom-underline {
  position: absolute;
  bottom: -14px;
  left: clamp(60px, 8vw, 110px);
  width: clamp(140px, 16vw, 220px);
  height: 18px;
  color: var(--yellow);
  opacity: .8;
}

.custom-sub {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.75);
  margin-bottom: var(--sp-24);
  max-width: 380px;
}

.custom-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  list-style: none;
  padding: 0;
}
.custom-features li {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.custom-features li svg { color: var(--yellow); flex-shrink: 0; }

/* ── CTA ── */
.custom-cta-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  justify-self: end;
}
.custom-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-16);
  padding: 18px var(--sp-32);
  background: var(--white);
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background .25s, color .25s;
}
.custom-banner:hover .custom-cta { background: var(--yellow); color: var(--black); }
.custom-cta-hint {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  padding-left: var(--sp-4);
}

/* ═══════════════════════════════════════════
   CUSTOM — variantes
═══════════════════════════════════════════ */
/* Variante: acento amarillo (fondo claro) */
.custom[data-variant="yellow"] .custom-banner {
  background: var(--g50);
  color: var(--black);
}
.custom[data-variant="yellow"] .custom-banner::before {
  background:
    radial-gradient(ellipse 70% 80% at 100% 50%, rgba(255,209,0,.28), transparent 55%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(0,45,114,.08), transparent 50%);
}
.custom[data-variant="yellow"] .custom-pattern { color: rgba(0,45,114,.55); opacity: .3; }
.custom[data-variant="yellow"] .custom-corner { border-color: rgba(0,45,114,.25); }
.custom[data-variant="yellow"] .custom-badge { color: var(--g500); }
.custom[data-variant="yellow"] .custom-title-bold { color: var(--blue); }
.custom[data-variant="yellow"] .custom-title-script { color: var(--black); }
.custom[data-variant="yellow"] .custom-underline { color: var(--yellow); opacity: 1; }
.custom[data-variant="yellow"] .custom-sub { color: var(--g500); }
.custom[data-variant="yellow"] .custom-features li { color: var(--black); }
.custom[data-variant="yellow"] .custom-features li svg { color: var(--blue); }
.custom[data-variant="yellow"] .custom-cta { background: var(--blue); color: var(--white); }
.custom[data-variant="yellow"] .custom-banner:hover .custom-cta { background: var(--yellow); color: var(--black); }
.custom[data-variant="yellow"] .custom-cta-hint { color: var(--g500); }

/* Variante: multicolor (homenaje al original, paleta controlada) */
.custom[data-variant="multicolor"] .custom-banner {
  background: var(--blue);
}
.custom[data-variant="multicolor"] .custom-banner::before {
  background:
    linear-gradient(100deg,
      rgba(0,120,180,.55)   0%,
      rgba(0,45,114,.1)     28%,
      rgba(180,30,110,.45)  55%,
      rgba(230,140,30,.35)  78%,
      rgba(255,209,0,.55)   100%);
  mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════
   CUSTOM — responsive
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .custom-banner {
    grid-template-columns: 1fr;
    gap: var(--sp-40);
    padding: 56px var(--sp-32);
  }
  .custom-copy { padding-left: var(--sp-24); }
  .custom-badge { display: none; }
  .custom-cta-wrap { justify-self: start; }
}
@media (max-width: 600px) {
  .custom-banner { padding: var(--sp-48) var(--sp-24); }
  .custom-title-script { margin-left: var(--sp-32); }
  .custom-underline { left: 32px; }
  .custom-features { gap: var(--sp-8) var(--sp-16); }
}

/* ═══════════════════════════════════════════
   VIDEO CORPORATIVO
═══════════════════════════════════════════ */
.video-module { padding: var(--sp-48) 0; }
.video-module-inner {
  position: relative;
  background: var(--blue);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-64);
  padding: var(--sp-64);
  overflow: hidden;
  border-radius: var(--radius);
}
.video-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,255,255,.25);
  pointer-events: none;
}
.video-corner.tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.video-corner.tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.video-corner.bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.video-corner.br { bottom: 20px; right: 20px; border-left: none; border-top: none; }
.video-module-label { color: rgba(255,255,255,.6); }
.video-module-title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.04em;
  color: var(--white);
  line-height: 1;
  margin: var(--sp-12) 0 var(--sp-20);
}
.video-module-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 380px;
}
.video-module-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--black);
}
.video-module-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.video-module-thumb:hover img { transform: scale(1.04); opacity: .65; }
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .2s, color .2s;
}
.video-play-btn svg { width: 28px; height: 28px; margin-left: 4px; /* optical centering */ }
.video-module-thumb:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--yellow);
  color: var(--black);
}

/* Lightbox */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.video-lightbox.is-open { opacity: 1; pointer-events: auto; }
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  cursor: pointer;
}
.video-lightbox-content {
  position: relative;
  width: min(960px, 90vw);
  z-index: 1;
}
.video-lightbox-frame {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: var(--black);
}
.video-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.video-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255,255,255,.12);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.video-lightbox-close:hover { background: rgba(255,255,255,.24); }
.video-lightbox-close svg { width: 18px; height: 18px; }

/* VIDEO — responsive */
@media (max-width: 900px) {
  .video-module-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-40);
    padding: 56px var(--sp-32);
  }
  .video-module-desc { max-width: none; }
}
@media (max-width: 600px) {
  .video-module-inner { padding: var(--sp-48) var(--sp-24); }
  .video-play-btn { width: 56px; height: 56px; }
  .video-play-btn svg { width: 22px; height: 22px; }
  .video-lightbox-content { width: 95vw; }
  .video-lightbox-close { top: -44px; }
}

/* ═══════════════════════════════════════════
   TWEAKS — panel flotante
═══════════════════════════════════════════ */
#tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--g100);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#tweaks-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#tweaks-panel .tw-head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 14px 18px;
  border-bottom: 1px solid var(--g100);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
#tweaks-panel .tw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
#tweaks-panel .tw-body { padding: var(--sp-16) 18px 18px; }
#tweaks-panel .tw-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 10px;
}
#tweaks-panel .tw-options { display: flex; flex-direction: column; gap: 6px; }
#tweaks-panel .tw-options button {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  padding: 10px var(--sp-12);
  border: 1.5px solid var(--g100);
  border-radius: 6px;
  background: var(--white);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--black);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#tweaks-panel .tw-options button:hover { border-color: var(--blue); }
#tweaks-panel .tw-options button.is-active { border-color: var(--blue); background: var(--blue-10); }
#tweaks-panel .tw-sw {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
}
#tweaks-panel .tw-sw-blue   { background: var(--blue); }
#tweaks-panel .tw-sw-yellow { background: linear-gradient(135deg, var(--g50) 50%, var(--yellow) 50%); }
#tweaks-panel .tw-sw-multi  { background: linear-gradient(100deg, #0077b4 0%, #b41e6e 50%, #ffd100 100%); }

/* ═══════════════════════════════════════════
   SECTION FOOTER MOBILE — oculto en desktop
═══════════════════════════════════════════ */
.section-footer-mobile { display: none; }

/* ═══════════════════════════════════════════
   MOBILE OVERRIDES (<= 720px)
═══════════════════════════════════════════ */
/* ── Header mobile: activo por debajo de 1200px ── */
@media (max-width: 1200px) {

  .header { --header-h: 64px; background: var(--blue); }
  .header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.25); }
  .header-utility,
  .header-cats,
  .nav-secondary,
  .logo-link { display: none; }

  .header-brand {
    height: 64px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .header-brand-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    height: 100%;
    padding: 0 var(--sp-16);
  }

  .burger-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 var(--sp-8);
    background: none;
    border: none;
    flex-shrink: 0;
  }
  .burger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
  }

  /* Buscador: fondo azul claro, coherente con el carrito */
  .header-brand .header-search {
    flex: 1; max-width: none; min-width: 0;
    background: var(--blue-10);
    border-color: transparent;
  }
  .header-brand .header-search:focus-within {
    background: var(--white);
    border-color: var(--blue-10);
  }
  .header-brand .search-btn   { width: 40px; height: 40px; padding-left: 2px; color: var(--blue); }
  .header-brand .search-btn svg { width: 17px; height: 17px; }
  .header-brand .search-input {
    height: 40px;
    padding: 0 var(--sp-12) 0 var(--sp-4);
    color: var(--blue);
  }
  .header-brand .search-input::placeholder { color: rgba(0,45,114,.55); }

  .cart-pill.cart-pill-mobile {
    display: inline-flex;
    flex-shrink: 0;
    padding: 7px var(--sp-12);
    gap: 6px;
    font-size: 0;
  }
  .cart-pill-mobile svg { flex-shrink: 0; }
  .cart-pill-mobile .cart-count { font-size: var(--fs-2xs); }

  .header.scrolled .header-brand { display: block; }
  .header.scrolled .header-cats  { display: none; }

}

/* ── OFFERS GRID: 1 col externa en tablet ── */
@media (max-width: 1100px) {
  .offers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {

  /* ── Padding lateral global: 16px en mobile ── */
  :root { --gap: var(--sp-16); }

  /* ── HERO: imagen primero, luego texto ── */
  .hero { height: auto; min-height: 0; }
  .hero-swiper { overflow: hidden; }
  .hero-swiper .swiper-slide { width: 100%; }
  .hero-slide {
    height: auto;
  }
  /* Hero mobile: bypass grid row/col para evitar offsets de gutter */
  .hero-slide {
    display: flex !important;
    flex-direction: column;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto;
  }
  .hero-media {
    order: 1;
    width: 100% !important;
    padding: 0 !important;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .hero-content {
    order: 2;
    width: 100% !important;
    padding: var(--sp-40) var(--gap) var(--sp-48) !important;
    text-align: center;
    align-items: center;
  }
  .hero-eyebrow { justify-content: center; }
  .hero-controls { display: none; }
  .hero-title  { font-size: clamp(36px, 10vw, 56px); margin-bottom: var(--sp-16); }
  .hero-sub    { margin-bottom: var(--sp-24); max-width: none; }
  .hero-ctas   { flex-direction: column; align-items: stretch; gap: var(--sp-12); width: 100%; }
  .hero-ctas .btn { width: 100%; justify-content: center; white-space: normal; }
  .hero-badge  { top: auto; bottom: 16px; right: 16px; padding: var(--sp-12) var(--sp-16); }
  .hero-badge strong { font-size: var(--fs-3xl); }

  /* ── PORTADAS BANNER ── */
  .portadas-banner-inner { min-height: 280px; }
  .portadas-banner-copy {
    padding: var(--sp-40) var(--gap);
    gap: var(--sp-24);
    max-width: none;
  }

  /* ── PROMO LOOKS: 2×2 en mobile, flujo automático ── */
  .promo-looks-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: var(--sp-16);
  }
  .promo-looks-grid .look-item:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  .promo-looks-grid .look-item:nth-child(5) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }

  /* ── STATS: 2×2 en mobile ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32) var(--sp-16); }

  /* ── LOOKS (grid final 2x2) ── */
  .looks-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: var(--sp-16);
  }
  .looks-grid .look-item:first-child { grid-row: auto; grid-column: 1 / 3; }

  /* ── TÍTULOS DE SECCIÓN: centrado en mobile ── */
  .section-title { text-align: center; }
  .section-header > div,
  .offers-header  > div,
  .sectors-header > div { width: 100%; }
  .section-header .label,
  .offers-header  .label,
  .sectors-header .label { text-align: center; }
  .collections-header { flex-direction: column; align-items: center; gap: var(--sp-16); }
  .collections-header .section-title { width: 100%; }

  /* ── CATEGORÍAS: header full-width, CTA debajo ── */
  .cat-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-24);
    margin-bottom: var(--sp-32);
  }
  .cat-header .section-title { width: 100%; }
  .cat-header .btn { display: none; } /* oculta el del header en mobile */

  /* ── Norma mobile: cualquier CTA "Ver todos" al lado del title
     se oculta y aparece en full-width debajo del módulo ── */
  .offers-header .btn,
  .offers-header-actions,
  .collections-header > a.btn,
  .section-header > a.btn,
  .cat-header > a.btn { display: none; }
  .section-footer-mobile {
    display: block;
    margin-top: var(--sp-24);
  }
  .section-footer-mobile .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* ── SECTORES: 3 cols, alturas iguales ── */
  .sectors-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
  /* ── BRANDS (4 items): 2×2 ── */
  .brands .sectors-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
  /* ── SUBCATEGORÍAS (landing de categoría 1r nivel): 2 por fila ── */
  .subcats .sectors-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
  .sector-card-img { aspect-ratio: 1; }
  .sector-card-name {
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    line-height: 1.25;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── PRODUCTS GRID (Más vendidos) ── */
  .products-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
  }

  /* ── OFFER CARD: en slider (ancho), acciones en fila ── */
  .offers-swiper .offer-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
  }
  .offers-swiper .qty-selector { flex-shrink: 0; }
  .offers-swiper .btn-add-cart { flex: 1; width: auto; }

  /* ── OFFER CARD en grid (Más vendidos): qty izquierda + botón derecha ── */
  .products-grid .offer-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
  }
  .products-grid .qty-selector { flex-shrink: 0; justify-content: space-between; }
  .products-grid .qty-selector .qty-input { width: 32px; flex: none; }
  .products-grid .btn-add-cart { flex: 1; width: auto; }

  .offer-card-body { padding: var(--sp-12); gap: 6px; }
  .offer-name { font-size: var(--fs-md); min-height: calc(14px * 1.35 * 3); }
  .offer-price { font-size: var(--fs-xl); }

  /* ── OFFERS GRID: imagen | info (con precio) arriba, acciones full-width abajo ── */
  .offers-grid .offer-card {
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .offers-grid .offer-card-img  {
    grid-row: 1; grid-column: 1;
    aspect-ratio: 1;       /* imagen siempre cuadrada — nunca estira el card */
    align-self: start;     /* no crece si el info es más alto */
  }
  .offers-grid .offer-card-info { grid-column: 2; grid-row: 1; padding: var(--sp-12) var(--sp-12) var(--sp-8); }
  .offers-grid .offer-name { min-height: calc(var(--fs-md) * 1.35 * 2); -webkit-line-clamp: 3; }
  .offers-grid .offer-card-commerce {
    grid-column: 1 / 3;
    grid-row: 2;
    padding: 0 var(--sp-12) var(--sp-12);
    border-top: 1px solid var(--g100);
  }
  .offers-grid .offer-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
    margin-top: 0;
    padding-top: 0;
  }
  .offers-grid .qty-selector { flex-shrink: 0; align-self: auto; justify-content: space-between; }
  .offers-grid .qty-input    { width: 40px; flex: none; }
  .offers-grid .btn-add-cart { flex: 1; width: auto; }

  /* ── FOOTER mobile ── */
  .footer-main { padding: var(--sp-48) 0 var(--sp-40); }
  .footer-brand {
    padding-bottom: var(--sp-32);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .footer-brand p { max-width: none; }
  .footer-col {
    padding: var(--sp-16) 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .footer-col h4 { margin-bottom: var(--sp-8); }
  .footer-col li { margin-bottom: 0; }
  .footer-col a { font-size: var(--fs-base); min-height: 36px; display: flex; align-items: center; }
  .footer-certifications {
    padding: var(--sp-16) 0 0;
  }
  .footer-cert-group > img { height: 56px; }
  .footer-eco-logos img { height: 64px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-12);
  }
  .footer-legal { gap: var(--sp-12); flex-wrap: wrap; }
  /* Social icons */
  .footer-social-btn { width: 40px; height: 40px; }
  /* Distinctions band mobile */
  .footer-distinctions-band { padding: var(--sp-24) 0; }
  /* Logos band mobile: grupos apilados verticalmente, cada uno hace wrap propio */
  .footer-logos-band { padding: var(--sp-20) 0; }
  .footer-logos-sep { display: none; }
  .footer-logos-inner { flex-direction: column; align-items: center; gap: var(--sp-12); }
  .footer-logos-group { flex: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .footer-logos-group--payment { gap: var(--sp-8); }
  /* Distinciones: ya son fila horizontal en base, solo reducir altura en mobile */
  .footer-distinctions-list img { max-height: 48px; }
}

/* ═══════════════════════════════════════════
   CATEGORY PAGE — PLP
═══════════════════════════════════════════ */

/* ── Breadcrumb ── */
.cat-breadcrumb { border-bottom: 1px solid var(--g100); }
.cat-breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g500);
}
.cat-breadcrumb-inner a { color: var(--g500); transition: color .15s; }
.cat-breadcrumb-inner a:hover { color: var(--blue); }
.cat-breadcrumb-inner .cat-bc-current { color: var(--black); font-weight: 600; }
/* Separador decorativo: el glifo del DOM se oculta (font-size:0) y se pinta vía
   ::before, que WAVE no evalúa como texto → no cuenta como error de contraste. */
.cat-bc-sep { color: var(--g300); font-weight: 400; letter-spacing: 0; font-size: 0; }
.cat-bc-sep::before { content: '/'; font-size: var(--fs-3xs); }

/* ── Breadcrumb strip (mobile only) ── */
.cat-bc-strip {
  display: none; /* shown only on mobile via media query */
}

/* ── Category hero banner ── */
.cat-banner { border-bottom: 1px solid var(--g100); }
.cat-banner-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 240px;
}
.cat-banner-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);
  padding: 28px var(--gap);
}
.cat-banner-eyebrow { display: flex; align-items: center; gap: var(--sp-8); }
.cat-banner-line { width: 28px; height: 1.5px; background: var(--blue); flex-shrink: 0; }
.cat-banner-title {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
}
/* breadcrumb inline dentro del banner */
.cat-banner-bc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-3xs); /* SEO breadcrumb — deliberadamente pequeño */
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g500);
}
.cat-banner-bc a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.cat-banner-bc a:hover { color: var(--blue-80); }
.cat-banner-bc .cat-bc-sep { color: var(--g300); font-weight: 400; letter-spacing: 0; }
.cat-banner-bc .cat-bc-current { color: var(--g500); }
/* ≥16px de separación entre breadcrumb desktop y el título (8px gap del flex + 8px) */
.cat-banner-copy .cat-banner-bc { margin-bottom: var(--sp-8); }

.cat-banner-desc {
  font-size: var(--fs-sm);
  color: var(--g500);
  line-height: 1.6;
  max-width: 480px;
  overflow: hidden;
  height: 3.2em;
}
/* Páginas sin toggle "ver más": el header muestra la descripción completa */
.page-tiendas .cat-banner-desc { height: auto; overflow: visible; }
.cat-banner-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
  width: fit-content;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
  transition: gap .2s;
}
.cat-banner-more:hover { gap: var(--sp-12); }
.cat-banner-more.is-open svg { transform: rotate(45deg); }
.cat-banner-more svg { transition: transform .2s; }
.cat-banner-media { overflow: hidden; background: var(--g50); position: relative; }
.cat-banner-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}

/* ── Subcategory tabs ── */
.subcat-bar { border-bottom: 1px solid var(--g100); background: var(--white); }
.subcat-bar-inner {
  display: flex;
  align-items: center;
  height: 64px;
  overflow: hidden;
  padding-inline: var(--gap);
}
.subcat-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  scroll-behavior: smooth;
}
.subcat-tabs::-webkit-scrollbar { display: none; }
.subcat-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 0 var(--sp-20);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--g500);
  white-space: nowrap;
  border-right: 1px solid var(--g100);
  flex-shrink: 0;
  cursor: pointer;
  transition: color .15s, background .15s;
  position: relative;
  text-decoration: none;
}
.subcat-tab:first-child { border-left: 1px solid var(--g100); }
.subcat-tab:hover { color: var(--blue); background: var(--g50); }
.subcat-tab.is-active { color: var(--blue); background: var(--blue-10); }
.subcat-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--blue);
}
.subcat-tab-img {
  width: 26px; height: 26px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--g100);
  flex-shrink: 0;
}
.subcat-tab-img img { width: 100%; height: 100%; object-fit: cover; }
.subcat-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  margin-left: var(--sp-16);
  border: 1.5px solid var(--g100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  cursor: pointer;
  color: var(--black);
  transition: border-color .2s, background .2s, color .2s;
}
.subcat-arrow:hover { border-color: var(--blue); background: var(--blue); color: var(--white); }

/* ── Subcategory slider layout ── */
.subcat-wrap {
  display: flex;
  align-items: center;
  padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-32);
  gap: 0;
}
.subcat-slider-area {
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.subcat-swiper { overflow: visible; }
.subcat-swiper .swiper-slide { width: auto; }
.cat-pill--sm {
  height: 56px;
  width: 200px;
  text-decoration: none;
}
.cat-pill--sm .cat-pill-thumb { width: 56px; }
.cat-pill--sm .cat-pill-name {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.subcat-next-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  margin-left: var(--sp-16);
  border: 1.5px solid var(--g100);
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  position: relative;
  z-index: 2;
  transition: border-color .2s, background .2s, color .2s, opacity .2s;
}
.subcat-bar:hover .subcat-next-btn { opacity: 1; }
.subcat-next-btn:hover { border-color: var(--blue); background: var(--blue); color: var(--white); }

@media (min-width: 721px) {
  .subcat-wrap { height: auto; padding-block: var(--sp-12); align-items: flex-start; }
  .subcat-swiper .swiper-wrapper { flex-wrap: wrap; gap: var(--sp-8); transform: none !important; }
  .subcat-swiper .swiper-slide { width: auto !important; margin-right: 0 !important; }
  .subcat-next-btn { display: none; }
}

/* ── Category main layout ── */
.cat-section { background: var(--white); padding: var(--sp-24) 0 var(--sp-48); }
.cat-layout-section {
  padding-top: var(--sp-48);
  padding-bottom: var(--sp-48);
}
.cat-layout {
  align-items: flex-start;
}

/* ── Sidebar ── */
.cat-sidebar { position: sticky; top: 64px; align-self: start; }
/* Mayor separación entre sidebar y grid de cards (mínimo 24px) */
.cat-layout .cat-sidebar { padding-right: var(--sp-16); }
.cat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-24) 0 var(--sp-24);
  border-bottom: 2px solid var(--black);
}
.cat-products-hd { align-items: flex-start; }
.cat-sidebar-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
}
.cat-clear-all {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-4);
  transition: color .15s, opacity .15s;
  border: none; background: none; font-family: inherit;
  opacity: 0;
  pointer-events: none;
}
.cat-clear-all.is-active { opacity: 1; pointer-events: auto; }
.cat-clear-all:hover { color: var(--blue-80); }

/* ── Filter group ── */
.cat-filter { border-bottom: 1px solid var(--g100); }
.cat-filter-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  cursor: pointer; user-select: none;
}
.cat-filter-hd-l { display: flex; align-items: center; gap: var(--sp-8); }
.cat-filter-name { font-size: var(--fs-base); font-weight: 600; color: var(--black); }
.cat-filter-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-size: var(--fs-2xs); font-weight: 800;
}
.cat-filter-chevron { filter: brightness(0) invert(.43); transition: transform .2s; flex-shrink: 0; } /* tinta gris ~--g500 sobre el <img> negro */
.cat-filter.is-open .cat-filter-chevron { transform: rotate(180deg); }
.cat-filter-body { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); }
.cat-filter.is-open .cat-filter-body { max-height: 400px; }
.cat-filter-bd { padding-bottom: var(--sp-16); }

/* Selected filter row */
.cat-filter-sel {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-12); padding-top: var(--sp-4);
}
.cat-filter-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--black);
  background: var(--g50); border: 1px solid var(--g100);
  padding: var(--sp-4) 10px; border-radius: var(--sp-4);
}
.cat-filter-clr {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue); cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-4);
  transition: color .15s; border: none; background: none; font-family: inherit;
}
.cat-filter-clr:hover { color: var(--blue-80); }

/* Color items */
.cat-colors { display: flex; flex-direction: column; }
.cat-color {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; cursor: pointer;
}
.cat-color-l { display: flex; align-items: center; gap: var(--sp-8); }
.cat-color-sw {
  width: 24px; height: 24px; border-radius: 4px;
  border: 1.5px solid var(--g400); flex-shrink: 0; /* AA 1.4.11 */
}
.cat-color-lbl { font-size: var(--fs-base); font-weight: 400; color: var(--black); }
.cat-color:hover .cat-color-lbl,
.cat-color.is-on .cat-color-lbl { font-weight: 700; }
.cat-radio {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--g400); flex-shrink: 0; /* AA 1.4.11 */
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.cat-radio.is-on { border-color: var(--blue); background: var(--blue); }
.cat-radio.is-on::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.cat-color:hover .cat-radio { border-color: var(--blue); }

/* ── Products main area ── */
.cat-products-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-12) 0 var(--sp-24); /* top reducido para alinear baseline de "685" con "FILTROS" (14px vs 20px) */
}
.cat-count { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.03em; color: var(--black); }
.cat-count span { font-size: var(--fs-sm); font-weight: 400; color: var(--g500); letter-spacing: 0; margin-left: var(--sp-4); }
.cat-sort {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; gap: var(--sp-8);
  height: 44px; padding: 0 36px 0 var(--sp-16);
  border: 1.5px solid var(--g100); border-radius: var(--radius);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--black);
  cursor: pointer; min-width: 220px; transition: border-color .15s;
}
.cat-sort:hover, .cat-sort:focus { border-color: var(--blue); outline: none; }

/* ── Sort + view toggle group ── */
.cat-products-hd-right { display: flex; align-items: center; gap: var(--sp-12); }
.cat-view-toggle {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--g100);
  border-radius: var(--radius);
  overflow: hidden;
}
.cat-view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--white);
  border: none;
  color: var(--g300);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.cat-view-btn + .cat-view-btn { border-left: 1.5px solid var(--g100); }
.cat-view-btn:hover { color: var(--blue); }
.cat-view-btn.is-active { color: var(--blue); background: var(--blue-10); }
.cat-view-btn svg { display: block; }

/* ── Cat products grid ── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); margin-bottom: var(--sp-40); }

@media (min-width: 601px) {
  /* Desktop vertical cards — logo below image, aligned with content */
  .cat-grid:not(.cat-grid--list) .offer-card .offer-card-img,
  .offers-swiper .offer-card .offer-card-img {
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .cat-grid:not(.cat-grid--list) .offer-card .offer-card-img > img,
  .offers-swiper .offer-card .offer-card-img > img {
    position: static;
    width: 100%;
    aspect-ratio: 1;
    max-height: 250px;
    height: auto;
    padding: var(--sp-16) var(--sp-12) 0;
    flex: 0 0 auto;
  }
  .cat-grid:not(.cat-grid--list) .offer-card .offer-brand-wrap,
  .offers-swiper .offer-card .offer-brand-wrap {
    position: static;
    align-self: flex-start;
    margin: var(--sp-12) 0 var(--sp-16) var(--sp-16);
  }
  .cat-grid:not(.cat-grid--list) .offer-card .offer-brand-logo,
  .offers-swiper .offer-card .offer-brand-logo {
    width: 64px;
    height: auto;
  }
}

/* ── List view modifier — card horizontal ── */
/* El nº de columnas lo gestiona el grid padre (cat-grid → 1 col, offers-grid → 2 col) */
.cat-grid.cat-grid--list { grid-template-columns: 1fr; gap: var(--sp-12); }

.cat-grid--list .offer-card {
  display: flex;
  flex-direction: row;
  height: auto;
}
.cat-grid--list .offer-card .offer-card-img {
  width: 156px;
  min-width: 156px;
  aspect-ratio: 1;
  border-radius: var(--radius) 0 0 var(--radius);
}
.cat-grid--list .offer-card .offer-card-body {
  flex: 1;
  min-width: 0;
  padding: var(--sp-16);
  display: grid;
  grid-template-columns: 1fr 160px;
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: var(--sp-24);
  align-items: start;
}
.cat-grid--list .offer-card .offer-card-copy,
.cat-grid--list .offer-card .offer-card-buy-meta {
  grid-column: 1;
  min-width: 0;
}
.cat-grid--list .offer-card .offer-card-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-right: var(--sp-32);
}
.cat-grid--list .offer-card .offer-card-copy .offer-save {
  top: 0;
  right: 0;
}
.cat-grid--list .offer-card .offer-code,
.cat-grid--list .offer-card .offer-name,
.cat-grid--list .offer-card .offer-pricing,
.cat-grid--list .offer-card .offer-pack { grid-column: 1; }
.cat-grid--list .offer-card .offer-name { min-height: 0; -webkit-line-clamp: 2; }
.cat-grid--list .offer-card .offer-actions {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: end;
  grid-template-columns: 1fr;   /* columna única — qty arriba, botón abajo */
  margin-top: 0;
  padding-top: 0;
  gap: var(--sp-8);
}
.cat-grid--list .offer-card .offer-actions .qty-selector { width: 100%; }
.cat-grid--list .offer-card .offer-actions .qty-btn { width: var(--ctrl-h); }
.cat-grid--list .offer-card .offer-actions .qty-input { width: 0; min-width: 0; flex: 1 1 0; }
.cat-grid--list .offer-card .offer-actions .btn-add-cart { height: var(--ctrl-h); width: 100%; justify-content: center; }

/* ── Trust mini bar ── */
.cat-trust {
  background: var(--blue-10);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 var(--sp-40);
}
.cat-trust-item {
  display: flex; align-items: center; gap: var(--sp-16);
  padding: var(--sp-20) var(--sp-24);
  border-right: 1px solid rgba(0,45,114,.12);
}
.cat-trust-item:last-child { border-right: none; }
.cat-trust-icon { width: 28px; height: 28px; color: var(--blue); flex-shrink: 0; }
.cat-trust-icon svg { width: 100%; height: 100%; }
.cat-trust-copy strong { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--blue); line-height: 1.3; }
.cat-trust-copy span { font-size: var(--fs-xs); color: var(--blue); opacity: .7; }
.cat-trust-link {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue); text-decoration: underline;
  opacity: .8; transition: opacity .15s; margin-left: var(--sp-4);
}
.cat-trust-link:hover { opacity: 1; }

/* ── Pagination ── */
.cat-pag { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); padding: var(--sp-48) 0 0; }
.cat-pag-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--g100); border-radius: var(--radius);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--black);
  cursor: pointer; background: var(--white);
  transition: border-color .15s, background .15s, color .15s;
}
.cat-pag-btn:hover { border-color: var(--blue); color: var(--blue); }
.cat-pag-btn.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }
.cat-pag-sep { font-size: var(--fs-base); color: var(--g300); padding: 0 var(--sp-4); }

/* ── Cat main area ── */
.cat-main { min-width: 0; }

/* ── Filter checkbox items ── */
.cat-check {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: 6px 0; cursor: pointer;
}
.cat-check-box {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1.5px solid var(--g400); flex-shrink: 0; /* AA 1.4.11 */
  transition: border-color .15s, background .15s;
}
.cat-check:hover .cat-check-box { border-color: var(--blue); }
.cat-check:hover .cat-check-lbl,
.cat-check:has(.cat-check-box.is-on) .cat-check-lbl { font-weight: 700; }
.cat-color:hover .cat-check-box { border-color: var(--blue); }
.cat-check-box.is-on {
  border-color: var(--blue);
  background: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.cat-check-lbl { font-size: var(--fs-base); color: var(--black); flex: 1; }
.cat-check-cnt { font-size: var(--fs-xs); color: var(--g500); }

/* ── Highlight bar between products — visual style from trust section ── */
.cat-highlight {
  background: var(--g50);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 var(--sp-40);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Variante cards — pilares como cards blancas con borde de producto.
   Para páginas funcionales de fondo blanco (p.ej. atención al cliente). */
.cat-highlight--cards { background: none; overflow: visible; gap: var(--sp-16); margin: 0; }
.cat-highlight--cards .cat-highlight-pillar { border: 1px solid var(--g100); border-radius: var(--radius); background: var(--white); }
.cat-highlight-pillar {
  padding: var(--sp-32) 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.cat-highlight .trust-icon { color: var(--blue); }

/* ── SEO text block ── */
.cat-seo { background: var(--g50); border-top: 1px solid var(--g100); padding: var(--sp-40) 0; }
.cat-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); }
.cat-seo-title {
  font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.03em;
  text-transform: uppercase; line-height: 1.05; margin-bottom: var(--sp-24); color: var(--black);
}
.cat-seo-body { font-size: var(--fs-base); color: var(--g500); line-height: 1.75; }
.cat-seo-body p + p { margin-top: 14px; }

/* ═══════════════════════════════════════════
   LOOKS PAGE
═══════════════════════════════════════════ */
.looks-banner-desc p + p { margin-top: var(--sp-12); }
.looks-section { padding-bottom: var(--sp-80); }
.looks-layout { row-gap: var(--sp-24); }
.looks-sidebar .cat-sidebar-head { padding-top: var(--sp-16); }
.looks-nav {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-12);
}
.looks-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--g100);
  color: var(--black);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color .15s, padding-left .15s;
}
.looks-nav a:hover {
  color: var(--blue);
  padding-left: var(--sp-4);
}
.looks-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.looks-feature {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--g100);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow .25s;        /* hover = Shadow/Card-Hover, como las cards de producto */
}
.looks-feature:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.looks-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-32) var(--sp-32) var(--sp-24);
}
.looks-feature-copy .label {
  color: var(--g500);   /* Eyebrow estándar — el azul se reserva a acciones (§0.1); el label es metadato */
  margin-bottom: 0;
}
.looks-feature h2 {
  color: var(--black);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .96;
  text-transform: uppercase;
}
.looks-feature-media {
  display: block;
  min-width: 0;
  aspect-ratio: 16 / 4.5;
  overflow: hidden;
  background: var(--g50);
}
.looks-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.looks-feature:hover .looks-feature-media img { transform: scale(1.025); }
.looks-feature-btn {
  align-self: flex-end;
  margin: var(--sp-24) var(--sp-32) var(--sp-32);
}

/* ═══════════════════════════════════════════
   GUÍA DETALLE (editorial)
═══════════════════════════════════════════ */
.page-guia-detalle .cat-banner-desc {
  height: auto;
  overflow: visible;
  font-size: var(--fs-md);
  max-width: 600px;
}
.guia-detalle-article {
  padding-bottom: var(--sp-80);
}
/* Secciones editoriales */
.guia-section {
  padding: var(--sp-64) 0;
  border-bottom: 1px solid var(--g100);
}
.guia-section--alt {
  background: none;
}
.guia-section--faq {
  border-bottom: none;
}
.guia-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-64);
  align-items: start;
}
.guia-section-inner--reverse .guia-text-col { order: 2; }
.guia-section-inner--reverse .guia-figure  { order: 1; }
.guia-text-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}
.guia-h2 {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--black);
}
.guia-list + .guia-h2 { margin-top: var(--sp-48); }
.guia-h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--black);
  margin-top: var(--sp-8);
  margin-bottom: calc(var(--sp-20) * -1);
}
.guia-text-col p {
  font-size: var(--fs-sm);
  color: var(--g600);
  line-height: 1.65;
}
.guia-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-left: var(--sp-20);
  list-style: disc;
}
.guia-list li {
  font-size: var(--fs-sm);
  color: var(--g600);
  line-height: 1.55;
  display: list-item;
}
.guia-figure {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--g100);
  margin: 0;
  position: sticky;
  top: 96px;
}
.guia-figure img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}
/* Bloque de productos */
.guia-products-block {
  padding: var(--sp-48) 0;
  border-bottom: 1px solid var(--g100);
}
.guia-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-24);
}
.guia-products-title {
  margin: 0;
}
/* FAQ wrap */
.ed-faq-wrap {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
/* Responsive */
@media (max-width: 900px) {
  .guia-section-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
  }
  .guia-section-inner--reverse .guia-text-col { order: 1; }
  .guia-section-inner--reverse .guia-figure  { order: 2; }
  .guia-figure { position: static; }
  .guia-figure img { height: 280px; }
  .ed-faq-wrap { grid-template-columns: 1fr; gap: var(--sp-32); }
}

/* ═══════════════════════════════════════════
   GUÍA DE COMPRA
═══════════════════════════════════════════ */
.page-guia-compra .cat-banner-desc {
  height: auto;
  overflow: visible;
}
.guia-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}
.guia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-24);
}
.guia-feature .looks-feature-media {
  aspect-ratio: 16 / 7;
}
.guia-feature h2 {
  font-size: var(--fs-2xl);
}
.guia-feature-desc {
  padding: var(--sp-16) var(--sp-32) 0;
  font-size: var(--fs-sm);
  color: var(--g600);
  line-height: 1.55;
}
.ed-faq {
  padding-bottom: var(--sp-80);
}
.ed-faq-title {
  margin-bottom: var(--sp-32);
}
.ed-faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--g100);
}
.ed-faq-item {
  border-bottom: 1px solid var(--g100);
}
.ed-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-20) 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ed-faq-q::-webkit-details-marker { display: none; }
.ed-faq-q::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--black);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: transform .2s;
}
.ed-faq-item[open] .ed-faq-q::after { transform: rotate(180deg); }
.ed-faq-a {
  padding-bottom: var(--sp-20);
  font-size: var(--fs-sm);
  color: var(--g600);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .guia-grid { grid-template-columns: 1fr; }
  .guia-products-title { text-align: left; }
}

/* ═══════════════════════════════════════════
   EDITORIAL — hero full-bleed, secciones numeradas
   con título sticky e índice mosaico. Reutilizable
   (fichas de look, landings, guías).
═══════════════════════════════════════════ */
/* ── Hero lookbook full-bleed ── */
.editorial-hero {
  position: relative;
  min-height: clamp(420px, 68vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.editorial-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Scrim garantizado (norma AA §0.2: no confiar en que la foto sea oscura) */
.editorial-hero::after {
  content: '';
  position: absolute; inset: 0;
  /* Scrim reforzado: el texto blanco vive en el ~70% inferior; ahí el alpha es
     ≥.6 sobre azul oscuro casi negro → AA garantizado sobre cualquier foto. */
  background: linear-gradient(to top, rgba(0,20,52,.85) 0%, rgba(0,20,52,.72) 55%, rgba(0,20,52,.4) 78%, rgba(0,20,52,.1) 100%);
}
.editorial-hero-content {
  position: relative; z-index: 1;
  width: 100%;
  padding-bottom: clamp(32px, 5vw, 64px);
  color: var(--white);
}
.editorial-hero-bc {
  display: flex; gap: var(--sp-8); align-items: center;
  font-size: var(--fs-xs); margin-bottom: var(--sp-16);
}
.editorial-hero-bc a { color: var(--white); text-decoration: none; }
.editorial-hero-bc a:hover { text-decoration: underline; text-underline-offset: 2px; }
.editorial-hero-bc span[aria-hidden] { opacity: .6; }
.editorial-hero-title {
  font-size: clamp(44px, 6.5vw, 96px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: .95;
  margin: 0;
}
/* Acento script: mismo patrón que .custom-title-script (Caveat amarillo,
   solo decorativo sobre scrim oscuro — nunca sobre blanco) */
.editorial-hero-script {
  font-family: 'Caveat', cursive;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  color: var(--yellow);
  display: block;
  margin-top: -4px;
  margin-left: clamp(40px, 6vw, 90px);
}
.editorial-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-16);
  align-items: center;
  margin-top: var(--sp-24);
}
.editorial-hero-count {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.editorial-hero-count strong { font-weight: 800; }

/* ── Índice de looks destacados (reusa .promo-looks-grid + .look-item) ── */
.editorial-index { padding: var(--sp-48) 0; background: var(--white); }
.editorial-index .promo-looks-grid { margin-top: var(--sp-24); }
.editorial-index .look-item img { width: 100%; height: 100%; object-fit: cover; }
.editorial-index-num {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
}

/* ── Sección de look editorial ── */
.editorial-row { padding: var(--sp-48) 0; scroll-margin-top: 88px; }
.editorial-row--alt { background: var(--g50); }
/* Barra de título: full-width, fondo según la banda de la sección.
   En desktop queda sticky hasta que la imagen sale de escena
   (scope = .editorial-top, que agrupa headbar + imagen). */
.editorial-headbar { background: var(--white); padding-bottom: var(--sp-24); }
.editorial-row--alt .editorial-headbar { background: var(--g50); }
.editorial-head {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-16);
}
@media (min-width: 901px) {
  .editorial-headbar {
    position: sticky;
    top: 48px; /* altura exacta del header colapsado */
    z-index: 10;
    padding-top: var(--sp-8);
  }
}
/* Número gigante decorativo — gris mínimo AA texto grande (§0.2) */
.editorial-num {
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--g400);
  user-select: none;
  flex-shrink: 0;
  /* compensación óptica: el descender crece con el cuerpo;
     baja la cifra para casar su base con la del título */
  transform: translateY(.08em);
}
/* En la ficha de look los números de sección van en negro (no decorativos) */
.page-look-detail .editorial-num { color: var(--black); }
.editorial-titles { min-width: 0; }
.editorial-titles .label { margin-bottom: var(--sp-4); }
.editorial-title {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--black);
  margin: 0;
}
.editorial-img {
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}
/* CTA sobre la imagen — solo desktop, ancla al slider del pack */
.editorial-img-cta {
  display: none;
  position: absolute;
  right: var(--sp-16);
  bottom: var(--sp-16);
  z-index: 1;
}
@media (min-width: 901px) {
  .editorial-img-cta { display: inline-flex; }
}
.editorial-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.editorial-slider { padding-top: var(--sp-24); }

@media (max-width: 600px) {
  .editorial-hero { min-height: 60vh; }
  /* En mobile el breadcrumb vive en la strip bajo el header, no dentro del hero */
  .editorial-hero-bc { display: none; }
  .editorial-row { padding: var(--sp-32) 0; }
  .editorial-head { flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
  .editorial-num { font-size: 48px; }
}
  

/* ── Category responsive ── */
@media (max-width: 1199px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cat-banner-inner { grid-template-columns: 1fr; min-height: 0; }
  .cat-banner-media { display: none; }
  .cat-banner-copy { padding: 40px var(--gap); }
  .looks-feature-copy {
    padding: var(--sp-24);
  }
  .looks-feature-media {
    aspect-ratio: 16 / 7;
  }
  .looks-feature-btn {
    margin: var(--sp-24);
  }
  .cat-trust { grid-template-columns: 1fr; }
  .cat-trust-item { border-right: none; border-bottom: 1px solid rgba(0,45,114,.12); }
  .cat-trust-item:last-child { border-bottom: none; }
  .cat-seo-grid { grid-template-columns: 1fr; gap: var(--sp-40); }
}
@media (max-width: 600px) {
  .cat-grid, .offers-grid { grid-template-columns: 1fr; gap: var(--sp-12); }

  /* CODEX 2026-05-19: mobile PLP card = top media/content + bottom full-width actions */
  .cat-grid .offer-card,
  .offers-grid .offer-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-auto-rows: auto;
    column-gap: var(--sp-12);
    row-gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-12);
  }
  .cat-grid .offer-card .offer-save,
  .offers-grid .offer-card .offer-save {
    top: var(--sp-12);
    right: var(--sp-12);
  }
  .cat-grid .offer-card .offer-card-img,
  .offers-grid .offer-card .offer-card-img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    min-width: 0;
    border-radius: var(--radius);
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .cat-grid .offer-card .offer-card-img > img,
  .offers-grid .offer-card .offer-card-img > img {
    position: static;
    flex: 1 1 auto;
    min-height: 100px;
    max-height: 160px;
    height: 0;
    padding: 0;
  }
  .cat-grid .offer-card .offer-badge--new img,
  .offers-grid .offer-card .offer-badge--new img {
    height: 32px;
    padding: 0;
  }
  .cat-grid .offer-card .offer-badge--new,
  .offers-grid .offer-card .offer-badge--new {
    top: 0;
    left: 0;
  }
  .cat-grid .offer-card .offer-badge--discount,
  .offers-grid .offer-card .offer-badge--discount {
    top: calc(-1 * var(--sp-12));
    left: calc(-1 * var(--sp-12));
  }
  .cat-grid .offer-card .offer-brand-wrap,
  .offers-grid .offer-card .offer-brand-wrap {
    position: static;
    align-self: flex-start;
    margin: auto 0 0 0;
    z-index: 3;
  }
  .cat-grid .offer-card .offer-brand-logo,
  .offers-grid .offer-card .offer-brand-logo {
    width: 56px;
    height: auto;
  }
  .cat-grid .offer-card .offer-card-body,
  .offers-grid .offer-card .offer-card-body {
    display: contents;
  }
  .cat-grid .offer-card .offer-card-copy,
  .cat-grid .offer-card .offer-card-buy-meta,
  .offers-grid .offer-card .offer-card-copy,
  .offers-grid .offer-card .offer-card-buy-meta {
    grid-column: 2;
    min-width: 0;
  }
  .cat-grid .offer-card .offer-card-copy,
  .offers-grid .offer-card .offer-card-copy {
    grid-row: 1;
    position: relative;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-right: var(--sp-32);
  }
  .cat-grid .offer-card .offer-card-copy .offer-save,
  .offers-grid .offer-card .offer-card-copy .offer-save {
    top: 0;
    right: 0;
  }
  .cat-grid .offer-card .offer-card-buy-meta,
  .offers-grid .offer-card .offer-card-buy-meta {
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }
  .cat-grid .offer-card .offer-name,
  .offers-grid .offer-card .offer-name {
    min-height: 0;
    -webkit-line-clamp: 2;
  }
  /* acciones full-width + personalizable sin espacio si no existe */
  .cat-grid .offer-card .offer-actions,
  .offers-grid .offer-card .offer-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: var(--sp-12);
    row-gap: var(--sp-8);
    width: 100%;
    margin-top: 0;
    padding-top: var(--sp-8);
  }
  .cat-grid .offer-card .offer-actions .qty-selector,
  .offers-grid .offer-card .offer-actions .qty-selector {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  .cat-grid .offer-card .offer-actions .qty-input,
  .offers-grid .offer-card .offer-actions .qty-input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
  }
  .cat-grid .offer-card .offer-actions .btn-add-cart,
  .offers-grid .offer-card .offer-actions .btn-add-cart {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  .cat-grid .offer-card .offer-personalizable,
  .offers-grid .offer-card .offer-personalizable {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .cat-grid .offer-card .offer-personalizable--hidden,
  .offers-grid .offer-card .offer-personalizable--hidden {
    display: none;
  }

  /* ── Pack: etiqueta y precio/unidad en filas separadas ── */
  .cat-grid .offer-card .offer-pack,
  .offers-grid .offer-card .offer-pack {
    flex-direction: column;
    gap: var(--sp-4);
  }
  .cat-grid .offer-card .offer-pack-label,
  .cat-grid .offer-card .offer-pack-unit,
  .offers-grid .offer-card .offer-pack-label,
  .offers-grid .offer-card .offer-pack-unit {
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  /* cat-section: reduce top padding para ritmo consistente con filter-bar */
  .cat-section { padding-top: var(--sp-16); }
  .looks-section { padding-bottom: var(--sp-48); }
  .looks-main { gap: var(--sp-16); }
  .looks-feature h2 { font-size: clamp(24px, 10vw, 34px); }
  .looks-feature-btn { width: calc(100% - var(--sp-48)); justify-content: center; align-self: center; }
  .cat-view-toggle { display: none; }
  .cat-count span { margin-left: 0; }

  /* cat-highlight: espaciado igual que el gap del grid de productos */
  .cat-highlight {
    grid-template-columns: 1fr;
    margin: var(--sp-16) 0;
  }
  .cat-highlight-pillar {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-12);
    row-gap: var(--sp-4);
    padding: var(--sp-16);
  }
  .cat-highlight-pillar + .cat-highlight-pillar {
    border-top: 1px solid var(--g100);
  }
  .cat-highlight-pillar .trust-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    margin-bottom: 0;
  }
  .cat-highlight-pillar .trust-pillar-title {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-lg);
    align-self: end;
  }
  .cat-highlight-pillar .trust-pillar-label {
    grid-column: 2;
    grid-row: 2;
  }

  /* Breadcrumb strip — visible on mobile, hidden on desktop */
  .cat-bc-strip {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--g100);
    background: var(--white);
    font-size: var(--fs-3xs);
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cat-bc-home {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-12);
    color: var(--blue);
    background: var(--white);
    /* White background ensures scrolling text doesn't bleed through */
    position: relative;
    z-index: 1;
  }
  .cat-bc-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-4) var(--sp-12) var(--sp-4) 0;
    white-space: nowrap;
  }
  .cat-bc-scroll::-webkit-scrollbar { display: none; }
  .cat-bc-item {
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--g500);
  }
  .cat-bc-item.cat-bc-current { color: var(--black); font-weight: 400; }
  .cat-bc-scroll a.cat-bc-item { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
  .cat-bc-scroll .cat-bc-sep { color: var(--g300); font-weight: 400; letter-spacing: 0; flex-shrink: 0; }

  /* Hide inline breadcrumb inside banner on mobile */
  .cat-banner-bc { display: none; }
}

/* ── Mobile filter bar ── */
.cat-mobile-bar {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  overflow-x: auto;
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--g100);
  background: var(--white);
  scrollbar-width: none;
}
.cat-mobile-bar::-webkit-scrollbar { display: none; }
/* Sidebar y filtros mobile: se activan bajo el mismo breakpoint que col-lg (1100px) */
@media (max-width: 1099px) {
  .cat-sidebar { display: none; }
  .cat-mobile-bar { display: flex; }
}
.cat-mobile-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 var(--sp-16);
  border: 1px solid var(--g100);
  background: var(--white);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  transition: border-color .2s, background .2s, color .2s;
}
.cat-mobile-pill:hover { border-color: var(--blue); color: var(--blue); }
.cat-mobile-pill.is-active { border-color: var(--blue); background: var(--blue-10); color: var(--blue); }
.cat-mobile-pill--all { border-color: var(--g300); font-weight: 600; }
.cat-mobile-pill--all:hover,
.cat-mobile-pill--all.is-active { border-color: var(--blue); background: var(--blue); color: var(--white); }

/* ── Filter drawer (mobile) ── */
.filter-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.5);
  z-index: 190;
  opacity: 0;
  transition: opacity .3s;
}
.filter-drawer-overlay.is-open { opacity: 1; }

.filter-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  max-height: 90vh;
  display: flex; flex-direction: column;
  z-index: 200;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.filter-drawer.is-open { transform: translateY(0); }

.filter-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-16);
  border-bottom: 1px solid var(--g100);
  flex-shrink: 0;
}
.filter-drawer-title { font-size: var(--fs-md); font-weight: 700; }
.filter-drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--black);
  transition: color .2s;
}
.filter-drawer-close:hover { color: var(--blue); }

.filter-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 0 var(--sp-24);
  -webkit-overflow-scrolling: touch;
}

.filter-drawer-foot {
  display: flex; align-items: center; gap: var(--sp-16);
  padding: var(--sp-16);
  border-top: 1px solid var(--g100);
  flex-shrink: 0;
}
.filter-drawer-foot .btn { flex: 1; justify-content: center; }
.filter-drawer-clear-btn {
  background: none; border: none;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--g300); cursor: pointer; padding: 0 var(--sp-8); white-space: nowrap;
  transition: color .2s;
}
.filter-drawer-clear-btn.is-active { color: var(--black); }

/* ═══════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .4);
  z-index: 999;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.16,1,.3,1);
}
.drawer-overlay.is-open { opacity: 1; }

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(88vw, 380px);
  height: 100dvh;
  background: var(--white);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 2px 0 24px rgba(0,0,0,.12);
}
.mobile-drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-16) var(--sp-24);
  border-bottom: 1px solid var(--g100);
  flex-shrink: 0;
}
.drawer-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--black);
}
.drawer-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--g100);
  border-radius: 50%;
  background: none;
  color: var(--black);
}
.drawer-close:hover { border-color: var(--blue); color: var(--blue); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-24);
}

.drawer-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: var(--sp-8);
}
.drawer-label:not(:first-child) { margin-top: var(--sp-32); }

.drawer-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--g100);
}
.drawer-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16) 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--black);
  border-bottom: 1px solid var(--g100);
  transition: color .2s;
}
.drawer-nav a:hover { color: var(--blue); }

.drawer-nav-sm a {
  font-size: var(--fs-md);
  font-weight: 500;
  padding: var(--sp-12) 0;
}

.drawer-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--green);
  color: var(--green-dark);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 6px;
}
.drawer-badge-new {
  height: 16px;
  width: auto;
  vertical-align: middle;
}

.drawer-footer { margin-top: var(--sp-16); }
.drawer-footer .btn { width: 100%; justify-content: center; }
.drawer-footer .btn svg { margin-right: var(--sp-8); }
.drawer-lang { margin-top: 0; width: 100%; }
.drawer-lang .util-lang-btn { width: 100%; justify-content: flex-start; gap: var(--sp-8); }
.drawer-lang .util-lang-btn .util-lang-chevron { margin-left: auto; }
.drawer-lang .util-lang-dropdown { width: 100%; }

/* Drawer solo visible por debajo de 1200px */
@media (min-width: 1201px) {
  .mobile-drawer,
  .drawer-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL PAGE (PDP)
═══════════════════════════════════════════ */

/* ── Sección principal ── */
.pdp-bc-bar { padding: var(--sp-12) 0; border-bottom: 1px solid var(--g100); }

/* ── Back link (mobile PDP) ── */
.pdp-back-link {
  display: none; /* solo mobile */
}
.pdp-main { padding: var(--sp-24) 0 var(--sp-48); }
.pdp-main .wrap { max-width: 1600px; }

/* ── Bloque header: breadcrumb + título + ref ── */
.pdp-header-block { display: flex; flex-direction: column; gap: var(--sp-8); }
.pdp-header-block .pdp-title { margin-top: var(--sp-4); }
.pdp-header-block .pdp-ref { margin-top: var(--sp-4); }

/* ── Breadcrumb (legacy, no usado) ── */
.pdp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--sp-24) 0 var(--sp-32);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--g500);
  border-bottom: 1px solid var(--g100);
  margin-bottom: var(--sp-40);
}
.pdp-breadcrumb a { color: var(--blue); text-decoration: none; }
.pdp-breadcrumb a:hover { text-decoration: underline; }
.pdp-breadcrumb-sep { color: var(--g300); font-weight: 400; letter-spacing: 0; }

/* (El comportamiento fixed/slide-down del header es ahora global en .header) */
@keyframes headerSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ── Two-column layout ── */
.pdp-layout {
  align-items: flex-start;
}

/* ── Gallery (left) ── */
.pdp-gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-16);
  position: sticky;
  top: 80px;
}
.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.pdp-thumb {
  width: 72px;
  height: 72px;
  background: var(--g50);
  border: 1.5px solid var(--g100);
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
  flex-shrink: 0;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: darken; }
.pdp-thumb.is-active { border-color: var(--blue); border-width: 2px; }
.pdp-thumb:hover:not(.is-active) { border-color: var(--blue); border-width: 2px; }
.pdp-thumb-video {
  position: relative;
  background: var(--g50); /* base neutra; el play thumb la sobreescribe */
}
.pdp-thumb-video-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.pdp-main-wrap {
  grid-column: 2;
  grid-row: 1;
  position: relative; /* contiene las flechas en absoluto */
}
.pdp-main-img .offer-brand-wrap { padding: var(--sp-4); background: transparent; }
.pdp-main-img .offer-brand-logo { width: 80px; height: auto; }
.pdp-main-img {
  aspect-ratio: 1;
  background: var(--white);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .pdp-main-img { cursor: zoom-in; }
}
.pdp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;
  will-change: transform;
}
.pdp-main-img.is-zoomed { cursor: zoom-out; }
.pdp-main-img.is-video { cursor: default; }
.pdp-main-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pdp-img-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.pdp-img-btn:hover { background: var(--blue); color: var(--white); }
.pdp-img-btn--save { top: 16px; right: 16px; }
.pdp-img-btn--save:hover { background: transparent; color: var(--blue-80); }
.pdp-img-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pdp-img-nav .pdp-img-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: all;
  border: 1.5px solid var(--g400); /* AA 1.4.11 */
  background: var(--white);
  color: var(--black);
}
.pdp-img-nav .pdp-img-btn:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}
.pdp-img-nav .pdp-img-btn:first-child { left: var(--sp-16); }
.pdp-img-nav .pdp-img-btn:last-child  { right: var(--sp-16); }

/* ── Info (right) ── */
.pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.pdp-info > * + * {
  border-top: 1px solid var(--g100);
  padding-top: var(--sp-16);
}
.pdp-purchase--shipping {
  border-top: none;
  padding-top: 0;
}

.pdp-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--black);
  margin-top: var(--sp-8);
}

.pdp-ref {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
  justify-content: space-between;
}
.pdp-ref-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  color: var(--black);
}
.pdp-ref-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-accent);
  flex-shrink: 0;
}
.pdp-ficha {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.pdp-ficha-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  background: transparent;
  transition: background .2s, color .2s;
}
.pdp-ficha:hover { color: var(--blue-80); }
.pdp-ficha:hover .pdp-ficha-icon { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ── Variantes ── */
.pdp-options { display: flex; flex-direction: column; gap: var(--sp-24); }
.pdp-option-group { display: flex; flex-direction: column; gap: var(--sp-8); }
.pdp-option-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--black);
}
.pdp-option-label span { font-weight: 400; color: var(--g500); margin-left: 6px; }

.pdp-size-btns { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.pdp-size-btn {
  height: 40px;
  padding: 0 var(--sp-16);
  border: 1.5px solid var(--g400); /* AA 1.4.11 */
  background: var(--white);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--black);
  cursor: pointer;
  transition: border-color .2s;
  white-space: nowrap;
}
.pdp-size-btn:hover { border-color: var(--black); }
.pdp-size-btn.is-active { border: 2px solid var(--blue); font-weight: 700; color: var(--blue); }

.pdp-color-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp-color-opt {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--g400); /* AA 1.4.11 */
  background: var(--g50);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
  flex-shrink: 0;
}
.pdp-color-opt img { width: 100%; height: 100%; object-fit: cover; }
.pdp-color-opt.is-active { border: 2px solid var(--blue); }
.pdp-color-opt:hover:not(.is-active) { border-color: var(--black); }
.pdp-color-opt.is-hidden { display: none; }
.pdp-color-more {
  height: 40px;
  padding: 0 var(--sp-12);
  border: 1.5px solid var(--g100);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
  display: none;
}
.pdp-color-more:hover { border-color: var(--blue); background: var(--blue-10); }

/* ── Precio + acciones ── */
.pdp-badge-new {
  position: absolute;
  top: var(--sp-16);
  left: var(--sp-16);
  z-index: 2;
  background: none;
  padding: 0;
}
.pdp-main-img .pdp-badge-new img { height: 48px; width: 48px; object-fit: contain; mix-blend-mode: normal; }

.pdp-purchase { display: flex; flex-direction: column; gap: var(--sp-16); }

.pdp-pricing-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.pdp-price {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--black);
  line-height: 1;
}
.pdp-price-iva {
  font-size: var(--fs-base);
  color: var(--g500);
}
/* inline override para usar .offer-badge dentro de flujo (no absolute) */
.pdp-badge-inline { position: static; }
.pdp-pack-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--g500);
  margin-top: var(--sp-8);
}
/* Separador decorativo (mismo criterio que .cat-bc-sep): no es texto para WAVE */
.pdp-pack-sep { color: var(--g100); font-size: 0; }
.pdp-pack-sep::before { content: '|'; font-size: var(--fs-md); }

.pdp-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.pdp-actions .qty-selector { flex-shrink: 0; height: 44px; }
.pdp-actions .qty-selector .qty-btn { width: 40px; }
.pdp-actions .qty-selector .qty-input { width: 48px; }
.pdp-actions .btn { flex: 1; justify-content: center; }

/* ── Zona de compra · variante SIN STOCK ──
   El aviso de stock usa el componente gdp-alert--error (título = sin stock,
   mensaje = fecha de reposición). Los dos CTAs son azules (acción): alternativo
   sólido (lleva a otra ficha), avísame contorno (lleva al área privada). No se
   inventan colores: el verde-oliva del sitio actual no aplica aquí. */
.pdp-actions--oos { flex-direction: column; align-items: stretch; gap: var(--sp-8); }
.pdp-oos-status { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: var(--black); }
.pdp-oos-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); }
.pdp-oos-ctas .btn { flex: 1 1 0; min-width: 200px; justify-content: center; gap: var(--sp-8); }
.pdp-oos-ficha { margin-top: var(--sp-12); align-self: center; }
/* Mobile: los dos CTAs apilados (uno debajo del otro) */
@media (max-width: 720px) {
  .pdp-oos-ctas { flex-direction: column; }
  .pdp-oos-ctas .btn { flex: none; width: 100%; min-width: 0; }
}
/* ── Barra de envío ── */
.pdp-shipping {
  background: var(--g50);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12) var(--sp-16);
  padding: var(--sp-16);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdp-shipping-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  font-size: var(--fs-base);
  color: var(--black);
}
.pdp-shipping-item svg { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; color: var(--blue); }
.pdp-shipping-item a { color: var(--blue); font-weight: 600; text-decoration: none; }
.pdp-shipping-item a:hover { text-decoration: underline; }
.pdp-shipping-sep { display: none; }

/* ── PDP Responsive ── */

/* Desktop: galería crece, info a ancho fijo (override del sistema flex/col) */
@media (min-width: 1100px) {
  .pdp-layout {
    display: grid;
    grid-template-columns: 1fr 640px;
    column-gap: var(--sp-32);
    margin-left: 0;
    margin-right: 0;
  }
  .pdp-layout > * {
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }
}
@media (min-width: 1600px) {
  .pdp-layout {
    grid-template-columns: 1fr 760px;
  }
}
@media (max-width: 1100px) {
  .pdp-gallery { grid-template-columns: 72px 1fr; }
}
@media (max-width: 900px) {
  .pdp-price { font-size: 32px; }
  .pdp-img-nav { display: none; }

  /* Gallery: imagen arriba (row 1), miniaturas scrollables abajo (row 2).
     Mantenemos display:grid — más fiable que flex para contener el ancho. */
  .pdp-gallery {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--sp-12);
  }
  .pdp-main-wrap { grid-column: 1; grid-row: 1; }
  .pdp-main-img .offer-brand-logo { height: 16px; }
  .pdp-thumbs {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--sp-8);
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    min-width: 0;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumb { width: 56px; min-width: 56px; height: 56px; flex-shrink: 0; }
  .pdp-info { margin-top: var(--sp-24); }
}
@media (max-width: 600px) {
  .pdp-shipping { grid-template-columns: 1fr; }
  .pdp-shipping-sep { display: none; }
  .pdp-actions { flex-wrap: wrap; }
  .pdp-actions .btn { min-width: calc(50% - var(--sp-8)); }
}

/* ══════════════════════════════════════════════════════════
   PDP — Título de variantes / bloques relacionados
══════════════════════════════════════════════════════════ */
.pdp-variants-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   PDP — Comprados juntos habitualmente (bloque compacto)
══════════════════════════════════════════════════════════ */
.pdp-bundle {
  margin-top: var(--sp-24);
  padding: var(--sp-20) var(--sp-24);
  border: 1px solid var(--g100);
}
.pdp-bundle .pdp-variants-title {
  margin-bottom: var(--sp-16);
}
.pdp-bundle-items {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}
.pdp-bundle-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.pdp-bundle-card.is-disabled .pdp-bundle-link,
.pdp-bundle-card.is-disabled .pdp-bundle-price {
  opacity: .45;
}
/* enlace sobre imagen + nombre */
.pdp-bundle-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  text-decoration: none;
  color: var(--black);
}
.pdp-bundle-link:hover .pdp-bundle-img img {
  transform: scale(1.05);
}
.pdp-bundle-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--g50);
}
.pdp-bundle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.pdp-bundle-name {
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* fila qty + precio */
.pdp-bundle-card-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.pdp-bundle-card-footer .qty-selector {
  height: var(--ctrl-h-sm); /* 32px — compacto */
}
.pdp-bundle-price {
  margin-left: auto;        /* empuja el precio a la derecha */
  font-weight: 900;
  font-size: var(--fs-sm);  /* 16px — igual que precios de card */
  letter-spacing: -.02em;
}
.pdp-bundle-plus {
  flex-shrink: 0;
  align-self: center;
  font-size: var(--fs-2xl);
  font-weight: 300;
  color: var(--blue);
  line-height: 1;
}
.pdp-bundle-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--g100);
}
.pdp-bundle-total-prices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pdp-bundle-total-count {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
}
.pdp-bundle-total-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.pdp-bundle-total-old {
  font-size: var(--fs-xs);
  color: var(--red);
  text-decoration: line-through;
}
.pdp-bundle-total-now {
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--black);
}
/* Mobile: stack total row + precio debajo del qty */
@media (max-width: 600px) {
  .pdp-bundle { padding: var(--sp-16); }
  .pdp-bundle-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .pdp-bundle-price { margin-left: 0; }
  .pdp-bundle-total { flex-direction: column; align-items: flex-start; }
  .pdp-bundle-total .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   PDP — Sticky add-to-cart bar
══════════════════════════════════════════════════════════ */
.pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--white);
  border-top: 1px solid var(--g100);
  transform: translateY(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.pdp-sticky-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.pdp-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
.pdp-sticky-product {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-width: 0;
  flex: 1;
}
.pdp-sticky-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--g100);
}
.pdp-sticky-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-sticky-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-shrink: 0;
}
.pdp-sticky-actions .qty-selector { height: var(--ctrl-h); }
.pdp-sticky-actions .btn { height: var(--ctrl-h); padding: 0 var(--sp-24); }
@media (max-width: 720px) {
  .pdp-sticky-product { display: none; }
  .pdp-sticky-actions { flex: 1; }
  .pdp-sticky-actions .btn { flex: 1; justify-content: center; }

  /* back link mobile */
  .pdp-bc-bar { display: none; }
  .pdp-back-link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--gap);
    font-size: var(--fs-3xs);
    font-weight: 500;
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid var(--g100);
  }
  .pdp-back-link:active { opacity: .7; }
}

/* ══════════════════════════════════════════════════════════
   PDP — Ficha técnica y descripción
══════════════════════════════════════════════════════════ */
.pdp-details { padding: var(--sp-32) 0; }
.pdp-details-grid {
  align-items: flex-start;
}
.pdp-details-main { display: flex; flex-direction: column; }
.pdp-details-aside { display: flex; flex-direction: column; position: sticky; top: 96px; }

/* Accordion */
.pdp-accordion { border: 1px solid var(--g100); }
.pdp-accordion + .pdp-accordion { border-top: none; }
.pdp-accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-20) var(--sp-24);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--sp-16);
}
.pdp-accordion-head h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--black);
  margin: 0;
}
.pdp-accordion-chevron { flex-shrink: 0; color: var(--g500); transition: transform .25s; }
.pdp-accordion.is-open .pdp-accordion-chevron { transform: rotate(180deg); }
.pdp-accordion-body { padding: var(--sp-8) var(--sp-24) var(--sp-24); display: none; }
.pdp-accordion.is-open .pdp-accordion-body { display: block; }

/* Descripción */
.pdp-desc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-32);
}
.pdp-desc-cols p { font-size: var(--fs-sm); line-height: 1.7; color: var(--g500); margin: 0; }

/* Especificaciones */
.pdp-specs-table { width: 100%; }
.pdp-specs-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-16);
  padding: 10px 0;
  border-bottom: 1px solid var(--g100);
  align-items: baseline;
}
.pdp-specs-row:first-child { border-top: 1px solid var(--g100); }
.pdp-specs-row:last-child { border-bottom: none; }
.pdp-specs-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--g500);
  margin: 0;
}
.pdp-specs-value {
  font-size: var(--fs-sm);
  color: var(--black);
  margin: 0;
}
.pdp-specs-value a { color: var(--blue); text-decoration: underline; }
.pdp-specs-note { color: var(--g500); font-size: var(--fs-xs); }

/* Materiales y usos */
.pdp-mat-icons { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-12); }
.pdp-mat-icon {
  width: 56px; height: 56px;
  border: 1px solid var(--g100);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}
.pdp-mat-label { font-size: var(--fs-xs); color: var(--g500); line-height: 1.6; }

/* Certificaciones */
.pdp-cert-logos { display: flex; flex-direction: column; }
.pdp-cert-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  padding: 10px 0;
  border-bottom: 1px solid var(--g100);
  text-align: left;
}
.pdp-cert-logo:last-child { border-bottom: none; padding-bottom: 0; }
.pdp-cert-logo svg, .pdp-cert-logo img { flex-shrink: 0; width: 40px; height: 40px; object-fit: contain; }
.pdp-mat-icon img { width: 36px; height: 36px; object-fit: contain; }
.pdp-cert-logo span { font-size: var(--fs-xs); font-weight: 600; color: var(--black); line-height: 1.3; }

/* Imprimir */
.pdp-print-wrap { padding: var(--sp-16) 0 0; }
.pdp-print-wrap .btn { gap: var(--sp-8); width: 100%; justify-content: center; }

/* Responsive */
@media (max-width: 900px) {
  .pdp-details-aside { position: static; }
  .pdp-desc-cols { grid-template-columns: 1fr; gap: var(--sp-16); }
  .pdp-specs-row { grid-template-columns: 120px 1fr; }
}

/* ══════════════════════════════════════════════════════════
   PDP — Otros colores disponibles
══════════════════════════════════════════════════════════ */
.pdp-variants { border-top: 1px solid var(--g100); overflow-x: clip; }

/* offer-card--variant hereda todos los estilos base de offer-card */
.offer-card--variant .offer-name { -webkit-line-clamp: 4; }

/* PDP — Vistos recientemente: card ligera */
.recent-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  color: var(--black);
}
.recent-card-img {
  display: block;
  aspect-ratio: 1;
  background: var(--white);
  overflow: hidden;
}
.recent-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.recent-card-code {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--black);
}
.recent-card-name {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   RENDIMIENTO — content-visibility en secciones estáticas
   Secciones excluidas: #hero (crítico), #collections (marquee
   CSS continuo), #offers (Swiper offersSwiper)
══════════════════════════════════════════════════════════ */
.taglines,
.promo-looks,
.categories,
.sectors,
.bestsellers,
.custom,
.portadas-banner,
.looks,
.trust {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ══════════════════════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════════════════════ */
.cart-drawer { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.cart-drawer.is-open { pointer-events: all; }
.cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.5); opacity: 0; transition: opacity .3s; }
.cart-drawer.is-open .cart-drawer-backdrop { opacity: 1; }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: calc(100vw - var(--sp-48));
  background: var(--white); display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: -4px 0 32px rgba(0,0,0,.12);
}
.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }

.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-20) var(--sp-24); border-bottom: 1px solid var(--g100); flex-shrink: 0;
}
.cart-drawer-title { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.cart-drawer-title-count { font-weight: 400; color: var(--g500); margin-left: var(--sp-4); }
.cart-drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--blue); flex-shrink: 0;
  transition: background .2s, color .2s;
}
.cart-drawer-close:hover { background: var(--blue); color: var(--white); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--sp-24); overscroll-behavior: contain; }
.cart-empty { text-align: center; color: var(--g500); padding: var(--sp-64) 0; font-size: var(--fs-base); }
.cart-drawer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 0; }
.cart-drawer-empty .cart-empty-img { width: 240px; max-height: 240px; object-fit: contain; margin-bottom: var(--sp-16); }

.cart-item {
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: var(--sp-12); padding: var(--sp-16) 0; border-bottom: 1px solid var(--g100); align-items: start;
}
.cart-item-img { display: block; aspect-ratio: 1; background: var(--white); overflow: hidden; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
/* Modifiers de "línea/listado": las clases de card de producto (.offer-*) reutilizadas
   en filas compactas (drawer, cesta, línea de pedido) se resetean con un modifier
   explícito en el propio elemento, no por contexto del ancestro. */
.offer-name--sm    { min-height: 0; margin-bottom: var(--sp-4); font-size: var(--fs-base); -webkit-line-clamp: 2; }     /* drawer */
.offer-name--md    { min-height: 0; margin-bottom: var(--sp-4); font-size: var(--fs-md); -webkit-line-clamp: unset; }   /* cesta */
.offer-name--flush { min-height: 0; margin-bottom: 0; }                                                                /* línea de pedido */
.offer-price--line { font-size: var(--fs-base); white-space: nowrap; }
.cart-item-meta { font-size: var(--fs-3xs); color: var(--g500); margin-bottom: var(--sp-8); }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-8); }
/* NORMA: todo icono clicable dentro de una tabla usa este botón circular —
   icono azul; en hover, icono blanco sobre círculo azul. Clase reutilizable
   .table-icon-btn (además de los selectores históricos cart/qo/account). */
.table-icon-btn,
.cart-item-remove,
.qo-delete,
.account-doc-link { background: transparent; border: none; cursor: pointer; color: var(--blue); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; flex-shrink: 0; }
.table-icon-btn:hover,
.cart-item-remove:hover,
.qo-delete:hover,
.account-doc-link:hover { background: var(--blue); color: var(--white); }
/* Iconos de acción como <img> (cargan en file:// sin servidor). El archivo es azul;
   en hover, filter los vuelve blancos sobre el círculo azul. Tamaño explícito para
   ganar a la regla global img{width:100%}. */
.tib-ico { width: 18px; height: 18px; object-fit: contain; }
.btn-ico { width: 16px; height: 16px; object-fit: contain; }
.table-icon-btn:hover .tib-ico,
.account-doc-link:hover .tib-ico,
.btn-outline-blue:hover .btn-ico { filter: brightness(0) invert(1); }
/* Icono sobre botón azul sólido: siempre blanco */
.btn-blue .btn-ico { filter: brightness(0) invert(1); }
.qty-selector--fit { width: fit-content; }

.cart-drawer-footer {
  padding: var(--sp-24); border-top: 1px solid var(--g100); flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--sp-12);
}
.cart-drawer-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-base); }
.cart-drawer-subtotal strong { font-size: var(--fs-lg); font-weight: 900; letter-spacing: -.03em; }
.cart-drawer-shipping { font-size: var(--fs-3xs); color: var(--g500); text-align: center; font-weight: 500; }

/* Alerta de envío gratuito — versión compacta en el footer del drawer */
.cart-drawer-footer .gdp-alert { border-radius: calc(var(--radius) / 2); }
.cart-drawer-footer .gdp-alert-icon { width: 40px; }
.cart-drawer-footer .gdp-alert-icon svg { width: 16px; height: 16px; }
.cart-drawer-footer .gdp-alert-content { padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-8); }
.cart-drawer-footer .gdp-alert-msg { font-size: var(--fs-3xs); }

/* Alerta de envío en la página de cesta — margen superior respecto a la fila de totales */
.cart-summary-shipping-alert { margin-top: var(--sp-8); }

/* Add to cart feedback */
.btn.btn-add-cart.is-added { background: var(--green-dark); pointer-events: none; }

/* ── Gift drawer ── */
.gift-drawer-sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--g500); }
.gift-drawer-hint { margin: var(--sp-16) 0 var(--sp-8); font-size: var(--fs-xs); color: var(--g500); }
.gift-drawer-sub { margin: 0 0 var(--sp-8); font-size: var(--fs-xs); color: var(--g500); padding-top: var(--sp-16); }
.gift-list { display: flex; flex-direction: column; }
.gift-item {
  grid-template-columns: 80px 1fr auto !important;
  cursor: pointer;
}
.gift-item-radio {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--g300); background: var(--white);
  cursor: pointer; flex-shrink: 0; align-self: center;
  transition: border-color .15s, background .15s;
}
.gift-item-radio:checked {
  border-color: var(--blue); background: var(--blue);
  box-shadow: inset 0 0 0 4px var(--white);
}
.gift-item:hover .gift-item-radio { border-color: var(--blue); }

/* ══════════════════════════════════════════════════════════
   CART PAGE (cart.html)
══════════════════════════════════════════════════════════ */
.cart-page { padding: var(--sp-48) 0 var(--sp-80); }
.cart-page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; margin-bottom: var(--sp-32); }
.cart-layout { display: grid; grid-template-columns: 1fr 420px; gap: var(--sp-48); align-items: start; }
.cart-page-main { display: flex; flex-direction: column; gap: var(--sp-24); }
.cart-gift-promo { margin-bottom: var(--sp-16); margin-top: 0; }
.cart-login-prompt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); background: var(--g50); border-radius: var(--radius); padding: var(--sp-16); }
.cart-login-copy { font-size: var(--fs-md); color: var(--black); margin: 0; }
.cart-login-actions { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.cart-page-toolbar {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--sp-24);
  border-bottom: 1px solid var(--g100);
  margin-bottom: calc(var(--sp-24) * -1); /* el primer item ya aporta su padding-top */
}
.cart-page-item {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: var(--sp-24); padding: var(--sp-24) 0; border-bottom: 1px solid var(--g100); align-items: start;
}
.cart-page-item-code { font-size: var(--fs-3xs); color: var(--g500); margin-bottom: var(--sp-4); }
.cart-page-item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cart-page-item-unit { font-size: var(--fs-3xs); color: var(--g500); text-align: right; }
.cart-page-item-unit-iva { white-space: nowrap; }
.cart-page-item-img { display: block; aspect-ratio: 1; background: var(--white); overflow: hidden; }
.cart-page-item-img img { width: 100%; height: 100%; object-fit: cover; }
/* cart-item-name/price/meta reutilizados del drawer — solo override de tamaño para la vista completa */
.cart-page-item .cart-item-meta { margin-bottom: var(--sp-16); }
.cart-page-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-12); min-width: 80px; }
.cart-page-item-remove { background: none; border: none; cursor: pointer; font-size: var(--fs-3xs); color: var(--blue); text-decoration: underline; padding: 0; transition: color .2s; display: flex; align-items: center; gap: var(--sp-4); }
.cart-page-item-remove:hover { color: var(--blue-80); text-decoration: none; }
.cart-summary { display: flex; flex-direction: column; gap: var(--sp-16); position: sticky; top: var(--sp-24); }
.cart-summary-panel { border: 1px solid var(--g100); border-radius: var(--radius); padding: 0; overflow: hidden; }
.cart-summary-title { font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; margin: 0; padding: var(--sp-24) var(--sp-24) var(--sp-20); }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-base); padding: var(--sp-12) var(--sp-24); border-bottom: 1px solid var(--g100); }
.cart-summary-row:last-of-type { border-bottom: none; }
.cart-summary-row--iva { border-bottom: none; }
.cart-summary-row--total { border-top: 2px solid var(--g100); border-bottom: none; padding-top: var(--sp-16); align-items: center; }
.cart-summary-total { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.03em; }
.cart-summary-row--total span { font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.cart-summary-free { color: var(--green-dark); font-weight: 600; }
.cart-summary-shipping-note { font-size: var(--fs-3xs); color: var(--g500); margin: var(--sp-12) 0; font-weight: 500; }
.cart-summary-shipping-alert { margin: 0; }
.cart-summary-cta { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24); border-top: 1px solid var(--g100); }
.cart-summary-cta .btn { width: 100%; }
.cart-summary .pdp-shipping { grid-template-columns: 1fr; }
.cart-summary .pdp-shipping-item { align-items: center; font-size: var(--fs-sm); }
.cart-summary .pdp-shipping-item svg { margin-top: 0; }
.cart-mobile-checkout { display: none; }
.cart-empty-page { text-align: center; color: var(--g500); }
.cart-empty-img { display: block; width: 352px; max-width: 100%; margin: 0 auto var(--sp-20); }
.cart-empty-page p { margin-bottom: var(--sp-16); }
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; top: auto; }
}
@media (max-width: 600px) {
  .cart-page { padding-bottom: var(--sp-96); }
  .cart-login-prompt { align-items: flex-start; flex-direction: column; }
  .cart-login-actions { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .cart-login-actions .btn { width: 100%; justify-content: center; }
  .cart-page-toolbar .btn { width: 100%; justify-content: center; }
  /* Resumen del pedido: los paddings de 24px pasan a 16px en mobile */
  .cart-summary-title { padding: var(--sp-16) var(--sp-16) var(--sp-20); }
  .cart-summary-row { padding: var(--sp-12) var(--sp-16); }
  .cart-summary-cta { padding: var(--sp-16); }
  /* Card mobile: código/título/pack a ancho completo; debajo imagen + qty + precio alineados */
  .cart-page-item {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "img  code  code"
      "img  name  name"
      "img  meta  meta"
      "qty  qty   price"
      "qty  qty   remove";
    gap: 0 var(--sp-16);
  }
  .cart-page-item > .cart-page-item-info, .cart-page-item > .cart-page-item-right { display: contents; }
  .cart-page-item .cart-page-item-code { grid-area: code; margin-bottom: var(--sp-4); }
  .cart-page-item .offer-name { grid-area: name; margin-bottom: var(--sp-4); }
  .cart-page-item .cart-item-meta { grid-area: meta; margin-bottom: var(--sp-12); }
  .cart-page-item .cart-page-item-img { grid-area: img; width: 72px; align-self: start; }
  .cart-page-item .qty-selector { grid-area: qty; align-self: center; }
  .cart-page-item .cart-page-item-price { grid-area: price; align-self: start; }
  .cart-page-item .cart-page-item-unit { max-width: 150px; }
  .cart-page-item .cart-page-item-remove { grid-area: remove; justify-self: end; align-self: end; }
  .cart-mobile-checkout {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 220;
    display: block;
    background: var(--white);
    border-top: 1px solid var(--g100);
    padding: var(--sp-12) var(--gap);
  }
  .cart-mobile-checkout .btn { width: 100%; justify-content: center; }
  .cart-drawer-panel { width: 100vw; max-width: 100vw; }
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE (checkout.html)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   ACCOUNT PAGE (account.html)
══════════════════════════════════════════════════════════ */
.account-page { padding: var(--sp-64) 0; }
.account-layout { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--sp-64); align-items: start; }
.account-divider { background: var(--g100); align-self: stretch; }
.account-col-title { font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; text-transform: uppercase; margin-bottom: var(--sp-32); color: var(--black); }
.account-form { display: flex; flex-direction: column; gap: var(--sp-16); }
.account-submit { width: 100%; justify-content: center; margin-top: var(--sp-8); }
.checkout-field-hint { font-size: var(--fs-3xs); font-weight: 400; font-style: normal; color: var(--g500); margin-left: var(--sp-8); }
@media (max-width: 720px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-divider { height: 1px; }
}

/* Utilidad: oculto visualmente pero accesible para lectores de pantalla */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════
   ÁREA PRIVADA — dashboard (menú lateral + contenido)
═══════════════════════════════════════════ */
.account-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: clamp(var(--sp-32), 5vw, var(--sp-64));
  align-items: start;
  padding: var(--sp-48) 0 var(--sp-80);
}

/* Menú lateral "Mi cuenta" */
/* top despeja el header colapsado (fixed, ~48px) cuando aparece al hacer scroll */
.account-nav { position: sticky; top: var(--sp-64); display: flex; flex-direction: column; }
.account-nav-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--black); margin-bottom: var(--sp-16); padding-inline: var(--sp-12); }
.account-nav-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.account-nav-item {
  display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-12);
  border-radius: var(--radius);
  font-size: var(--fs-md); color: var(--g600);
  transition: background .15s, color .15s;
}
/* Chevron compartido — <img> que llama a img/icons/chevron-*.svg.
   Se usa <img> (no mask) para que cargue al abrir el HTML en file:// sin servidor. */
.gdp-chevron {
  width: 1em; height: 1em; flex-shrink: 0;
  object-fit: contain;
  vertical-align: middle;
}

.account-nav-ico {
  width: 20px; height: 20px; flex-shrink: 0;
  object-fit: contain; /* <img> que llama al archivo (carga en file:// sin servidor) */
}
.account-nav-item:hover { background: var(--g50); color: var(--blue); }
.account-nav-item.is-active { background: var(--blue-10); color: var(--blue); font-weight: 700; }
.account-nav-sep { height: 1px; background: var(--g100); margin: var(--sp-12) var(--sp-12); }

/* Contenido */
.account-content { min-width: 0; }
.account-title { font-size: clamp(26px, 3vw, 36px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; text-transform: uppercase; color: var(--black); margin-bottom: var(--sp-20); }
.account-greeting { font-size: var(--fs-xl); font-weight: 700; color: var(--black); margin-bottom: var(--sp-8); }
.account-intro { font-size: var(--fs-md); line-height: 1.6; color: var(--g500); max-width: 640px; }

/* Cabecera de sección con enlace de acción a la derecha */
.account-section { margin-top: var(--sp-48); }
.account-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding-bottom: var(--sp-12); border-bottom: 1px solid var(--g100); margin-bottom: var(--sp-20); }
.account-section-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.account-section-cta { white-space: nowrap; }

/* Tabla de pedidos recientes */
.account-table-wrap { overflow-x: auto; }
.account-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.account-table th { text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g500); padding: 0 var(--sp-12) var(--sp-12); white-space: nowrap; }
.account-table td { padding: var(--sp-16) var(--sp-12); border-top: 1px solid var(--g100); color: var(--black); vertical-align: middle; }
.account-table tbody tr:hover { background: var(--g50); }
.account-table .num { text-align: right; white-space: nowrap; font-weight: 700; }
.account-table .ellip { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-order-id { font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.account-order-id:hover { text-decoration: none; }
.account-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-3xs); font-weight: 700; line-height: 1.45; white-space: nowrap; background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); }
.account-status--transit   { background: var(--pill-warn-bg);    color: var(--pill-warn-fg); }
.account-status--prep      { background: var(--pill-info-bg);    color: var(--pill-info-fg); }
.account-status--delivered { background: var(--pill-success-bg); color: var(--pill-success-fg); }

/* Tarjetas de info (reutilizan .info-card) */
.account-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.account-card-title { font-size: var(--fs-lg); font-weight: 800; color: var(--black); margin-bottom: var(--sp-12); }
.account-card-text { font-size: var(--fs-sm); line-height: 1.6; color: var(--g500); }
.account-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-16); margin-top: var(--sp-16); }
.account-card-actions a { font-size: var(--fs-sm); font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.account-card-actions a:hover { text-decoration: none; }

/* Mis pedidos — contador, agrupación por año y acciones múltiples */
.account-count { font-size: var(--fs-md); color: var(--g500); margin-top: calc(var(--sp-12) * -1); margin-bottom: var(--sp-24); }
/* Selector de año (reutiliza .cat-sort) + aire antes de la tabla */
.account-year-filter { margin-bottom: var(--sp-32); }
.account-year-select { min-width: 140px; }
.account-actions { display: inline-flex; gap: var(--sp-4); }

/* ── Detalle del pedido — reutiliza fila de carrito, badge de producto y pie de compra rápida ── */
.order-detail-head { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-24); }
.order-detail-head .account-title { margin-bottom: 0; }
/* Resumen: reutiliza .cart-summary-panel + .cart-summary-row; solo añade la cabecera */
.order-summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-20) var(--sp-24); border-bottom: 1px solid var(--g100); }
.order-summary-id { display: flex; align-items: center; gap: var(--sp-12); }
.order-summary-num { font-size: var(--fs-lg); font-weight: 800; color: var(--black); }
.order-summary-actions { display: flex; gap: var(--sp-8); }
/* Datos del pedido como lista de definición (dt/dd) */
.order-meta { margin: 0; }
.order-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-24); padding: var(--sp-12) var(--sp-24); border-bottom: 1px solid var(--g100); font-size: var(--fs-sm); }
.order-meta-row:last-child { border-bottom: none; }
.order-meta-row dt { font-weight: 700; color: var(--black); flex-shrink: 0; }
.order-meta-row dd { margin: 0; color: var(--g500); text-align: right; }
/* Líneas de artículo: MISMA rejilla y estilos que la fila del carrito (.cart-page-item-*) */
.order-items-title { margin: var(--sp-48) 0 var(--sp-8); }
.order-line { display: grid; grid-template-columns: 100px 1fr auto; gap: var(--sp-24); padding: var(--sp-24) 0; border-bottom: 1px solid var(--g100); align-items: start; }
.order-line:first-child { border-top: 1px solid var(--g100); }
.order-line-img { position: relative; }
.order-line-codeline { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cart-page-item-code--flush { margin-bottom: 0; }
.order-line-qty { margin-top: var(--sp-16); font-size: var(--fs-md); font-weight: 700; color: var(--g600); }
/* Pie: misma banda gris que el tfoot de compra rápida + .qo-totals a la derecha */
.order-totals { background: var(--g50); border-top: 2px solid var(--g100); padding: var(--sp-16); }
/* Filas en 2 columnas: label (--g500) + valor (--black) a la derecha, columna de valor de ancho fijo en desktop */
.order-totals-row { display: flex; align-items: baseline; gap: var(--sp-16); padding: var(--sp-8) 0; font-size: var(--fs-base); }
.order-totals-row .ot-label { flex: 1; color: var(--g500); }
.order-totals-row .ot-value { width: 140px; flex-shrink: 0; text-align: right; color: var(--black); }
/* Total separado del resto (divisor + más espacio) y en bold */
.order-totals-row--total { margin-top: var(--sp-8); padding-top: var(--sp-16); border-top: 1px solid var(--g100); }
.order-totals-row--total .ot-label,
.order-totals-row--total .ot-value { font-weight: 700; color: var(--black); }

/* Pie de totales — compartido con compra rápida (movido aquí desde quick-order inline) */
.qo-totals { text-align: right; }
.qo-totals-subtotal { font-size: var(--fs-md); font-weight: 700; color: var(--black); }
.qo-totals-excl { font-size: var(--fs-md); font-weight: 700; color: var(--black); }
.qo-totals-note { font-size: var(--fs-3xs); color: var(--g500); margin-top: var(--sp-4); }

/* ═══════════════════════════════════════════
   TABLA DE COMPRA — chrome compartido por Compra rápida (quick-order) y Mis productos.
   Movido aquí desde el <style> inline de quick-order.html para reutilizarlo de verdad.
═══════════════════════════════════════════ */
.qo-page { padding: var(--sp-48) 0 var(--sp-80); }
.qo-header { margin-bottom: var(--sp-32); }
.qo-header h1 { font-size: clamp(24px, 3vw, 36px); font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--black); margin-bottom: var(--sp-8); }
.qo-header p { font-size: var(--fs-md); color: var(--g500); max-width: 560px; }

.qo-table-wrap { border: 1px solid var(--g100); border-radius: var(--radius); overflow: hidden; background: var(--g50); }
.qo-table { width: 100%; border-collapse: collapse; background: var(--white); }
.qo-table thead tr, .qo-table tfoot tr { background: var(--g50); }
.qo-table thead th {
  padding: var(--sp-12) var(--sp-16);
  text-align: left;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--g500); background: var(--g50); border-bottom: 1px solid var(--g100);
}
.qo-table th.qo-col-qty, .qo-table td.qo-col-qty { text-align: center; width: 140px; }
.qo-table th.qo-col-total, .qo-table td.qo-col-total { text-align: right; width: 190px; }
.qo-table th.qo-col-actions, .qo-table td.qo-col-actions { width: 48px; text-align: center; }
.qo-table th.qo-col-code, .qo-table td.qo-col-code { width: 160px; }
.qo-table tbody tr { border-bottom: 1px solid var(--g100); }
.qo-table tbody tr:last-child { border-bottom: none; }
.qo-table tbody td { padding: var(--sp-16); vertical-align: middle; background: var(--white); }

/* Input de código (quick-order) */
.qo-code-field { width: 100%; position: relative; }
.qo-code-field .qo-code-input { width: 100%; font-size: var(--fs-md); line-height: normal; padding: 0 var(--sp-16); }
.qo-code-input::placeholder { color: var(--g300); }

/* Capa emergente: aviso de stock + alternativa (quick-order).
   Se monta en <body> con position:fixed (top/left/width los fija el JS) para escapar
   del overflow:hidden del .qo-table-wrap; así no se recorta al salir de la tabla. */
.qo-suggest {
  position: fixed;
  z-index: 60;
  width: 490px;
  max-width: 92vw;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  overflow: hidden;
  opacity: 0;
  transition: opacity .15s ease;
}
.qo-suggest.is-open { opacity: 1; }
/* Head y fondo oscurecido: solo en mobile (bottom-sheet) */
.qo-suggest-head { display: none; }
.qo-suggest-overlay { display: none; }
.qo-suggest-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--sp-12);
  align-items: start;
  width: 100%;
  padding: var(--sp-12);
  text-align: left;
}
.qo-suggest-row + .qo-suggest-row { border-top: 1px solid var(--g100); }
.qo-suggest-thumb { width: 52px; height: 52px; border-radius: var(--radius); object-fit: cover; background: var(--g50); }
.qo-suggest-body { display: flex; flex-direction: column; min-width: 0; }
/* Tipografía reutilizada de las suggest cards del carrito (.offer-code/.offer-name/.offer-price),
   en versión compacta: código y título 14px, precio 18px (como .cart-confirm-suggest). */
.qo-suggest .offer-code { font-size: var(--fs-base); }
.qo-suggest .offer-name { display: block; -webkit-line-clamp: unset; min-height: 0; font-size: var(--fs-base); margin: 2px 0 0; }
.qo-suggest .offer-price { font-size: var(--fs-xl); margin-top: 4px; }
.qo-suggest .qo-suggest-price-sub { font-size: var(--fs-xs); font-weight: 400; color: var(--g500); }
.qo-suggest .qo-suggest-perunit { margin-top: 2px; font-size: var(--fs-xs); color: var(--g500); }
/* Acción: añadir el producto a la lista (text-link, azul = acción) */
.qo-suggest-add { align-self: flex-start; margin-top: var(--sp-8); padding: 0; background: none; border: none; font-size: var(--fs-sm); font-weight: 600; color: var(--blue); cursor: pointer; }
.qo-suggest-add:hover { text-decoration: underline; }
/* Aviso "temporalmente sin stock" + fecha de reposición, una bajo la otra */
.qo-suggest .qo-suggest-stock { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: var(--fs-3xs); font-weight: 600; color: var(--red); line-height: 1.4; }
.qo-suggest-stock::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-top: 3px; border-radius: 999px; background: var(--red-accent); }
.qo-suggest .qo-suggest-restock { margin-top: 2px; padding-left: 14px; font-size: var(--fs-3xs); font-weight: 400; color: var(--g500); line-height: 1.4; }
/* Recomendación de alternativa: alerta success del sistema, en versión compacta */
.qo-suggest .qo-suggest-alt { margin: var(--sp-12); border-radius: calc(var(--radius) / 2); }
.qo-suggest .qo-suggest-alt .gdp-alert-icon { width: 40px; }
.qo-suggest .qo-suggest-alt .gdp-alert-icon svg { width: 16px; height: 16px; }
.qo-suggest .qo-suggest-alt .gdp-alert-content { padding: var(--sp-8) var(--sp-12); }
.qo-suggest .qo-suggest-alt .gdp-alert-msg { font-size: var(--fs-3xs); font-weight: 700; color: var(--black); }

/* ── Mobile: la capa pasa a bottom-sheet full-width (mismo patrón que .filter-drawer) ── */
@media (max-width: 720px) {
  .qo-suggest-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10, 10, 10, .5);
    z-index: 190;
    opacity: 0;
    transition: opacity .3s;
  }
  .qo-suggest-overlay.is-open { opacity: 1; }

  .qo-suggest {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    border-radius: 16px 16px 0 0;   /* cantos redondos solo arriba */
    max-height: 85vh;
    display: flex; flex-direction: column;
    z-index: 200;
    opacity: 1;                     /* en mobile no hay fade: entra deslizando */
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .qo-suggest.is-open { transform: translateY(0); }

  .qo-suggest-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-16);
    border-bottom: 1px solid var(--g100);
    flex-shrink: 0;
  }
  .qo-suggest-head-title { font-size: var(--fs-md); font-weight: 700; color: var(--black); }
  .qo-suggest-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--black);
    transition: color .2s;
  }
  .qo-suggest-close:hover { color: var(--blue); }

  .qo-suggest-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  .qo-suggest, .qo-suggest-overlay { transition: none; }
}

/* Celdas de datos compartidas */
.qo-product-name { font-size: var(--fs-base); font-weight: 600; color: var(--black); line-height: 1.3; }
.qo-product-name:empty::before { content: '—'; color: var(--g300); font-weight: 400; }
.qo-price { font-size: var(--fs-base); color: var(--black); display: block; }
.qo-price-sub { font-size: var(--fs-3xs); color: var(--g500); display: block; margin-top: 2px; }
.qo-unit { font-size: var(--fs-base); color: var(--black); }
.qo-unit-sub { font-size: var(--fs-3xs); color: var(--g500); }
.qo-total-price { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--black); white-space: nowrap; }
.qo-total-excl { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--black); white-space: nowrap; margin-top: 2px; }
.qo-total-sub { display: block; font-size: var(--fs-3xs); color: var(--g500); }

/* Pie de tabla (tfoot) */
.qo-table tfoot td { padding: var(--sp-16); background: var(--g50); border-top: 2px solid var(--g100); }

/* Filas vacías (quick-order) */
.qo-row--empty .qty-selector { opacity: .35; }
.qo-row--empty .qty-selector button, .qo-row--empty .qty-selector input { pointer-events: none; }
.qo-row--empty td:not(.qo-col-code):not(.qo-col-qty):not(.qo-col-actions) { opacity: .3; pointer-events: none; }

/* Barra de acciones (quick-order) */
.qo-actions { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-24); flex-wrap: wrap; }
.qo-actions .btn-blue { margin-left: auto; }

/* Móvil quick-order: oculta columnas secundarias (scoped a .qo-table, no afecta a Mis productos) */
@media (max-width: 720px) {
  .qo-table .qo-col-name, .qo-table .qo-col-price, .qo-table .qo-col-unit, .qo-table .qo-col-total { display: none; }
  .qo-table { table-layout: auto; }
  .qo-table th.qo-col-code, .qo-table td.qo-col-code { width: auto; min-width: 148px; }
  .qo-table th.qo-col-qty, .qo-table td.qo-col-qty { width: 118px; }
  .qo-table th.qo-col-actions, .qo-table td.qo-col-actions { width: 36px; padding-left: 0; padding-right: var(--sp-8); }
  .qo-table tbody td { padding: var(--sp-12); }
  .qo-table tbody td.qo-col-code { padding-right: var(--sp-8); }
  .qo-table thead th { padding: var(--sp-12); }
  .qo-code-field .qo-code-input { padding-right: var(--sp-12); padding-left: var(--sp-12); }
  .qo-actions .btn-blue { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── MIS PRODUCTOS — variación dentro del Área privada (reusa el chrome .qo-table) ── */
.mp-period { font-size: var(--fs-md); font-weight: 700; color: var(--black); margin: var(--sp-8) 0 var(--sp-16); }
/* Anchos/alineación de columna solo en desktop; en móvil la tabla se apila */
@media (min-width: 721px) {
  .mp-table th.mp-col-code,  .mp-table td.mp-col-code  { width: 92px; }
  .mp-table th.mp-col-img,   .mp-table td.mp-col-img   { width: 64px; }
  .mp-table th.mp-col-qty,   .mp-table td.mp-col-qty   { width: 140px; text-align: center; }
  .mp-table th.mp-col-last,  .mp-table td.mp-col-last  { width: 116px; }
  .mp-table th.mp-col-total, .mp-table td.mp-col-total { width: 132px; text-align: right; }
  /* En desktop hay sitio: el selector de mis-productos vuelve a tamaño estándar */
  .mp-table .qty-selector--compact { height: var(--ctrl-h); }
  .mp-table .qty-selector--compact .qty-btn { width: 32px; }
  .mp-table .qty-selector--compact .qty-input { width: 40px; }
}
.mp-cell-val { display: contents; } /* desktop: transparente; en móvil pasa a bloque (abajo) */
.mp-code { font-size: var(--fs-base); font-weight: 700; color: var(--black); }
.mp-thumb { display: block; width: 48px; height: 48px; overflow: hidden; background: var(--white); }
.mp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-name { font-size: var(--fs-base); font-weight: 600; color: var(--black); line-height: 1.3; }
.mp-last { font-size: var(--fs-base); color: var(--black); }
.mp-alt-note { display: block; margin-top: var(--sp-8); font-size: var(--fs-3xs); font-weight: 600; color: var(--pill-success-fg); line-height: 1.4; }
.mp-alt-note strong { font-weight: 800; }
/* Cabecera ordenable (Código, Última compra) — flecha azul bien visible */
.mp-sort { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.mp-sort-arrow { width: 16px; height: 16px; color: var(--blue); transition: transform .15s; }
.mp-sort[data-dir="asc"] .mp-sort-arrow { transform: rotate(180deg); }
/* CTA inferior — ancho normal, alineado a la derecha (full-width solo en móvil) */
.mp-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-24); }

/* Mis productos — móvil: la MISMA tabla, solo se ocultan columnas (sin stacking).
   Visibles: Código · Imagen · Cantidad · Última compra. */
@media (max-width: 720px) {
  .mp-table .mp-col-name,
  .mp-table .mp-col-price,
  .mp-table .mp-col-unit,
  .mp-table .mp-col-total { display: none; }
  /* El selector usa la variante .qty-selector--compact (compacta en móvil) */
  /* Celdas más ajustadas + fecha sin partir */
  .mp-table tbody td, .mp-table thead th { padding: var(--sp-8); }
  .mp-table .mp-last { white-space: nowrap; }
  .mp-actions .mp-cta { width: 100%; }
}

@media (max-width: 900px) {
  .account-shell { grid-template-columns: 1fr; gap: var(--sp-24); padding-top: var(--sp-16); }
  .account-nav, .account-content { min-width: 0; }
  /* Menú anclado bajo el header (64px en mobile), fondo blanco sólido a sangre */
  .account-nav {
    position: sticky; top: 64px; z-index: 90;
    background: var(--white);
    margin-inline: calc(var(--gap) * -1);
    padding: var(--sp-8) 0 0;
    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .15);
  }
  .account-nav-title { display: none; }
  /* Scroller a sangre: recorta la pantalla, no los márgenes. El padding-inline
     actúa como scroll-padding para que el primer/último ítem respiren. */
  .account-nav-list { flex-direction: row; overflow-x: auto; gap: var(--sp-8); padding: 0 var(--gap) var(--sp-12); border-bottom: 1px solid var(--g100); scrollbar-width: none; }
  .account-nav-list::-webkit-scrollbar { display: none; }
  .account-nav-item { white-space: nowrap; padding: var(--sp-8) var(--sp-12); }
  .account-nav-item span { font-size: var(--fs-sm); }
  .account-nav-sep, .account-nav-logout { display: none; }
}
@media (max-width: 640px) {
  .account-cards { grid-template-columns: 1fr; }
  /* CTA de cabecera (Ver todos / Administrar) → full-width al final del módulo.
     display:contents disuelve el head para poder reordenar el botón con order. */
  .account-section { display: flex; flex-direction: column; }
  .account-section-head { display: contents; }
  .account-section-title { width: 100%; padding-bottom: var(--sp-12); border-bottom: 1px solid var(--g100); margin-bottom: var(--sp-16); }
  .account-table-wrap, .account-cards { order: 1; }
  .account-section-cta { order: 2; width: 100%; height: 44px; margin-top: var(--sp-16); }

  /* Tabla de pedidos → tarjetas apiladas (sin scroll horizontal) */
  .account-table-wrap { overflow-x: visible; }
  .account-table thead { display: none; }
  .account-table, .account-table tbody, .account-table tr, .account-table td { display: block; }
  .account-table tr { border: 1px solid var(--g100); border-radius: var(--radius); padding: var(--sp-8) var(--sp-16); margin-bottom: var(--sp-12); }
  .account-table td { border: 0; padding: var(--sp-8) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); text-align: right; }
  .account-table td + td { border-top: 1px solid var(--g100); }
  .account-table td::before { content: attr(data-label); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g500); text-align: left; flex-shrink: 0; }
  .account-table .ellip { max-width: none; overflow: visible; white-space: normal; text-align: right; }

  /* Detalle del pedido en móvil */
  .order-summary-head { padding: var(--sp-16); }
  /* Meta del pedido apilada y a ancho completo (label arriba, valor debajo) */
  .order-meta-row { flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-16); }
  .order-meta-row dd { text-align: left; }
  .order-line { grid-template-columns: 72px 1fr; gap: var(--sp-4) var(--sp-16); padding: var(--sp-16) 0; }
  .order-line .cart-page-item-right { grid-column: 2; align-items: flex-start; }
}

.checkout-header { border-bottom: 1px solid var(--g100); }
.checkout-header-inner {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
}
.checkout-logo { display: flex; align-items: center; width: 260px; max-width: 62vw; }
.checkout-logo img { width: 100%; height: auto; display: block; }
.checkout-phone {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--blue);
  font-size: var(--fs-base);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.checkout-page { padding: var(--sp-48) 0 var(--sp-80); }
.checkout-page .wrap { max-width: 1600px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 420px; gap: var(--sp-64); align-items: start; }
.checkout-main { display: flex; flex-direction: column; }

.checkout-footer {
  background: var(--blue);
  color: var(--white);
  margin-top: var(--sp-24);
}
.checkout-footer-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-48);
  padding: var(--sp-32) 0;
}
.checkout-footer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
}
.checkout-footer-block h2 {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.checkout-footer-block p,
.checkout-footer-block a {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
}
.checkout-footer-block p {
  max-width: 330px;
  color: rgba(255,255,255,.86);
}
.checkout-footer-block a {
  color: var(--white);
  text-decoration: none;
}
.checkout-footer-block a:hover { text-decoration: underline; }
.checkout-footer-logos {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.checkout-footer-logos img {
  display: block;
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
}
.checkout-footer-bottom {
  background: var(--white);
  border-top: 1px solid var(--g100);
  padding: var(--sp-16) 0;
}
.checkout-footer-bottom-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
}
.checkout-footer-bottom img {
  width: 150px;
  height: auto;
}
.checkout-footer-bottom p {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--blue);
}

.checkout-step { border-bottom: 1px solid var(--g100); }
.checkout-step + .checkout-step { padding-top: var(--sp-24); }

/* Paso completado */
.checkout-step.is-done .checkout-step-num { background: var(--green); border-color: var(--green); color: var(--green-dark); }
.checkout-step.is-done .checkout-step-title { font-size: var(--fs-2xl); color: var(--black); }
.checkout-step-head--done { justify-content: space-between; }
.checkout-step-title-wrap { display: flex; align-items: center; gap: var(--sp-16); }
.checkout-step-summary { font-size: var(--fs-md); color: var(--g500); padding: 0 0 var(--sp-16) calc(40px + var(--sp-16)); }
.checkout-step-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-20) var(--sp-32);
  color: var(--black);
}
.checkout-step-summary-list span { display: block; }
.checkout-step-summary-list strong { display: block; color: var(--g500); font-size: var(--fs-sm); font-weight: 700; }
.checkout-step-summary-list span { font-size: var(--fs-md); line-height: 1.35; }
.checkout-step-edit { background: none; border: none; padding: var(--sp-4); cursor: pointer; color: var(--blue); flex-shrink: 0; display: flex; align-items: center; }
.checkout-step-edit:hover { color: var(--blue-80); }

/* Radios tipo persona */
.checkout-radio-group { display: flex; gap: var(--sp-24); margin-bottom: var(--sp-16); }
.checkout-radio { display: flex; align-items: center; gap: var(--sp-8); cursor: pointer; font-size: var(--fs-md); }
.checkout-radio input[type="radio"] { width: 20px; height: 20px; accent-color: var(--blue); cursor: pointer; }

/* Formulario de facturación */
.checkout-billing-form,
.checkout-shipping-form { display: flex; flex-direction: column; gap: var(--sp-16); }
.checkout-billing-note { font-size: var(--fs-sm); color: var(--g500); margin: 0; }
.checkout-billing-save { align-self: flex-start; min-width: 160px; }
.checkout-muted { color: var(--g500); }
.checkout-action-row { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.checkout-subtitle { margin: 0 0 var(--sp-12); color: var(--black); font-size: var(--fs-base); font-weight: 800; }
.checkout-shipping-fields { display: flex; flex-direction: column; gap: var(--sp-16); }
.checkout-shipping-fields[hidden] { display: none; }
.checkout-address-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  max-width: 720px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  padding: var(--sp-24);
  color: var(--black);
}
.checkout-address-card[hidden] { display: none; }
.checkout-address-card strong {
  display: block;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--black);
}
.checkout-address-card span:not(.checkout-address-check) {
  display: block;
  max-width: calc(100% - 48px);
  color: var(--g500);
  font-size: var(--fs-md);
  line-height: 1.45;
}
.checkout-address-check {
  position: absolute;
  top: var(--sp-24);
  right: var(--sp-24);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-shipping-methods { margin-top: var(--sp-40); display: flex; flex-direction: column; gap: var(--sp-16); }
.checkout-field--textarea textarea {
  width: 100%;
  min-height: 72px;
  max-height: 220px;
  border: 1px solid var(--g400); /* AA 1.4.11 */
  border-radius: var(--radius);
  background: var(--g50);
  color: var(--black);
  font: inherit;
  font-size: var(--fs-md);
  padding: var(--sp-32) var(--sp-16) var(--sp-16);
  outline: none;
  resize: none;
  overflow: hidden;
}
.checkout-field--textarea textarea:focus { border-color: var(--blue); background: var(--white); }
.checkout-comment-block { display: flex; flex-direction: column; gap: var(--sp-12); margin-top: var(--sp-16); }
.checkout-payment-next { align-self: flex-start; min-width: 180px; }
.checkout-payment-next:disabled { opacity: .45; cursor: not-allowed; }

/* Promo regalo aside */
.checkout-gift-promo {
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-16);
  background:
    linear-gradient(135deg, rgba(0,45,114,.92), rgba(0,45,114,.66)),
    url("img/catalogo/banner-portadas.png") center / cover;
  border-radius: var(--radius);
  padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-16);
  text-align: left;
  color: var(--white);
  margin-top: var(--sp-16);
}
.checkout-gift-promo p {
  margin: 0;
  color: var(--white);
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1.1;
}
.checkout-gift-promo span {
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.35;
}
.checkout-gift-promo { position: relative; cursor: pointer; }
.checkout-gift-promo > div { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); }
.checkout-gift-promo a {
  flex-shrink: 0;
  text-decoration: none;
}
.checkout-gift-promo a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.checkout-gift-promo:hover a.btn-yellow { background: var(--white); color: var(--blue); }
#checkoutNotification { margin-bottom: var(--sp-32); }
.checkout-step-head { display: flex; align-items: center; gap: var(--sp-16); padding-bottom: var(--sp-16); }
.checkout-step-num {
  width: 40px;
  height: 40px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: var(--fs-md);
  font-weight: 800;
  flex-shrink: 0;
}
.checkout-step-title {
  margin: 0;
  color: var(--black);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-transform: uppercase;
}
.checkout-step-body {
  width: min(100%, 720px);
  padding: var(--sp-16) 0 var(--sp-40) calc(40px + var(--sp-16));
}
.checkout-step:not(.is-active) .checkout-step-body { display: none; }
.checkout-step.is-active .checkout-step-body { display: block; }
.checkout-auth-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
.checkout-auth-panel + .checkout-auth-panel { margin-top: var(--sp-24); }
.checkout-auth-panel[hidden] { display: none; }
.checkout-auth-panel--compact { max-width: 720px; }
.checkout-copy { margin: 0; color: var(--black); font-size: var(--fs-md); line-height: 1.45; }
.checkout-copy strong { font-weight: 800; }
.checkout-create-form,
.checkout-login-form { display: flex; flex-direction: column; gap: var(--sp-16); align-items: stretch; }
.checkout-login-form { width: 100%; max-width: 560px; }
.checkout-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.checkout-field { position: relative; display: flex; flex-direction: column; }
.checkout-field--full { grid-column: 1 / -1; }
.checkout-field span {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-16);
  z-index: 1;
  color: var(--g500);
  font-size: var(--fs-3xs);
  font-weight: 600;
}
.checkout-field input,
.checkout-field select {
  width: 100%;
  height: 56px;
  border: 1px solid var(--g400); /* AA 1.4.11: borde de input ≥3:1 */
  border-radius: var(--radius);
  background: var(--g50);
  color: var(--black);
  font: inherit;
  font-size: var(--fs-md);
  padding: var(--sp-20) var(--sp-16) var(--sp-8);
  outline: none;
  transition: border-color .2s, background .2s;
}
.checkout-field input:focus,
.checkout-field select:focus { border-color: var(--blue); background: var(--white); }
.checkout-field.is-error input,
.checkout-field.is-error select,
.checkout-field.is-error textarea {
  border-color: var(--red);
  background: var(--red-10);
}
.checkout-field-error {
  margin-top: var(--sp-8);
  color: var(--red);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.checkout-field--password svg,
.checkout-field-eye {
  position: absolute;
  right: var(--sp-16);
  top: 28px;
  transform: translateY(-50%);
  color: var(--blue);
  pointer-events: none;
}
.checkout-field-eye {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: all;
  display: flex;
  align-items: center;
  line-height: 0;
}
.checkout-field--password input { padding-right: var(--sp-48); }
.checkout-field-hint-block { font-size: var(--fs-3xs); color: var(--g500); margin-top: calc(-1 * var(--sp-8)); }
.checkout-field--textarea .checkout-comment-limit { margin-top: var(--sp-12); }
.checkout-field--select select { appearance: none; }
.checkout-field--select::after {
  content: "";
  position: absolute;
  right: var(--sp-16);
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.checkout-switch { display: flex; align-items: flex-start; gap: var(--sp-12); color: var(--black); font-size: var(--fs-base); line-height: 1.45; cursor: pointer; }
.checkout-switch input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-switch-ui {
  width: 36px;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--g300);
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.checkout-switch-ui::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .2s;
}
.checkout-switch input:checked + .checkout-switch-ui { background: var(--blue); }
.checkout-switch input:checked + .checkout-switch-ui::before { transform: translateX(16px); }
/* ── Custom checkbox (.checkout-toggle) — usado en account y formularios ── */
.checkout-toggle { display: flex; align-items: flex-start; gap: var(--sp-12); cursor: pointer; font-size: var(--fs-md); line-height: 1.45; color: var(--black); }
.checkout-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.checkout-toggle-switch {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--g300);
  border-radius: 4px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.checkout-toggle-switch::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid var(--white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity .15s;
}
.checkout-toggle:hover .checkout-toggle-switch { border-color: var(--blue); }
.checkout-toggle input:checked + .checkout-toggle-switch { background: var(--blue); border-color: var(--blue); }
.checkout-toggle input:checked + .checkout-toggle-switch::after { opacity: 1; }
.checkout-toggle input:focus-visible + .checkout-toggle-switch { outline: 2px solid var(--blue); outline-offset: 2px; }
.checkout-toggle a { color: var(--blue); text-underline-offset: 2px; }

.checkout-forgot { color: var(--blue); font-size: var(--fs-base); font-weight: 500; text-decoration: none; }
.checkout-forgot:hover { text-decoration: underline; text-underline-offset: 2px; }
.checkout-submit { align-self: flex-start; min-width: 260px; margin-top: var(--sp-8); }
.checkout-payment-form { display: flex; flex-direction: column; gap: var(--sp-32); }
.checkout-payment-section { display: flex; flex-direction: column; gap: var(--sp-16); }
.checkout-address-card--payment { width: 100%; max-width: none; padding: var(--sp-20); }
.checkout-payment-billing-fields {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--g100);
}
.checkout-payment-billing-fields[hidden] { display: none; }
.checkout-billing-address-save { align-self: flex-start; min-width: 160px; }
.checkout-payment-methods {
  width: 100%;
  max-width: none;
  border: 1px solid var(--g100);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.checkout-payment-methods--shipping { width: 100%; }
.checkout-payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 72px;
  padding: var(--sp-16) var(--sp-20);
  border-bottom: 1px solid var(--g100);
  color: var(--black);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
}
.checkout-payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-payment-methods .checkout-payment-method:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.checkout-payment-methods .checkout-payment-method:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.checkout-payment-method.is-selected { border-bottom-color: transparent; box-shadow: inset 0 0 0 2px var(--blue); }
.checkout-payment-method-main { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; }
.checkout-payment-help {
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout-payment-radio {
  width: 22px;
  height: 22px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-payment-method input:checked + .checkout-payment-method-main .checkout-payment-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}
.checkout-payment-icon {
  width: 40px;
  height: 32px;
  border: 1px solid var(--g100);
  border-radius: calc(var(--radius) / 2);
  background: var(--g50);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
}
.checkout-payment-icon img {
  display: block;
  max-width: 30px;
  max-height: 22px;
  object-fit: contain;
}
.checkout-payment-icon--paypal,
.checkout-payment-icon--bizum {
  width: auto;
  min-width: 72px;
  border-color: transparent;
  background: transparent;
}
.checkout-payment-icon--paypal img,
.checkout-payment-icon--bizum img {
  max-width: 72px;
  max-height: 32px;
}
.checkout-payment-badges { display: flex; align-items: center; gap: var(--sp-8); flex-shrink: 0; }
.checkout-payment-badges span {
  min-width: 42px;
  height: 28px;
  border: 1px solid var(--g100);
  border-radius: calc(var(--radius) / 2);
  background: var(--white);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xs);
  font-weight: 900;
}
.checkout-card-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-20);
  border-bottom: 1px solid var(--g100);
  background: var(--g50);
}
.checkout-payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.checkout-field--payment input { background: var(--white); }
.checkout-field--payment svg {
  position: absolute;
  right: var(--sp-16);
  top: 28px;
  transform: translateY(-50%);
  color: var(--g500);
  pointer-events: none;
}
.checkout-field--payment input { padding-right: var(--sp-48); }
.checkout-terms { max-width: 720px; }
.checkout-summary { top: var(--sp-24); }
.checkout-mobile-summary-toggle { display: none; }
.checkout-summary-backdrop { display: none; }
.checkout-summary-content { display: flex; flex-direction: column; gap: var(--sp-16); overflow: hidden; }
.checkout-summary-panel { overflow: hidden; }
.checkout-summary-trust .pdp-shipping { grid-template-columns: 1fr; }
.checkout-summary-trust .pdp-shipping-item { align-items: center; }
.checkout-summary-trust .pdp-shipping-item svg { margin-top: 0; }
.checkout-summary-title {
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
  text-align: left;
  border-bottom: none;
}
.checkout-products-toggle {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: 0 var(--sp-20);
  background: var(--g50);
  border-bottom: 1px solid var(--g100);
  color: var(--black);
  font-size: var(--fs-md);
  font-weight: 800;
  text-align: left;
}
.checkout-products-toggle small { color: var(--g500); font-size: var(--fs-3xs); font-weight: 600; }
.checkout-products-toggle svg { color: var(--blue); transition: transform .2s; flex-shrink: 0; }
.checkout-products-toggle.is-open svg { transform: rotate(180deg); }
.checkout-products-list {
  max-height: 260px;
  overflow: auto;
  border-bottom: 1px solid var(--g100);
}
.checkout-products-list[hidden] { display: none; }
.checkout-order-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-12);
  align-items: start;
  padding: var(--sp-16) var(--sp-20);
  border-bottom: 1px solid var(--g100);
}
.checkout-order-item:last-child { border-bottom: none; }
.checkout-order-img { display: block; width: 48px; aspect-ratio: 1; background: var(--g50); overflow: hidden; border-radius: var(--radius); }
.checkout-order-img img { width: 100%; height: 100%; object-fit: cover; }
.checkout-order-info { min-width: 0; }
.checkout-order-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--black);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
}
.checkout-order-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.checkout-order-meta { display: block; margin-top: var(--sp-4); color: var(--g500); font-size: var(--fs-xs); }
.checkout-order-price { color: var(--black); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.checkout-summary .cart-summary-row { padding: var(--sp-12) var(--sp-24); }
.checkout-summary-row--discount { color: var(--red); }
.checkout-summary .cart-summary-row--total { padding-top: var(--sp-16); align-items: center; }
.checkout-summary .cart-summary-row--total span { font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.checkout-summary .cart-summary-total { font-size: var(--fs-2xl); }
.checkout-safe-info .pdp-shipping { grid-template-columns: 1fr; }
.checkout-safe-info .pdp-shipping-item { align-items: center; font-size: var(--fs-sm); }
.checkout-safe-info .pdp-shipping-item svg { margin-top: 0; }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; gap: var(--sp-32); }
  .checkout-summary { position: static; top: auto; }
  .checkout-footer-info {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
    padding: var(--sp-32) 0;
  }
}
@media (max-width: 600px) {
  .checkout-header-inner { min-height: 72px; }
  .checkout-logo { width: 190px; }
  .checkout-phone { font-size: 0; gap: 0; }
  .checkout-phone svg { width: 22px; height: 22px; }
  .checkout-page { padding: var(--sp-32) 0 var(--sp-96); }
  .checkout-footer { margin-top: var(--sp-16); }
  .checkout-footer-info { padding: var(--sp-24) 0; }
  .checkout-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-8);
  }
  .checkout-footer-bottom img { width: 130px; }
  .checkout-step-head { gap: var(--sp-12); }
  .checkout-step-num { width: 36px; height: 36px; }
  .checkout-step-body { width: 100%; padding-left: 0; }
  .checkout-step:not(.is-active) .checkout-step-body { display: none; }
  .checkout-step-summary-list { grid-template-columns: 1fr; }
  .checkout-field-grid { grid-template-columns: 1fr; }
  .checkout-payment-grid { grid-template-columns: 1fr; }
  .checkout-step-body .btn {
    width: 100%;
    height: 44px;
    padding: 0 var(--sp-24);
    font-size: var(--fs-xs);
    letter-spacing: .07em;
  }
  .checkout-step-body .btn.checkout-submit--final {
    height: 56px;
    padding: 0 var(--sp-48);
    font-size: var(--fs-md);
    letter-spacing: .06em;
  }
  .checkout-action-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }
  .checkout-payment-method { align-items: center; flex-direction: row; flex-wrap: wrap; }
  .checkout-payment-method-main { flex: 1 1 auto; }
  .checkout-payment-badges { margin-left: calc(22px + 40px + var(--sp-24)); flex-wrap: wrap; }
  .checkout-submit { width: 100%; }
  .checkout-summary {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 420;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--g100);
  }
  .checkout-summary-backdrop {
    position: fixed;
    inset: 0;
    z-index: 410;
    display: block;
    background: rgba(10,10,10,.42);
    opacity: 0;
    pointer-events: none;
  }
  .checkout-summary.is-open + .checkout-summary-backdrop { pointer-events: auto; }
  .checkout-mobile-summary-toggle {
    min-height: 72px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    padding: var(--sp-12) var(--gap);
    border: none;
    background: var(--white);
    color: var(--black);
    cursor: pointer;
  }
  .checkout-mobile-summary-total {
    color: var(--black);
    font-size: var(--fs-xl);
    font-weight: 900;
    letter-spacing: -.03em;
  }
  .checkout-mobile-summary-action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    color: var(--blue);
  }
  .checkout-mobile-summary-action svg { transition: transform .2s; flex-shrink: 0; }
  .checkout-mobile-summary-toggle[aria-expanded="true"] .checkout-mobile-summary-action svg { transform: rotate(180deg); }
  .checkout-mobile-summary-label {
    color: var(--blue);
    font-size: var(--fs-base);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .checkout-summary-content {
    display: none;
    max-height: calc(100vh - 72px);
    overflow: auto;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--blue);
  }
  .checkout-summary-panel {
    border: none;
    border-radius: 0;
  }
  .checkout-summary .checkout-gift-promo { display: none; }
  .checkout-summary .cart-summary-row,
  .checkout-summary .checkout-products-toggle,
  .checkout-summary-title { padding-left: var(--gap); padding-right: var(--gap); }
  .checkout-summary-trust { padding: 0 var(--gap) var(--sp-16); }
}


/* ══════════════════════════════════════════════════════════
   CART CONFIRM — capa de confirmación al añadir al carrito
   Reutiliza .cart-drawer-panel / header / body / footer
══════════════════════════════════════════════════════════ */
.cart-confirm { position: fixed; inset: 0; z-index: 450; pointer-events: none; }
.cart-confirm.is-open { pointer-events: all; }
.cart-confirm-backdrop {
  position: absolute; inset: 0; background: rgba(10,10,10,.5);
  opacity: 0; transition: opacity .3s;
}
.cart-confirm.is-open .cart-confirm-backdrop { opacity: 1; }
/* El panel reutiliza .cart-drawer-panel — solo necesita activar el translateX */
.cart-confirm.is-open .cart-drawer-panel { transform: translateX(0); }

/* Footer sticky — botón full-width */
.cart-confirm-footer { padding: var(--sp-24) var(--sp-24) var(--sp-16); }
.cart-confirm-footer .btn { width: 100%; justify-content: center; }

/* Título con icono tick */
.cart-confirm .cart-drawer-title { display: flex; align-items: center; gap: var(--sp-8); }

/* Items añadidos — cada uno es una fila; varios apilados con separador */
.cart-confirm-added {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-16);
  align-items: start; padding: var(--sp-16) 0; border-bottom: 1px solid var(--g100);
  transition: opacity .3s ease, transform .3s ease;
}
#cartConfirmAddedList .cart-confirm-added:first-child { padding-top: var(--sp-20); }
#cartConfirmAddedList .cart-confirm-added:last-child  { border-bottom: none; }
/* Estado inicial antes de animar la entrada */
.cart-confirm-added--entering { opacity: 0; transform: translateY(10px); }

/* Suggest card saliendo — sube y se desvanece */
.cart-confirm-suggest { transition: opacity .22s ease, transform .22s ease; }
.cart-confirm-suggest.is-adding { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.cart-confirm-added-media { display: block; aspect-ratio: 1; overflow: hidden; }
.cart-confirm-added-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-confirm-added-info .offer-code { margin-bottom: var(--sp-4); }
.cart-confirm-added-info .offer-name { min-height: 0; font-size: var(--fs-base); -webkit-line-clamp: 3; margin-bottom: var(--sp-8); }
.cart-confirm-added-row { display: flex; justify-content: space-between; align-items: baseline; }
.cart-confirm-added-info .offer-price { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.03em; }

/* Título sección sugerencias — mismo estilo que .cart-drawer-title */
.cart-confirm-related-title {
  font-size: var(--fs-base); font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--black); margin: 0 0 var(--sp-12);
}

/* Contenedor sección sugerencias */
.cart-confirm-related {
  margin-top: var(--sp-24);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--g100);
}

/* Card individual de sugerencia — mismo grid 80px+1fr que .cart-confirm-added */
.cart-confirm-suggest {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-16);
  align-items: start;
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--g100);
}
.cart-confirm-suggest:last-child { border-bottom: none; padding-bottom: var(--sp-8); }

/* Tipografía en suggest cards */
.cart-confirm-suggest .offer-name { min-height: 0; font-size: var(--fs-base); -webkit-line-clamp: 2; margin-bottom: var(--sp-4); }
a.cart-confirm-suggest-name { color: inherit; text-decoration: none; display: block; }
a.cart-confirm-suggest-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.cart-confirm-suggest .offer-price { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.03em; }
.cart-confirm-suggest .offer-price-old { display: inline; }
.cart-confirm-suggest .offer-pack { margin: var(--sp-4) 0 0; }

/* Controles xs — más pequeños que --ctrl-h-sm (32px) */
.cart-confirm-suggest .offer-actions { margin-top: var(--sp-8); padding-top: 0; }
.cart-confirm-suggest .offer-actions .qty-selector { height: var(--ctrl-h-xs); }
.cart-confirm-suggest .offer-actions .qty-btn { width: var(--ctrl-h-xs); font-size: 13px; }
.cart-confirm-suggest .offer-actions .qty-input { font-size: var(--fs-3xs); }
.cart-confirm-suggest .offer-actions .btn-add-cart { height: var(--ctrl-h-xs); font-size: var(--fs-3xs); }

/* ═══════════════════════════════════════════════════════════════════════════
   ALERTAS — .gdp-alert
   Usable como toast flotante o como bloque inline dentro del contenido.
   Variantes: --success · --warning · --info · --error · --neutral
   Estructura: columna icono sólida (54px) | contenido | botón cerrar (opcional)
═══════════════════════════════════════════════════════════════════════════ */

.gdp-alert {
  display: flex;
  align-items: stretch;          /* columna de icono a toda la altura */
  gap: 0;
  border: 1px solid;
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;              /* border-radius sobre el bloque de color */
  text-align: left;              /* nunca centrado — neutraliza herencias */
}

/* ── Columna icono — bloque sólido de color, icono centrado ── */
.gdp-alert-icon {
  flex-shrink: 0;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);           /* icono blanco por defecto */
}
.gdp-alert-icon svg { width: 22px; height: 22px; }

/* ── Área de contenido ── */
.gdp-alert-content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12);
}

.gdp-alert-title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--black);
  margin-bottom: var(--sp-4);
  line-height: 1.3;
}

.gdp-alert-msg {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--g500);
}

/* ── Botón cerrar — stroke-width 1, alineado arriba ── */
.gdp-alert-close {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s;
  padding: 0;
}
.gdp-alert-close:hover { opacity: 1; }

/* ── Variantes ─────────────────────────────────────────────────────────── */

/* Success — verde lima GDP --green */
.gdp-alert--success { border-color: var(--green); }
.gdp-alert--success .gdp-alert-icon  { background: var(--green); color: var(--green-dark); } /* contraste sobre verde claro */
.gdp-alert--success .gdp-alert-close { color: var(--green-dark); }

/* Warning — amarillo corporativo --yellow */
.gdp-alert--warning { border-color: var(--yellow); }
.gdp-alert--warning .gdp-alert-icon  { background: var(--yellow); color: var(--yellow-dark); }
.gdp-alert--warning .gdp-alert-close { color: var(--yellow-dark); }

/* Info — azul corporativo --blue */
.gdp-alert--info { border-color: var(--blue); }
.gdp-alert--info .gdp-alert-icon  { background: var(--blue); }
.gdp-alert--info .gdp-alert-close { color: var(--blue); }

/* Error — rojo --red */
.gdp-alert--error { border-color: var(--red); }
.gdp-alert--error .gdp-alert-icon  { background: var(--red); }
.gdp-alert--error .gdp-alert-close { color: var(--red); }

/* Neutral — gris */
.gdp-alert--neutral { border-color: var(--g300); }
.gdp-alert--neutral .gdp-alert-icon  { background: var(--g500); }
.gdp-alert--neutral .gdp-alert-close { color: var(--g500); }

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE CONTENIDO — componentes genéricos reutilizables
   (info / locator / listado por año). Migrados desde estilos inline de
   atención al cliente, nuestras tiendas y medios — nombres genéricos para
   reutilizar en futuras páginas.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout base de página de contenido (fondo blanco) ── */
.content-page { padding: var(--sp-48) 0 var(--sp-80); }
.content-col  { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-24); }
.content-head { max-width: 720px; margin-bottom: var(--sp-24); }
.content-head h1 {
  font-size: clamp(28px, 4vw, 40px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1.05; margin-bottom: var(--sp-12);
}
.content-head p { font-size: var(--fs-md); color: var(--g500); line-height: 1.6; }

/* ── Card de contenido con borde ── */
.info-card { border: 1px solid var(--g100); border-radius: var(--radius); background: var(--white); padding: var(--sp-24); }
.info-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.info-card .cart-summary-title { padding: 0; margin: 0; }

/* ── Card-intro centrada: ilustración + título + texto + CTAs ── */
.intro-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); padding: var(--sp-24); border: 1px solid var(--g100); border-radius: var(--radius); background: var(--white); text-align: center; }
.intro-card-media { display: flex; justify-content: center; align-items: center; margin-bottom: var(--sp-8); }
.intro-card-media img { display: block; width: 360px; max-width: 100%; height: auto; object-fit: contain; }
.intro-card .gdp-alert-content { padding: 0; display: flex; flex-direction: column; align-items: center; }
.intro-card .gdp-alert-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; text-transform: uppercase; letter-spacing: -.04em; margin-bottom: var(--sp-8); }
.intro-card .gdp-alert-msg { max-width: 760px; font-size: var(--fs-md); line-height: 1.5; }
.intro-card-cta { display: flex; flex-wrap: wrap; gap: var(--sp-12); justify-content: center; }
/* Variante sin contenedor: estado centrado sobre fondo blanco, sin borde ni caja (p. ej. confirmación de compra simple) */
.intro-card--plain { border: 0; background: transparent; padding: var(--sp-48) var(--sp-24); }
.intro-card--plain .intro-card-media img { width: 300px; }

/* ── Bloques de datos / contacto ── */
.info-address { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-base); line-height: 1.5; color: var(--black); }
.info-address strong { font-size: var(--fs-md); }
.info-stack { display: flex; flex-direction: column; gap: var(--sp-12); }
.info-text  { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--g500); }
.info-links { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.icon-link  { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--blue); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.icon-link:hover { text-decoration: underline; }

/* ── Franja de garantías (pdp-shipping en 2 columnas) ── */
.info-guarantees .pdp-shipping { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }

/* ── Listado agrupado por año (hemeroteca, histórico de prensa…) ── */
.year-group { margin-bottom: var(--sp-48); }
.year-title { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.03em; margin-bottom: var(--sp-20); scroll-margin-top: 96px; }

/* ── Store locator (mapa + lista sincronizada) ── */
.locator-layout { display: grid; grid-template-columns: 1fr 440px; gap: var(--sp-32); align-items: start; }
.locator-map {
  /* deja sitio al header sticky colapsado (48px) para que no tape el mapa anclado */
  position: sticky; top: calc(48px + var(--sp-16));
  height: calc(100vh - 48px - var(--sp-48)); min-height: 480px;
  border: 1px solid var(--g100); border-radius: var(--radius); overflow: hidden; background: var(--g50);
}
.locator-map .leaflet-container { font-family: inherit; background: var(--g50); width: 100%; height: 100%; }
.store-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.leaflet-popup-content { margin: var(--sp-12) var(--sp-16); font-size: var(--fs-base); line-height: 1.5; }
.map-popup-name { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; display: block; margin-bottom: 2px; }
.map-popup-link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-8); color: var(--blue); font-weight: 700; text-decoration: none; }
.map-popup-link:hover { text-decoration: underline; }
.locator-list { display: flex; flex-direction: column; gap: var(--sp-16); }
.store-card {
  border: 1px solid var(--g100); border-radius: var(--radius); background: var(--white);
  padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-16);
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.store-card:hover,
.store-card.is-active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.store-card .look-title { margin: 0; }
.store-row { display: flex; gap: var(--sp-12); }
.store-row svg { flex-shrink: 0; color: var(--blue); margin-top: 2px; }
.store-row .label { margin: 0 0 2px; }
.store-address, .store-hours { font-size: var(--fs-base); color: var(--black); line-height: 1.5; margin: 0; }
.store-hours-aug { font-size: var(--fs-base); color: var(--g500); line-height: 1.5; margin: var(--sp-4) 0 0; }
.store-phone { font-size: var(--fs-base); font-weight: 600; color: var(--blue); text-decoration: none; }
.store-phone:hover { text-decoration: underline; }
.store-card-cta { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: auto; }
.store-card-cta .btn { width: 100%; justify-content: center; }
/* Placeholder del tour 360º dentro del lightbox (hasta incrustar el tour real) */
.tour360-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-12); text-align: center;
  padding: var(--sp-32); color: rgba(255,255,255,.85);
}
.tour360-placeholder strong { color: var(--white); font-size: var(--fs-lg); }
.tour360-placeholder span { font-size: var(--fs-sm); max-width: 420px; line-height: 1.6; }

@media (max-width: 900px) {
  .locator-layout { grid-template-columns: 1fr; gap: var(--sp-24); }
  .locator-map { position: static; height: 360px; min-height: 0; order: -1; }
}
@media (max-width: 720px) {
  .info-guarantees .pdp-shipping { grid-template-columns: 1fr; }
}

/* ============================================================
   Sistema editorial compartido (.ed-*)
   Páginas: conózcanos, we-forest. Tipografía grande, parallax,
   cifras con precarga, bandas con velo, layouts asimétricos.
   ============================================================ */
.ed-page { background: var(--white); color: var(--black); }

/* Reutiliza la tipografía del .label del DS; solo añade espaciado y variante clara */
.ed-label { display: block; margin-bottom: var(--sp-12); }
.ed-label--light { color: rgba(255,255,255,.85); }
.ed-title { font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; color: var(--black); }
.ed-title--light { color: var(--white); }
.ed-title--script { font-family: 'Caveat', cursive; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--black); }
.ed-copy { display: grid; gap: var(--sp-20); font-size: var(--fs-md); line-height: 1.62; color: var(--g500); }
.ed-copy strong { color: var(--black); font-weight: 700; }
.ed-copy--light { color: rgba(255,255,255,.82); }
.ed-copy--light strong { color: var(--white); }
.ed-lead { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: var(--black); }

.ed-section { padding: clamp(64px, 9vw, 140px) var(--gap); position: relative; }
.ed-section--blue { background: var(--blue); color: var(--white); }
.ed-section--dark { background: var(--black); color: var(--white); }
.ed-section--gray { background: var(--g50); }
.ed-section--tight { padding-top: clamp(40px, 5vw, 72px); }
.ed-wrap { max-width: 1480px; margin: 0 auto; position: relative; z-index: 1; }

/* HERO */
.ed-hero { min-height: calc(100vh - var(--header-h)); position: relative; overflow: hidden; display: grid; align-items: end; color: var(--white); }
.ed-hero-media { position: absolute; inset: -14% 0; background-size: cover; background-position: center; will-change: transform; }
.ed-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,45,114,.92) 0%, rgba(0,45,114,.60) 50%, rgba(10,10,10,.46) 100%); pointer-events: none; }
.ed-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; padding: clamp(48px, 8vw, 96px) var(--gap); }
.ed-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: var(--sp-20); }
.ed-hero-eyebrow::before { content: ""; width: clamp(32px, 5vw, 64px); height: 2px; background: var(--white); opacity: .7; }
.ed-hero-title { font-size: clamp(40px, 13vw, 188px); font-weight: 900; line-height: .82; letter-spacing: -.045em; text-transform: uppercase; }
.ed-hero-copy { max-width: 560px; margin-top: var(--sp-24); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.42; color: rgba(255,255,255,.86); }

/* Bloque editorial (texto + imagen alta con parallax) */
.ed-editorial { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.ed-editorial--rev { grid-template-columns: .95fr 1.05fr; }
.ed-editorial--rev .ed-editorial-media { order: -1; }
.ed-editorial-text { max-width: 560px; }
/* .ed-copy: soporte de listas (mismo cuerpo que conózcanos + listas de la guía) */
.ed-copy ul { display: grid; gap: var(--sp-8); padding-left: 1.3em; list-style: disc; }
.ed-figure { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.ed-figure--wide { aspect-ratio: 16 / 10; }
.ed-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }

/* Cifras grandes con precarga */
.ed-counter { display: inline-block; font-weight: 900; line-height: .84; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ed-figures-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 88px); }
.ed-figures-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--g100); border: 1px solid var(--g100); border-radius: var(--radius); overflow: hidden; }
.ed-fig { background: var(--white); padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; gap: var(--sp-8); }
.ed-section--blue .ed-fig { background: var(--blue); }
.ed-fig-num { display: flex; align-items: baseline; gap: .12em; color: var(--black); }
.ed-section--blue .ed-fig-num { color: var(--white); }
.ed-fig-num .ed-counter { font-size: clamp(52px, 6vw, 104px); }
.ed-fig-prefix, .ed-fig-unit { font-size: clamp(28px, 3vw, 52px); font-weight: 900; letter-spacing: -.03em; }
.ed-fig-unit--sm { font-size: clamp(20px, 2vw, 34px); }
.ed-fig-label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--black); }
.ed-section--blue .ed-fig-label { color: var(--white); }
.ed-fig-sub { font-size: var(--fs-xs); color: var(--g500); line-height: 1.5; }
.ed-section--blue .ed-fig-sub { color: rgba(255,255,255,.88); }
.ed-fig em { font-style: italic; }
.ed-figures-grid--plain { background: none; border: 0; gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.ed-figures-grid--plain .ed-fig { background: none; padding: 0; }
.ed-section--dark .ed-fig-num, .ed-band .ed-fig-num { color: var(--white); }
.ed-section--dark .ed-fig-label, .ed-band .ed-fig-label { color: var(--white); }
.ed-band .ed-fig-sub { color: rgba(255,255,255,.88); }
.ed-figures-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 5vw, 80px); }
.ed-fig-hero { text-align: center; }
.ed-fig-hero .ed-fig-num { justify-content: center; }
.ed-fig-hero .ed-fig-num .ed-counter { font-size: clamp(72px, 11vw, 180px); }
.ed-fig-hero .ed-fig-prefix, .ed-fig-hero .ed-fig-unit { font-size: clamp(36px, 5vw, 88px); }
.ed-fig-hero .ed-fig-label { margin-top: var(--sp-8); font-size: var(--fs-md); }

/* Timeline horizontal */
.ed-timeline { position: relative; display: flex; gap: var(--sp-48); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gap) * -1); padding: var(--sp-48) var(--gap) var(--sp-16); scroll-padding-inline: var(--gap); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gap), #000 calc(100% - var(--gap)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gap), #000 calc(100% - var(--gap)), transparent 100%); }
.ed-milestone { flex: 1 0 260px; max-width: 320px; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: start; }
.ed-milestone-year { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--black); margin-bottom: var(--sp-16); }
.ed-milestone-track { position: relative; width: 100%; height: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-24); }
.ed-milestone-track::before { content: ''; position: absolute; top: 50%; left: calc(-1 * var(--sp-24)); right: calc(-1 * var(--sp-24)); height: 2px; background: var(--g100); transform: translateY(-50%); }
.ed-milestone:first-child .ed-milestone-track::before { left: 50%; }
.ed-milestone:last-child .ed-milestone-track::before { right: 50%; }
.ed-milestone-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); position: relative; z-index: 1; flex-shrink: 0; transition: transform .3s ease, box-shadow .3s ease; }
.ed-milestone:hover .ed-milestone-dot { transform: scale(1.4); box-shadow: 0 0 0 8px rgba(0,45,114,.12); }
.ed-milestone-body h3 { font-size: var(--fs-base); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--black); margin-bottom: var(--sp-8); }
.ed-milestone-body p { font-size: var(--fs-sm); line-height: 1.55; color: var(--g500); }

/* Grid de tiles (imágenes) */
.ed-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); }
.ed-tile { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 4; }
.ed-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform .6s ease; }
.ed-tile:hover img { transform: scale(1.2); }

/* Banda full-bleed con parallax y velo */
.ed-band { position: relative; overflow: hidden; min-height: clamp(420px, 60vh, 620px); display: grid; align-items: center; color: var(--white); }
.ed-band::after { content: ""; position: absolute; inset: 0; background: rgba(0,45,114,.82); pointer-events: none; }
.ed-band--dark::after { background: rgba(10,10,10,.6); }
.ed-band-inner { position: relative; z-index: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gap); }
.ed-band-copy { max-width: 680px; }

/* Métricas pequeñas (azul sobre fondo claro; blanco sobre banda) */
.ed-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3vw, 40px); }
.ed-metric strong { display: block; font-size: clamp(28px, 3.4vw, 52px); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--black); }
.ed-metric span { display: block; margin-top: var(--sp-8); font-size: var(--fs-sm); line-height: 1.4; color: var(--g500); }
.ed-band .ed-metric strong { color: var(--white); }
.ed-band .ed-metric span { color: rgba(255,255,255,.88); }

/* Principios / pilares — editorial con índice grande, sin caja */
.ed-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.ed-principles--2 { grid-template-columns: repeat(2, 1fr); }
.ed-principle { border-top: 2px solid var(--blue); padding-top: var(--sp-24); }
.ed-principle-index { display: block; font-size: clamp(36px, 4vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--black); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-16); }
.ed-principle h3 { font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: var(--black); margin-bottom: var(--sp-12); }
.ed-principle p { font-size: var(--fs-base); line-height: 1.6; color: var(--g500); }

/* Teaser / bloque dos columnas con imagen */
.ed-forest { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(32px, 6vw, 80px); }
.ed-forest-badge { width: 120px; height: auto; margin-bottom: var(--sp-20); }
.ed-forest .ed-figure { aspect-ratio: 16 / 11; }

/* Espaciado interno editorial (sustituye estilos inline) */
.ed-editorial-text .ed-copy { margin-top: var(--sp-24); }
.ed-band .ed-copy { margin-top: var(--sp-20); }
.ed-band .ed-figures-grid { margin-top: clamp(40px, 5vw, 64px); }
.ed-band-copy .btn,
.ed-forest .btn { margin-top: var(--sp-24); }
.ed-editorial--split { margin-bottom: clamp(32px, 5vw, 56px); }
.ed-head-center { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }

/* Tarjetas de post (blog relacionado) */
.ed-postcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16); }
.ed-postcard { display: flex; flex-direction: column; min-height: 100%; background: var(--white); border: 1px solid var(--g100); border-radius: var(--radius); overflow: hidden; color: var(--black); text-decoration: none; transition: box-shadow .25s; }
.ed-postcard:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.ed-postcard-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.ed-postcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .6s ease; }
.ed-postcard:hover .ed-postcard-media img { transform: scale(1.14); }
.ed-postcard-body { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-20); flex: 1; }
.ed-postcard-body h3 { font-size: var(--fs-lg); font-weight: 800; line-height: 1.24; letter-spacing: -.02em; color: var(--black); }
.ed-postcard-body p { font-size: var(--fs-sm); line-height: 1.5; color: var(--g500); flex: 1; }
.ed-postcard-link { font-size: var(--fs-sm); font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ── Press / hemeroteca — card horizontal: texto + miniatura pequeña ──
   El texto manda; la foto va pequeña y separada (sale más nítida y no
   compite con el titular ni con el texto de las portadas de prensa). */
.ed-press-list { display: flex; flex-direction: column; gap: var(--sp-16); }
.ed-press-card {
  display: grid;
  grid-template-columns: 1fr clamp(150px, 18vw, 210px);
  gap: clamp(var(--sp-20), 3vw, var(--sp-40));
  align-items: center;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: var(--radius);
  padding: var(--sp-24) var(--sp-32);
  transition: box-shadow .25s;
}
.ed-press-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.ed-press-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); min-width: 0; }
.ed-press-text .label { color: var(--g500); margin-bottom: 0; }
.ed-press-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--black); }
.ed-press-desc { font-size: var(--fs-sm); color: var(--g500); line-height: 1.55; }
.ed-press-link { display: inline-flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.ed-press-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--g50); }
.ed-press-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ed-press-card:hover .ed-press-media img { transform: scale(1.04); }
@media (max-width: 640px) {
  .ed-press-card { grid-template-columns: 1fr; gap: var(--sp-16); padding: var(--sp-20); }
  .ed-press-media { aspect-ratio: 16 / 9; max-height: 200px; order: -1; }
}

.ed-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-24); margin-bottom: var(--sp-40); }

/* Reveal (solo se oculta si GSAP toma el control) */
body.ed-anim [data-ed-reveal] { opacity: 0; transform: translateY(28px); }

@media (max-width: 1024px) {
  .ed-figures-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-editorial, .ed-editorial--rev { grid-template-columns: 1fr; }
  .ed-editorial--rev .ed-editorial-media { order: 0; }
  .ed-forest { grid-template-columns: 1fr; }
  .ed-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ed-postcards, .ed-principles { grid-template-columns: 1fr; }
  .ed-principles--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ed-metrics { grid-template-columns: 1fr; gap: var(--sp-24); }
}
@media (max-width: 720px) {
  .ed-hero { min-height: 640px; }
  .ed-hero-inner { grid-template-columns: 1fr; }
  .ed-figures-hero { grid-template-columns: 1fr; gap: var(--sp-32); }
  .ed-infocards--2 { grid-template-columns: 1fr; }
  .ed-section-head { display: block; }
  .ed-section-head .btn { margin-top: var(--sp-16); }
}
@media (max-width: 520px) {
  .ed-figures-grid { grid-template-columns: 1fr; }
  .ed-grid-4 { grid-template-columns: 1fr; }
}

/* ── Certificaciones — tarjetas que enmarcan los sellos (altura igual) ── */
.ed-cert-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-24); margin-top: clamp(40px, 5vw, 64px);
}
.ed-cert {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-16); min-height: 180px; padding: var(--sp-24); text-align: center;
  background: var(--white); border: 1px solid var(--g100); border-radius: var(--radius);
  transition: box-shadow .25s;
}
.ed-cert:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.ed-cert img { max-width: 100%; max-height: 64px; width: auto; object-fit: contain; }
.ed-cert span { font-size: var(--fs-xs); font-weight: 600; color: var(--g500); line-height: 1.4; }
@media (max-width: 900px) { .ed-cert-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ed-cert-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════
   TEXT PAGE — plantilla de página de texto / legal
   Reutilizable: aviso legal, privacidad, condiciones, cookies…
═══════════════════════════════════════════ */
.text-page { max-width: 820px; }
.page-texto .text-page { margin-inline: auto; }
/* Cabecera de texto: breadcrumb + h1 con el estilo del banner de categoría */
.text-page .cat-banner-bc { margin-bottom: var(--sp-16); }
.text-page .cat-banner-title { margin-bottom: 0; }
.text-page p.text-page-lead {
  font-size: var(--fs-lg); line-height: 1.65; color: var(--g500);
  margin-top: var(--sp-16);
}
.text-page-meta { font-size: var(--fs-sm); color: var(--g500); margin-top: var(--sp-24); margin-bottom: var(--sp-32); }
.text-page h2 {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em;
  color: var(--black); margin-top: var(--sp-48);
}
.text-page h2:first-child { margin-top: 0; }
.text-page h3 { font-size: var(--fs-xl); font-weight: 700; color: var(--black); margin-top: var(--sp-32); }
.text-page p,
.text-page li { font-size: var(--fs-lg); line-height: 1.75; color: var(--black); }
.text-page p { margin-top: var(--sp-16); }
.text-page ul { list-style: disc; padding-left: 1.3em; margin-top: var(--sp-16); }
.text-page li { margin-top: var(--sp-8); }
.text-page a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.text-page strong { font-weight: 700; }

.text-page-table-wrap { overflow-x: auto; margin-top: var(--sp-24); }
.text-page table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.text-page th,
.text-page td {
  border: 1px solid var(--g100); padding: var(--sp-12) var(--sp-16);
  text-align: left; vertical-align: top; line-height: 1.6; color: var(--black);
}
.text-page thead th { background: var(--g50); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g500); }

/* En mobile todos los TH bajan a 10px (mismo estilo, solo tamaño) */
@media (max-width: 720px) {
  .account-table th,
  .qo-table thead th,
  .text-page thead th { font-size: var(--fs-2xs); }
}

/* ═══════════════════════════════════════════
   CATÁLOGOS — listado (reutiliza .ed-postcard con portada vertical)
═══════════════════════════════════════════ */
.page-catalogos .ed-postcards { grid-template-columns: repeat(4, 1fr); gap: var(--sp-24); }
.page-catalogos .ed-postcard-media { aspect-ratio: 400 / 453; }
.page-catalogos .ed-postcard-media img { transform: none; }
.page-catalogos .ed-postcard:hover .ed-postcard-media img { transform: scale(1.04); }
.page-catalogos .ed-postcard-body { align-items: center; text-align: center; gap: var(--sp-8); padding: var(--sp-16); }
.page-catalogos .ed-postcard-body h3 { font-size: var(--fs-md); }
.cat-banner-cta { margin-top: var(--sp-24); }
.cat-banner-cta .btn svg { margin-right: var(--sp-8); }
@media (max-width: 980px) { .page-catalogos .ed-postcards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .page-catalogos .ed-postcards { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════
   CATÁLOGO — detalle: visualizador embebido (FlipHTML5)
   El stage ocupa el alto restante del viewport tras header + announcement,
   de modo que el catálogo se ve entero sin scroll en cualquier pantalla.
═══════════════════════════════════════════ */
.cd-stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  height: calc(100svh - 172px - 32px); /* header desktop (172) + announcement (32) */
  padding-block: var(--sp-24); /* solo vertical; el padding-inline lo aporta .wrap */
}
.cd-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
  flex-shrink: 0;
}
.cd-bar-copy { min-width: 0; }
.cd-bar-copy .cat-banner-bc { margin-bottom: var(--sp-8); }
.cd-bar-actions { display: flex; gap: var(--sp-12); flex-shrink: 0; }
.cd-bar-actions .btn svg { margin-right: var(--sp-8); }

.cd-viewer {
  position: relative; flex: 1; min-height: 0; width: 100%;
  background: var(--g50);
  border: 1px solid var(--g100); border-radius: var(--radius);
  overflow: hidden;
}
.cd-viewer iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Header móvil (≤1200px) = 64px; aparece además la breadcrumb-strip (~40px). */
@media (max-width: 1200px) {
  .cd-stage { height: calc(100svh - 64px - 32px - 40px); padding-block: var(--sp-16); }
}
@media (max-width: 720px) {
  .cd-bar { flex-direction: column; align-items: stretch; gap: var(--sp-12); }
  .cd-bar-actions { flex-direction: column; }
  .cd-bar-actions .btn { justify-content: center; }
}