/* Hallmark · genre: atmospheric · macrostructure: Workbench · theme: custom (logo coral)
 * nav: N1b · footer: Ft2 · CTA: C4 sticky
 * Regla de la casa: color solo por tokens.css. Nada de hex aquí.
 */
@import url("tokens.css");

html, body { overflow-x: clip; width: 100%; max-width: 100%; }
.recorrido { width: 100%; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 4.5rem;
}

/* Un halo coral muy tenue arriba: la página no es un fondo plano, respira.
   Se pinta una vez y no se mueve. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw auto;
  height: 70vh;
  background: radial-gradient(60% 60% at 30% 0%, var(--color-accent-glow), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
main, .nav, .stick, footer { position: relative; z-index: 1; }

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: normal; color: var(--color-ink); }

.wrap {
  width: min(var(--page), calc(100% - 2 * var(--space-lg)));
  max-width: 100%;
  margin-inline: auto;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
  margin: 0;
}
h1 {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: wrap;
}
h1 span { display: block; }
.h1__coral {
  color: var(--color-accent);
  /* La segunda frase es la amenaza: ligeramente más ligera, para que "cuánto
     te queda" pese más que "te corten". */
  font-weight: 600;
}
h2 { font-size: var(--text-display-s); line-height: 1.08; letter-spacing: -0.04em; }
h3 { font-size: var(--text-md); line-height: 1.25; }

.lede {
  max-width: min(42ch, 100%);
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--color-ink-2);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.lede--hero {
  font-size: var(--text-md);
  line-height: 1.45;
  margin-top: var(--space-lg);
}

/* Etiqueta editorial encima de cada titular: mono, pequeña, con aire. */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.kicker__dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-glow);
}

/* Nav N1b */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 64px;
  display: grid;
  align-items: center;
  background: color-mix(in oklch, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--color-rule);
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
  justify-self: start;
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-logo);
}
.nav__center {
  display: flex;
  gap: var(--space-lg);
  justify-self: center;
}
.nav__center a {
  position: relative;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-block: 0.25rem;
}
/* El subrayado crece desde la izquierda al pasar el ratón; responde a la
   interacción, no se mueve solo. */
.nav__center a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav__center a:hover { color: var(--color-ink); }
.nav__center a:hover::after { transform: scaleX(1); }
.nav__right { justify-self: end; display: flex; gap: var(--space-sm); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: 500 var(--text-sm)/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.btn:hover, .btn.is-hover { border-color: var(--color-accent); color: var(--color-ink); transform: translateY(-1px); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:focus-visible, .nav a:focus-visible, summary:focus-visible, .days button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.btn--fill {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn--fill:hover, .btn--fill.is-hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 28px -8px var(--color-accent-glow);
}
.btn--lg {
  padding: 0.85rem 1.4rem;
  font-size: var(--text-base);
}
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  box-shadow: none;
}
.btn[data-state="loading"]::after { content: " …"; }
.btn[data-state="error"] { border-color: var(--color-bad); }
.btn[data-state="success"] { border-color: var(--color-ok); }
.btn--ghost { background: transparent; }

@media (max-width: 72rem) {
  .nav__center { gap: var(--space-sm); }
}
@media (max-width: 900px) {
  .nav__center { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
}
@media (max-width: 47.99rem) {
  .nav__right { display: none; }
}

/* Entrada escalonada del hero: cada [data-entra] sube y aparece con un retardo
   de --i × 90 ms. Solo la primera vez, al cargar; luego no se vuelve a mover. */
[data-entra] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-entrada) var(--ease-out), transform var(--dur-entrada) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 80ms);
}
body.ha-cargado [data-entra] { opacity: 1; transform: none; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero__nota {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  max-width: 42ch;
}
.os {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.row {
  display: grid;
  grid-template-columns: 28px minmax(0, 88px) minmax(0, 1fr) 52px;
  gap: var(--space-sm);
  align-items: center;
}
.row img { width: 22px; height: 22px; }
.row .name { font-size: var(--text-sm); color: var(--color-ink); }
.row .pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Sin sesión: ni barra ni número. Cero no es lo mismo que sin dato. */
.row--sin { grid-template-columns: 28px minmax(0, 88px) minmax(0, 1fr); }
.row--sin .name { color: var(--color-ink-3); }
.row .sin {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.meter {
  height: 8px;
  background: var(--color-paper-3);
  border-radius: 99px;
  overflow: hidden;
}
.meter > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transform: scaleX(calc(var(--p) / 100));
  transform-origin: left center;
  transition: transform var(--dur-long) var(--ease-out);
}
.meter--warn > i { background: var(--color-warn); }
.meter--bad > i { background: var(--color-bad); }
/* Copia local: el dato existe pero no es de ahora. Se ve, y se ve distinto. */
.meter--local > i {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-ink-3) 0 4px,
    color-mix(in oklch, var(--color-ink-3) 55%, transparent) 4px 8px
  );
}
.bench__note {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  line-height: 1.6;
}

.proveedores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-xl);
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  min-width: 0;
}
.proveedores span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.proveedores span:hover { color: var(--color-ink); }
.proveedores img { width: 16px; height: 16px; opacity: 0.85; }

/* Recorrido: el panel se queda; el scroll cambia de escena.
   No es parallax de capas de fondo: marea y no enseña el producto. */
.recorrido {
  padding-block: var(--space-xl) var(--space-3xl);
  scroll-margin-top: 72px;
}
.recorrido__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.recorrido__pasos,
.paso,
.hero__actions,
.mini,
h1,
h1 span { min-width: 0; max-width: 100%; }
.paso {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-xl);
  opacity: 0.32;
  transition: opacity var(--dur-med) var(--ease-out);
}
.paso[aria-current="true"],
.paso--hero { opacity: 1; }
.paso h2 { max-width: 14ch; }
.paso--hero {
  min-height: calc(100svh - 64px - 5rem);
  padding-block: var(--space-2xl);
}
.paso--hero h1 { margin: 0; }
.paso--hero .proveedores { padding-top: var(--space-xl); }
.recorrido__stage {
  position: sticky;
  top: 80px;
  height: calc(100svh - 80px - 5.5rem);
  display: flex;
  align-items: flex-start;
  padding-top: var(--space-xl);
  min-width: 0;
}
.escena {
  position: relative;
  width: 100%;
  margin: 0;
}
.escena__ticks {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: flex;
  gap: 6px;
}
.escena__ticks li {
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: var(--color-rule);
  transition: background var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.escena[data-scene="0"] .escena__ticks li:nth-child(1),
.escena[data-scene="1"] .escena__ticks li:nth-child(2),
.escena[data-scene="2"] .escena__ticks li:nth-child(3),
.escena[data-scene="3"] .escena__ticks li:nth-child(4) {
  background: var(--color-accent);
  transform: scaleX(1.25);
  transform-origin: left center;
}
.escena__barra {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-3);
  letter-spacing: 0.04em;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  transition: transform var(--dur-long) var(--ease-out);
}
.escena:not([data-scene="0"]) .escena__barra {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-bottom-color: transparent;
}
.escena__barra strong { color: var(--color-accent); font-weight: 500; }
.escena__panel {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  box-shadow: 0 30px 60px -30px var(--color-canvas);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}
.escena:not([data-scene="0"]) .escena__panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.escena__cab {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.03em;
}
.escena__cab img {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-logo);
}
.escena__cab .chip {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  background: var(--color-paper-3);
}
.escena__capas {
  position: relative;
  min-height: 22rem;
}
.capa {
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}
.capa--resumen,
.capa--sesiones,
.capa--aviso {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
  overflow: auto;
}
.escena[data-scene="1"] .capa--resumen,
.escena[data-scene="2"] .capa--sesiones,
.escena[data-scene="3"] .capa--aviso {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.escena[data-scene="0"] .meter > i { transform: scaleX(0); }
.capa--aviso { align-content: start; }
.aviso {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-ctrl);
  background: color-mix(in oklch, var(--color-bad) 18%, transparent);
  color: var(--color-warn);
  font-size: var(--text-sm);
  font-weight: 500;
  align-self: start;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-xs);
  align-items: stretch;
  height: 88px;
  margin-top: var(--space-xs);
}
.days b {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px 4px 0 0;
  transform: scaleY(calc(var(--h) / 100));
  transform-origin: bottom center;
  min-height: 0;
  transition: transform var(--dur-long) var(--ease-out);
}
.escena[data-scene="0"] .days b,
.escena[data-scene="1"] .days b {
  transform: scaleY(0);
}
.days button,
.days > span {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-ink-3);
  font: 500 var(--text-xs)/1 var(--font-mono);
  cursor: pointer;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  align-items: stretch;
  height: 100%;
  min-width: 0;
}
.days > span { cursor: default; }
.days button:hover b { filter: brightness(1.15); }
.days button[aria-pressed="true"],
.days > span.on { color: var(--color-ink); }
.days button[aria-pressed="true"] b,
.days > span.on b { outline: 1px solid var(--color-ink); }
.sesion-dia {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  display: grid;
  gap: var(--space-xs);
}
.sesion-dia .resumen { color: var(--color-ink); font-weight: 600; }
.sesion-dia .fila {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.sesion-dia .fila i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--color-ink-3);
  display: inline-block;
}
.sesion-dia .fila i.on { background: var(--color-accent); }
.sesion-dia .fila > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sesion-dia .fila b { color: var(--color-ink); font-weight: 500; }
.sesion-dia .fila > span:last-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mini {
  display: none;
  margin: var(--space-lg) 0 0;
  min-width: 0;
}
.mini .escena__panel {
  opacity: 1;
  transform: none;
  pointer-events: none;
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.mini .escena__barra { margin-bottom: 0; }
.mini .escena__panel { border-top: 0; }
.mini .days { height: 64px; }

@media (max-width: 47.99rem) {
  .recorrido__grid { display: block; }
  .recorrido__stage { display: none; }
  .paso {
    min-height: 0;
    opacity: 1;
    padding-block: var(--space-2xl);
  }
  .mini { display: block; width: 100%; }
  .mini .escena__barra {
    display: inline-flex;
    width: auto;
    max-width: 100%;
  }
  h1 { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .paso--hero { min-height: 0; }
  .hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .lede { max-width: none; }
  .wrap {
    width: auto;
    margin-inline: var(--space-md);
  }
  .recorrido__pasos,
  .paso { width: 100%; overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
  [data-entra] { opacity: 1; transform: none; transition: none; }
  .paso {
    min-height: 0;
    opacity: 1;
    padding-block: var(--space-lg);
  }
  .recorrido__stage {
    position: relative;
    top: auto;
    height: auto;
  }
  .escena__panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .escena[data-scene="0"] .escena__barra { transform: none; }
  .meter > i,
  .days b,
  .capa,
  .escena__panel,
  .escena__barra,
  .btn,
  .paso { transition: none; }
}

/* #corte: el anillo se llena con el scroll (ver comentario en el HTML).
   --progreso va de 0 a 1 y lo escribe el script. */
.corte {
  padding-block: var(--space-4xl);
  border-top: 1px solid var(--color-rule);
  background: linear-gradient(180deg, var(--color-canvas), var(--color-paper) 40%, var(--color-paper) 60%, var(--color-canvas));
}
.corte__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-3xl);
  align-items: start;
}
.corte__anillo {
  position: sticky;
  top: 6rem;
  align-self: start;
}
.anillo {
  margin: 0;
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.anillo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.anillo circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.anillo__fondo { stroke: var(--color-paper-3); }
.anillo__gasto {
  stroke: var(--color-accent);
  /* Circunferencia de r=52: 2π·52 ≈ 326.7 */
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 * (1 - var(--progreso, 0)));
  transition: stroke var(--dur-med) var(--ease-out);
}
.corte.es-aviso .anillo__gasto { stroke: var(--color-warn); }
.corte.es-critico .anillo__gasto { stroke: var(--color-bad); }
.anillo__cifra {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.anillo__cifra span {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.anillo__pie {
  position: absolute;
  bottom: 18%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-3);
}
.corte__titulo { font-size: var(--text-2xl); line-height: 1; }
.corte__texto .lede { font-size: var(--text-md); max-width: 44ch; }
.momentos {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
}
.momento {
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-3);
  opacity: 0.45;
  transform: translateX(-6px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out),
              color var(--dur-long) var(--ease-out);
}
.momento:last-child { border-bottom: 1px solid var(--color-rule); }
.momento.is-on { opacity: 1; transform: none; color: var(--color-ink-2); }
.momento__pct {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-3);
  transition: color var(--dur-long) var(--ease-out);
}
.momento.is-on .momento__pct { color: var(--color-warn); }
.momento--corte.is-on .momento__pct { color: var(--color-bad); }
.momento b { color: var(--color-ink); font-weight: 600; }
.momento__texto { max-width: 52ch; text-wrap: pretty; }
.corte__nota {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  max-width: 52ch;
}
@media (max-width: 47.99rem) {
  .corte { padding-block: var(--space-3xl); }
  .corte__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .corte__anillo { position: static; }
  .anillo { width: min(100%, 14rem); margin-inline: auto; }
  .momento { grid-template-columns: 5ch minmax(0, 1fr); gap: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .momento { opacity: 1; transform: none; transition: none; }
  .anillo__gasto { transition: none; }
}

/* Descargas: una lista con reglas, no tres tarjetas en fila. */
.plats { padding-block: var(--space-3xl); border-top: 1px solid var(--color-rule); }
.plats__lista {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
}
.plat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  min-width: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.plat:last-child { border-bottom: 1px solid var(--color-rule); }
.plat h3 { font-size: var(--text-lg); letter-spacing: -0.03em; }
.plat p { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); max-width: 60ch; text-wrap: pretty; }
@media (max-width: 47.99rem) {
  .plat { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .plat .btn { justify-self: start; }
}

/* Instalador aún no subido: se lee como estado, no como un botón de compra apagado. */
.plats .btn[data-descarga][aria-disabled="true"] {
  opacity: 1;
  background: var(--color-paper-2);
  color: var(--color-ink-3);
  border-color: var(--color-rule);
  cursor: default;
  filter: none;
  box-shadow: none;
}
.plats__nota {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Precio: tres hechos en grande, un solo número. */
.precio { padding-block: var(--space-3xl); border-top: 1px solid var(--color-rule); }
.hechos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-2xl) 0 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.hecho {
  padding: var(--space-xl) var(--space-lg) var(--space-xl) 0;
  border-right: 1px solid var(--color-rule);
  min-width: 0;
}
.hecho:last-child { border-right: 0; padding-right: 0; }
.hecho + .hecho { padding-left: var(--space-lg); }
.hecho dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.hecho dd { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-sm); }
.hecho__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.hecho__txt { font-size: var(--text-sm); color: var(--color-ink-2); text-wrap: pretty; max-width: 26ch; }
.precio__cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  margin-top: var(--space-2xl);
}
.precio__cta .cifra {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.cifra__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.precio__cta small { font-size: var(--text-sm); color: var(--color-ink-3); }
.precio__btns { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.precio__nota {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  max-width: 60ch;
}
@media (max-width: 47.99rem) {
  .hechos { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .hecho, .hecho:last-child {
    padding: var(--space-lg) 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .hecho + .hecho { padding-left: 0; }
  .precio__cta { grid-template-columns: minmax(0, 1fr); }
}

/* FAQ */
.faq { padding-block: var(--space-3xl); border-top: 1px solid var(--color-rule); }
.faq__lista { margin-top: var(--space-xl); }
details { border-bottom: 1px solid var(--color-rule); }
summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-md);
  padding-right: 2rem;
  position: relative;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease-out);
}
summary:hover { color: var(--color-accent); }
summary::-webkit-details-marker { display: none; }
/* El "+" gira a "×" al abrir: la única animación de la lista, y la dispara un clic. */
summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-ink-3);
  transition: rotate var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
details[open] summary::after { rotate: 45deg; color: var(--color-accent); }
.faq .answer { max-width: 65ch; padding-bottom: var(--space-md); font-size: var(--text-sm); margin-top: 0; text-wrap: pretty; }

/* Sticky C4 */
.stick {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
}
.stick span { color: var(--color-ink-2); min-width: 0; }
.stick .btns { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 768px) {
  .stick { flex-wrap: wrap; }
  .stick span { flex: 1 1 12rem; }
}

footer.line {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-xl) 0 6rem;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
footer.line a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
footer.line a:hover { color: var(--color-ink); }

/* Páginas legales: cortas, misma piel, sin el CTA pegado. */
body.legal-pag { padding-bottom: 0; }
.legal { padding: var(--space-2xl) 0 var(--space-xl); }
.legal h1 { margin-bottom: var(--space-md); }
.legal h2 {
  font-size: var(--text-md);
  margin: var(--space-xl) 0 var(--space-sm);
}
.legal p, .legal li {
  max-width: 58ch;
  color: var(--color-ink-2);
}
.legal ul { padding-left: 1.2em; margin: 0 0 var(--space-md); }
.legal li { margin: 0.35em 0; }

/* Reveal escalonado: mismo mecanismo que el hero, pero al entrar en pantalla. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── #pieles ──────────────────────────────────────────────────────────────
   Cuatro capturas apiladas en el mismo hueco; el scroll enciende una. Van
   superpuestas y no en un carrusel para que el marco no dé saltos de alto
   cuando una piel es más larga que otra. */
.pieles {
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: 72px;
}

.pieles__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 62rem) {
  .pieles__grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}

.pieles__texto h2 {
  margin: 0.6rem 0 0.9rem;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.pieles__lista {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.pieles__lista button {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--color-ink-3);
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
}
.pieles__lista button:hover { color: var(--color-ink-2); background: var(--color-paper-2); }
.pieles__lista button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.pieles__lista button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .pieles__lista button:active { transform: none; }
}

.pieles__lista button b { font-weight: 600; font-size: 0.98rem; }
.pieles__lista button span { font-size: 0.85rem; opacity: 0.85; }

/* `is-on` lo pone el script; `aria-current` deja la primera marcada aunque el
   script no llegue a correr (sin JS, o con prefers-reduced-motion). */
.pieles__lista button.is-on,
.pieles__lista button[aria-current="true"] {
  color: var(--color-ink);
  border-left-color: var(--color-accent);
  background: var(--color-paper-2);
}

.pieles__nota {
  margin: 1.2rem 0 0;
  font-size: 0.82rem;
  color: var(--color-ink-3);
}

.pieles__marco {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-canvas);
  box-shadow: 0 26px 70px -30px rgb(0 0 0 / 0.85);
  /* El alto lo fija la proporción de la captura: así el hueco no colapsa
     mientras las imágenes cargan y la página no salta al hacer scroll. */
  aspect-ratio: 1320 / 1120;
}

.pieles__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* Sin JS se ve la primera y no un marco vacío. El script marca la sección
   con `.js` y a partir de ahí manda `.is-on`; si no, `:first-child` gana por
   orden y la página sigue enseñando algo. */
.pieles__marco img:first-child { opacity: 1; }
.pieles.js .pieles__marco img { opacity: 0; }
.pieles.js .pieles__marco img.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pieles__marco img { transition: none; }
}