/* ============================================================================
   SKIN V · enfemenino°  —  v2
   Registro: K-Beauty de lujo. Blanco, producto como objeto, luz de estudio,
   tipografía pequeña y muy espaciada. Decidido con Edgar el 31-ago-2026
   tras descartar la v1 editorial (archivada en _v1-editorial/).

   Display: Bodoni Moda — el didone de alto contraste de la belleza de lujo.
   Texto:   Jost — geométrica y precisa, del lado clínico del K-Beauty.
   La paleta de marca NO es el fondo: son marcas mínimas sobre blanco.
   ========================================================================= */

:root {
  /* Blancos — casi puro, con una pizca de calidez para que no sea clínico frío */
  --papel:    oklch(99.2% 0.002 85);
  --papel-2:  oklch(97.4% 0.003 85);
  --nieve:    oklch(100% 0 0);

  --tinta:    oklch(22% 0.006 70);
  --tinta-60: oklch(48% 0.008 70);
  --tinta-30: oklch(72% 0.006 70);
  --linea:    oklch(91% 0.004 80);

  /* Espectro de Bienestar — solo como marcas mínimas, nunca como fondo */
  --sage:      oklch(66.1% 0.041 169);
  --durazno:   oklch(81.2% 0.067  42);
  --terracota: oklch(66.4% 0.104  41);
  --acento:    var(--terracota);

  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --texto:   "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Pequeña y espaciada. Acá el lujo es la contención, no el tamaño. */
  --t-hero:  clamp(2.5rem, 4.6vw, 4.2rem);
  --t-tit:   clamp(1.6rem, 2.4vw, 2.4rem);
  --t-sub:   clamp(1rem, 1.1vw, 1.22rem);
  --t-body:  clamp(0.95rem, 0.3vw + 0.9rem, 1.02rem);
  --t-mini:  0.8125rem;
  --t-lbl:   0.6875rem;

  --s-2xs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px;
  --s-4xl: 96px; --s-5xl: 144px; --s-6xl: 200px;

  --margen: clamp(20px, 6vw, 96px);
  --ancho:  1440px;
  --sale:   cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,p,figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--tinta); outline-offset: 4px; }

.solo-lector {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ── Marcas tipográficas ────────────────────────────────────────────────── */
/* La firma del registro: minúsculo, muy tracked, mucho aire. */
.lbl {
  font-size: var(--t-lbl);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-indent: .34em;
  color: var(--tinta-60);
}

.display { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; }

.envoltura { width:100%; max-width: var(--ancho); margin-inline:auto; padding-inline: var(--margen); }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; inset-block-start: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s-lg);
  padding: var(--s-lg) var(--margen);
  background: oklch(from var(--papel) l c h / .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__marca {
  grid-column: 2;
  font-family: var(--display);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-indent: .3em;
  white-space: nowrap;
}
.cabecera__nav { display: flex; gap: clamp(var(--s-md), 2.4vw, var(--s-xl)); }
.cabecera__nav--dcha { grid-column: 3; justify-content: flex-end; }
.cabecera__nav a {
  font-size: var(--t-lbl); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-60); transition: color .3s var(--sale);
}
.cabecera__nav a:hover { color: var(--tinta); }
/* 🔴 En móvil NO se puede esconder la navegación entera: la bolsa vive ahí
   y quedaba inalcanzable — no había forma de comprar desde el teléfono.
   Se oculta solo la navegación de secciones; la marca y la bolsa se quedan. */
@media (max-width: 860px) {
  .cabecera { grid-template-columns: 1fr auto; padding-inline: var(--margen); }
  .cabecera__nav:not(.cabecera__nav--dcha) { display: none; }
  .cabecera__marca { grid-column: 1; justify-self: start; }
  .cabecera__nav--dcha { grid-column: 2; }
  /* de los enlaces de la derecha solo sobrevive la bolsa */
  .cabecera__nav--dcha a:not(.bolsa-btn) { display: none; }
  .bolsa-btn { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* ── Portada ────────────────────────────────────────────────────────────── */
/* El producto es el héroe. Aire enorme. El texto acompaña, no compite. */
.portada {
  display: grid; place-items: center; text-align: center;
  padding-block: clamp(var(--s-3xl), 8vh, var(--s-4xl)) clamp(var(--s-4xl), 12vh, var(--s-6xl));
}

.portada__lbl { margin-block-end: clamp(var(--s-lg), 4vh, var(--s-2xl)); }

.portada__titulo {
  font-size: var(--t-hero);
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 16ch;
  text-wrap: balance;
}
.portada__titulo em { font-style: italic; }

.portada__sub {
  margin-block-start: var(--s-lg);
  max-width: 44ch;
  color: var(--tinta-60);
  font-size: var(--t-sub);
  line-height: 1.65;
}

/* El escenario: sombra de estudio de una sola fuente, dura y limpia. */
.escena {
  position: relative;
  margin-block-start: clamp(var(--s-2xl), 6vh, var(--s-4xl));
  inline-size: min(100%, 400px);
  aspect-ratio: 11 / 15;
}
.escena__foto {
  position: relative; z-index: 2;
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(16px 26px 28px oklch(22% 0.012 70 / .14));
}
/* La elipse de contacto — lo que hace que el frasco se pose y no flote. */
.escena::after {
  content: ""; position: absolute; z-index: 1;
  inset-block-end: 3%; inset-inline-start: 50%;
  inline-size: 58%; block-size: 4.5%;
  transform: translateX(-44%);
  background: radial-gradient(ellipse at center, oklch(22% 0.012 70 / .28), transparent 70%);
  filter: blur(4px);
}

.portada__pie { margin-block-start: clamp(var(--s-xl), 5vh, var(--s-3xl)); display: grid; gap: var(--s-md); justify-items: center; }
.portada__neto { font-size: var(--t-lbl); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-30); }

/* ── Botón ──────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 50px; padding-inline: clamp(var(--s-lg), 3vw, var(--s-2xl));
  background: var(--tinta); color: var(--papel);
  font-size: var(--t-lbl); font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase; text-indent: .26em;
  transition: background .35s var(--sale);
}
.boton:hover { background: oklch(from var(--tinta) calc(l + .14) c h); }

.boton--linea {
  background: none; color: var(--tinta); border: 1px solid var(--linea);
  transition: border-color .35s var(--sale), background .35s var(--sale);
}
.boton--linea:hover { background: var(--nieve); border-color: var(--tinta-30); }

/* ── El sistema, en una línea ───────────────────────────────────────────── */
.sistema { border-block: 1px solid var(--linea); background: var(--papel-2); }
.sistema__lista { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--ancho); margin-inline: auto; }
.sistema__paso {
  display: grid; gap: var(--s-xs); justify-items: center; text-align: center;
  padding: clamp(var(--s-xl), 5vw, var(--s-3xl)) var(--s-lg);
}
.sistema__paso + .sistema__paso { border-inline-start: 1px solid var(--linea); }
.sistema__n { font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--paso-color, var(--acento)); }
.sistema__nom { font-size: var(--t-lbl); letter-spacing: .34em; text-transform: uppercase; text-indent: .34em; }
.sistema__txt { font-size: var(--t-mini); color: var(--tinta-60); max-width: 26ch; line-height: 1.65; }
@media (max-width: 720px) {
  .sistema__lista { grid-template-columns: 1fr; }
  .sistema__paso + .sistema__paso { border-inline-start: 0; border-block-start: 1px solid var(--linea); }
}

/* ── Catálogo — las piezas PEGADAS, sin aire entre ellas ────────────────── */
.catalogo { padding-block: clamp(var(--s-4xl), 11vh, var(--s-6xl)) 0; }
.catalogo__cab {
  display: grid; gap: var(--s-md); justify-items: center; text-align: center;
  padding-block-end: clamp(var(--s-2xl), 6vh, var(--s-4xl));
}
.catalogo__tit { font-family: var(--display); font-size: var(--t-tit); font-weight: 400; line-height: 1.12; max-width: 20ch; }

/* Sin gap: una retícula continua separada por filetes de un píxel. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  border-block-start: 1px solid var(--linea);
  border-inline-start: 1px solid var(--linea);
}
.pieza {
  display: grid; grid-template-rows: auto 1fr;
  min-inline-size: 0;   /* sin esto, un nombre largo desborda la rejilla entera */
  border-inline-end: 1px solid var(--linea);
  border-block-end: 1px solid var(--linea);
  background: var(--papel);
  transition: background .4s var(--sale);
}
.pieza:hover { background: var(--nieve); }

.pieza__marco {
  position: relative; aspect-ratio: 1 / 1;
  min-inline-size: 0; min-block-size: 0;
  display: grid; place-items: center;
  padding: clamp(var(--s-lg), 3vw, var(--s-2xl));
  overflow: clip;
}
.pieza__foto {
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(9px 15px 18px oklch(22% 0.012 70 / .12));
  transition: transform .8s var(--sale);
}
.pieza:hover .pieza__foto { transform: translateY(-7px); }

.pieza__paso {
  position: absolute; inset-block-start: var(--s-lg); inset-inline-start: var(--s-lg);
  font-family: var(--display); font-style: italic; font-size: .9rem;
  color: var(--paso-color, var(--acento));
}

.pieza__cuerpo {
  display: grid; gap: var(--s-2xs); grid-template-rows: auto auto auto auto 1fr;
  justify-items: center; min-inline-size: 0;
  padding: 0 clamp(var(--s-md), 2.4vw, var(--s-xl)) clamp(var(--s-xl), 3vw, var(--s-2xl));
  text-align: center;
}
.pieza__nom {
  font-family: var(--display); font-size: 1.12rem; font-weight: 400; line-height: 1.22;
  max-inline-size: 100%; overflow-wrap: break-word; text-wrap: balance;
}
.pieza__neto { font-size: var(--t-lbl); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-30); }
.pieza__uso { margin-block-start: var(--s-xs); font-size: var(--t-mini); color: var(--tinta-60); max-width: 30ch; line-height: 1.6; }
.pieza__precio { margin-block-start: var(--s-sm); font-size: .95rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* El CTA de la tarjeta: sólido, ancho completo, como Bader y Sturm.
   El contorno hueco estirado era lo que se veía mal cuadrado. */
.pieza__cta {
  margin-block-start: auto;
  inline-size: 100%;
  background: var(--tinta); color: var(--papel); border: 0;
  letter-spacing: .2em; text-indent: .2em;
}
.pieza__cta:hover { background: oklch(from var(--tinta) calc(l + .16) c h); }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie { padding-block: clamp(var(--s-3xl), 8vh, var(--s-5xl)) var(--s-2xl); text-align: center; }
.pie__marca { font-family: var(--display); font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase; text-indent: .3em; }
.pie__sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-md) clamp(var(--s-lg), 4vw, var(--s-2xl)); margin-block-start: var(--s-2xl); }
.pie__sello { font-size: var(--t-lbl); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-60); }
.pie__legal { margin-block-start: var(--s-2xl); font-size: var(--t-mini); color: var(--tinta-30); max-width: 58ch; margin-inline: auto; line-height: 1.7; }

/* ============================================================================
   CAMPAÑA — la corrección del 31-ago (2ª vuelta)
   El registro K-Beauty de lujo es blanco y preciso, PERO tiene mujeres.
   Sin ellas la página era un catálogo de frascos flotando. La marca entra
   por la gente; el producto entra después.
   ========================================================================= */

/* La portada ya no es un bodegón: es campaña. Foto a sangre, el texto se
   apoya en el vacío blanco que la propia foto deja a la izquierda. */
.campana {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: clamp(520px, 82svh, 860px);
  overflow: clip;
  background: var(--papel-2);
}
.campana__foto {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 72% center;
}
.campana__texto {
  position: relative; z-index: 2;
  padding-inline: var(--margen);
  max-inline-size: min(560px, 46vw);
}
.campana__titulo {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-hero); line-height: 1.08; letter-spacing: -.012em;
  text-wrap: balance;
}
.campana__titulo em { font-style: italic; }
.campana__sub { margin-block-start: var(--s-lg); color: var(--tinta-60); font-size: var(--t-sub); line-height: 1.65; max-inline-size: 36ch; }
.campana__cta { margin-block-start: clamp(var(--s-lg), 4vh, var(--s-xl)); }

/* En vertical la foto no puede tapar el texto: se apilan. */
@media (max-width: 820px) {
  .campana { grid-template-rows: 1fr auto; min-block-size: 0; }
  .campana__foto { position: relative; block-size: 56svh; }
  .campana__texto { max-inline-size: none; padding-block: var(--s-2xl) var(--s-3xl); text-align: center; }
  .campana__sub { margin-inline: auto; }
}

/* Los respiros: una foto grande que corta el ritmo entre bloques de producto.
   Es lo que impide que la página se lea como una grilla de ecommerce. */
.respiro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s-xl), 5vw, var(--s-4xl));
  padding-block: clamp(var(--s-4xl), 12vh, var(--s-6xl));
}
.respiro--invertido > figure { order: 2; }
.respiro__foto { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.respiro__texto { display: grid; gap: var(--s-md); max-inline-size: 40ch; }
.respiro__tit { font-family: var(--display); font-size: var(--t-tit); font-weight: 400; line-height: 1.14; }
.respiro__txt { color: var(--tinta-60); line-height: 1.75; }
@media (max-width: 820px) {
  .respiro { grid-template-columns: 1fr; padding-block: clamp(var(--s-3xl), 8vh, var(--s-4xl)); }
  .respiro--invertido > figure { order: 0; }
}

/* ============================================================================
   v3 — construido contra tres referencias, no contra el gusto
   Augustinus Bader · Dr. Barbara Sturm · LYMA  (decodificadas 31-ago-2026)

   Lo que comparten las tres y aquí se respeta: blanco puro, CTA negro
   rectangular, producto sobre fondo controlado.
   Lo tomado: de Bader el nombre ARRIBA de la foto y el panel tintado por
   producto; de Sturm la disciplina del tracking; de LYMA el sentence case
   y el movimiento.
   Lo que ninguna hace y aquí sí: resolver "¿cuál es para mí?" SIN sacar a
   la clienta de la página.
   ========================================================================= */

/* ── El selector de momento ─────────────────────────────────────────────── */
/* Sturm manda su quiz a otra URL: te saca del camino de compra. Acá el
   filtro vive sobre el catálogo y actúa en el sitio. */
.momento-filtro {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-xs);
  padding-block-end: clamp(var(--s-xl), 4vh, var(--s-2xl));
}
.momento-btn {
  min-block-size: 40px; padding-inline: var(--s-lg);
  border: 1px solid var(--linea);
  font-size: var(--t-lbl); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-60); background: var(--papel);
  transition: color .3s var(--sale), border-color .3s var(--sale), background .3s var(--sale);
}
.momento-btn:hover { color: var(--tinta); border-color: var(--tinta-30); }
.momento-btn[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel);
}

/* La pieza se apaga en vez de desaparecer: la retícula no salta y la clienta
   ve que hay más catálogo del que su momento pide. */
.pieza[data-oculta="true"] { opacity: .26; }
.pieza[data-oculta="true"] .pieza__cta { pointer-events: none; }
.pieza { transition: opacity .5s var(--sale), background .4s var(--sale); }

/* ── Nombre arriba (de Bader) y panel tintado por paso ──────────────────── */
.pieza__encabezado {
  display: grid; gap: var(--s-2xs); justify-items: center; text-align: center;
  padding: clamp(var(--s-lg), 2.6vw, var(--s-xl)) var(--s-md) 0;
}
.pieza__marco {
  /* el tinte es del color del paso, a una opacidad casi invisible: agrupa
     visualmente sin ensuciar el blanco */
  background: color-mix(in oklch, var(--paso-color) 7%, transparent);
}

/* ── Discreción como argumento, no como nota al pie ─────────────────────── */
.discrecion {
  border-block-start: 1px solid var(--linea);
  padding-block: clamp(var(--s-3xl), 8vh, var(--s-5xl));
  text-align: center;
}
.discrecion__tit {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-tit); line-height: 1.14;
  max-inline-size: 22ch; margin-inline: auto;
}
.discrecion__txt { margin: var(--s-lg) auto 0; max-inline-size: 46ch; color: var(--tinta-60); line-height: 1.75; }

/* ── Movimiento (de LYMA), pero sin video: entrada escalonada ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .anim .pieza { opacity: 0; transform: translateY(14px); }
  .anim .pieza.dentro {
    opacity: 1; transform: none;
    transition: opacity .7s var(--sale) var(--d,0ms), transform .7s var(--sale) var(--d,0ms);
  }
}

/* ── La bolsa ───────────────────────────────────────────────────────────── */
.bolsa[hidden] { display: none; }
.bolsa { position: fixed; inset: 0; z-index: 60; }
.bolsa__velo {
  position: absolute; inset: 0;
  background: oklch(22% 0.01 70 / .34);
  opacity: 0; transition: opacity .4s var(--sale);
}
.bolsa.abierta .bolsa__velo { opacity: 1; }

.bolsa__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: min(440px, 100vw);
  padding-block-end: env(safe-area-inset-bottom);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--papel);
  transform: translateX(100%);
  transition: transform .45s var(--sale);
  box-shadow: -24px 0 60px oklch(22% 0.01 70 / .10);
}
.bolsa.abierta .bolsa__panel { transform: none; }

.bolsa__cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-lg) var(--s-lg) var(--s-md);
  border-bottom: 1px solid var(--linea);
}
.bolsa__cerrar { font-size: 1.4rem; line-height: 1; padding: var(--s-xs); color: var(--tinta-60); }
.bolsa__cerrar:hover { color: var(--tinta); }

.bolsa__cuerpo { overflow-y: auto; padding: var(--s-md) var(--s-lg); display: grid; gap: var(--s-md); align-content: start; }

.bolsa__vacia { display: grid; gap: var(--s-md); justify-items: center; text-align: center; padding-block: var(--s-4xl); }
.bolsa__vacia p:not(.lbl) { color: var(--tinta-60); font-size: var(--t-mini); max-inline-size: 30ch; }

.linea {
  display: grid; grid-template-columns: 68px 1fr auto; gap: var(--s-md);
  align-items: start;
  padding-block-end: var(--s-md); border-bottom: 1px solid var(--linea);
}
.linea__marco { background: var(--papel-2); aspect-ratio: 3/4; display: grid; place-items: center; padding: var(--s-xs); }
.linea__marco img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.linea__nom { font-family: var(--display); font-size: 1rem; font-weight: 400; line-height: 1.2; }
.linea__neto { font-size: var(--t-lbl); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-30); }
.linea__precio { display: grid; gap: var(--s-xs); justify-items: end; font-variant-numeric: tabular-nums; font-size: .95rem; }
.linea__quitar { font-size: var(--t-lbl); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-30); }
.linea__quitar:hover { color: var(--acento); }

.cant { display: inline-flex; align-items: center; gap: var(--s-sm); margin-block-start: var(--s-xs); border: 1px solid var(--linea); }
.cant button { inline-size: 34px; min-block-size: 34px; color: var(--tinta-60); font-size: 1rem; }
.cant button:hover { color: var(--tinta); background: var(--papel-2); }
.cant span { min-inline-size: 1.4ch; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }

.bolsa__pie { padding: var(--s-lg); border-top: 1px solid var(--linea); display: grid; gap: var(--s-md); }
.bolsa__linea-total { display: flex; align-items: baseline; justify-content: space-between; }
.bolsa__total { font-family: var(--display); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.bolsa__nota { font-size: var(--t-lbl); letter-spacing: .1em; color: var(--tinta-30); text-align: center; }

/* Contador en la cabecera */
.bolsa-btn { position: relative; display: inline-flex; align-items: center; gap: var(--s-xs); }
.bolsa-cuenta[hidden] { display: none; }
.bolsa-cuenta {
  min-inline-size: 18px; block-size: 18px; padding-inline: 5px;
  display: inline-grid; place-items: center;
  background: var(--tinta); color: var(--papel);
  border-radius: 9px; font-size: .625rem; font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── Ficha de producto ──────────────────────────────────────────────────── */
.miga { padding-block: var(--s-lg) var(--s-md); font-size: var(--t-lbl); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-30); }
.miga a { color: var(--tinta-60); }
.miga a:hover { color: var(--tinta); }

.ficha__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(var(--s-xl), 5vw, var(--s-4xl));
  align-items: start;
  padding-block: var(--s-lg) clamp(var(--s-3xl), 8vh, var(--s-5xl));
}
@media (max-width: 900px) { .ficha__grid { grid-template-columns: 1fr; } }

.ficha__marco {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  padding: clamp(var(--s-xl), 5vw, var(--s-4xl));
  background: color-mix(in oklch, var(--paso-color) 8%, transparent);
}
.ficha__foto {
  inline-size: 100%; block-size: 100%; object-fit: contain;
  filter: drop-shadow(16px 26px 30px oklch(22% 0.012 70 / .13));
}
.ficha__paso {
  position: absolute; inset-block-start: var(--s-lg); inset-inline-start: var(--s-lg);
  font-size: var(--t-lbl); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-60);
}

.ficha__texto { display: grid; gap: var(--s-sm); align-content: start; padding-block-start: clamp(0px, 3vw, var(--s-2xl)); }
.ficha__nom { font-family: var(--display); font-weight: 400; font-size: var(--t-tit); line-height: 1.12; letter-spacing: -.012em; }
.ficha__neto { font-size: var(--t-lbl); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-30); }
.ficha__precio { font-size: 1.3rem; font-variant-numeric: tabular-nums; margin-block-start: var(--s-xs); }
.ficha__uso { color: var(--tinta-60); line-height: 1.75; max-inline-size: 42ch; margin-block-start: var(--s-xs); }
.ficha__acciones { margin-block: var(--s-lg); }
.ficha__cta { inline-size: min(100%, 340px); }

.detalles { display: grid; gap: 0; margin: 0; border-block-start: 1px solid var(--linea); }
.detalle {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md);
  padding-block: var(--s-sm); border-block-end: 1px solid var(--linea);
}
.detalle dt { font-size: var(--t-lbl); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-30); }
.detalle dd { margin: 0; font-size: var(--t-mini); text-align: end; }

.ficha__legal { margin-block-start: var(--s-lg); font-size: var(--t-lbl); line-height: 1.7; color: var(--tinta-30); max-inline-size: 46ch; }

.ficha__vacia { display: grid; gap: var(--s-md); justify-items: center; text-align: center; padding-block: clamp(var(--s-4xl), 16vh, var(--s-6xl)); }

.relacionados { padding-block-end: clamp(var(--s-3xl), 8vh, var(--s-5xl)); }
.relacionados .catalogo__tit { padding-block: var(--s-sm) var(--s-2xl); }
.relacionados .pieza:hover { background: var(--nieve); }

/* La tarjeta ahora es un enlace entero: el cursor y el foco lo dicen. */
a.pieza { color: inherit; }
a.pieza:focus-visible { outline: 1px solid var(--tinta); outline-offset: -1px; }

/* La tarjeta: el bloque entero es enlace a la ficha, y el botón de agregar
   queda FUERA de ese enlace para que no se disparen los dos a la vez. */
.pieza { grid-template-rows: auto 1fr auto; }
.pieza__enlace { display: grid; grid-template-rows: auto auto 1fr; color: inherit; min-inline-size: 0; }
.pieza__enlace:focus-visible { outline: 1px solid var(--tinta); outline-offset: -3px; }
.pieza__pie { padding: 0 clamp(var(--s-md), 2.4vw, var(--s-xl)) clamp(var(--s-lg), 2.6vw, var(--s-xl)); }
.pieza__cta { margin: 0; }

/* Las escenas generadas ya vienen cuadradas y con su propio fondo marfil:
   el marco deja de necesitar relleno y tinte, la foto va a sangre. */
.pieza__marco:has(> picture > img[src*="/escena/"]),
.ficha__marco:has(> picture > img[src*="/escena/"]) { padding: 0; background: none; }
.pieza__marco:has(> picture > img[src*="/escena/"]) .pieza__foto,
.ficha__marco:has(> picture > img[src*="/escena/"]) .ficha__foto { object-fit: cover; filter: none; }

/* ── Páginas legales ────────────────────────────────────────────────────── */
/* Sin JavaScript a propósito: una página legal que no renderiza porque falló
   un script es peor que no tenerla. */
.legal { max-inline-size: 760px; margin-inline: auto; padding-block: var(--s-2xl) clamp(var(--s-3xl), 8vh, var(--s-5xl)); }
.legal__tit { font-family: var(--display); font-weight: 400; font-size: var(--t-tit); line-height: 1.14; letter-spacing: -.012em; }
.legal__fecha { margin-block-start: var(--s-sm); font-size: var(--t-lbl); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-30); }
.legal h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.2;
  margin-block: clamp(var(--s-2xl), 5vh, var(--s-3xl)) var(--s-sm);
  padding-block-start: var(--s-lg); border-block-start: 1px solid var(--linea);
}
.legal h3 { font-size: var(--t-lbl); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-60); margin-block: var(--s-lg) var(--s-xs); }
.legal p, .legal li { color: var(--tinta-60); line-height: 1.8; max-inline-size: 68ch; }
.legal p + p { margin-block-start: var(--s-md); }
.legal ul, .legal ol { padding-inline-start: var(--s-lg); display: grid; gap: var(--s-xs); margin-block: var(--s-md); }
.legal strong { color: var(--tinta); font-weight: 400; }
.legal a { color: var(--tinta); border-block-end: 1px solid var(--linea); }
.legal a:hover { border-block-end-color: var(--tinta); }

/* Lo que el cliente todavía no ha entregado va marcado, no inventado. */
.pendiente {
  background: color-mix(in oklch, var(--terracota) 12%, transparent);
  padding-inline: .3em; border-radius: 2px; color: var(--tinta);
}

.pie__legales { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-md) var(--s-lg); margin-block-start: var(--s-lg); }
.pie__legales a { font-size: var(--t-lbl); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-30); }
.pie__legales a:hover { color: var(--tinta); }

/* Cuidado para niñas + modo de uso */
.ninas__pie { display: flex; align-items: center; gap: var(--s-lg); margin-block-start: var(--s-sm); }
.ficha__modo { margin-block-end: var(--s-lg); padding: var(--s-md) var(--s-lg); background: var(--papel-2); }
.ficha__modo p { color: var(--tinta-60); line-height: 1.7; max-inline-size: 44ch; }

/* La etiqueta de la tarjeta: el paso del sistema o el momento complementario.
   Es la jerarquía que pidió César — primero sabes QUÉ ES dentro del ritual. */
.pieza__etiqueta {
  font-size: var(--t-lbl); letter-spacing: .22em; text-transform: uppercase;
  color: var(--paso-color, var(--acento));
}