/* Carmen Polvo · base.css
   Portado de polvo/src/css/base.css (tokens, tipografía, layout, componentes) + polvo/src/css/banners.css.
   El marcado PHP reproduce el de polvo/dist, así que los selectores se mantienen. Cambios del port:
   rutas de fuentes (../fonts/), bloque «WordPress / tema» al final (barra de admin, contenido de página,
   cajón de carrito de template-parts/carrito-cajon.php). Bloque «Prueba el color» (lentillas): copia literal del de
   polvo/src/css/base.css; si cambias uno, cambia el otro. */

/* Polvo · base.css · dueño: [estructura]
   Tokens, tipografía, layout y componentes. La coreografía vive en motion.css (agente motion).
   Contrastes verificados (WCAG 2.x):
   cacao/hueso 15,66 · gris/hueso 6,47 · bronce/hueso 5,05 · blanco/bronce 5,87 · carmín/hueso 6,83
   ok/hueso 5,60 · aviso/hueso 5,85 · agotado/hueso 5,75 · oro/cacao 8,37 · hueso-2/cacao 10,1
   placeholder #A89886/cacao 6,50 · hueso-2 sobre el fondo profundo de gama más claro (#6A1A33) 7,36 */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/bodoni-moda-normal-400_900.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("../fonts/bodoni-moda-italic-400_900.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/jost-variable.woff2") format("woff2"); }

:root {
  /* marca (brandbook 30-10-2026) */
  --cacao: #1B1410; --blanco: #FFFFFF; --hueso: #F4EDE3; --arena: #E2D5C2;
  --bronce: #8A5A2B; --bronce-hondo: #6E4620; --oro: #D7A860; --carmin: #A0123C;
  --ok: #1F6B3C; --aviso: #8A4B00; --agotado: #B0261E; --info: #2E5A8C;
  /* roles */
  --ink: var(--cacao); --ink-2: #5C534B; --on-dark: var(--hueso); --on-dark-2: #CDBFAE;
  --line: rgb(27 20 16 / .12); --line-dark: rgb(244 237 227 / .16);
  --bg: var(--hueso); --focus: var(--bronce);

  /* tipo */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  --t-xs: .8125rem;                                    /* 13 px: créditos, notas */
  --t-sm: .9375rem;                                    /* 15 px: UI */
  --t-base: clamp(1rem, .96rem + .2vw, 1.125rem);      /* 16 → 18 px: lectura */
  --t-lg: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);   /* entradilla */
  --t-h4: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --t-h3: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --t-h2: clamp(2.5rem, 1.6rem + 4vw, 5.25rem);
  --t-h1: clamp(3rem, 1.6rem + 6.5vw, 7.5rem);
  --t-hero: clamp(3.5rem, 1.2rem + 9.6vw, 9rem);      /* el único momento enorme */

  /* espacio */
  --gutter: clamp(1rem, .5rem + 2.6vw, 3rem);
  --wrap: 90rem;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  --s-section: clamp(5.5rem, 3rem + 10vw, 12rem);

  /* forma */
  --r-s: .375rem; --r-m: 1rem; --r-l: 1.75rem; --r-pill: 999px;
  --arch: 50vw 50vw var(--r-m) var(--r-m);

  /* movimiento (motion.css lo amplía) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .45s;

  /* capas */
  --z-raised: 2; --z-header: 30; --z-menu: 40; --z-drawer: 50; --z-skip: 60;

  color-scheme: light;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-base)/1.6 var(--sans);
  overflow-x: clip; min-height: 100dvh; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .2em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--oro); color: var(--cacao); }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.is-dark, .s-hero, .s-gamas, .s-cifras, .ftr, .menu, .gama-head { --focus: var(--oro); }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip { position: fixed; left: var(--gutter); top: var(--s-3); z-index: var(--z-skip); padding: var(--s-3) var(--s-5);
  background: var(--cacao); color: var(--hueso); border-radius: var(--r-pill); font-weight: 500;
  transform: translateY(-200%); transition: transform .2s var(--ease-out); }
.skip:focus { transform: none; }

/* ---------------------------------------------------------------- piezas tipográficas */
.page-t { font: 500 var(--t-h1)/1 var(--serif); letter-spacing: -.02em; }
.link-arrow { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.link-arrow:hover { text-decoration-thickness: 2px; }
.crumbs { font-size: var(--t-xs); letter-spacing: .02em; }
.crumbs a { text-decoration: none; border-bottom: 1px solid currentColor; }
.note { font-size: var(--t-sm); color: var(--ink-2); max-width: 60ch; }

.price { font: 500 1.25rem/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.price-lg { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.price ins { text-decoration: none; color: var(--carmin); }
.price del { font-size: .7em; color: var(--ink-2); margin-left: .35em; }
.stock { display: inline-flex; align-items: center; gap: .5em; font-size: var(--t-sm); font-weight: 500; }
.stock .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.stock-ok { color: var(--ok); } .stock-low { color: var(--aviso); } .stock-out { color: var(--agotado); }

/* ---------------------------------------------------------------- botones */
.btn-acc { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 3.5rem;
  padding: 0 var(--s-6); border: 0; border-radius: var(--r-pill); background: var(--bronce); color: var(--blanco);
  font: 500 var(--t-base)/1 var(--sans); letter-spacing: .02em; text-decoration: none;
  transition: background-color .25s var(--ease-out), transform .25s var(--ease-out); }
.btn-acc:hover { background: var(--bronce-hondo); }
.btn-acc:active { transform: scale(.98); }
.btn-acc:disabled { background: var(--arena); color: var(--ink-2); cursor: not-allowed; }
.btn-text { display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem; padding: 0; border: 0;
  background: none; font-size: var(--t-sm); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .35em; }
.btn-text::before { content: "+"; font: 400 1.1em/1 var(--serif); text-decoration: none; display: inline-block; }
.btn-text:hover { text-decoration-thickness: 2px; }
.btn-text:disabled { text-decoration: none; color: var(--ink-2); cursor: not-allowed; }
.btn-text:disabled::before { content: none; }
.add { margin: 0; }

/* ---------------------------------------------------------------- cabecera */
.hdr { position: fixed; inset: var(--s-3) var(--gutter) auto; z-index: var(--z-header); pointer-events: none; }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--wrap);
  margin-inline: auto; }
.logo, .hdr-actions { pointer-events: auto; display: inline-flex; align-items: center;
  background: rgb(244 237 227 / .9); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: 0 8px 30px -12px rgb(27 20 16 / .25); }
.logo { gap: .6rem; padding: .45rem 1.1rem .45rem .55rem; text-decoration: none; color: var(--cacao); min-height: 3rem; }
.logo-sym { flex: none; width: 2rem; height: 2rem; color: var(--cacao); }
.logo-word { display: grid; line-height: 1; }
.logo-carmen { font: 600 1.15rem/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; }
.logo-makeup { font: 500 .5625rem/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; margin-top: .3rem; }
.hdr-actions { gap: .15rem; padding: .25rem; }
.hdr-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .65rem; border-radius: var(--r-pill); color: var(--cacao);
  text-decoration: none; font-size: var(--t-sm); font-weight: 500; transition: background-color .2s var(--ease-out); }
.hdr-btn:hover { background: rgb(27 20 16 / .06); }
.hdr-menu { background: var(--cacao); color: var(--hueso); padding: 0 1rem; }
.hdr-menu:hover { background: #33271F; }
.menu-ico { display: grid; gap: 5px; width: 18px; }
.menu-ico span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out); }
.menu-ico span:last-child { width: 62%; }
[aria-expanded="true"] .menu-ico span:first-child { transform: translateY(3.25px) rotate(45deg); }
[aria-expanded="true"] .menu-ico span:last-child { width: 100%; transform: translateY(-3.25px) rotate(-45deg); }
.cart-count { position: absolute; top: .15rem; right: .1rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: var(--r-pill); background: var(--bronce); color: var(--blanco); font: 600 .6875rem/1.15rem var(--sans);
  text-align: center; font-variant-numeric: tabular-nums; }
.cart-count.is-zero { display: none; }

/* ---------------------------------------------------------------- menú a pantalla completa (motion lo anima) */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--cacao); color: var(--on-dark);
  overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0;
  transition: opacity .2s var(--ease-out), visibility 0s linear .2s; }
.menu:target, .menu.is-open, .menu[data-state="open"] { visibility: visible; opacity: 1; transition: opacity .2s var(--ease-out); }
.menu-in { min-height: 100dvh; display: grid; grid-template-columns: 1fr; gap: var(--s-7);
  padding-block: calc(var(--s-9) + var(--s-4)) var(--s-7); align-content: start; }
.menu-close { position: absolute; top: var(--s-4); right: var(--gutter); width: 3rem; height: 3rem; display: grid;
  place-items: center; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--hueso); }
.menu-nav ul { display: grid; gap: .1rem; }
.menu-nav a { display: inline-flex; align-items: baseline; gap: .6rem; padding-block: .15rem; text-decoration: none;
  font: 400 clamp(2rem, 1.2rem + 3.6vw, 4rem)/1.08 var(--serif); letter-spacing: -.01em; transition: color .2s var(--ease-out); }
.menu-nav a:hover, .menu-nav a[aria-current] { color: var(--oro); font-style: italic; }
.menu-n { font: italic 400 .32em/1 var(--serif); color: var(--oro); font-variant-numeric: tabular-nums; }
/* subgamas (lista anidada bajo su grupo): tipografía menor, sangría y marcador fino */
.menu-nav .menu-sub { gap: 0; margin: .1rem 0 .5rem; padding-left: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); }
.menu-nav .menu-sub a { font-size: clamp(1.0625rem, .95rem + .6vw, 1.5rem); line-height: 1.25; padding-block: .3rem; gap: .5rem; }
.menu-nav .menu-sub a::before { content: ""; align-self: center; width: .9rem; height: 1px; background: var(--oro); opacity: .7; }
.menu-nav .menu-sub .menu-n { font-size: .7em; }
@media (max-width: 40rem) {
  .menu-nav a { font-size: clamp(1.75rem, 1.2rem + 3.6vw, 2rem); }
}
@media (min-width: 64rem) { /* 11 gamas + 4 subgamas: caben en alto sin scroll en un portátil (1440 × 900) */
  .menu-nav > ul > li > a { font-size: clamp(2rem, min(1.2rem + 3.6vw, 5dvh), 4rem); }
  .menu-in { padding-block: var(--s-8) var(--s-6); }
}
.menu-side { display: grid; gap: var(--s-6); align-content: start; }
.menu-preview { display: none; }
.menu-preview img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--arch); }
.menu-foot { display: flex; gap: var(--s-5); font-size: var(--t-sm); }
@media (min-width: 64rem) {
  .menu-in { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .menu-preview { display: block; width: min(100%, 22rem); }
}

/* ---------------------------------------------------------------- buscador */
.search { position: relative; display: flex; align-items: center; border-bottom: 1px solid currentColor; max-width: 32rem; }
.search input { flex: 1; min-width: 0; height: 3.25rem; padding: 0 3rem 0 0; border: 0; background: transparent;
  font-size: 1rem; }
.search input::placeholder { color: var(--ink-2); opacity: 1; }
.menu .search input::placeholder { color: #A89886; }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: 0 2px 0 0 var(--focus); }
.search-go { position: absolute; right: 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%; }
.search-lg input { height: 4rem; font: 400 clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--serif); }
.search-info { margin-block: var(--s-5); color: var(--ink-2); font-size: var(--t-sm); }
.search-page { padding-block: var(--s-9) var(--s-section); display: grid; gap: var(--s-6); }
.search-gamas ul { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.search-gamas h2, .gama-more h2 { font: 500 var(--t-h4)/1.2 var(--serif); }

/* ---------------------------------------------------------------- 1 · hero: «Tono con nombre propio» */
/* Izquierda: Reflejo + lema (el polvo pinta cada glifo), claim y una sola acción.
   Derecha: look real (rostro de maquilladora) en un arco con halo de polvo del color de sus tonos.
   El hero mide una vista; el tarro vive entero en la sección 2 (nunca asoma cortado) y el lienzo del hero
   se alarga por debajo para que el polvo caiga en él. */
@property --tono-actual { syntax: "<color>"; inherits: true; initial-value: #D7A860; }
.s-hero { --hdr-h: calc(env(safe-area-inset-top, 0px) + var(--s-3) + 3rem);
  position: relative; z-index: var(--z-raised); background: var(--cacao); color: var(--on-dark);
  overflow-x: clip; overflow-y: visible; isolation: isolate; }
/* el lienzo baja 16rem por debajo del hero (sobre la sección 2) para que el polvo caiga dentro del tarro */
.s-hero .hero-canvas { position: absolute; inset: 0 0 -16rem; width: 100%; height: calc(100% + 16rem); z-index: 0; pointer-events: none; }
.hero-stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; align-content: center;
  grid-template-areas: "copy" "scene" "act"; gap: var(--s-5);
  padding-block: calc(var(--hdr-h) + var(--s-5)) var(--s-6); }
.hero-copy { grid-area: copy; display: grid; gap: var(--s-4); justify-items: start; }
.hero-mark { width: clamp(2.5rem, 1.9rem + 2.4vw, 4.25rem); aspect-ratio: 1; color: var(--oro); margin-bottom: var(--s-1);
  transition: opacity .6s var(--ease-out); }
/* cuando el motor dibuja el símbolo con polvo, el SVG se retira pero conserva su hueco (es el ancla) */
.s-hero.polvo-on .hero-mark, .hero-canvas[data-polvo-state="ready"] ~ .hero-stage .hero-mark { opacity: 0; }
.hero-t { font: 400 clamp(3rem, 1rem + 5.2vw, 6rem)/.92 var(--serif); letter-spacing: -.03em; max-width: 9ch; }
.hero-sub { max-width: 34ch; text-wrap: balance; font-size: var(--t-lg); line-height: 1.45; color: var(--on-dark); }
.hero-act { grid-area: act; display: grid; gap: var(--s-4); justify-items: start; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.hero-gamas { color: var(--on-dark); min-height: 2.75rem; display: inline-flex; align-items: center; }
.hero-serv { font-size: var(--t-sm); color: var(--on-dark-2); letter-spacing: .01em; }

/* escena del look: rostro real en arco + halo de polvo; ficha con los tonos que lleva */
.hero-tonos { grid-area: scene; position: relative; display: grid; align-items: start;
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "visual ficha" "ctrl ctrl";
  column-gap: var(--s-5); row-gap: var(--s-3); }
.hero-tonos [hidden] { display: none !important; }
/* recortes de ~650-700 px: el arco no pasa de 25rem (≤ 1,25× de escalado en pantallas 2×) */
.tonos-visual { grid-area: visual; position: relative; aspect-ratio: 3 / 4; border-radius: var(--arch);
  width: clamp(8.5rem, min(40vw, calc((100svh - 39rem) * .75)), 11.5rem); }
/* aura del color del look: se funde al cambiar (@property) aunque no haya partículas */
.tonos-visual::before { content: ""; position: absolute; inset: -14% -18% -10%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tono-actual) 30%, transparent), transparent 72%);
  transition: --tono-actual 1.2s var(--ease-out); pointer-events: none; }
.hero-tonos .ring-canvas { position: absolute; top: -24%; left: -30%; width: 160%; height: 154%; max-width: none; z-index: 0; pointer-events: none; }
.tono-photo { position: absolute; inset: 0; z-index: 1; margin: 0; overflow: hidden; border-radius: var(--arch);
  opacity: 0; transition: opacity .9s var(--ease-out); box-shadow: 0 0 0 1px rgb(244 237 227 / .14); }
.tono-photo.is-active { opacity: 1; z-index: 2; }
.tono-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%);
  transform-origin: 50% 30%; transform: scale(1.06); transition: transform 7s var(--ease-out); }
.tono-photo.is-active .tono-img { transform: scale(1); }

.tonos-ficha { grid-area: ficha; display: grid; align-self: center; }
.tono-info { grid-area: 1 / 1; display: grid; gap: var(--s-3); align-content: center; opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility 0s .5s; }
.tono-info.is-active { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out) .15s, visibility 0s; }
.tono-name { font: italic 400 clamp(1.875rem, 1.3rem + 2vw, 3.5rem)/1 var(--serif); letter-spacing: -.01em; color: var(--on-dark);
  text-wrap: balance; clip-path: inset(-.3em 100% -.3em -.3em); filter: blur(4px);
  transition: clip-path 1s var(--ease-out), filter 1s var(--ease-out); }
.tono-info.is-active .tono-name { clip-path: inset(-.3em -.5em -.3em -.3em); filter: blur(0); transition-delay: .2s; }
.tono-rows { display: grid; gap: var(--s-1); }
.tono-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3);
  min-height: 2.75rem; color: var(--on-dark); text-decoration: none; }
.tono-thumb { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--cacao), 0 0 0 2.5px var(--tono, var(--oro)); }
.tono-row-t { display: grid; line-height: 1.25; }
.tono-row-n { font: 500 var(--t-sm)/1.25 var(--sans); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .25em; text-decoration-color: rgb(244 237 227 / .45); }
.tono-row:hover .tono-row-n { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.tono-row-m { font-size: var(--t-xs); color: var(--on-dark-2); }
.tono-credit { font-size: var(--t-xs); color: var(--on-dark-2); letter-spacing: .02em; }
.tonos-ctrl { grid-area: ctrl; display: flex; flex-wrap: wrap; align-items: center; margin-left: -.75rem; }
.tono-dot, .tonos-pause { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0;
  background: none; border-radius: 50%; color: var(--on-dark); }
.tono-dot span { width: .875rem; height: .875rem; border-radius: 50%; background: var(--tono);
  box-shadow: 0 0 0 1px rgb(244 237 227 / .45); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tono-dot:hover span { transform: scale(1.2); }
.tono-dot[aria-current="true"] span { transform: scale(1.3); box-shadow: 0 0 0 2px var(--cacao), 0 0 0 3.5px var(--hueso); }
.tonos-pause-ico { position: relative; width: .75rem; height: .875rem; }
.tonos-pause-ico::before, .tonos-pause-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  border-radius: 1px; background: currentColor; }
.tonos-pause-ico::before { left: 1px; } .tonos-pause-ico::after { right: 1px; }
.tonos-pause[aria-pressed="true"] .tonos-pause-ico { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.tonos-pause[aria-pressed="true"] .tonos-pause-ico::before { width: 100%; left: 0; }
.tonos-pause:hover { background: rgb(244 237 227 / .08); }
@media (max-width: 29.99rem) {
  .tono-row-m { display: none; }   /* móvil estrecho: nombre y miniatura; precio y stock en la ficha enlazada */
  .tono-thumb { width: 2rem; height: 2rem; }
}

@media (min-width: 60rem) {
  .hero-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--gutter);
    row-gap: var(--s-6); padding-bottom: var(--s-7); }
  .hero-copy { grid-column: 1 / 7; grid-row: 1; align-self: end; gap: var(--s-5); }
  .hero-act { grid-column: 1 / 7; grid-row: 2; align-self: start; gap: var(--s-5); }
  /* asimetría: la ficha del look queda entre el lema y el rostro; el arco baja un poco */
  .hero-tonos { grid-column: 7 / 13; grid-row: 1 / 3; align-self: center; margin-top: var(--s-6);
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "ficha visual" "ctrl visual";
    column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: var(--s-4); }
  .tonos-visual { width: clamp(15rem, min(26vw, calc((100svh - 15rem) * .75)), 25rem); }
  .tonos-ficha { align-self: end; padding-bottom: var(--s-2); }
  .tono-info { justify-items: start; }
  .tonos-ctrl { align-self: end; }
}

/* movimiento reducido: sin zoom ni barrido; cambio por fundido corto (≤150 ms) al pulsar */
@media (prefers-reduced-motion: reduce) {
  .s-hero .tono-photo, .s-hero .tono-info, .s-hero .tono-info.is-active { transition: opacity .14s var(--ease-out) !important; transition-delay: 0s !important; }
  .s-hero .tono-img, .s-hero .tono-photo.is-active .tono-img { transform: none; transition: none !important; }
  .s-hero .tono-name, .s-hero .tono-info.is-active .tono-name { clip-path: none; filter: none; transition: none !important; }
  .s-hero .tonos-visual::before { transition: none !important; }
}
.motion-reduce .s-hero .tono-photo, .motion-reduce .s-hero .tono-info, .motion-reduce .s-hero .tono-info.is-active { transition: opacity .14s var(--ease-out); transition-delay: 0s; }
.motion-reduce .s-hero .tono-img, .motion-reduce .s-hero .tono-photo.is-active .tono-img { transform: none; transition: none; }
.motion-reduce .s-hero .tono-name, .motion-reduce .s-hero .tono-info.is-active .tono-name { clip-path: none; filter: none; transition: none; }
.motion-reduce .s-hero .tonos-visual::before { transition: none; }

/* ---------------------------------------------------------------- 2 · claim: «Del tarro a tu piel en 24/48 h» */
/* El titular, grande y fijo a la izquierda, es el destino del polvo del hero ([data-polvo-sink]); a la derecha,
   tres pasos que se marcan al bajar ([data-steps] → .is-active). Selectores con .s-claim delante: banners.css
   (se carga después) trae reglas antiguas de .claim-grid. */
.s-claim { position: relative; padding-block: var(--s-8) var(--s-section); background: var(--hueso); }
.s-claim .claim-grid { position: relative; display: grid; gap: var(--s-7); grid-template-rows: none; }
.s-claim .claim-head { position: relative; z-index: auto; margin: 0; grid-row: auto; }
.s-claim .claim-copy { display: grid; gap: var(--s-6); align-content: start; max-width: 40rem; grid-row: auto; }
.s-claim .claim-t { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.claim-steps { position: relative; display: grid; gap: var(--s-6); padding-left: var(--s-6); }
/* línea de progreso: rail fino y relleno bronce que avanza con el scroll de la lista */
.claim-steps::before, .claim-steps::after { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 1px;
  background: var(--line); }
.claim-steps::after { background: var(--bronce); width: 2px; left: -.5px; transform-origin: 50% 0; }
.claim-step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n ilu" "n t" "n p";
  column-gap: var(--s-5); row-gap: var(--s-2); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.step-n { grid-area: n; font: italic 400 clamp(2.75rem, 2rem + 2.4vw, 4.25rem)/.9 var(--serif); color: var(--bronce);
  font-variant-numeric: lining-nums; min-width: 1.1em; }
.step-ilu { grid-area: ilu; width: 2.5rem; color: var(--bronce); }
.step-t { grid-area: t; font: 500 var(--t-h4)/1.2 var(--serif); }
.step-p { grid-area: p; font-size: var(--t-base); line-height: 1.55; color: var(--ink-2); max-width: 38ch; }
.s-claim .claim-more { justify-self: start; color: var(--ink); min-height: 2.75rem; display: inline-flex; align-items: center; }
/* paso activo (motion.js): el resto baja de tono, sin desaparecer */
.motion-ok .claim-steps.has-active .claim-step { opacity: .42; }
.motion-ok .claim-steps.has-active .claim-step.is-active { opacity: 1; transform: translateX(.25rem); }
@supports (animation-timeline: view()) {
  .motion-ok .claim-steps { view-timeline: --pasos block; }
  .motion-ok .claim-steps::after { animation: paso-linea linear both; animation-timeline: --pasos;
    animation-range: entry 70% exit 30%; }
}
@keyframes paso-linea { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (min-width: 60rem) {
  .s-claim .claim-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .s-claim .claim-head { grid-column: 1 / 7; position: sticky; top: calc(var(--s-3) + 3rem + var(--s-6)); }
  .s-claim .claim-t { font-size: clamp(var(--t-h2), 2rem + 5.2vw, 7.5rem); max-width: 9ch; }
  .s-claim .claim-copy { grid-column: 8 / 13; padding-top: var(--s-6); gap: var(--s-7); }
  .claim-steps { gap: var(--s-9); padding-block: var(--s-4) var(--s-8); }
}
@media (prefers-reduced-motion: reduce) {
  .s-claim .claim-head { position: static; }
  .claim-steps.has-active .claim-step { opacity: 1 !important; transform: none !important; }
  .claim-steps::after { animation: none !important; transform: none; }
}
.motion-reduce .s-claim .claim-head { position: static; }
.motion-reduce .claim-steps .claim-step { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 3 · pista de gamas */
.s-gamas { position: relative; background: var(--cacao); color: var(--on-dark); padding-block: var(--s-section); }
.track-sticky { display: grid; gap: var(--s-7); }
.track-head { display: grid; gap: var(--s-4); }
.track-head h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.02em; max-width: 14ch; }
.track-head p { color: var(--on-dark-2); max-width: 40ch; }
.track-rail { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgb(215 168 96 / .5) transparent;
  padding: var(--s-2) max(var(--gutter), (100vw - var(--wrap)) / 2) var(--s-6); scroll-padding-inline: var(--gutter); }
.track-rail:focus-visible { outline-offset: -2px; }
/* anclada por motion: cabecera arriba, pista debajo, todo dentro de 100vh */
.s-gamas[data-track].is-pinned { padding-block: 0; }
.s-gamas[data-track].is-pinned .track-sticky { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--s-6); }
.s-gamas[data-track].is-pinned .track-rail { width: max-content; padding-inline: max(var(--gutter), (100vw - var(--wrap)) / 2); }
.s-gamas[data-track].is-pinned .track-item { width: clamp(15rem, 19vw, 19rem); }
.s-gamas[data-track].is-pinned .track-item:nth-child(even) { margin-top: var(--s-6); }
.s-gamas[data-track].is-pinned .track-head h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); max-width: none; }
.track-item { position: relative; scroll-snap-align: start; width: clamp(16.5rem, 24vw, 22rem); flex: none;
  border-radius: var(--r-l); isolation: isolate; overflow: hidden;
  /* cacao un punto más claro; la gama solo como luz (halo, número, shimmer) */
  background: radial-gradient(70% 45% at 50% 28%, color-mix(in oklab, var(--gama) 26%, transparent), transparent 70%),
              color-mix(in oklab, #1B1410 88%, var(--gama));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(244 237 227 / .06); }
.track-item:nth-child(even) { margin-top: var(--s-8); }
.track-item a { display: grid; gap: var(--s-2); height: 100%; padding: var(--s-5) var(--s-5) var(--s-6); text-decoration: none; }
.track-fig { display: block; aspect-ratio: 1; margin-bottom: var(--s-4); }
.track-fig img { width: 100%; height: 100%; object-fit: cover; }
.track-fig img.is-photo { border-radius: var(--arch); }
.track-fig img.cutout:not(.is-photo) { object-fit: contain; filter: drop-shadow(0 24px 30px rgb(0 0 0 / .45)); }
.track-n { position: absolute; top: var(--s-4); right: var(--s-5); z-index: 1; font: italic 400 1.5rem/1 var(--serif);
  color: color-mix(in oklab, var(--gama) 55%, var(--hueso)); font-variant-numeric: tabular-nums; }
.track-name { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.05 var(--serif); letter-spacing: -.01em;
  hyphens: auto; overflow-wrap: anywhere; text-wrap: balance; }
.track-name.is-long { font-size: clamp(1.25rem, 1rem + .75vw, 1.625rem); hyphens: manual; }
.track-line { color: var(--on-dark-2); font-size: var(--t-sm); line-height: 1.5; }
.track-meta { color: var(--oro); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; }
.track-item a:hover .track-name { font-style: italic; }

/* Móvil y táctil: carrusel nativo deslizable con el dedo (motion.js no la ancla: .is-swipe). La tarjeta siguiente
   asoma ~15 %; sin barra visible (motion.js añade .track-progress, fino). Sin JS se ve igual por la media query. */
.track-hint-pin { display: none; }
[data-track].is-pinned .track-hint-pin { display: inline; }
[data-track].is-pinned .track-hint-swipe { display: none; }
@media (max-width: 47.99rem), (hover: none) and (pointer: coarse) {
  .s-gamas[data-track]:not(.is-pinned) .track-rail { gap: .75rem; padding: var(--s-2) var(--gutter) var(--s-4);
    scroll-padding-inline: var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; }
  .s-gamas[data-track]:not(.is-pinned) .track-rail::-webkit-scrollbar { display: none; }
  .s-gamas[data-track]:not(.is-pinned) .track-item { flex: 0 0 82%; width: 82%; max-width: 22rem; margin-top: 0;
    scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- 4 · muro de tonos */
.s-tonos { padding-block: var(--s-section); background: var(--hueso); }
.tonos-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.tonos-head h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.02em; }
.tonos-head p { color: var(--ink-2); max-width: 40ch; font-size: var(--t-lg); }
.tone-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 42%), 1fr)); gap: var(--s-7) var(--s-5); }
.tone { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.tone-btn { display: grid; justify-items: center; gap: var(--s-2); padding: 0; border: 0; background: none; width: 100%;
  border-radius: var(--r-m); }
.tone-sw { width: min(100%, clamp(6rem, 18vw, 8rem)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--tone);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 .4rem var(--hueso), 0 0 0 calc(.4rem + 1px) transparent;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.tone-sw img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.tone-btn:hover .tone-sw, .tone-btn:focus-visible .tone-sw { transform: scale(1.04);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 .4rem var(--hueso), 0 0 0 calc(.4rem + 2px) var(--tone); }
.tone-name { font: 500 var(--t-h4)/1.15 var(--serif); margin-top: var(--s-3); }
.tone-meta { font-size: var(--t-xs); color: var(--ink-2); }
.tone-more { font-size: var(--t-xs); color: var(--ink-2); min-height: 2rem; display: inline-flex; align-items: center; }
.tone-more:hover { color: var(--ink); }
@media (min-width: 48rem) {
  .tone-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tone:nth-child(12n+2), .tone:nth-child(12n+4), .tone:nth-child(12n+6) { translate: 0 var(--s-6); }
  .tone:nth-child(12n+7), .tone:nth-child(12n+9), .tone:nth-child(12n+11) { translate: 0 var(--s-6); }
}

/* ---------------------------------------------------------------- 5 · en piel real: compra el look */
/* Looks reales comprables (build.py › piel_section · tema: banner-piel-real.php). Fondo blanco: el contorno
   bronce del botón secundario da 5,87:1 y el halo del tono se lee sobre claro. Contrastes: ink-2/blanco 7,5 ·
   ok/blanco 6,5 · agotado/blanco 6,7 · bronce/blanco 5,87. */
.s-piel { padding-block: var(--s-section); background: var(--blanco); }
.piel-grid { display: grid; gap: var(--s-7); }
.piel-head { display: grid; gap: var(--s-4); align-content: start; }
.piel-head h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.02em; }
.piel-head p { color: var(--ink-2); font-size: var(--t-lg); max-width: 34ch; }
.lk-list { display: grid; gap: var(--s-8); }
.lk-card { display: grid; gap: var(--s-4); align-content: start; }
.lk-fig { display: grid; gap: var(--s-2); }
.lk-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-m); background: var(--arena); }
.lk:nth-child(odd) .lk-photo { border-radius: var(--arch); }
.lk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%);
  transition: transform 1.2s var(--ease-out); }
.lk-card:hover .lk-photo img { transform: scale(1.03); }
.lk-credit { font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; color: var(--ink-2); }
.lk-name { font: 400 var(--t-h4)/1.15 var(--serif); letter-spacing: -.01em; }
.lk-frase { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; max-width: 36ch; margin-top: calc(var(--s-2) * -1); }
.lk-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lk-chip { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2);
  min-height: 3rem; padding: .25rem var(--s-4) .25rem .25rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; background: var(--blanco);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.lk-chip:hover { border-color: color-mix(in oklab, var(--tono, var(--bronce)) 70%, var(--cacao)); }
.lk-chip:active { transform: scale(.98); }
.lk-chip:focus-visible { outline-offset: 2px; border-radius: var(--r-pill); }
.lk-chip-img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: var(--arena);
  box-shadow: 0 0 0 1.5px var(--blanco), 0 0 0 3px var(--tono, var(--oro)); }
.lk-chip-t { display: grid; line-height: 1.2; }
.lk-chip-n { font: 500 var(--t-sm)/1.2 var(--sans); }
.lk-chip:hover .lk-chip-n { text-decoration: underline; text-underline-offset: .2em; }
.lk-chip-m { font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.lk-chip-out { font-size: var(--t-xs); font-weight: 500; color: var(--agotado); }
.lk-chip.is-out { border-style: dashed; }
.lk-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  margin-top: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.lk-total { flex: 1 1 auto; white-space: nowrap; font: 500 1.125rem/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.lk-buy .btn-line { flex: 0 0 auto; }
.lk-msg { flex: 1 0 100%; font-size: var(--t-sm); font-weight: 500; color: var(--ok); }
.lk-msg:empty { display: none; }
.lk-msg:not(:empty) { padding-top: var(--s-3); }
.lk-msg.is-error { color: var(--agotado); }

/* botón secundario: contorno bronce, sin relleno (el relleno es solo para el único botón de acento de la vista) */
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3rem;
  padding: 0 var(--s-5); border: 1.5px solid var(--bronce); border-radius: var(--r-pill); background: transparent;
  color: var(--bronce); font: 500 var(--t-sm)/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.btn-line:hover { background: color-mix(in oklab, var(--bronce) 9%, transparent); border-color: var(--bronce-hondo); color: var(--bronce-hondo); }
.btn-line:active { transform: scale(.98); }
.btn-line[aria-disabled="true"] { cursor: progress; opacity: .7; }
.btn-line:disabled { border-color: var(--arena); color: var(--ink-2); cursor: not-allowed; background: none; }

@media (min-width: 40rem) {
  .lk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-8); }
}
@media (min-width: 56rem) {
  .piel-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-7); }
  .piel-head p { justify-self: end; }
  .lk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .lk:nth-child(3n+2) { margin-top: var(--s-8); }
  .lk:nth-child(3n) { margin-top: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .lk-photo img, .lk-card:hover .lk-photo img { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .btn-line, .lk-chip { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- 4b · lentillas: «Prueba el color» */
/* Probador de lentillas (build.py › lentillas_section · tema: home-lentillas.php · JS: lentillas.js).
   Fondo cacao: los iris de las fotos son grises suaves y se leen mejor sobre oscuro. Contrastes sobre cacao:
   hueso 15,7 · on-dark-2 10,1 · oro 8,37 · stock #7FC79A 9,6 · agotado #FF9C93 ≥ 7 · botón blanco/bronce 5,87.
   Encuadre común de la mirada: cada foto lleva --ex/--ey (punto medio entre pupilas, fracción de la foto),
   --ed (distancia entre pupilas / ancho) y --rot; el punto medio cae en el 50 % × 45 % del marco y la distancia
   entre pupilas mide el 44 % del ancho del marco en todas las fotos (de la ceja al labio). */
.s-lentillas { --focus: var(--oro); --lent-ok: #7FC79A; --lent-out: #FF9C93;
  padding-block: var(--s-section); background: var(--cacao); color: var(--on-dark); }
.lent-grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "panel"; }
.lent-head { grid-area: head; display: grid; gap: var(--s-4); }
.lent-head h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.02em; max-width: 11ch; }
.lent-head p { color: var(--on-dark-2); font-size: var(--t-lg); max-width: 34ch; }

.lent-stage { grid-area: stage; display: grid; justify-items: center; }
.lent-frame { position: relative; width: min(100%, 30rem); aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: var(--r-l); background: #2B211B; }
.lent-img { position: absolute; left: 50%; top: 45%; width: calc(.44 / var(--ed, .185) * 100%); max-width: none; height: auto;
  transform-origin: calc(var(--ex, .5) * 100%) calc(var(--ey, .27) * 100%);
  transform: translate(calc(var(--ex, .5) * -100%), calc(var(--ey, .27) * -100%)) rotate(var(--rot, 0deg)); }
.lent-img.is-entering { mask-image: var(--grain-x), linear-gradient(#000 0 0); mask-size: 300% 100%, 0% 100%;
  mask-repeat: no-repeat; animation: lent-grano 820ms var(--ease-out) both; }
.lent-img.is-fading { animation: lent-funde 140ms var(--ease-out) both; }
/* mask-image no se anima: se anima la posición del grano y en el último 1 % la capa sólida lo cubre todo */
@keyframes lent-grano {
  from { mask-position: 100% 0, 0 0; mask-size: 300% 100%, 0% 100%; filter: blur(4px); }
  99%  { mask-position: 0% 0, 0 0; mask-size: 300% 100%, 0% 100%; filter: blur(0); }
  to   { mask-position: 0% 0, 0 0; mask-size: 300% 100%, 100% 100%; filter: none; }
}
@keyframes lent-funde { from { opacity: 0; } to { opacity: 1; } }

.lent-panel { grid-area: panel; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; }
.lent-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.lent-name { font: italic 400 clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem)/1 var(--serif); letter-spacing: -.015em; color: var(--hueso); }
.lent-desc { font-size: var(--t-lg); line-height: 1.45; max-width: 34ch; color: var(--on-dark); }
.lent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); color: var(--on-dark-2); }
.lent-price { font: 500 1.25rem/1.2 var(--serif); color: var(--hueso); font-variant-numeric: tabular-nums lining-nums; }
.lent-sep { color: var(--on-dark-2); }
.s-lentillas .stock-ok { color: var(--lent-ok); }
.s-lentillas .stock-low { color: var(--oro); }
.s-lentillas .stock-out { color: var(--lent-out); }
.lent-tech { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-3) var(--s-5);
  margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-dark); max-width: 34rem; }
.lent-tech-row { display: grid; gap: .1rem; align-content: start; font-size: var(--t-sm); line-height: 1.35; }
.lent-tech dt { color: var(--on-dark-2); font-size: var(--t-xs); letter-spacing: .02em; }
.lent-tech dd { margin: 0; color: var(--hueso); }
.lent-info.is-swap > * { animation: lent-sube .5s var(--ease-out) both; }
.lent-info.is-swap > :nth-child(2) { animation-delay: 50ms; }
.lent-info.is-swap > :nth-child(3) { animation-delay: 90ms; }
.lent-info.is-swap > :nth-child(4) { animation-delay: 130ms; }
.lent-info.is-swap-quiet > * { animation: lent-funde 140ms var(--ease-out) both; }
@keyframes lent-sube { from { opacity: 0; translate: 0 .6rem; filter: blur(2px); } to { opacity: 1; translate: 0 0; filter: none; } }

/* muestras: un iris dibujado (pupila, brillo, fibras, anillo límbico oscuro), no un punto de color */
.lent-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.lent-pick-t { font-size: var(--t-sm); font-weight: 500; color: var(--on-dark-2); }
.lent-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); margin: 0; padding: 0; list-style: none; } /* con JS el role pasa a radiogroup: el reset de ul[role="list"] ya no aplica */
.lent-sw { display: grid; justify-items: center; align-content: start; gap: .4rem; min-height: 2.75rem; padding: .375rem .125rem;
  border-radius: var(--r-m); color: var(--on-dark-2); text-decoration: none; text-align: center; }
.lent-iris { --i: var(--iris, #777); display: block; width: 3.25rem; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 31%, rgb(255 255 255 / .9) 0 .16rem, rgb(255 255 255 / 0) .26rem),
    radial-gradient(circle, #0B0807 0 20%, rgb(11 8 7 / 0) 21.5%),
    repeating-conic-gradient(from 6deg, rgb(255 255 255 / .12) 0 2.5deg, rgb(255 255 255 / 0) 2.5deg 6deg, rgb(0 0 0 / .14) 6deg 8deg, rgb(0 0 0 / 0) 8deg 12deg),
    radial-gradient(circle, color-mix(in oklab, var(--i) 52%, #F4EDE3) 0 22%, var(--i) 44%, color-mix(in oklab, var(--i) 62%, #000) 72%, #0E0A08 84% 100%);
  box-shadow: inset 0 .4rem .5rem -.25rem rgb(0 0 0 / .5), 0 0 0 1px rgb(244 237 227 / .2);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.lent-sw-n { font: 500 var(--t-xs)/1.2 var(--sans); letter-spacing: .02em; }
.lent-sw-out { font-size: .75rem; line-height: 1.1; color: var(--lent-out); margin-top: -.2rem; }
.lent-sw:hover .lent-iris { transform: scale(1.06); }
.lent-sw:hover .lent-sw-n { color: var(--hueso); }
.lent-sw.is-current .lent-sw-n, .lent-sw[aria-checked="true"] .lent-sw-n { color: var(--hueso); }
.lent-sw.is-current .lent-iris, .lent-sw[aria-checked="true"] .lent-iris { transform: scale(1.08);
  box-shadow: inset 0 .4rem .5rem -.25rem rgb(0 0 0 / .5), 0 0 0 2px var(--cacao), 0 0 0 3.5px var(--oro); }
.lent-sw:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.lent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark); }
.lent-add { flex: 1 1 100%; }
.lent-add-btn { width: 100%; }
.s-lentillas .btn-acc:disabled { background: #3A2E26; color: var(--on-dark-2); }
.lent-apl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.lent-apl-colors { display: flex; gap: 0; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.lent-apl-c { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.lent-apl-c input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lent-apl-dot { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(27 20 16 / .25), 0 0 0 1px rgb(244 237 227 / .45);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
/* agotado: visible, punto atenuado con diagonal fina, no se elige; «Agotado» al pasar o enfocar */
.lent-apl-c.is-out, .lent-apl-c.is-out input { cursor: not-allowed; }
.lent-apl-c.is-out .lent-apl-dot { opacity: .45; }
.lent-apl-c.is-out::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1px; z-index: 1;
  background: var(--hueso); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; }
.lent-apl-tip { position: absolute; bottom: calc(100% + .1rem); left: 50%; translate: -50% .25rem; z-index: var(--z-raised);
  padding: .2rem .5rem; border-radius: var(--r-pill); background: var(--hueso); color: var(--cacao); white-space: nowrap;
  font: 500 .75rem/1.2 var(--sans); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out), translate .2s var(--ease-out); }
.lent-apl-c.is-out:hover .lent-apl-tip, .lent-apl-c.is-out:focus-within .lent-apl-tip { opacity: 1; translate: -50% 0; }
.lent-apl-c.is-out input:focus-visible + .lent-apl-dot { outline: 2px solid var(--oro); outline-offset: 4px; opacity: .6; }
.lent-apl-c input:checked + .lent-apl-dot { box-shadow: 0 0 0 2px var(--cacao), 0 0 0 3.5px var(--oro); transform: scale(1.05); }
.lent-apl-c input:focus-visible + .lent-apl-dot { outline: 2px solid var(--oro); outline-offset: 4px; }
.s-lentillas .btn-line { border-color: var(--oro); color: var(--oro); }
.s-lentillas .btn-line:hover { background: rgb(215 168 96 / .1); border-color: var(--oro); color: var(--hueso); }
.lent-all { color: var(--hueso); min-height: 2.75rem; display: inline-flex; align-items: center; }

@media (min-width: 30rem) {
  .lent-swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lent-iris { width: clamp(2.75rem, 1.6rem + 2.6vw, 3.5rem); }
}
@media (min-width: 60rem) {
  .lent-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--gutter); row-gap: var(--s-6); }
  .lent-stage { grid-column: 1 / 7; grid-row: 1 / 3; align-self: start; justify-items: start; position: sticky; top: max(5.5rem, calc(50svh - 21.25rem)); }
  .lent-frame { width: min(100%, calc((100svh - 9rem) * .8), 34rem); }
  .lent-head { grid-column: 8 / 13; grid-row: 1; align-self: end; }
  .lent-panel { grid-column: 8 / 13; grid-row: 2; }
  .lent-add { flex: 0 1 auto; }
  .lent-add-btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lent-img.is-entering { mask-image: none; animation: lent-funde 140ms var(--ease-out) both; }
  .lent-info.is-swap > * { animation: lent-funde 140ms var(--ease-out) both; animation-delay: 0s; }
  .lent-iris, .lent-apl-dot { transition: none; }
}
@media (forced-colors: active) {
  .lent-iris { forced-color-adjust: none; }
  .lent-sw[aria-checked="true"], .lent-sw.is-current { outline: 2px solid Highlight; }
}

/* ---------------------------------------------------------------- 6 · packs y banner */
.s-packs { padding-block: var(--s-section); background: var(--hueso); }
.packs-grid { display: grid; gap: var(--s-7); }
.packs-head { display: grid; gap: var(--s-4); }
.packs-head h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.02em; max-width: 12ch; }
.packs-head p { color: var(--ink-2); max-width: 40ch; }
.packs-head a { color: var(--ink); font-weight: 500; }
.banner-slot { min-width: 0; }
.banner-slot.is-empty { display: grid; place-items: center; aspect-ratio: 4/3; border-radius: var(--r-l);
  background: radial-gradient(120% 90% at 70% 20%, rgb(215 168 96 / .28), transparent 60%), var(--arena); }
.slot-sym { width: 28%; color: var(--bronce); opacity: .35; }
.pack-list { display: grid; }
.pack { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-1) var(--s-4);
  padding-block: var(--s-5); border-top: 1px solid var(--line); }
.pack:last-child { border-bottom: 1px solid var(--line); }
.pack a { text-decoration: none; }
.pack a:hover .pack-name { font-style: italic; }
.pack-name { font: 400 var(--t-h3)/1.1 var(--serif); }
.pack-save { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--ink-2); }
@media (min-width: 56rem) {
  .packs-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-5); }
  .packs-grid { row-gap: var(--s-8); }
  .packs-grid > .banner-slot { grid-column: 1 / -1; grid-row: 1; }
  .packs-grid > .banner-slot.is-empty { grid-column: 7 / 13; grid-row: 2; }
  .packs-head { grid-column: 1 / 6; grid-row: 2; align-self: start; }
  .pack-list { grid-column: 7 / 13; grid-row: 2; }
  .packs-grid:has(.banner-slot.is-empty) .pack-list { grid-column: 1 / 6; grid-row: 3; }
}

/* ---------------------------------------------------------------- 7 · cifras */
.s-cifras { background: var(--cacao); color: var(--on-dark); padding-block: var(--s-section) calc(var(--s-section) * .8); }
.cifras { display: grid; gap: var(--s-8); }
.cifra { display: grid; gap: var(--s-3); max-width: 24rem; }
.cifra-n { font: italic 400 clamp(3.5rem, 2rem + 6vw, 7rem)/.95 var(--serif); color: var(--oro);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.cifra-t { font-size: var(--t-lg); color: var(--on-dark-2); max-width: 24ch; }
@media (min-width: 56rem) {
  .cifras { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .cifra:nth-child(2) { margin-top: var(--s-8); }
  .cifra:nth-child(3) { margin-top: calc(var(--s-8) * 2); }
}

/* ---------------------------------------------------------------- pie */
.ftr { background: var(--cacao); color: var(--on-dark); padding-block: var(--s-8) var(--s-6);
  border-top: 1px solid var(--line-dark); }
.ftr-grid { display: grid; gap: var(--s-7); }
.footer-sym { width: 3rem; height: 3rem; color: var(--oro); }
.ftr-brand { display: grid; gap: var(--s-4); }
.ftr-lema { font: italic 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.1 var(--serif); max-width: 12ch; }
.ftr-h { font: 600 var(--t-xs)/1.2 var(--sans); color: var(--oro); letter-spacing: .04em; margin-bottom: var(--s-4); }
.ftr-col ul { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--on-dark-2); }
.ftr-col a { text-decoration: none; }
.ftr-col a:hover { color: var(--hueso); text-decoration: underline; }
.ftr-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.ftr-list .i { flex: none; margin-top: .2rem; color: var(--oro); }
.ftr-legal { font-size: var(--t-xs); color: var(--on-dark-2); padding-top: var(--s-6); border-top: 1px solid var(--line-dark); }
@media (min-width: 56rem) {
  .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .ftr-col:first-of-type ul { columns: 2; display: block; }
  .ftr-col:first-of-type li { margin-bottom: var(--s-2); }
  .ftr-legal { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- gama */
.gama-head { --gama-fondo: color-mix(in oklab, var(--cacao) 88%, var(--gama, var(--cacao)));   /* cacao con un punto de gama, como las tarjetas de la pista */
  --gama-luz: color-mix(in oklab, var(--gama, var(--oro)) 55%, var(--hueso));                  /* gama aclarada para texto: >= 5,8:1 sobre el fondo */
  position: relative; isolation: isolate; background: var(--gama-fondo); color: var(--on-dark); padding-block: 8.5rem var(--s-8); overflow: hidden; }
.gama-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;   /* la gama solo como luz */
  background: radial-gradient(46% 72% at 76% 42%, color-mix(in oklab, var(--gama, transparent) 28%, transparent), transparent 72%),
              radial-gradient(38% 50% at 10% 100%, color-mix(in oklab, var(--gama, transparent) 12%, transparent), transparent 70%); }
.gama-head-grid { position: relative; display: grid; gap: var(--s-4); }
.gama-head .crumbs { color: var(--on-dark-2); }
.gama-t { font: 400 var(--t-h1)/.95 var(--serif); letter-spacing: -.03em; max-width: 10ch; overflow-wrap: anywhere; }
.gama-line { font-size: var(--t-lg); max-width: 34ch; color: var(--on-dark); }
.gama-meta { font-size: var(--t-sm); color: var(--gama-luz, var(--oro)); font-weight: 500; }
.gama-fig { width: min(70vw, 22rem); margin-top: var(--s-5); aspect-ratio: 1; }
.gama-fig img { width: 100%; height: 100%; object-fit: cover; }
.gama-fig img.is-photo { border-radius: var(--arch); box-shadow: 0 0 0 1px rgb(244 237 227 / .15), 0 0 4.5rem color-mix(in oklab, var(--gama, transparent) 38%, transparent); }
.gama-fig img.cutout:not(.is-photo) { object-fit: contain; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .45)) drop-shadow(0 0 3rem color-mix(in oklab, var(--gama, transparent) 40%, transparent)); }
.gama-head .banner-slot { margin-top: var(--s-5); }
@media (min-width: 56rem) {
  .gama-head { padding-block: 10rem var(--s-9); }
  .gama-head-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-5); align-items: end; }
  .gama-head-grid > :not(.gama-fig, .banner-slot) { grid-column: 1 / 8; }
  .gama-fig, .gama-head .banner-slot { grid-column: 8 / 13; grid-row: 1 / 5; justify-self: end; width: 100%; max-width: 30rem; margin: 0; }
}
.gama-body { padding-block: var(--s-8) var(--s-section); }
.gama-more { padding-bottom: var(--s-section); display: grid; gap: var(--s-4); }
.gama-more ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gama-more a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-pill); text-decoration: none; font-size: var(--t-sm); font-weight: 500; transition: border-color .2s var(--ease-out); }
.gama-more a:hover { border-color: var(--cacao); }

/* grupo de gamas solo en presentación (Pigmentos): accesos a las subgamas y enlace de vuelta desde cada una */
.gama-subs { display: grid; gap: var(--s-3); padding-top: var(--s-6); }
.gama-subs-t { font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gama-subs ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gama-sub { display: inline-flex; align-items: baseline; gap: var(--s-3); min-height: 2.75rem; padding: .6rem var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-pill); text-decoration: none; transition: border-color .2s var(--ease-out); }
.gama-sub::before { content: ""; align-self: center; width: .625rem; height: .625rem; border-radius: 50%; background: var(--gama, var(--bronce));
  box-shadow: 0 0 0 1px var(--line); }
.gama-sub:hover { border-color: var(--cacao); }
.gama-sub-name { font: 500 var(--t-base)/1.2 var(--serif); }
.gama-sub-n { font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gama-parent { padding-top: var(--s-5); font-size: var(--t-sm); }
.link-back { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.link-back::before { content: "← "; text-decoration: none; display: inline-block; margin-right: .2em; }
.link-back:hover { text-decoration-thickness: 2px; }

/* rejilla editorial: cada séptima tarjeta ocupa 2 × 2 */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-4); grid-auto-flow: dense; }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8) var(--s-5); } }
@media (min-width: 72rem) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .gama-body .grid > .card:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
  .gama-body .grid > .card:nth-child(7n+1) .card-fig { aspect-ratio: auto; height: 100%; min-height: 0; }
  .gama-body .grid > .card:nth-child(7n+1) .card-tono { font-size: var(--t-h3); }
}
.grid-rel { margin-top: var(--s-6); }

/* tarjeta de producto */
.card { position: relative; display: grid; grid-template-rows: 1fr auto auto; gap: var(--s-2); isolation: isolate; min-width: 0; }
.card-link { display: grid; grid-template-rows: 1fr auto; gap: var(--s-3); text-decoration: none; min-height: 0; }
.card-fig { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-m); background: var(--arena); }
.card-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card-link:hover .card-fig img { transform: scale(1.03); }
.card-name { display: grid; gap: .15rem; }
.card-tipo { font: 500 var(--t-xs)/1.3 var(--sans); color: var(--ink-2); letter-spacing: .02em; }
.card-tono { font: 400 var(--t-h4)/1.1 var(--serif); overflow-wrap: anywhere; }
.card-link:hover .card-tono { font-style: italic; }
.card-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.card-meta .price { font-size: 1.125rem; }
.ph-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.ph-sym { width: 30%; color: var(--bronce); opacity: .3; }

/* ---------------------------------------------------------------- ficha */
.ficha { display: grid; gap: var(--s-7); padding-block: 6.5rem var(--s-8); }
.ficha-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); align-content: start; }
.gal-main { grid-column: 1 / -1; position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--arena); isolation: isolate; }
.gal-main img { width: 100%; max-height: 82vh; object-fit: cover; }
.gal-more { overflow: hidden; border-radius: var(--r-m); background: var(--arena); aspect-ratio: 1; }
.gal-more img { width: 100%; height: 100%; object-fit: cover; }
.ficha-info { display: grid; gap: var(--s-5); align-content: start; }
.ficha-t { display: grid; gap: var(--s-2); }
.ficha-tipo { font: 500 var(--t-sm)/1.2 var(--sans); color: var(--ink-2); letter-spacing: .02em; }
.ficha-tono { font: 400 clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem)/.95 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.ficha-buy { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-4); border-block: 1px solid var(--line); }
.tones { display: grid; gap: var(--s-3); }
.tones-t { font: 500 var(--t-sm)/1.3 var(--sans); }
.tones-t span { font: italic 400 1.1em var(--serif); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); max-height: 15.5rem; overflow-y: auto; padding: 3px; scrollbar-width: thin; }
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .9rem 0 .4rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; text-decoration: none;
  font-size: var(--t-sm); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.chip:hover { border-color: var(--cacao); }
.chip-sw { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tone) var(--sw, none) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(27 20 16 / .15), 0 0 0 2px var(--hueso), 0 0 0 3px var(--tone); flex: none; }
.chip[aria-current] { border-color: var(--cacao); background: var(--blanco); box-shadow: 0 0 0 1px var(--cacao); }
.chip.is-out { border-style: dashed; }
.chip.is-out .chip-t { text-decoration: line-through; text-decoration-thickness: 1px; }
.ficha-info .add .btn-acc { width: 100%; }
.ficha-facts { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.ficha-desc { display: grid; gap: var(--s-3); max-width: 60ch; font-size: var(--t-sm); color: var(--ink-2); }
.rel { padding-bottom: var(--s-section); }
.rel h2 { font: 400 var(--t-h3)/1.1 var(--serif); }
@media (min-width: 60rem) {
  .ficha { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-6); padding-top: 7.5rem; }
  .ficha-gal { grid-column: 1 / 8; }
  .ficha-info { grid-column: 8 / 13; position: sticky; top: 6.5rem; align-self: start; }
}

/* ---------------------------------------------------------------- carrito (cajón y página) */
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(28rem, 100vw); max-width: 100vw; height: 100dvh;
  max-height: 100dvh; padding: 0; border: 0; background: var(--hueso); color: var(--ink); z-index: var(--z-drawer);
  box-shadow: -30px 0 60px -30px rgb(27 20 16 / .5); }
.drawer::backdrop { background: rgb(27 20 16 / .55); }
.drawer-in { display: flex; flex-direction: column; height: 100%; }
.drawer-in > .cart-lines { flex: 1 1 auto; min-height: 0; }
.drawer-foot { margin-top: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line); }
.drawer-head h2 { font: 400 var(--t-h3)/1 var(--serif); }
.drawer-close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 50%; background: none; }
.drawer-empty { padding: var(--s-6) var(--s-5); color: var(--ink-2); }
.drawer .cart-lines { overflow-y: auto; padding: 0 var(--s-5); }
.drawer-foot { display: grid; gap: var(--s-3); padding: var(--s-5); border-top: 1px solid var(--line); background: var(--hueso); }
.drawer-foot[hidden], .cart-full[hidden], [data-cart-empty][hidden] { display: none; }
.cart-line { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--s-2) var(--s-4); align-items: center;
  padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.cart-line img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 50%; background: var(--arena); }
.cart-line-name { font: 400 1.125rem/1.2 var(--serif); text-decoration: none; }
.cart-line-name:hover { text-decoration: underline; }
.cart-line-price { font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); }
.qty button { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; }
.qty output { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.cart-line-remove { grid-column: 2 / -1; justify-self: start; border: 0; background: none; padding: 0; min-height: 2rem;
  font-size: var(--t-xs); color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; font: 500 1.25rem/1.2 var(--serif);
  font-variant-numeric: tabular-nums; }
.sum-ship { font-size: var(--t-xs); color: var(--ink-2); }
.cart-page { padding-block: var(--s-9) var(--s-section); display: grid; gap: var(--s-6); }
.cart-page .cart-lines { max-width: 48rem; }
.cart-sum { display: grid; gap: var(--s-4); max-width: 28rem; margin-top: var(--s-5); }
.cart-empty { display: grid; gap: var(--s-3); font-size: var(--t-lg); }

/* ---------------------------------------------------------------- 404 */
.nf { position: relative; min-height: 100dvh; display: grid; align-items: center; background: var(--cacao); color: var(--on-dark);
  overflow: hidden; isolation: isolate; }
.nf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.nf-copy { display: grid; gap: var(--s-5); padding-block: var(--s-9); }
.nf-t { font: italic 400 clamp(7rem, 4rem + 18vw, 18rem)/.85 var(--serif); color: var(--oro); letter-spacing: -.04em; }
.nf-sub { font-size: var(--t-lg); color: var(--on-dark-2); max-width: 34ch; }
.nf-links { display: flex; flex-wrap: wrap; gap: var(--s-6); }

/* ---------------------------------------------------------------- shimmer: base estática (motion añade el brillo vivo) */
[data-shimmer] { --mx: 50%; --my: 50%; }

/* ---------------------------------------------------------------- ilustraciones de marca: acentos de una tinta */
/* Silueta del SVG de tienda/assets/ilustraciones pintada con currentColor (oro sobre cacao, bronce sobre hueso).
   Pequeñas, alineadas a la retícula y nunca encima de un rostro; entran con el revelado powder de motion.css. */
.ilu-orn, .track-ilu { display: block; justify-self: start; line-height: 0; }
.ilu-orn > span, .track-ilu > span { display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ilu-orn { width: clamp(2.75rem, 2.2rem + 1.6vw, 3.75rem); aspect-ratio: 1; color: var(--bronce); }
.track-ilu { width: 2.25rem; aspect-ratio: 1; color: var(--oro); margin-bottom: calc(-1 * var(--s-1)); }
/* pista de gamas: rostro del banner (ambiente) en arco, sin datos de precio encima */
.track-fig.has-face { overflow: hidden; border-radius: var(--arch); }
.track-face { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02);
  transition: transform .9s var(--ease-out); }
.track-item a:hover .track-face { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .track-item a:hover .track-face { transform: scale(1.02); } }

/* ---------------------------------------------------------------- reduced motion: base sin transiciones largas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card-link:hover .card-fig img, .tone-btn:hover .tone-sw { transform: none; }
}
@media (forced-colors: active) {
  .btn-acc, .hdr-menu, .cart-count { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- huecos de banners (agente banners) */
.gama-bn { --gama-fondo: color-mix(in oklab, var(--cacao) 88%, var(--gama, var(--cacao))); background: var(--gama-fondo); color: var(--on-dark); }
.gama-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); padding-top: var(--s-6); }
.gama-intro .gama-line { color: var(--ink); font-size: var(--t-base); }
.gama-intro .gama-meta { color: var(--bronce); }
.s-piel-bn { padding-block: 0; }

/* ---------------------------------------------------------------- móvil estrecho */
@media (max-width: 29.99rem) {
  .menu-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr-menu { padding: 0; width: 2.75rem; }
  .logo { padding-right: .9rem; }
}
@media (max-width: 59.99rem) {
  /* ficha: foto principal, después compra; las fotos extra van al final */
  .ficha-gal { display: contents; }
  .gal-main { order: 0; }
  .ficha-info { order: 1; }
  .gal-more { order: 2; aspect-ratio: 4/3; }
  .ficha { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-3); }
  .ficha-info { grid-column: 1 / -1; }
  .gal-main img { max-height: 62vh; }
}

/* ==========================================================================
   Polvo · banners.css  [dueño: banners]
   Componentes de banner HTML/CSS: foto limpia + tipografía viva.
   - .bn-gama   cabecera de gama a sangre (variante --panorama)
   - .bn-pack   packs y ofertas
   - .bn-piel   «en piel real», tríptico con crédito
   Tokens: se leen de base.css si existen (--cacao, --hueso…); si no, valores de marca.
   Animación: la pone motion.css a través de data-reveal / data-parallax / data-shimmer.
   ========================================================================== */

.bn {
  --bn-cacao: var(--cacao, #1B1410);
  --bn-blanco: var(--blanco, #FFFFFF);
  --bn-hueso: var(--hueso, #F4EDE3);
  --bn-arena: var(--arena, #E2D5C2);
  --bn-bronce: var(--bronce, #8A5A2B);
  --bn-oro: var(--oro, #D7A860);
  --bn-carmin: var(--carmin, #A0123C);
  --bn-stock: #1F6B3C;
  --bn-stock-oscuro: #7FC79A;      /* verde de stock legible sobre cacao (9,6:1) */
  --bn-agotado: #B0261E;           /* agotado sobre claro */
  --bn-agotado-oscuro: #FF9C93;    /* agotado legible sobre cacao con gama (>= 4,5:1) */
  --bn-serif: var(--font-titulo, "Bodoni Moda", "Bodoni 72", "Didot", Georgia, serif);
  --bn-sans: var(--font-texto, "Jost", "Futura", "Avenir Next", system-ui, sans-serif);
  --bn-gutter: clamp(1rem, 4vw, 4.5rem);
  --bn-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--bn-sans);
  font-size: 1rem;
  line-height: 1.5;
}

.bn :where(h2, h3, p, ul, figure) { margin: 0; }
.bn :where(ul) { padding: 0; list-style: none; }
.bn img { display: block; max-width: 100%; }

/* Símbolo Reflejo: plano, un color, nunca sobre foto. */
.bn-reflejo { display: block; width: 2.5rem; height: 2.5rem; fill: currentColor; }

/* Enlace editorial (el botón de acento queda reservado a «Añadir» en cada vista). */
.bn-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  min-height: 2.75rem;
  padding-block: 0.625rem;
  font-family: var(--bn-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bn-link-line, var(--bn-bronce));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 0.4s var(--bn-ease), text-underline-offset 0.4s var(--bn-ease);
}
.bn-link::after { content: "→"; text-decoration: none; display: inline-block; transition: transform 0.4s var(--bn-ease); }
.bn-link:hover { text-decoration-color: currentColor; text-underline-offset: 0.5em; }
.bn-link:hover::after { transform: translateX(0.25em); }
.bn-link:focus-visible { outline: 2px solid var(--bn-focus, var(--bn-bronce)); outline-offset: 4px; border-radius: 2px; }

/* Stock siempre escrito, con punto de color como refuerzo (nunca solo color). */
.bn-stock { font-weight: 500; font-size: 0.9375rem; color: var(--bn-stock); white-space: nowrap; }
.bn-stock::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-inline-end: 0.5em; border-radius: 50%; background: currentColor; vertical-align: 0.08em; }

/* Agotado (0 en stock en la gama): mismo punto, color funcional de agotado. Sobre fondo oscuro, variante >= 4,5:1. */
.bn-stock--out { color: var(--bn-agotado); }

.bn-num { font-variant-numeric: lining-nums tabular-nums; }

/* ==========================================================================
   1. Cabecera de gama a sangre
   Foto a sangre a la derecha (las caras miran a la derecha en las fuentes);
   el nombre en Bodoni, alineado al borde de la foto, la invade.
   Velo de cacao solo en la franja donde cae el texto.
   ========================================================================== */
.bn-gama {
  --solape: 15vw;                 /* cuánto entra el nombre en la foto */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: clamp(34rem, 74vh, 50rem);
  --gama-fondo: color-mix(in oklab, var(--bn-cacao) 88%, var(--gama, var(--bn-cacao)));  /* cacao con un punto de gama */
  --gama-luz: color-mix(in oklab, var(--gama, var(--bn-oro)) 55%, var(--bn-hueso));      /* texto en luz de gama: >= 5,8:1 */
  background: var(--gama-fondo);
  color: var(--bn-hueso);
}
/* La gama solo como luz: halo radial tenue tras la foto y el nombre. */
.bn-gama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                     /* POR ENCIMA de la foto (debajo del texto): la luz es continua y no hay costura donde acaba la foto */
  pointer-events: none;
  background:
    radial-gradient(24% 62% at 22% 62%, color-mix(in oklab, var(--gama, transparent) 26%, transparent), transparent 100%);   /* acaba antes del borde de la foto (col. 6): sin costura */
}
.bn-gama__datos [data-count] { color: var(--gama-luz); }

.bn-gama__foto {
  grid-column: 6 / -1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: var(--gama-fondo);
}
.bn-gama__foto img {
  position: absolute;
  inset: -8% 0 auto;              /* margen para el parallax de motion */
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: var(--foco, 30% 40%);
}
/* Velo: transparente sobre la cara, cacao solo en el borde que recibe el nombre. */
.bn-gama__foto::after {
  content: "";
  position: absolute;
  inset: -1px;      /* cubre el subpíxel del borde */
  background: linear-gradient(270deg,
    color-mix(in oklab, var(--gama-fondo) 0%, transparent) 50%,
    color-mix(in oklab, var(--gama-fondo) 62%, transparent) 72%,
    color-mix(in oklab, var(--gama-fondo) 90%, transparent) 86%,
    var(--gama-fondo) 100%);
  pointer-events: none;
}

.bn-gama__texto {
  grid-column: 1 / 6;
  grid-row: 1;
  z-index: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
  padding: clamp(5rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 5.5rem) var(--bn-gutter);
  text-align: end;
}

/* Titular a medida: el cuerpo se acota por el ancho DISPONIBLE (container query del texto + lo que invade la foto)
   y por la palabra más larga (--w, en letras; lo escribe la plantilla). Así ningún nombre largo se sale ni se recorta. */
.bn-gama__texto { container-type: inline-size; }
.bn-gama__nombre {
  --cap: calc(100cqi + var(--solape));   /* espacio útil: columna + solape sobre la foto */
  --em-letra: 0.56;                       /* ancho medio de una letra de Bodoni Moda 500, en em (con tracking -0,025) */
  margin-inline-end: calc(var(--solape) * -1);
  font-family: var(--bn-serif);
  font-weight: 500;
  font-size: min(clamp(3rem, 10.5vw, 10rem), calc(var(--cap) / (var(--w, 8) * var(--em-letra))));
  hyphens: manual;
  overflow-wrap: anywhere;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--bn-hueso);
}
.bn-gama__lema {
  max-width: 26ch;
  font-family: var(--bn-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  line-height: 1.3;
  text-wrap: balance;
  color: var(--bn-hueso);
}
.bn-gama__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--bn-arena);
}
.bn-gama__datos li { white-space: nowrap; }
.bn-gama__datos .bn-stock { color: var(--bn-stock-oscuro); }
.bn-gama__datos .bn-stock--out { color: var(--bn-agotado-oscuro); }
.bn-gama .bn-link { --bn-link-line: var(--bn-oro); --bn-focus: var(--bn-oro); color: var(--bn-hueso); }

.bn-gama__marca {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: var(--bn-gutter);
  z-index: 1;
  color: var(--bn-oro);
}

/* Variante panorama: foto ancha arriba, el nombre muerde su borde inferior. */
.bn-gama--panorama { grid-template-rows: auto auto; min-height: 0; }
.bn-gama--panorama .bn-gama__foto { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 1600 / 560; max-height: 70vh; width: 100%; }
.bn-gama--panorama .bn-gama__foto::after {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--gama-fondo) 0%, transparent) 42%,
    color-mix(in oklab, var(--gama-fondo) 70%, transparent) 72%,
    var(--gama-fondo) 100%);
}
.bn-gama--panorama .bn-gama__texto {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  padding: 0 var(--bn-gutter) clamp(2.5rem, 6vw, 5rem);
}
.bn-gama--panorama .bn-gama__nombre { --cap: 100cqi; grid-column: 1 / -1; margin: -0.62em 0 0; }
.bn-gama--panorama .bn-gama__lema { grid-column: 1; }
.bn-gama__pie { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.bn-gama--panorama .bn-gama__pie { grid-column: 2; align-items: flex-start; }
.bn-gama--panorama .bn-gama__datos { justify-content: flex-start; }
.bn-gama--panorama .bn-gama__marca { top: auto; bottom: clamp(2.5rem, 6vw, 5rem); left: auto; right: var(--bn-gutter); }

/* ==========================================================================
   2. Packs y ofertas
   ========================================================================== */
.bn-pack {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: clamp(32rem, 70vh, 46rem);
  background: var(--bn-hueso);
  color: var(--bn-cacao);
}
.bn-pack__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(3rem, 8vw, 7rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 8vw, 7rem) var(--bn-gutter);
}
/* Reflejo grande en arena, como marca de agua plana (sin degradado ni sombra). */
.bn-pack__marca {
  position: absolute;
  z-index: -1;
  left: -9rem;
  top: 50%;
  width: clamp(22rem, 38vw, 34rem);
  height: auto;
  translate: 0 -50%;
  fill: var(--bn-arena);
}
.bn-pack__etiqueta {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bn-carmin);
}
.bn-pack__titular {
  max-width: 12ch;
  font-family: var(--bn-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.bn-pack__cuerpo { max-width: 40ch; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.bn-pack__cuerpo + .bn-pack__cuerpo { margin-top: -0.75rem; }
.bn-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--bn-serif); }
.bn-precio ins { text-decoration: none; font-weight: 500; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.02em; color: var(--bn-carmin); }
.bn-precio del { font-size: 1.375rem; color: var(--bn-cacao); text-decoration-thickness: 1px; }
.bn-pack__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; }
.bn-pack__foto { position: relative; overflow: hidden; margin: 0; }
.bn-pack__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 55% 35%); }
/* Look real de Isabelle (685 px nativos): la figura no pasa de 43rem (≈1:1) y el encuadre prioriza el rostro. */
.bn-pack--ambiente .bn-pack__foto { width: 100%; max-width: 43rem; justify-self: end; }
.bn-pack--ambiente .bn-pack__foto img { object-position: 50% 18%; }
.bn-pack__credito a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================================
   3. En piel real: tríptico con crédito visible en cada foto
   ========================================================================== */
.bn-piel {
  background: var(--bn-cacao);
  color: var(--bn-hueso);
  padding: clamp(4.5rem, 10vw, 9rem) var(--bn-gutter) clamp(5rem, 12vw, 10rem);
}
.bn-piel__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.bn-piel__titular {
  font-family: var(--bn-serif);
  font-weight: 500;
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.bn-piel__intro {
  max-width: 34ch;
  justify-self: end;
  font-family: var(--bn-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.35;
  text-wrap: balance;
}
.bn-piel__looks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.bn-piel__looks > li:nth-child(2) { margin-top: clamp(3rem, 8vw, 7rem); }
.bn-piel__looks > li:nth-child(3) { margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.bn-look { display: flex; flex-direction: column; gap: 1rem; }
.bn-look__foto { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #2A201A; }
.bn-look__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%); }
.bn-look__credito {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: rgb(27 20 16 / 0.8);
  color: var(--bn-hueso);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.bn-look figcaption { font-size: 0.9375rem; line-height: 1.5; color: var(--bn-arena); max-width: 36ch; }
.bn-look figcaption b { display: block; font-family: var(--bn-serif); font-weight: 500; font-size: 1.375rem; line-height: 1.2; color: var(--bn-hueso); }

/* ==========================================================================
   Móvil (< 48rem): una columna, la foto a sangre arriba y el texto la muerde.
   ========================================================================== */
@media (max-width: 47.99rem) {
  .bn-gama { display: block; min-height: 0; }
  .bn-gama::before { inset: auto 0 0; height: 4.5rem; background: radial-gradient(80% 50% at 30% 60%, color-mix(in oklab, var(--gama, transparent) 24%, transparent), transparent 100%); }   /* bajo la foto: sin costura */
  .bn-gama__foto { aspect-ratio: 4 / 5; width: 100%; }
  .bn-gama__foto img { object-position: var(--foco-m, var(--foco, 60% 30%)); }
  .bn-gama__foto::after {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--gama-fondo) 0%, transparent) 46%,
      color-mix(in oklab, var(--gama-fondo) 72%, transparent) 72%,
      var(--gama-fondo) 96%);
  }
  .bn-gama__texto { position: relative; margin-top: -9rem; padding: 0 var(--bn-gutter) 3rem; gap: 1rem; align-items: flex-start; text-align: start; }
  .bn-gama__nombre { --cap: 100cqi; margin-inline-end: 0; font-size: min(clamp(2.75rem, 13vw, 4.5rem), calc(var(--cap) / (var(--w, 8) * var(--em-letra)))); }
  .bn-gama__pie { align-items: flex-start; }
  .bn-gama__datos { justify-content: flex-start; }
  .bn-gama__marca { display: none; }

  .bn-gama--panorama .bn-gama__foto { aspect-ratio: 4 / 5; max-height: none; }
  .bn-gama--panorama .bn-gama__texto { display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--bn-gutter) 3rem; }
  .bn-gama--panorama .bn-gama__nombre { margin: 0; }

  .bn-pack { display: flex; flex-direction: column-reverse; min-height: 0; }
  .bn-pack__foto { aspect-ratio: 4 / 5; }
  .bn-pack--ambiente .bn-pack__foto { max-width: none; }
  .bn-pack__texto { padding: 2.5rem var(--bn-gutter) 3.5rem; gap: 1.25rem; }
  .bn-pack__marca { left: auto; right: -7rem; top: 1rem; translate: none; width: 16rem; }

  .bn-piel__cabecera { grid-template-columns: 1fr; }
  .bn-piel__intro { justify-self: start; }
  .bn-piel__looks {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--bn-gutter) * -1);
    padding-inline: var(--bn-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bn-gutter);
    scrollbar-width: none;
  }
  .bn-piel__looks::-webkit-scrollbar { display: none; }
  .bn-piel__looks > li { flex: 0 0 78%; scroll-snap-align: start; margin-top: 0 !important; }

}

@media (prefers-reduced-motion: reduce) {
  .bn-link, .bn-link::after { transition: none; }
}

@media (forced-colors: active) {
  .bn-gama__foto::after { display: none; }
  .bn-look__credito { border: 1px solid CanvasText; }
}

/* ==========================================================================
   5. Imágenes de ambiente (fotos de marca, solo encuadre; nunca prueba de un tono)
   - .claim-ambiente: perfil junto al claim de la home
   - .ambiente--tonos: tarjeta ancha entre filas del muro «Toca un tono»
   - .bn-pack--ambiente: mejilla naranja de fondo del banner del pack, con velo cacao
   ========================================================================== */
.claim-ambiente { margin: 0; }
.claim-ambiente, .ambiente__marco { position: relative; overflow: hidden; border-radius: var(--r-l, 1.25rem); background: var(--arena, #E2D5C2); }
.claim-ambiente { aspect-ratio: 4 / 5; width: min(100%, 26rem); }
.claim-ambiente img, .ambiente__marco img { position: absolute; inset: -8% 0 auto; width: 100%; height: 116%; object-fit: cover; }
.claim-ambiente img { object-position: 58% 30%; }
@media (min-width: 56rem) {
  .claim-grid { grid-template-rows: auto auto; }
  .claim-jar { grid-row: 1 / 3; }
  .claim-ambiente { grid-column: 1 / 5; grid-row: 1; align-self: start; width: min(100%, 17rem); }
  .claim-copy { grid-row: 2; }
}

.ambiente--tonos { margin-block: var(--s-8, 4.5rem); margin-inline: auto; }
.ambiente__marco { aspect-ratio: 4 / 3; }
.ambiente--tonos img { object-position: 50% 30%; }
@media (min-width: 48rem) {
  .ambiente__marco { aspect-ratio: 5 / 2; }
  .ambiente--tonos img { object-position: 50% 22%; }
}

/* Pack: foto de fondo + velo de cacao (≥ 0,8 bajo el texto; ver informe de contraste). El Reflejo no va sobre foto. */
.bn-pack--ambiente { background: var(--bn-cacao); color: var(--bn-hueso); }
.bn-pack__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bn-pack__fondo img { position: absolute; inset: -8% 0 auto; width: 100%; height: 116%; object-fit: cover; object-position: 50% 40%; }
.bn-pack__fondo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(27 20 16 / 0.9) 0%, rgb(27 20 16 / 0.82) 55%, rgb(27 20 16 / 0.6) 100%); }
.bn-pack--ambiente .bn-pack__marca { display: none; }
.bn-pack--ambiente .bn-pack__etiqueta { color: var(--bn-oro); }
/* Precio: carmín sobre pastilla hueso opaca (6,83:1; no depende de la foto). El tachado va en cacao (15,7:1). */
.bn-pack--ambiente .bn-precio { align-items: baseline; padding: 0.375rem 1.25rem 0.5rem; border-radius: 999px; background: var(--bn-hueso); }
.bn-pack--ambiente .bn-precio ins { font-size: clamp(2.75rem, 5.5vw, 4.5rem); color: var(--bn-carmin); }
.bn-pack--ambiente .bn-precio del { color: var(--bn-cacao); }
.bn-pack--ambiente .bn-stock { color: var(--bn-stock-oscuro); }
.bn-pack--ambiente .bn-link { --bn-link-line: var(--bn-oro); --bn-focus: var(--bn-oro); }
@media (max-width: 47.99rem) {
  .bn-pack__fondo::after { background: rgb(27 20 16 / 0.84); }
}

/* Cabecera de gama sin banner ancho (WordPress): retrato de ambiente solo en móvil, velo que funde hacia el fondo cacao de la gama. */
.gama-ambiente { display: none; }
@media (max-width: 47.99rem) {
  .gama-head--ambiente { padding-top: calc(125vw - 11rem); }
  .gama-ambiente { display: block; position: absolute; inset: 0 0 auto; margin: 0; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; z-index: 0; }
  .gama-ambiente img { position: absolute; inset: -8% 0 auto; width: 100%; height: 116%; object-fit: cover; object-position: var(--foco-m, 50% 40%); }
  .gama-ambiente::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in oklab, var(--gama-fondo) 0%, transparent) 25%, color-mix(in oklab, var(--gama-fondo) 90%, transparent) 52%, var(--gama-fondo) 100%); }
  .gama-head--ambiente .gama-head-grid { z-index: 1; }
  .gama-head--ambiente::before { top: 125vw; background: radial-gradient(80% 45% at 60% 55%, color-mix(in oklab, var(--gama, transparent) 28%, transparent), transparent 100%); }   /* luz bajo el retrato: sin costura */
}

/* ==========================================================================
   WordPress / tema
   ========================================================================== */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed !important; left: var(--gutter); top: var(--s-3); width: auto; height: auto;
  padding: var(--s-3) var(--s-5); margin: 0; clip-path: none; z-index: var(--z-skip); background: var(--cacao); color: var(--hueso); }

/* barra de administración */
.admin-bar .hdr { top: calc(var(--s-3) + 32px); }
.admin-bar .menu { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: calc(var(--s-3) + 46px); } .admin-bar .menu { top: 46px; } }

/* ficha: lo que añaden los plugins en woocommerce_single_product_summary (pago a plazos, compartir) */
.ficha-summary:empty { display: none; }
.ficha-summary { display: grid; gap: var(--s-3); font-size: var(--t-sm); }

/* enlaces del menú extra y del pie */
.ftr-legal a { margin-left: var(--s-4); text-decoration: none; border-bottom: 1px solid currentColor; }
.ftr-legal a:hover { color: var(--hueso); }
.menu-foot { flex-wrap: wrap; }

/* páginas (legales, carrito, checkout y mi cuenta usan esta envoltura; ver woo.css) */
.page-wrap { padding-block: var(--s-9) var(--s-section); display: grid; gap: var(--s-6); }
.page-wrap .page-t { font-size: var(--t-h2); }
.page-content { display: grid; gap: var(--s-4); max-width: 48rem; }
.page-content > :where(h2, h3) { font: 400 var(--t-h3)/1.1 var(--serif); margin-top: var(--s-5); }
.page-content > :where(ul, ol) { padding-left: 1.25em; display: grid; gap: var(--s-2); }
.page-content a { text-decoration: underline; text-decoration-thickness: 1px; }
.page-content :where(.alignwide) { max-width: var(--wrap); }
.post-item { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.post-item h2 { font: 400 var(--t-h4)/1.2 var(--serif); }
.post-item h2 a { text-decoration: none; }

/* paginación (archivo y búsqueda) */
.navigation.pagination, .woocommerce-pagination { margin-top: var(--s-8); }
.nav-links, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.nav-links .page-numbers, .woocommerce-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem;
  padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.nav-links .page-numbers.current, .woocommerce-pagination .page-numbers.current { background: var(--cacao); color: var(--hueso); border-color: var(--cacao); }
.woocommerce-pagination ul li { margin: 0; }

/* cajón de carrito (template-parts/carrito-cajon.php; lo rellena tienda-wc.js) */
.cart-line-img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 50%; background: var(--arena); }
.cart-line > div:not(.qty) { display: grid; gap: .15rem; min-width: 0; }
.drawer-foot .btn-acc { width: 100%; }
.drawer-cart-link { justify-self: center; min-height: 2.75rem; display: inline-flex; align-items: center; font-size: var(--t-sm);
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.drawer-cart-link:hover { text-decoration-thickness: 2px; }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
.drawer[aria-busy="true"] .cart-lines { opacity: .6; }

/* Móvil: filas de chips y tarjetas como carrusel nativo ([data-swipe]); a sangre dentro de .wrap, sin barra visible
   (motion.js pone un indicador fino debajo). Ficha: chips de tono en 3 filas que se deslizan en horizontal en vez
   de una caja con scroll vertical anidado. */
@media (max-width: 47.99rem) {
  [data-swipe] { position: relative; /* contiene los .vh absolutos: si no, ensanchan la página */ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > * { scroll-snap-align: start; }
  .gama-subs ul[data-swipe] { flex-wrap: nowrap; padding-block: 3px; }
  .gama-subs ul[data-swipe] > li { flex: none; }
  .lk-list[data-swipe] { display: flex; gap: var(--s-4); }
  .lk-list[data-swipe] > li { flex: 0 0 82%; min-width: 0; }
  .chips[data-swipe] { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
    grid-auto-columns: max-content; justify-content: start; max-height: none; padding-block: 3px; }
}