/* ==========================================================================
   AP BEAUTY — HOME (andreaapbeauty)
   Reskin de la plantilla comodex-home. Identidad "Controlled Presence":
   negro · blanco · gris dominantes + rojo complementario estratégico (≤10%).
   Tipografía: Playfair Display (display) + Montserrat (cuerpo/UI). Mobile-first.
   Estructura y mecánicas se heredan intactas; aquí solo se reviste.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* DOMINANTE — negro · blanco · gris */
  --color-ink:        #0A0A0A;   /* negro profundo: texto + botones comercio */
  --color-ink-soft:   #1A1A1A;   /* hover de negros */
  --color-bg:         #FFFFFF;   /* blanco puro: precisión / aire */
  --color-bg-alt:     #F4F4F4;   /* gris claro: secciones editoriales */
  --color-gray:       #8A8A8A;   /* gris medio: líneas, meta, decorativo (NO texto fino) */
  --color-gray-text:  #5A5A5A;   /* gris oscuro AA: cuerpo secundario y eyebrows */
  --color-charcoal:   #1A1A1A;   /* casi-negro: capa editorial (footer) */
  --color-border:     #E5E5E5;

  /* COMPLEMENTARIO ESTRATÉGICO — rojo ≤10%, solo donde manda la mirada */
  --color-red:        #C8102E;
  --color-red-hover:  #A50D24;

  /* FUNCIONALES (sin cambio) */
  --color-discount:   #E11D48;
  --color-success:    #16A34A;
  --color-star:       #F5A623;

  /* Alias heredados del sistema (mapeados a la paleta AP Beauty) */
  --blanco:     var(--color-bg);
  --fondo-alt:  var(--color-bg-alt);
  --negro:      var(--color-ink);
  --gris-texto: var(--color-gray-text);
  --gris-muted: var(--color-gray);
  --borde:      var(--color-border);
  --dorado:     var(--color-star);
  --exito:      var(--color-success);
  --error:      var(--color-discount);

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font:         var(--font-body);   /* alias heredado (botones, labels, etc.) */

  /* Ritmo vertical único + grid maestro (heredados SIN cambios) */
  --section-pad-y: clamp(40px, 4.5vw, 64px);
  --container-max: 1600px;
  --gutter: clamp(16px, 3vw, 40px);
  --promo-h: 38px;

  /* Radios + sombras */
  --radius-card: 14px;
  --radius-pill: 50px;
  --radius-soft: 8px;
  --shadow-card: 0 8px 24px rgba(0,0,0,0.06);
  --shadow-hover: 0 12px 32px rgba(0,0,0,0.10);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; max-width: 100%; }
/* overflow-x: clip (no `hidden`): corta el desbordamiento horizontal sin crear
   contenedor de scroll → no rompe el `position: sticky` del header (AB-C9). */
html, body { margin: 0; padding: 0; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--negro); background: var(--blanco); line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }

/* Contenedor estándar — grid maestro */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Ritmo vertical ÚNICO de secciones (hero y proof-banner se excluyen → padding-block:0). */
section { padding-block: var(--section-pad-y); }

/* --------------------------------------------------------------------------
   Botonería — dos sistemas, NO mezclar
   -------------------------------------------------------------------------- */
/* === EDITORIAL (hero, banners, spotlight) === */
.btn-editorial {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 36px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  border-radius: var(--radius-soft);
  cursor: pointer; text-decoration: none; transition: all .2s ease;
}
/* Solid = ÚNICO CTA rojo de la marca (solo en el hero: "DESCUBRIR"). El rojo vive aquí. */
.btn-editorial--solid { background: var(--color-red); color: #fff; border: none; }
.btn-editorial--solid:hover { background: var(--color-red-hover); }
.btn-editorial--ghost { background: transparent; color: #fff; border: 1.5px solid #fff; }
.btn-editorial--ghost:hover { background: #fff; color: var(--negro); }
.btn-editorial--dark { background: transparent; color: var(--negro); border: 1.5px solid var(--negro); }
.btn-editorial--dark:hover { background: var(--negro); color: #fff; }

/* === COMERCIO — retirado: `.btn-comercio` quedó a 0 usos tras eliminar
   spotlight/complementos/bundles (AB-F3 + AB-F5). Reañadir si vuelve un CTA de venta. === */

/* Eyebrow / título de sección */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--color-gray-text); margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px;
  color: var(--negro); margin: 0 0 12px;
}
@media (max-width: 768px) { .section-title { font-size: 26px; } }

/* --------------------------------------------------------------------------
   0 · Promo bar
   -------------------------------------------------------------------------- */
.promo-bar { background: #fff; color: var(--color-ink); text-align: center; padding: 9px 12px; font-size: 13px; font-weight: 500; letter-spacing: .3px; border-bottom: 1px solid var(--color-border); }
.promo-bar p { margin: 0; }
@media (max-width: 600px) { .promo-bar { font-size: 11.5px; } }

/* --------------------------------------------------------------------------
   1 · Header
   -------------------------------------------------------------------------- */
/* Header sólido blanco sticky (sin overlay/stuck — AB-C8). Grid 3 zonas, logo centrado (Gucci). */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--borde); }

/* Compensa el header sticky al saltar a un anchor (#historia desde nav/menú/hero, #destacados) para que el título no quede tapado */
#historia, #destacados { scroll-margin-top: 100px; }
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(16px, 2vw, 40px);
  padding: clamp(14px, 1.6vw, 22px) var(--gutter);
  background: #fff;
}
.header-left { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); justify-self: start; }
.header-right { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); justify-self: end; }
.header-logo { justify-self: center; display: block; }
.header-logo img { height: clamp(34px, 3vw, 46px); width: auto; display: block; }

.nav-cluster { display: flex; gap: clamp(16px, 1.6vw, 28px); }
.nav-link {
  font: 500 .82rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none; transition: color .2s;
}
.nav-link:hover { color: var(--color-red); }   /* ÚNICO rojo del header, solo en hover */

.header-icon { background: none; border: 0; color: var(--color-ink); cursor: pointer; display: inline-flex; padding: 4px; }
.header-cart { position: relative; text-decoration: none; }
.cart-count { position: absolute; top: -4px; right: -6px; background: var(--color-ink); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.menu-toggle { display: none; background: none; border: 0; color: var(--color-ink); cursor: pointer; padding: 4px; }

/* Buscador desplegable (conservado) */
.search-panel { border-top: 1px solid var(--borde); padding: 14px 0; background: #fff; }
.search-panel input { width: 100%; padding: 12px 16px; font-size: 15px; font-family: var(--font-body); border: 1px solid var(--borde); border-radius: var(--radius-soft); }
.search-panel[hidden] { display: none; }

/* Menú móvil — panel deslizante desde la derecha + backdrop (JS togglea .is-open · contrato AB-J4) */
.menu-backdrop {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(10, 10, 10, .45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.menu-backdrop[hidden] { display: none; }
.menu-backdrop.is-open { opacity: 1; visibility: visible; }
.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
  width: min(86vw, 380px);
  background: #fff;
  display: flex; flex-direction: column;
  padding: clamp(20px, 4vw, 32px);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.menu-panel.is-open { transform: translateX(0); }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(24px, 5vw, 40px); }
.menu-top img { height: 36px; width: auto; display: block; }
.menu-close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-ink); color: #fff; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-primary { display: flex; flex-direction: column; }
.menu-primary a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--color-ink); text-decoration: none;
  padding: clamp(12px, 2vw, 16px) 0; border-bottom: 1px solid var(--fondo-alt);
}
.menu-primary a::after { content: "›"; color: var(--color-gray); font-weight: 400; }
.menu-secondary { margin-top: auto; padding-top: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.menu-secondary a { font: 500 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texto); text-decoration: none; transition: color .2s; }
.menu-secondary a:hover { color: var(--color-ink); }

/* Móvil ≤900px: barra [☰ · logo · 🛒]; navs desktop y "Buscar" pasan al panel */
@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: auto auto auto; }
  .header-left .nav-cluster, .header-right .nav-cluster { display: none; }
  #btn-search { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   2 · Hero — simplificado a petición directa de Paul: solo eyebrow (nombre/
   identidad) + h1 (slogan) + 1 CTA. Se retiró `.hero-sub` (párrafo
   descriptivo, huérfano ahora — ver más abajo) y el botón rojo sólido
   (`.btn-editorial--solid`, era el único CTA rojo de la marca, el comentario
   viejo de §90 sigue documentando eso porque la clase se sigue usando en
   otras secciones, solo dejó de usarse AQUÍ). La foto sigue siendo el fondo
   real de la sección completa (`.hero-media` absolute inset:0, sin cambios).

   `.hero-cta` (div contenedor) RETIRADO (AB-C16, petición directa de Paul) —
   con un solo botón ya no aportaba nada envolverlo en un div propio, su
   contenido (el `<a>`) pasa a ser hijo directo de `.container`, mismo nivel
   que eyebrow/h1. El botón transparente sigue flotando directo sobre la
   foto, nunca un bloque sólido — eso no cambió, solo se aplanó el wrapper.

   `.hero-overlay` (div wrapper) RETIRADO del HTML por front (AB-F18, petición
   directa de Paul) — en móvil se volvía `position:static;background:var(--negro)`
   (ver el `@media` de abajo, versión vieja), convirtiéndose en un 2º bloque
   apilado debajo de la foto en vez de superpuesto: la sección se leía como
   imagen+franja-negra-separada, no como una sola foto de fondo. `.container`
   pasa a ser hijo directo de `.hero`, junto a `.hero-media`/`.hero-scrim`.
   Retargeteo (mi parte, AB-C17): el gradiente horizontal de legibilidad NO se
   movió a `.hero>.container` — `.container` es una clase genérica con
   `width:100%;max-width:var(--container-max);margin-inline:auto` (línea 73),
   si el gradiente viviera ahí quedaría acotado a ese `max-width` y dejaría de
   cubrir el ancho completo de la sección. Se movió a `.hero::before` (full-
   bleed, mismo `inset:0` que la foto) — `.hero>.container` ahora SOLO
   resuelve el centrado/ancho del contenido de texto (rol que ya tenía antes,
   sin cambios) + el centrado vertical (`height:100%;display:flex;align-
   items:center`, antes lo hacía `.hero-overlay`). */
.hero { position: relative; height: 82vh; min-height: 540px; max-height: 780px; overflow: hidden; padding-block: 0; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* `.hero-media picture` (AB-C16) — mismo `<picture>` de art-direction que ya
   usa Makeup Andrea (`<source media>` móvil + `<img>` fallback desktop). No
   cambia el mecanismo de tamaño: el `<img>` sigue siendo el que lleva
   `position:absolute;inset:0` de la regla de arriba (selector por etiqueta,
   alcanza el `<img>` sin importar que ahora esté un nivel más adentro,
   dentro de `<picture>`) — este `display:block` es solo para que el propio
   `<picture>` (inline por defecto) no interfiera en el flujo/tamaño. */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0) 75%); }
/* flex-direction:column (antes implícito: `.hero-overlay` era el flex de UN
   solo hijo -`.container`-, así que row/column no importaba ahí; los hijos
   reales -eyebrow/h1/botón- fluían en bloque normal DENTRO de `.container`.
   Ahora que `.container` mismo es el flex container de esos 3 elementos,
   hace falta `column` explícito o quedan en fila). */
/* Contenido anclado al TERCIO INFERIOR (AB-C18) — esta base rige MÓVIL.
   AB-C20 había centrado esto verticalmente (`justify-content:center`, sin
   `padding-bottom`) pensando que el pedido era universal, pero Paul aclaró
   (AB-C21) que el móvil estaba perfecto tal cual y NO debía tocarse — el
   centrado vertical de AB-C20 quedó movido exclusivamente al override de
   DESKTOP (`@media(min-width:769px)` de abajo), esta base vuelve a los
   valores originales de AB-C18 (`flex-end`+`padding-bottom`).
   `align-items:center`+`text-align:center` centra horizontalmente (cubre
   también el caso de que el h1 rompa a 2 líneas de distinto ancho —
   `align-items` solo centra la CAJA del h1, no el texto dentro si hay más
   de una línea) — esto SÍ sigue rigiendo en ambos breakpoints, el override
   de desktop solo toca el eje horizontal (izquierda) desde AB-C19. */
.hero > .container {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center;
  padding-bottom: clamp(48px, 8vw, 96px);
  color: #fff;
}
.hero-eyebrow { display: inline-block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; opacity: .9; }
.hero h1 { font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 1.04; letter-spacing: -0.5px; max-width: 640px; margin: 0 0 18px; }
/* Glow ambiental (petición directa de Paul) — mismo mecanismo que el botón
   RESERVAR de Andrea Makeup (2 pseudo-elementos con anillo que escala y se
   desvanece en loop, desfasados entre sí para que nunca se vea vacío), pero
   en blanco/translúcido en vez de relleno de color: este botón sigue siendo
   `.btn-editorial--ghost` (fondo transparente, texto blanco, borde blanco)
   SIN ningún cambio de esos 3 valores — el glow es luz alrededor, no un
   relleno. Scoped a `.hero-cta__btn` (no a `.btn-editorial--ghost` global)
   para no heredar el pulso en otros ghost buttons del sitio (confirmación,
   hero-novias/hero-clases si vuelven a usarse, etc.). */
.hero-cta__btn {
  position: relative;
  box-shadow: 0 0 20px 2px rgba(255,255,255,.35), 0 0 46px 12px rgba(255,255,255,.18);
}
.hero-cta__btn::before, .hero-cta__btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1.5px solid rgba(255,255,255,.75);
  filter: blur(1.5px);
  animation: hero-cta-pulse-ring 2.8s ease-out infinite;
  pointer-events: none;
}
.hero-cta__btn::after { animation-delay: 1.4s; }
@keyframes hero-cta-pulse-ring {
  0%   { transform: scale(1);   opacity: .35; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta__btn::before, .hero-cta__btn::after { animation: none; display: none; }
}

/* Desktop/laptop — 2 pedidos apilados en el mismo override. (AB-C19) el
   contenido vive en el TERCIO IZQUIERDO — la foto deja espacio real sin
   cubrir de ese lado (el rostro/producto ocupan el centro-derecha del
   encuadre): `align-items:flex-start;text-align:left`. `.hero h1{max-width:
   640px}` (ya existente) + el `padding-inline` heredado de `.container`
   bastan para confinar el bloque al tercio izquierdo, no hizo falta un
   ancho nuevo. (AB-C20/AB-C21) el eje VERTICAL se centra SOLO acá — Paul
   pidió centrar el bloque "de arriba a abajo" pensando en desktop, pero el
   móvil (base de arriba) estaba perfecto tal cual y no debía tocarse; el
   `justify-content:center` (sin `padding-bottom`, no aplica con center) se
   movió del rule base a este `@media` para que quede scoped solo a
   escritorio. min-width:769px, justo arriba del punto de quiebre de 768px
   ya usado por el resto del hero, para no solaparse con la regla móvil de
   abajo. */
@media (min-width: 769px) {
  .hero > .container { justify-content: center; padding-bottom: 0; align-items: flex-start; text-align: left; }
}

@media (max-width: 768px) {
  /* `.hero-media`/`.hero-overlay` YA NO se sacan de `position:absolute` acá
     (versión vieja, causaba el apilado que Paul pidió eliminar — ver nota
     junto a `.hero` arriba) — desktop y móvil comparten ahora el mismo
     mecanismo de superposición, la foto siempre es el fondo real completo.
     `aspect-ratio:9/16` (en vez de `height:64vw` fijo) — la foto móvil
     (`hero-editorial-movil.webp`) es 9:16 real; con el aspect-ratio del
     contenedor igual al de la imagen, `object-fit:cover` no recorta nada
     (encaja exacto), evitando el "se ve rota" que advirtió Paul. Reemplaza
     `min-height`/`max-height` de escritorio en vez de sumarse a ellos. */
  .hero { height: auto; aspect-ratio: 9 / 16; min-height: 0; max-height: none; }
  .hero h1 { font-size: 38px; }
  .hero-cta__btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   3 · Destacados (cards cuadradas estáticas) + arrows compartidas
   AB-F3: el carrusel marquee se eliminó. Grid dentro del .container.
   .rail-head / .rail-explore / .rail-arrow se conservan: los reusa la categoría
   → los overrides de color van SCOPEADOS a .product-rail, nunca globales.
   AB-C26 (petición Paul, vía front): la sección pasa a OSCURA con la paleta
   ya definida (sin color nuevo) y el grid de 3 → 2 cards (AB-F33).
   -------------------------------------------------------------------------- */
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(20px, 2vw, 32px); gap: 16px; flex-wrap: wrap; }
.rail-arrows { display: flex; align-items: center; gap: 12px; }
.rail-explore { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--negro); text-decoration: none; }
.rail-explore:hover { color: var(--color-gray-text); }
.rail-arrow { width: 38px; height: 38px; border: 1px solid var(--borde); background: #fff; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--negro); transition: all .15s; }
.rail-arrow:hover { border-color: var(--color-ink); color: var(--color-ink); }

/* AB-C26 · Sección OSCURA. Fondo negro de la paleta (`--color-ink`). El vecino
   anterior (hero) es imagen a sangre con scrims —no una losa de color plano—
   así que no cuenta como "2 oscuras encadenadas"; el siguiente (.spotlight) es
   `--color-bg-alt` claro → el ritmo claro/oscuro se respeta. Texto invertido a
   claro sólo dentro de .product-rail (los mismos selectores en la categoría
   siguen en su versión clara). */
.product-rail { background: var(--color-ink); color: #fff; }
.product-rail .section-title { color: #fff; }
.product-rail .rail-explore { color: #fff; }
.product-rail .rail-explore:hover { color: rgba(255, 255, 255, 0.6); }

/* Grid de destacados: 2 cards. `minmax(0, 440px)` + `justify-content: start`
   las mantiene a tamaño editorial alineadas bajo el .rail-head (no se agigantan
   en desktop ancho como pasaría con `1fr`) y deja que encojan en viewports
   medianos. */
.product-rail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: start; gap: var(--gutter); }
.rail-card { position: relative; display: block; text-decoration: none; color: #fff; }
.rail-card-img { position: relative; background: var(--color-ink-soft); border-radius: 12px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.rail-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.rail-card:hover .rail-card-img img { transform: scale(1.04); }
.rail-card-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.rail-card-meta { font-size: 13px; color: rgba(255, 255, 255, 0.66); margin: 0 0 6px; }
.rail-card-price { font-size: 16px; font-weight: 800; margin: 0; color: #fff; }

/* AB-C27 · Botón "Ver más" (AB-F34). `.btn-editorial--ghost` global ya es blanco
   con borde blanco → legible sobre el rail oscuro y su hover (fondo blanco/texto
   negro) también; aquí sólo layout: separarlo del precio + variante compacta (el
   padding 15/36 de `.btn-editorial` es de CTA grande). El `::after inset:0` es un
   "stretched link": devuelve TODA la `.rail-card` a clicable como antes de que
   front cambiara el `<a>` envolvente por `<article>` (AB-F34) — el `<a>` sigue
   viéndose como botón, el pseudo-elemento cubre la card. */
.rail-card-cta { margin-top: 14px; padding: 11px 24px; font-size: 12px; }
.rail-card-cta::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 768px) {
  .product-rail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-explore { display: none; }
}
@media (max-width: 520px) { .product-rail__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   3B · STORYTELLING (sección NUEVA · §3 del brief)
   Full-bleed editorial: losa imagen a sangre (izq) + texto alineado al borde del
   container (der), sobre gris. Pull-quote Playfair italic con único trazo rojo (.rule).
   HTML realineado por front (AB-C2): eyebrow <p>, h2 sin .section-title, pull-quote
   dentro de .story-text como <blockquote> con <span class="rule"> + texto plano.
   -------------------------------------------------------------------------- */
/* Sección OSCURA editorial: el retrato se funde al fondo negro por su borde derecho
   (mask-image) y el texto va en claro. Respaldo `#0E0E0E` hasta que AB-A1 entregue
   `galeria/storytelling/story-bg.jpg` (fondo Grok que clona la luz del retrato). */
.storytelling {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);          /* full-bleed, rompe márgenes */
  background: #0E0E0E;
  color: #fff;
  overflow: hidden;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(520px, 58vw, 760px);
}
/* IMAGEN — losa a sangre por la izquierda; se funde al fondo oscuro por la derecha */
.story-media { position: relative; overflow: hidden; }
.story-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;   /* retrato vertical, sujeto centrado: cara+torso visibles */
  display: block;
  /* funde el borde derecho al fondo oscuro; corte a 65% protege cara+traje (punto focal) */
  -webkit-mask-image: linear-gradient(to right, #000 65%, transparent 100%);
          mask-image: linear-gradient(to right, #000 65%, transparent 100%);
}
/* TEXTO — alineado al borde del .container (der), en claro sobre el fondo oscuro */
.story-text {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(14px, 1.8vw, 24px);
  max-width: 620px;
  padding-block: clamp(40px, 5vw, 72px);
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: max(var(--gutter), calc(50vw - var(--container-max) / 2));
}
.story-text .eyebrow {
  display: block; margin: 0;                  /* anula display:inline-block/margin de la global */
  font: 600 .72rem/1 var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.story-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15; color: #fff; margin: 0;
}
.story-text p {
  font: 400 clamp(.95rem, 1.05vw, 1.05rem)/1.65 var(--font-body);
  color: rgba(255,255,255,.78); margin: 0; max-width: 46ch;
}
/* PULLQUOTE — columna derecha, bajo la narrativa */
.story-pullquote {
  margin: clamp(10px, 1.5vw, 18px) 0 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.2;
  color: #fff;
}
.story-pullquote .rule {
  display: block; width: 44px; height: 2px;
  background: var(--color-red);               /* único rojo estratégico de la sección */
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
/* MÓVIL — apila: imagen a sangre arriba (sin mask lateral), texto debajo */
@media (max-width: 768px) {
  .story-grid { grid-template-columns: 1fr; min-height: 0; }
  .story-media { min-height: clamp(420px, 95vw, 560px); }
  .story-media img { -webkit-mask-image: none; mask-image: none; }
  .story-text {
    max-width: none;
    padding-inline: var(--gutter);
    padding-block: clamp(32px, 8vw, 56px);
  }
}

/* --------------------------------------------------------------------------
   4 · Compra por categoría (cards grandes verticales, 2 visibles · sin peek)
   -------------------------------------------------------------------------- */
.category-rail { padding-bottom: var(--section-pad-y); }
.category-rail .rail-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.5px; color: var(--negro); margin: 0; }
.category-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.category-track::-webkit-scrollbar { display: none; }
.category-card { flex: 0 0 calc(50% - 12px); scroll-snap-align: start; position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; text-decoration: none; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover img { transform: scale(1.05); }
.category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.65)); }
.category-name { position: absolute; left: 24px; bottom: 24px; z-index: 1; color: #fff; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; }
@media (max-width: 768px) {
  .category-rail .rail-head h2 { font-size: 26px; }
  .category-card { flex: 0 0 calc(85% - 12px); aspect-ratio: 3/4; }
}

/* --------------------------------------------------------------------------
   3B · Spotlight — "el héroe" del catálogo (AB-C6 · split editorial CLARO)
   Mismo lenguaje que storytelling pero en CLARO: su vecino (storytelling) es
   oscuro → este NO puede serlo (sin oscuros encadenados). El rojo de la sección
   es el PRODUCTO (render del labial) → el CTA va NEGRO, no rojo (el único CTA
   rojo de la página es "DESCUBRIR" del hero). Imagen a la DERECHA: alterna el
   ritmo respecto a storytelling (imagen izquierda).
   -------------------------------------------------------------------------- */
.spotlight {
  width: 100vw; margin-inline: calc(50% - 50vw);   /* full-bleed */
  background: var(--color-bg-alt);                  /* gris claro editorial */
  overflow: hidden;
}
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(440px, 48vw, 640px);
}
/* IMAGEN — losa a sangre por la DERECHA */
.spotlight-media { position: relative; order: 2; overflow: hidden; }
.spotlight-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* TEXTO — alineado al borde IZQ del .container.
   Jerarquía por márgenes POR ELEMENTO (no gap uniforme): ancla la columna y
   evita el "todo del mismo peso". Columna estrecha (max-width:460) = editorial. */
.spotlight-text {
  order: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 460px;
  padding-block: clamp(40px, 5vw, 72px);
  padding-right: clamp(24px, 3vw, 48px);
  padding-left: max(var(--gutter), calc(50vw - var(--container-max) / 2));
}
/* Eyebrow con filete rojo delante — ÚNICO acento de marca de la sección.
   (eyebrow en --color-gray-text #5A5A5A, no --color-gray #8A8A8A: AA en texto pequeño, estándar AB-C1.) */
.spotlight-text .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 .72rem/1 var(--font-body);
  letter-spacing: .24em; text-transform: uppercase; color: var(--gris-texto);
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.spotlight-text .eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--color-red);
}
.spotlight-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.1; color: var(--negro);
  margin: 0 0 clamp(16px, 1.8vw, 22px);
}
/* Descripción — gris SÓLIDO #4A4A4A (sin desvaído), líneas cortas en columna estrecha */
.spotlight-line {
  font: 400 clamp(1rem, 1.1vw, 1.1rem)/1.7 var(--font-body);
  color: #4A4A4A;
  margin: 0 0 clamp(14px, 1.6vw, 20px); max-width: 34ch;   /* margen reducido: la quote va justo debajo */
}
/* Gancho — frase corta en Playfair itálica, entre descripción y precio (AB-C7 EXTRA).
   Sin punto final (lo controla el HTML). NO es acento rojo: editorial en negro. */
.spotlight-text .spotlight-quote {
  font: italic 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.35 var(--font-display);
  color: var(--negro);
  margin: 0 0 clamp(24px, 2.8vw, 34px); max-width: 28ch;
}
/* Precio en Playfair (tipografía editorial), separado del botón */
.spotlight-price {
  display: block;
  font: 600 clamp(1.5rem, 1.8vw, 1.85rem)/1 var(--font-display);
  color: var(--negro); margin: 0 0 clamp(20px, 2.4vw, 28px);
}
/* Acciones — wrapper de los 2 botones (Añadir + "Ver todos los modelos"), AB-C23.
   El align-self/margin-top vivían en `.spotlight-text .btn-editorial` cuando había
   un solo botón hijo directo; con el wrapper se mueven aquí. */
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 14px; align-self: flex-start; margin-top: 4px; }
/* la columna de texto es estrecha (max-width:460) → los 2 botones se apilan;
   sin nowrap el label largo ("Ver todos los modelos") parte en 2 líneas. */
.spotlight-actions .btn-editorial { white-space: nowrap; }
/* CTA NEGRO — el único acento rojo de la sección es el filete del eyebrow; el
   único CTA rojo de la página es "DESCUBRIR" del hero (regla rojo ≤10%/escasez). */
.spotlight .btn-editorial--solid { background: var(--negro); }
.spotlight .btn-editorial--solid:hover { background: var(--color-ink-soft); }
/* `.btn-editorial--ghost` global es blanco (texto+borde, para hero oscuro); sobre
   `.spotlight { background: var(--color-bg-alt) }` es casi invisible → variante
   oscura scopeada (mismo fix que `.confirmation` / `.hero-novias__cta`). */
.spotlight-actions .btn-editorial--ghost { color: var(--negro); border-color: var(--negro); }
.spotlight-actions .btn-editorial--ghost:hover { background: var(--negro); color: #fff; }
/* MÓVIL — apila: imagen arriba, texto debajo */
@media (max-width: 768px) {
  .spotlight-grid { grid-template-columns: 1fr; min-height: 0; }
  .spotlight-media { order: 1; min-height: clamp(360px, 80vw, 480px); }
  .spotlight-text {
    order: 2; max-width: none;
    padding-inline: var(--gutter);
    padding-block: clamp(32px, 8vw, 56px);
  }
}

/* 8 · Statement — sección ELIMINADA del HTML (AB-F8/AB-C6). CSS borrado
   (`.statement-inner/-headline/-body/-logos`); pagos viven solo en el footer. */

/* --------------------------------------------------------------------------
   9 · Banner social proof (AB-C5 · antes/después en 2 celdas)
   Contrato: `.proof-banner__media` (grid 2 celdas con background-image:
   .pb-cell--before / .pb-cell--after, hairline negro entre ambas) +
   `.proof-banner__caption` (franja CLARA debajo: estrellas dorado + claim).
   En móvil las celdas se apilan. background-image lo pone el CSS (no inline).
   Caption CLARO (AB-C6): el proof va entre storytelling(oscuro) y why(oscuro)
   → su franja blanca da el respiro que evita encadenar dos secciones oscuras.
   -------------------------------------------------------------------------- */
.proof-banner {
  width: 100vw; margin-inline: calc(50% - 50vw);   /* sección a sangre */
  padding-block: 0;
}
.proof-banner__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;                                   /* hairline negro separador antes/después */
  min-height: clamp(300px, 26vw, 380px);
  background: var(--color-ink);
}
.pb-cell {
  position: relative; margin: 0;
  background-size: cover;
  background-position: center 42%;            /* afinar por celda si corta mal */
}
.pb-cell--before { background-image: url('social-proof/antes.jpg'); }
.pb-cell--after  { background-image: url('social-proof/despues.jpg'); }
.pb-cell figcaption {
  position: absolute; left: 0; bottom: 0;
  font: 600 .7rem/1 var(--font-body);
  letter-spacing: .18em; text-transform: uppercase;   /* "Antes"/"Después" → ANTES/DESPUÉS */
  color: #fff; background: rgba(10, 10, 10, .62);
  padding: 8px 12px;
}
.proof-banner__caption {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; text-align: center;
  background: var(--color-bg); color: var(--color-ink);
  padding: clamp(20px, 3vw, 40px) var(--gutter);
}
.proof-banner__caption .stars { color: var(--dorado); letter-spacing: 2px; font-size: 22px; }
.proof-banner__caption p {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.2;
  color: var(--color-ink);
}
@media (max-width: 768px) {
  .proof-banner__media { grid-template-columns: 1fr; }   /* apiladas en móvil */
}

/* --------------------------------------------------------------------------
   10 · Dos cards interactivas
   -------------------------------------------------------------------------- */
.dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dual-card { position: relative; aspect-ratio: 3/2; border-radius: var(--radius-card); overflow: hidden; text-decoration: none; display: flex; align-items: flex-end; }
.dual-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dual-card:hover img { transform: scale(1.05); }
.dual-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7) 100%); }
.dual-card-text { position: relative; z-index: 1; padding: 28px; color: #fff; }
.dual-card-text h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.dual-card-text p { font-size: 15px; margin: 0 0 16px; opacity: .95; max-width: 320px; }
@media (max-width: 768px) { .dual-grid { grid-template-columns: 1fr; } .dual-card { aspect-ratio: 4/3; } }

/* --------------------------------------------------------------------------
   11 · Por qué AP Beauty  (sección oscura #1 — stats con count-up)
   -------------------------------------------------------------------------- */
.why { background: var(--color-ink); text-align: center; width: 100vw; margin-inline: calc(50% - 50vw); }
.why > .container { margin-inline: auto; padding-inline: var(--gutter); }
.why .eyebrow { color: #FFFFFF; opacity: 0.6; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; }
.why h2 { color: #FFFFFF; margin-block: 8px clamp(28px, 3vw, 48px); }
.why-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
.why-stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 16px; border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  opacity: 0; transform: translateY(16px);   /* estado inicial; JS añade .revealed */
}
.why-stat.revealed { opacity: 1; transform: translateY(0); }
.why-stat:hover { transform: translateY(-4px); background: rgba(255,255,255,0.04); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.why-num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 46px); font-weight: 700; color: #FFFFFF; line-height: 1; }
.why-label { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.why-sub { font-size: 13px; color: rgba(255,255,255,0.6); max-width: 22ch; line-height: 1.4; }
@media (max-width: 768px) { .why-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .why-stat { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   12 · @apbeauty Instagram  (sin gradiente IG · §6.2)
   -------------------------------------------------------------------------- */
.insta { text-align: center; }
.insta-handle { display: inline-block; font-family: var(--font-display); font-size: 36px; font-weight: 900; margin: 0 0 10px; color: var(--color-red); }
.insta-text { font-size: 16px; color: var(--gris-texto); max-width: 480px; margin: 0 auto 24px; }
.insta-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.insta-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: var(--color-ink);
  padding: 12px 22px; border-radius: var(--radius-pill);
  transition: background .2s ease, transform .2s ease;
}
.insta-link:hover { background: var(--color-ink-soft); transform: translateY(-1px); }
.insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.insta-cell { aspect-ratio: 1/1; border-radius: var(--radius-soft); overflow: hidden; }
.insta-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.insta-cell:hover img { transform: scale(1.08); }
@media (max-width: 768px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   13 · Newsletter  (sección oscura #2 — separada de .why por .insta)
   -------------------------------------------------------------------------- */
.newsletter { background: var(--color-ink); }
.newsletter .container { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.newsletter h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: #fff; margin: 0; }
.newsletter p { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 420px; margin: 0; }
.newsletter__form { display: flex; width: 100%; max-width: 440px; }
.newsletter__input { flex: 1; min-width: 0; padding: 14px 18px; border: none; border-radius: var(--radius-pill) 0 0 var(--radius-pill); font-family: var(--font-body); font-size: 15px; outline: none; }
.newsletter__btn { padding: 14px 22px; background: #fff; color: var(--color-ink); border: none; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; font-family: var(--font-body); font-weight: 700; letter-spacing: .5px; cursor: pointer; white-space: nowrap; transition: background .2s; }
.newsletter__btn:hover { background: var(--color-bg-alt); }
.newsletter small { font-size: 12px; color: rgba(255,255,255,0.55); }

/* --------------------------------------------------------------------------
   14 · Footer  (charcoal en la banda principal — capa editorial sobre el ink)
   -------------------------------------------------------------------------- */
.site-footer { padding: 0; }
.site-footer__main { background: var(--color-charcoal); padding: 64px 0; }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.site-footer__grid > * { min-width: 0; }
.footer-col__brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-col__brand-logo img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.footer-col__brand-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; }
.footer-col__desc { font-size: 14px; color: var(--gris-muted); line-height: 1.6; margin-bottom: 20px; }
.footer-social { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; }
.footer-social a { color: var(--gris-muted); transition: color .15s; display: inline-flex; }
.footer-social a:hover { color: #fff; }
.footer-social__icon { width: 20px; height: 20px; display: block; transition: opacity .15s; }
.footer-social a:hover .footer-social__icon { opacity: 0.7; }
.footer-col__title { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }
.footer-col__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col__links a { font-size: 14px; color: var(--gris-muted); text-decoration: none; transition: color .15s; }
.footer-col__links a:hover { color: #fff; }
.footer-col__contact-email { font-size: 14px; color: #cbcbcb; text-decoration: underline; display: block; overflow-wrap: anywhere; margin-bottom: 8px; }
.footer-col__contact-email:hover { color: #fff; }
.footer-col__contact-hours { font-size: 14px; color: var(--gris-muted); margin-bottom: 20px; }
.payment-img { max-width: 200px; width: 100%; margin-top: 16px; }
.site-footer__bottom { background: #111; padding: 20px 0; }
.site-footer__bottom .container { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.site-footer__copy,
.site-footer__made { font-size: 12px; color: #6B6B6B; letter-spacing: .3px; }

/* Móvil/tablet (<1024px): marca a ancho completo arriba; Tienda a la izquierda a toda la altura;
   Legal y Contacto apilados a la derecha (Legal arriba, Contacto debajo) */
@media (max-width: 1023px) {
  .site-footer__grid {
    grid-template-areas:
      "brand brand"
      "tienda legal"
      "tienda contacto";
  }
  .footer-col--brand { grid-area: brand; }
  .site-footer__grid nav.footer-col[aria-label="Tienda"] { grid-area: tienda; }
  .site-footer__grid nav.footer-col[aria-label="Legal"] { grid-area: legal; }
  .footer-col--contact { grid-area: contacto; }
}

@media (min-width: 600px) {
  .site-footer__grid { gap: 40px; }
}
@media (min-width: 768px) {
  .site-footer__bottom .container { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

/* --------------------------------------------------------------------------
   14 · CATÁLOGO (catalogo.html · AB-C10)
   Listado editorial apilado: 1 SKU = 1 item full-bleed, lado e (fondo claro/
   charcoal) alternan por :nth-child(even) — NUNCA en HTML. Degrada a 1 item
   (vista filtrada) sin verse vacío: queda como spotlight. Reutiliza el lenguaje
   del spotlight (eyebrow con filete rojo, título Playfair, desc plana, precio
   Playfair). Rojo ≤10%: filete eyebrow + pill activa + hover del CTA, nada más.
   -------------------------------------------------------------------------- */

/* A · Cabecera slim — eyebrow + título + pills de filtro */
.catalog-head__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.5px;
  color: var(--negro); margin: 0;
}
.catalog-pills { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(18px, 2.2vw, 28px); }
.cat-pill {
  font: 600 .76rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-texto); text-decoration: none;
  padding-bottom: 6px; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.cat-pill:hover { color: var(--negro); }
.cat-pill.is-active { color: var(--negro); border-bottom-color: var(--color-red); }   /* filete rojo = pill activa */

/* B · Listado apilado */
.catalog-list { display: flex; flex-direction: column; }
.cat-item {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(28px, 4vw, 72px);
  width: 100vw; margin-inline: calc(50% - 50vw);                       /* full-bleed: el charcoal sangra de borde a borde */
  padding-block: clamp(48px, 6vw, 100px);
  padding-inline: max(var(--gutter), calc(50vw - var(--container-max) / 2));
  scroll-margin-top: 100px;                                            /* header sticky: no tapar el producto al aterrizar/filtrar */
}
.cat-item[hidden] { display: none; }   /* imprescindible: restaura el hide del navegador (mismo patrón que .accordion-panel) */
/* Alternancia de LADO (inviolable del briefing): media a la derecha en pares */
.cat-item:nth-child(even) .cat-item__media { order: 2; }
/* Alternancia de FONDO: pares en charcoal (texto invertido más abajo) */
.cat-item:nth-child(even) { background: var(--color-charcoal); }

/* Media — card editorial vertical, sin deformar */
.cat-item__media { border-radius: var(--radius-card); overflow: hidden; }
.cat-item__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center; display: block; }

/* Contenido — columna estrecha, jerarquía por márgenes (lenguaje spotlight) */
.cat-item__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 460px; }
.cat-item__content .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--gris-texto); margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.cat-item__content .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--color-red); }   /* filete rojo */
.cat-item__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1;
  color: var(--negro); margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.cat-item__desc {
  font: 400 clamp(1rem, 1.1vw, 1.08rem)/1.7 var(--font-body);
  color: #4A4A4A; margin: 0 0 clamp(24px, 3vw, 34px); max-width: 42ch;   /* gris SÓLIDO, sin degradado */
}
.cat-item__price {
  font: 600 clamp(1.4rem, 1.8vw, 1.8rem)/1 var(--font-display);
  color: var(--negro); margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.cat-item .btn-editorial { align-self: flex-start; }
/* CTA — negro por defecto, ROJO solo en hover (el rojo del CTA es uno de los ≤10%) */
.cat-item .btn-editorial--solid { background: var(--negro); }
.cat-item .btn-editorial--solid:hover { background: var(--color-red); }

/* Item "Próximamente" — badge en vez de precio, media atenuada, sin CTA */
.cat-item__soon {
  display: inline-block;
  font: 600 .72rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-texto); border: 1px solid var(--borde); border-radius: var(--radius-pill);
  padding: 9px 18px; margin: clamp(4px, 1vw, 8px) 0 0;
}
.cat-item--soon .cat-item__media { opacity: .9; filter: grayscale(.25); }

/* Items charcoal (pares) — inversión de texto a claro */
.cat-item:nth-child(even) .cat-item__name,
.cat-item:nth-child(even) .cat-item__price { color: #fff; }
.cat-item:nth-child(even) .cat-item__desc { color: rgba(255, 255, 255, .76); }
.cat-item:nth-child(even) .cat-item__content .eyebrow { color: rgba(255, 255, 255, .65); }
.cat-item:nth-child(even) .cat-item__soon { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .25); }
/* CTA sobre charcoal: blanco por defecto (el negro no contrastaría), rojo en hover */
.cat-item:nth-child(even) .btn-editorial--solid { background: #fff; color: var(--negro); }
.cat-item:nth-child(even) .btn-editorial--solid:hover { background: var(--color-red); color: #fff; }

/* Salida vista filtrada */
.catalog-footer { text-align: center; padding-block: clamp(36px, 4.5vw, 64px); }
.catalog-vertodo {
  font: 600 .8rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--negro); text-decoration: none;
  border-bottom: 2px solid var(--color-red); padding-bottom: 6px; transition: color .2s;
}
.catalog-vertodo:hover { color: var(--color-red); }
.catalog-vertodo[hidden] { display: none; }

/* MÓVIL — 1 columna, imagen SIEMPRE arriba (anula el order de los pares) */
@media (max-width: 768px) {
  .cat-item { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
  .cat-item:nth-child(even) .cat-item__media { order: 0; }
  .cat-item__content { max-width: none; }
}

/* --------------------------------------------------------------------------
   14b · SELECTOR DE PESTAÑAS (catalogo.html · .cat-item--lash · AB-C22 / AB-C25)
   Cada .cat-item--lash es UN producto con selector de diseño (tarjeta "hero"
   del catálogo). Dos instancias: #individuales y #tiras (5 diseños cada uno). Hereda eyebrow con filete rojo +
   título Playfair + .cat-item__desc/.cat-item__price.
   Rojo ≤10%: sin rojo nuevo aquí — la selección activa se marca en negro.
   GOTCHA [hidden]: .lash-panel lo togglea JS
   con el atributo hidden → regla [hidden]{display:none} repuesta abajo (mismo
   bug que .cat-item[hidden] / .accordion-panel[hidden]).
   -------------------------------------------------------------------------- */
.cat-item--lash { align-items: start; }                         /* contenido alto: imagen al tope, no centrada */
.cat-item--lash .cat-item__content { max-width: 520px; }

/* AB-C25 · la tarjeta hero de pestañas va SIEMPRE sobre fondo claro, aunque
   caiga en posición par (#tiras es el 2º .cat-item). Se conserva el lado
   alternado de la imagen (order), se anula solo la inversión charcoal. */
.cat-item--lash:nth-child(even) { background: var(--blanco); }
.cat-item--lash:nth-child(even) .cat-item__name,
.cat-item--lash:nth-child(even) .cat-item__price { color: var(--negro); }
.cat-item--lash:nth-child(even) .cat-item__desc { color: #4A4A4A; }
.cat-item--lash:nth-child(even) .cat-item__content .eyebrow { color: var(--gris-texto); }
.cat-item--lash:nth-child(even) .btn-editorial--solid { background: var(--negro); color: #fff; }
.cat-item--lash:nth-child(even) .btn-editorial--solid:hover { background: var(--color-red); }

/* Grupo Diseño — rótulo + control */
.lash-picker__group { width: 100%; margin: 0 0 clamp(20px, 2.6vw, 30px); }
.lash-picker__label {
  display: block;
  font: 600 .7rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-texto); margin: 0 0 12px;
}

/* Diseño — miniaturas repartidas a partes iguales (5 en #tiras, 5 en #individuales) */
.lash-swatches { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
.lash-swatch {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 4px 10px;
  background: none; border: 1px solid var(--borde); border-radius: var(--radius-soft);
  cursor: pointer; transition: border-color .18s, background .18s;
}
.lash-swatch:hover { border-color: var(--color-gray); }
.lash-swatch.is-active { border-color: var(--negro); background: var(--fondo-alt); }
.lash-swatch__thumb {
  display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 6px; background: var(--fondo-alt);
}
.lash-swatch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lash-swatch__name {
  font: 600 .68rem/1.2 var(--font-body); letter-spacing: .03em; text-align: center;
  color: var(--gris-texto);
}
.lash-swatch.is-active .lash-swatch__name { color: var(--negro); }

/* Panel del diseño activo — .cat-item__desc (heredada) + specs + .cat-item__price (heredada) */
.lash-panels { width: 100%; }
.lash-panel__meta { margin: 0 0 clamp(20px, 2.4vw, 28px); width: 100%; }
.lash-panel__row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--borde);
  font: 400 .9rem/1.5 var(--font-body);
}
.lash-panel__row dt { flex: 0 0 8.5rem; font-weight: 600; color: var(--gris-texto); }
.lash-panel__row dd { flex: 1; margin: 0; color: #4A4A4A; }


/* GOTCHA OBLIGATORIO — restaura el hide del navegador (JS togglea `hidden`) */
.lash-panel[hidden] { display: none; }

/* Móvil — miniaturas más juntas, specs apiladas */
@media (max-width: 768px) {
  .lash-swatches { gap: 6px; }
  .lash-swatch__name { font-size: .62rem; }
}
@media (max-width: 420px) {
  .lash-swatch { padding: 6px 2px 8px; }
  .lash-swatch__name { font-size: .58rem; letter-spacing: 0; overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
  .lash-panel__row { flex-direction: column; gap: 2px; }
  .lash-panel__row dt { flex: none; }
}

/* --------------------------------------------------------------------------
   15 · CARRITO + CHECKOUT UI (drawer global · carrito.html · confirmacion.html · AB-C11)
   Flujo solo UI (Stripe Checkout hosted = redirect; sin form de tarjeta on-site).
   Drawer = mismo patrón visual que el menú móvil (slide derecha + backdrop).
   Lenguaje Controlled Presence: Playfair display, Montserrat UI, texto plano.
   Rojo ≤10%: el CTA primario de conversión es el único rojo por vista
   (`.btn-editorial--solid` ya rojo global). Estado vacío y estado con ítems son
   mutuamente excluyentes → nunca hay 2 rojos a la vez.
   -------------------------------------------------------------------------- */

/* --- DRAWER (global, en todas las páginas) --- */
.cart-backdrop {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(10, 10, 10, .45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.cart-backdrop[hidden] { display: none; }
.cart-backdrop.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
  width: min(100vw, 420px);                 /* full-width en móvil (ver media 600px), 420 en desktop */
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px) clamp(16px, 2vw, 20px);
  border-bottom: 1px solid var(--borde);
}
.cart-drawer__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--negro); margin: 0; }
.cart-close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--negro); color: #fff; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Estado vacío — con dignidad: aire, icono fino, CTA (drawer y página comparten clases .cart-empty__*) */
.cart-drawer__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 14px; flex: 1; padding: clamp(24px, 5vw, 40px);
}
.cart-drawer__empty[hidden] { display: none; }
.cart-empty__icon { color: var(--gris-muted); }
.cart-empty__title { font-family: var(--font-display); font-size: 1.3rem; color: var(--negro); margin: 0; }
.cart-empty__text { font: 400 .95rem/1.6 var(--font-body); color: var(--gris-texto); margin: 0; max-width: 32ch; }
.cart-drawer__empty .btn-editorial { margin-top: 8px; }

.cart-drawer__items { list-style: none; margin: 0; padding: 0 clamp(20px, 4vw, 28px); flex: 1; overflow-y: auto; }

.cart-drawer__foot {
  padding: clamp(18px, 3vw, 24px) clamp(20px, 4vw, 28px) clamp(22px, 4vw, 28px);
  border-top: 1px solid var(--borde);
}
.cart-drawer__foot[hidden] { display: none; }
.cart-drawer__summary {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--negro); margin-bottom: 6px;
}
.cart-drawer__note { font: 400 .8rem/1.5 var(--font-body); color: var(--gris-texto); margin: 0 0 16px; }
.cart-drawer__checkout { display: flex; width: 100%; }   /* CTA primario a ancho completo */

@media (max-width: 600px) { .cart-drawer { width: 100vw; } }

/* --- LÍNEA DE CARRITO (#cart-line-tpl · drawer y carrito.html) --- */
.cart-line {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start;
  padding: clamp(16px, 3vw, 20px) 0; border-bottom: 1px solid var(--borde);
}
.cart-line__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-soft); }
.cart-line__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-line__name { font: 600 .95rem/1.3 var(--font-body); color: var(--negro); margin: 0; }
.cart-line__price { font: 500 .9rem/1 var(--font-body); color: var(--gris-texto); margin: 0; }
.cart-line__qty {
  display: inline-flex; align-items: center; width: fit-content; margin-top: 4px;
  border: 1px solid var(--borde); border-radius: var(--radius-pill);
}
.cart-line__qty .qty-btn {
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--negro);
  display: inline-flex; align-items: center; justify-content: center; transition: color .2s;
}
.cart-line__qty .qty-btn:hover { color: var(--color-red); }
.cart-line__qval { min-width: 28px; text-align: center; font: 600 .85rem/1 var(--font-body); color: var(--negro); }
.cart-line__remove {
  background: none; border: 0; cursor: pointer; color: var(--gris-muted);
  font-size: 14px; padding: 4px; align-self: start; transition: color .2s;
}
.cart-line__remove:hover { color: var(--color-red); }

/* --- carrito.html (revisión = checkout on-site) --- */
.cart-page__head { margin-bottom: clamp(24px, 3vw, 40px); }
.cart-page__head h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; color: var(--negro); margin: 0; }

.cart-page__empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding-block: clamp(40px, 8vw, 96px);
}
.cart-page__empty[hidden] { display: none; }

.cart-page__layout { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.cart-page__layout[hidden] { display: none; }
.cart-page__items { list-style: none; margin: 0; padding: 0; }

.cart-summary {
  background: var(--fondo-alt); border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 32px);
}
.cart-summary__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--negro); margin: 0 0 16px; }
.cart-summary__row {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 1.05rem/1 var(--font-body); color: var(--negro);
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borde);
}
.cart-summary__note { font: 400 .82rem/1.5 var(--font-body); color: var(--gris-texto); margin: 0 0 18px; }
.cart-summary__checkout { display: flex; width: 100%; }   /* botón primario "Finalizar compra" — el rojo de la vista */
.cart-summary__continue {
  display: inline-block; margin-top: 16px;
  font: 600 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--negro); text-decoration: none; border-bottom: 1px solid var(--negro); padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.cart-summary__continue:hover { color: var(--color-red); border-color: var(--color-red); }
.cart-summary__secure {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0;
  font: 400 .78rem/1.4 var(--font-body); color: var(--gris-texto);
}
.cart-summary__secure svg { color: var(--gris-muted); flex-shrink: 0; }
/* [hidden] no gana por especificidad a .cart-summary__checkout{display:flex}/.cart-summary__secure{display:flex} (mismo bug que .cat-item[hidden]) — NUNCA usar [hidden] a secas aquí, siempre esta clase */
.cart-summary__checkout.is-hidden-mp,
.cart-summary__secure.is-hidden-mp { display: none; }

/* AB-C28 · Checkout Mercado Pago. Los 2 nodos los crea `initPaymentGateway()`
   en `main.js` (sin HTML): `.mp-brick-container` va tras `#btn-checkout` (oculto
   con `.is-hidden-mp` en el mercado MP), `.mp-brick-error` justo después. */
.mp-brick-container { margin-top: 18px; }
/* Aviso de error del Brick (`<p role="alert">`, oculto de serie). NO fijar
   `display` aquí — el JS lo revela con `el.hidden = false` y cualquier regla
   `display` en esta clase ganaría a `[hidden]` (mismo gotcha que `.cat-item
   [hidden]`) dejándolo siempre visible. Se queda con el `display:block` del <p>.
   Paleta = la de `mark.policy-tbd` (rosa pálido + rojo-hover), sin color nuevo. */
.mp-brick-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-red);
  border-radius: var(--radius-soft);
  background: #FDE7EA;
  color: var(--color-red-hover);
  font: 600 .82rem/1.5 var(--font-body);
}

@media (min-width: 900px) {
  .cart-page__layout { grid-template-columns: 1fr 360px; }
  .cart-summary { position: sticky; top: 96px; }   /* acompaña el scroll bajo el header sticky */
}

/* --- confirmacion.html (success_url de Stripe) --- */
.confirmation { padding-block: clamp(56px, 9vw, 120px); }
.confirmation .container { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 560px; }
.confirmation__icon { color: var(--negro); margin-bottom: clamp(16px, 2vw, 24px); }   /* check monocromo, on-brand (no verde) */
.confirmation h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; color: var(--negro); margin: 0 0 16px; }
.confirmation__text {
  font: 400 clamp(1rem, 1.1vw, 1.08rem)/1.7 var(--font-body);
  color: var(--gris-texto); margin: 0 0 clamp(28px, 3vw, 40px); max-width: 46ch;
}
.confirmation__cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
/* Fix: el .btn-editorial--ghost global es BLANCO (para hero oscuro). En esta página
   sobre fondo blanco sería invisible → variante oscura (igual que .btn-editorial--dark). */
.confirmation .btn-editorial--ghost { color: var(--negro); border-color: var(--negro); }
.confirmation .btn-editorial--ghost:hover { background: var(--negro); color: #fff; }

/* --------------------------------------------------------------------------
   16 · PÁGINA POLÍTICAS (politicas.html · AB-P2)
   Acordeón exclusivo, fondo blanco dominante, lectura. Rojo solo como acento
   de estado abierto (icono +/−). Panel oculto con [hidden] del navegador:
   NUNCA `display:` a secas en .accordion-panel sin reponer [hidden]{display:none},
   o el panel queda siempre visible (JS quita/pone hidden, ver AB-P3).
   -------------------------------------------------------------------------- */
.policies-page { padding: var(--section-pad-y) 0; background: var(--color-bg); }
.policies-header { max-width: 70ch; margin: 0 0 40px; }
.policies-header h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--negro); margin: 0 0 14px; }
.policies-intro { font-size: 16px; line-height: 1.6; color: var(--gris-texto); margin: 0; }
/* AB-L2 metió un 2º .policies-intro (aviso "borrador · revisión legal") — separarlos */
.policies-intro + .policies-intro { margin-top: 14px; }

.accordion { max-width: 78ch; border-top: 1px solid var(--borde); }
/* scroll-margin: los enlaces del footer saltan a politicas.html#<slug> y el
   header es sticky (mismo criterio que #historia/#destacados/.cat-item) */
.accordion-item { border-bottom: 1px solid var(--borde); scroll-margin-top: 100px; }
.accordion-heading { margin: 0; }

.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 4px; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700;
  color: var(--negro); text-align: left; transition: color .2s ease;
}
.accordion-trigger:hover { color: var(--color-gray-text); }
.accordion-trigger:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }

.accordion-icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.accordion-icon::before,
.accordion-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--negro);
  transform: translate(-50%, -50%); transition: transform .25s ease, background .25s ease;
}
.accordion-icon::before { width: 14px; height: 2px; }
.accordion-icon::after { width: 2px; height: 14px; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::before,
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { background: var(--color-red); }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.accordion-panel {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
}
.accordion-panel[hidden] { display: none; }   /* imprescindible: restaura el hide del navegador */
.accordion-panel.is-open { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; min-height: 0; }

.accordion-panel-inner > *:first-child { margin-top: 0; }
.accordion-panel-inner { padding: 0 4px 28px; max-width: 68ch; }
.policy-updated { font-size: 13px; color: var(--gris-muted); font-style: italic; margin: 0 0 20px; }
.accordion-panel-inner h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--negro); margin: 28px 0 10px; }
.accordion-panel-inner h4 { font-family: var(--font-body); font-size: .92rem; font-weight: 600; color: var(--negro); margin: 18px 0 8px; }
.accordion-panel-inner p,
.accordion-panel-inner li { font-size: 14.5px; line-height: 1.65; color: var(--color-ink-soft); }
.accordion-panel-inner ul,
.accordion-panel-inner ol { padding-left: 20px; margin: 0 0 16px; }
.accordion-panel-inner li { margin-bottom: 6px; }
.accordion-panel-inner li:last-child { margin-bottom: 0; }
.accordion-panel-inner p { margin: 0 0 16px; }

.table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--borde); border-radius: var(--radius-soft); }
/* min-width: por debajo de esto la tabla scrollea dentro de .table-wrap en vez de
   aplastar columnas (la de Cookies tiene 5 col). En el panel (~68ch) las de 2-3
   col caben sin scroll; en móvil scrollean, que es lo correcto. */
.table-wrap table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.table-wrap th,
.table-wrap td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borde); white-space: normal; vertical-align: top; }
.table-wrap thead th { font-family: var(--font-body); font-weight: 700; color: var(--negro); background: var(--fondo-alt); white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: none; }

/* Enlaces dentro del cuerpo legal (mailto, "Configurar cookies", ANPD…): negro
   subrayado, editorial — el rojo se reserva para el acento de estado abierto */
.accordion-panel-inner a { color: var(--negro); text-decoration: underline; text-underline-offset: 2px; }
.accordion-panel-inner a:hover { color: var(--color-red-hover); }

/* <code> de la tabla de cookies (ap_cookie_consent, _ga, _fbp…) */
.accordion-panel-inner code,
.table-wrap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--fondo-alt); color: var(--negro);
  padding: 1px 5px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* box-decoration-break: clone → el resaltado mantiene padding/borde en cada
   línea cuando el <mark> abarca un párrafo entero (varios en el borrador legal) */
mark.policy-tbd, mark.content-tbd {
  background: #FDE7EA; color: var(--color-red-hover);
  padding: 1px 5px; border-radius: 3px; font-weight: 600; font-style: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   17 · SUBPÁGINAS SERVICIOS (novias.html + clases.html · AB-C13)
   Alternancia clara/oscura resuelta por fondo real de cada sección (el
   `data-bg` del HTML es solo contrato informativo, no se usa como selector).
   Mismos tokens/tipografía/rojo ≤10% de siempre, cero variables nuevas.
   -------------------------------------------------------------------------- */

/* Compensa el header sticky (mismo criterio que #historia/#destacados/.cat-item) */
#hero-novias, #credencial, #condiciones, #paquetes, #incluye, #galeria-novias, #reserva-novias,
#hero-clases, #selector, #automaquillaje, #perfeccionamiento, #condiciones-clases, #reserva-clases {
  scroll-margin-top: 100px;
}

/* C · Hero (novias/clases) — split editorial, mismo patrón que .story-grid/.spotlight-grid */
.hero-novias, .hero-clases { padding-block: 0; overflow: hidden; }
.hero-novias__grid, .hero-clases__grid {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: clamp(480px, 52vw, 680px);
}
.hero-novias__media, .hero-clases__media { position: relative; overflow: hidden; background: var(--fondo-alt); }
.hero-novias__media img, .hero-clases__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.hero-novias__content, .hero-clases__content {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 460px;
  padding-block: clamp(40px, 5vw, 72px);
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: max(var(--gutter), calc(50vw - var(--container-max) / 2));
}
.hero-novias__content h1, .hero-clases__content h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08;
  color: var(--negro); margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.hero-novias__sub, .hero-clases__sub {
  font: 400 clamp(1rem, 1.1vw, 1.1rem)/1.6 var(--font-body); color: var(--gris-texto);
  margin: 0 0 clamp(24px, 2.8vw, 32px); max-width: 40ch;
}
.hero-novias__cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* .btn-editorial--ghost global es blanco (hero oscuro); aquí el fondo es claro */
.hero-novias__cta .btn-editorial--ghost { color: var(--negro); border-color: var(--negro); }
.hero-novias__cta .btn-editorial--ghost:hover { background: var(--negro); color: #fff; }
@media (max-width: 768px) {
  .hero-novias__grid, .hero-clases__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-novias__media, .hero-clases__media { min-height: clamp(360px, 90vw, 460px); }
  .hero-novias__content, .hero-clases__content {
    max-width: none; padding-inline: var(--gutter); padding-block: clamp(32px, 8vw, 48px);
  }
}

/* D · Credencial (claro) */
.credencial .container { max-width: 70ch; }
.credencial__texto { font: 400 1.05rem/1.7 var(--font-body); color: #4A4A4A; margin: 0 0 20px; }
.credencial__link {
  display: inline-block; font: 600 .82rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--negro); text-decoration: none; border-bottom: 1px solid var(--negro); padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.credencial__link:hover { color: var(--color-red); border-color: var(--color-red); }

/* E · Condiciones — "Antes de agendar" (oscuro, novias + clases comparten .condiciones-list) */
.condiciones, .condiciones-clases { background: var(--color-ink); }
.condiciones .section-title, .condiciones-clases .section-title { color: #fff; }
.condiciones-list {
  list-style: none; counter-reset: cond; margin: 0; padding: 0; max-width: 72ch;
  display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px);
}
.condiciones-list li {
  counter-increment: cond; position: relative; padding-left: 40px;
  font: 400 1rem/1.6 var(--font-body); color: rgba(255,255,255,.78);
}
.condiciones-list li::before {
  content: counter(cond); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font: 600 .78rem/1 var(--font-body); color: #fff;
}
.condiciones-list li strong { color: #fff; }

/* F · Paquetes (claro) — grid 4→2→1 */
.paquetes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 28px); align-items: stretch; }
.paquete-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--fondo-alt); border-radius: var(--radius-card);
  padding: clamp(24px, 2.4vw, 32px);
}
.paquete-card__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--negro); margin: 0; }
.paquete-card__specs { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.paquete-card__specs div { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.paquete-card__specs dt { color: var(--gris-texto); margin: 0; font-weight: 500; }
.paquete-card__specs dd { color: var(--negro); margin: 0; font-weight: 600; }
.paquete-card__detalle { list-style: none; margin: 0; padding-top: 14px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 8px; }
.paquete-card__detalle li { font-size: .85rem; line-height: 1.5; color: #4A4A4A; padding-left: 16px; position: relative; }
.paquete-card__detalle li::before { content: "—"; position: absolute; left: 0; color: var(--gris-muted); }
.paquete-card__aviso { font: italic 400 .78rem/1.5 var(--font-body); color: var(--gris-texto); margin: 0; }
.paquete-card__price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--negro); margin: 4px 0 0; }
.paquete-card .btn-editorial { margin-top: auto; width: 100%; }
.paquete-card .btn-editorial--solid { background: var(--negro); }
.paquete-card .btn-editorial--solid:hover { background: var(--color-red); }
@media (max-width: 1023px) { .paquetes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .paquetes-grid { grid-template-columns: 1fr; } }

/* G · Incluye (oscuro, 2 col) */
.incluye { background: var(--color-ink); }
.incluye-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.incluye .section-title { color: #fff; }
.incluye-servicio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.incluye-servicio-list li { font: 400 1rem/1.5 var(--font-body); color: rgba(255,255,255,.82); padding-left: 16px; position: relative; }
.incluye-servicio-list li::before { content: "—"; position: absolute; left: 0; color: rgba(255,255,255,.4); }
.incluye-col--marcas { border-left: 1px solid rgba(255,255,255,.15); padding-left: clamp(24px, 3vw, 40px); }
.incluye-marcas-label { font: 600 .72rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 12px; }
.incluye-marcas-list { font: 400 .95rem/1.7 var(--font-body); color: rgba(255,255,255,.75); margin: 0; }
@media (max-width: 768px) {
  .incluye-grid { grid-template-columns: 1fr; gap: 32px; }
  .incluye-col--marcas { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px; }
}

/* H · Galería de trabajos (claro) — aspect-ratio fijado en el contenedor, no en <img> */
.galeria-novias__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.galeria-novias__item { aspect-ratio: 4/5; border-radius: var(--radius-soft); overflow: hidden; background: var(--fondo-alt); }
.galeria-novias__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .galeria-novias__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .galeria-novias__grid { grid-template-columns: repeat(2, 1fr); } }

/* I · Selector "¿Cuál es para ti?" (claro) — mismo precio/duración en las 2 clases:
   diferenciación visual fuerte obligatoria (badge negro vs. rojo) para no confundirlas */
.selector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
.selector-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--fondo-alt); border-radius: var(--radius-card);
  padding: clamp(28px, 3vw, 40px); text-decoration: none;
  border: 2px solid transparent; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.selector-card:hover { border-color: var(--negro); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.selector-card__level {
  display: inline-block; font: 700 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--negro); padding: 6px 12px; border-radius: var(--radius-pill);
}
.selector-card__title { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--negro); margin: 0; }
.selector-card__desc { font: 400 .95rem/1.6 var(--font-body); color: #4A4A4A; margin: 0; }
.selector-grid a:last-child .selector-card__level { background: var(--color-red); }
@media (max-width: 768px) { .selector-grid { grid-template-columns: 1fr; } }

/* J · Automaquillaje (oscuro) + Perfeccionamiento (claro) — split media/contenido */
.automaquillaje-grid, .perfeccionamiento-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.automaquillaje-media, .perfeccionamiento-media { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-card); overflow: hidden; background: var(--fondo-alt); }
.automaquillaje-media img, .perfeccionamiento-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.automaquillaje-content h2, .perfeccionamiento-content h2 {
  font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.12; margin: 0 0 clamp(10px, 1.4vw, 16px);
}
.automaquillaje-price, .perfeccionamiento-price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 0 0 clamp(18px, 2vw, 24px); }
.automaquillaje-ficha, .perfeccionamiento-ficha { list-style: none; margin: 0 0 clamp(20px, 2.4vw, 28px); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.automaquillaje-ficha li, .perfeccionamiento-ficha li { font-size: .92rem; line-height: 1.5; padding-left: 16px; position: relative; }
.automaquillaje-ficha li::before, .perfeccionamiento-ficha li::before { content: "—"; position: absolute; left: 0; }
.perfeccionamiento-ficha li::before { color: var(--gris-muted); }
.automaquillaje-subtitle, .perfeccionamiento-subtitle { font: 600 .78rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 clamp(14px, 1.6vw, 18px); }
.automaquillaje-temario { margin: 0 0 clamp(24px, 3vw, 32px); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.automaquillaje-temario li { font-size: .9rem; line-height: 1.5; }

/* Automaquillaje = fondo oscuro, texto invertido a claro */
.automaquillaje { background: var(--color-ink); }
.automaquillaje .eyebrow { color: rgba(255,255,255,.6); }
.automaquillaje-content h2 { color: #fff; }
.automaquillaje-price { color: #fff; }
.automaquillaje-ficha li { color: rgba(255,255,255,.8); }
.automaquillaje-ficha li::before { color: rgba(255,255,255,.4); }
.automaquillaje-subtitle { color: rgba(255,255,255,.55); }
.automaquillaje-temario li { color: rgba(255,255,255,.85); }

/* Perfeccionamiento = fondo claro (default); temario de 14 ítems en columnas, libertad de reparto */
.perfeccionamiento-price { color: var(--negro); }
.perfeccionamiento-temario { list-style: none; margin: 0 0 clamp(24px, 3vw, 32px); padding: 0; column-count: 3; column-gap: clamp(20px, 2.4vw, 32px); }
.perfeccionamiento-temario li { font-size: .9rem; line-height: 1.5; color: #4A4A4A; padding: 7px 0; border-bottom: 1px solid var(--borde); break-inside: avoid; }
@media (max-width: 900px) { .perfeccionamiento-temario { column-count: 2; } }
@media (max-width: 600px) { .perfeccionamiento-temario { column-count: 1; } }
@media (max-width: 768px) {
  .automaquillaje-grid, .perfeccionamiento-grid { grid-template-columns: 1fr; }
}

/* K · Reserva final — CTA (novias oscuro, clases claro) */
.reserva-novias, .reserva-clases { text-align: center; }
.reserva-novias { background: var(--color-ink); }
.reserva-novias .container, .reserva-clases .container { max-width: 640px; display: flex; flex-direction: column; align-items: center; }
.reserva-novias h2, .reserva-clases h2 {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.reserva-novias h2 { color: #fff; }
.reserva-clases h2 { color: var(--negro); }
.reserva-novias__micro, .reserva-clases__micro { font: 400 .85rem/1.5 var(--font-body); margin: clamp(18px, 2vw, 24px) 0 0; }
.reserva-novias__micro { color: rgba(255,255,255,.6); }
.reserva-clases__micro { color: var(--gris-texto); }

/* --------------------------------------------------------------------------
   18 · BANNER DE CONSENTIMIENTO DE COOKIES (AB-L3 · UI de AB-L4)
   La UI la construye `initCookieConsent()` en main.js (`buildConsentUI()`), no
   hay markup en el HTML. Contrato: `.ap-privacy-bar*` (aviso fijo abajo) y
   `.ap-privacy-panel*` (modal de preferencias). Botones `.ap-privacy-btn` +
   modificador (`--accept` primario negro; resto contorno). Nombres `ap-privacy-*`
   a propósito (no `cookie-*`): los adblock ocultan `.cookie-*` por filtro
   cosmético. Fondo blanco dominante, rojo NO se usa aquí (≤10%).

   GATE: el JS solo pinta el aviso si este centinela existe. Es la señal de
   "AB-L3 está publicado y estilado" — si se revierte el CSS, quitar también
   esta línea para que no salga un banner sin estilar.
   -------------------------------------------------------------------------- */
:root { --ap-privacy-ui: ready; }

/* [hidden] no gana por especificidad al `display` propio de estas clases (mismo
   gotcha que .cat-item[hidden] / .accordion-panel[hidden]) — el JS togglea
   `el.hidden`, así que hay que reponer el hide del navegador a mano. */
.ap-privacy-bar[hidden],
.ap-privacy-panel[hidden] { display: none; }

/* ---- Aviso (barra fija inferior) ---- */
/* Sin animación de entrada a propósito: el aviso y el modal deben ser usables
   incluso si el motor de animación no arranca. Aparecen al quitarles [hidden]. */
.ap-privacy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
  background: #fff; border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, .10);
}

.ap-privacy-bar__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex; flex-direction: column; gap: 14px;
}
.ap-privacy-bar__title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--negro); margin: 0;
}
.ap-privacy-bar__text {
  font-size: 13.5px; line-height: 1.6; color: var(--gris-texto); margin: 0; max-width: 64ch;
}
.ap-privacy-bar__text a { color: var(--negro); text-decoration: underline; text-underline-offset: 2px; }
.ap-privacy-bar__text a:hover { color: var(--color-red-hover); }
.ap-privacy-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 860px) {
  .ap-privacy-bar__inner {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "title actions" "text actions";
    column-gap: 32px; row-gap: 4px; align-items: center;
  }
  .ap-privacy-bar__title { grid-area: title; }
  .ap-privacy-bar__text { grid-area: text; }
  .ap-privacy-bar__actions { grid-area: actions; flex-wrap: nowrap; }
}

/* ---- Modal de preferencias ---- */
.ap-privacy-panel {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Estado visible por defecto — no dependemos de `.is-open` (el JS la añade en un
   requestAnimationFrame; si no llega, el modal debe verse igual). */
.ap-privacy-panel__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .5); }

.ap-privacy-panel__dialog {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(100dvh - 40px); overflow-y: auto;
  background: #fff; border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-hover);
}

.ap-privacy-panel__close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; padding: 6px; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--gris-muted); transition: color .2s ease;
}
.ap-privacy-panel__close:hover { color: var(--negro); }

.ap-privacy-panel__title {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--negro); margin: 0 0 8px;
}
.ap-privacy-panel__intro { font-size: 13.5px; line-height: 1.6; color: var(--gris-texto); margin: 0 0 20px; }

.ap-privacy-panel__list { list-style: none; margin: 0 0 22px; padding: 0; }
.ap-privacy-panel__row { padding: 15px 0; border-top: 1px solid var(--borde); }
.ap-privacy-panel__row:last-child { border-bottom: 1px solid var(--borde); }
.ap-privacy-panel__label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ap-privacy-panel__toggle { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--negro); cursor: pointer; }
.ap-privacy-panel__toggle:disabled { cursor: not-allowed; opacity: .55; }
.ap-privacy-panel__name { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--negro); }
.ap-privacy-panel__desc { font-size: 12.5px; line-height: 1.55; color: var(--gris-texto); margin: 6px 0 0 26px; }

.ap-privacy-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-privacy-panel__actions .ap-privacy-btn { flex: 1 1 130px; }

/* ---- Botones (sistema editorial, tamaño UI) ---- */
.ap-privacy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  border: 1.5px solid var(--negro); border-radius: var(--radius-soft);
  background: #fff; color: var(--negro); white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: all .2s ease;
}
.ap-privacy-btn:hover { background: var(--negro); color: #fff; }
.ap-privacy-btn--accept { background: var(--negro); color: #fff; }
.ap-privacy-btn--accept:hover { background: var(--color-ink-soft); }

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}