@charset "UTF-8";
/* =============================================================================
   TRAZABLE · "Tinta y lacre"
   Sistema Material 3 Expressive con identidad propia.
   Orden: 1 tokens · 2 base · 3 chrome · 4 hero · 5 secciones · 6 utilidades
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* -- Tipografía -- */
  --font-display: "Bahnschrift", "DIN Alternate", "Oswald", "Franklin Gothic Medium",
                  "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
             "Noto Sans", system-ui, sans-serif;
  --font-doc: "Cambria", "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, serif;
  --font-data: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  /* -- Escala tipográfica fluida --
     El titular del hero mira ancho Y alto: en pantallas bajas tiene que
     encogerse igual, porque el hero está obligado a entrar en el fold. */
  --t-mega: clamp(2.35rem, min(6.8vw, 11.5vh), 6.5rem);
  --t-xxl:  clamp(2rem, 5vw, 4.1rem);
  --t-xl:   clamp(1.6rem, 3vw, 2.6rem);
  --t-l:    clamp(1.25rem, 1.9vw, 1.7rem);
  --t-m:    1.0625rem;
  --t-s:    0.9375rem;
  --t-xs:   0.8125rem;
  --t-micro: 0.6875rem;

  /* -- Escala de formas (M3 Expressive) -- */
  --shape-xs: 8px;
  --shape-s: 12px;
  --shape-m: 18px;
  --shape-l: 26px;
  --shape-xl: 34px;
  --shape-xxl: 46px;
  --shape-pill: 999px;

  /* -- Motion: contenido. Un solo resorte, con muy poco rebote. -- */
  --spring: linear(0, 0.026 2.3%, 0.1 4.8%, 0.373 10.4%, 0.68 15.9%, 0.884 20.4%,
            0.998 24.4%, 1.043 27.1%, 1.057 30.2%, 1.048 33.4%, 1.008 39.5%,
            0.995 44.5%, 0.999 53%, 1.002 63.5%, 1);
  --emphasized: cubic-bezier(0.2, 0, 0, 1);
  --standard: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;

  /* -- Medidas -- */
  --page: 1240px;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --section-y: clamp(4.25rem, 10vh, 8rem);
  --header-h: 3.5rem;

  /* -- Paleta clara: papel frío + tinta -- */
  --ground:        #F1F4F9;
  --surface-1:     #FFFFFF;
  --surface-2:     #E9EDF5;
  --surface-3:     #DFE5F0;
  --surface-4:     #D3DBEA;
  --outline:       #BEC7DA;
  --outline-soft:  #DCE2EE;
  --on-ground:     #0F1A2D;
  --on-muted:      #4E596F;
  --on-faint:      #737E94;

  --primary:             #163061;
  --primary-bright:      #2B58A8;
  --primary-container:   #DBE5FA;
  --on-primary:          #FFFFFF;
  --on-primary-container:#0A1D40;

  --lacre:               #A85B14;
  --lacre-bright:        #C87A26;
  --lacre-container:     #F8E6CB;
  --on-lacre-container:  #452405;
  --on-lacre:            #FFFFFF;
  --verdict-accent:      #F3B45E;

  --verified:            #0B6B57;
  --verified-container:  #D0EDE3;
  --on-verified:         #FFFFFF;
  --alert:               #9B1C1C;
  --alert-container:     #F7DCDC;

  --shadow-soft: 0 1px 2px rgb(15 26 45 / .06), 0 8px 24px -12px rgb(15 26 45 / .18);
  --shadow-lift: 0 2px 4px rgb(15 26 45 / .07), 0 20px 44px -20px rgb(15 26 45 / .28);
  --grain: .035;
  --grain-blend: multiply;
}

@media (width >= 48rem) { :root { --header-h: 4rem; } }

/* -- Paleta oscura (preferencia del sistema) -- */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:        #080E19;
    --surface-1:     #0D1421;
    --surface-2:     #121C2D;
    --surface-3:     #182338;
    --surface-4:     #1F2C44;
    --outline:       #35435E;
    --outline-soft:  #212E46;
    --on-ground:     #E7ECF6;
    --on-muted:      #9DA9C1;
    --on-faint:      #6C7893;

    --primary:             #A9C5F8;
    --primary-bright:      #82A8F2;
    --primary-container:   #17294A;
    --on-primary:          #0A1730;
    --on-primary-container:#CDDDFC;

    --lacre:               #F0AE5F;
    --lacre-bright:        #F7C482;
    --lacre-container:     #3B2810;
    --on-lacre-container:  #F9DDB6;
    --on-lacre:            #2A1806;
    --verdict-accent:      #7A3F05;

    --verified:            #5FD3B4;
    --verified-container:  #0C3830;
    --on-verified:         #05231D;
    --alert:               #F09090;
    --alert-container:     #3D1414;

    --shadow-soft: 0 1px 2px rgb(0 0 0 / .5), 0 10px 28px -14px rgb(0 0 0 / .7);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / .55), 0 24px 52px -22px rgb(0 0 0 / .85);
    --grain: .05;
    --grain-blend: screen;
  }
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--on-ground);
  font-family: var(--font-ui);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Textura de fibra de papel, apenas perceptible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-blend);
  background-image:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 88%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, canvas, svg { max-inline-size: 100%; }

::selection { background: var(--lacre); color: var(--on-lacre); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lacre);
  outline-offset: 3px;
  border-radius: var(--shape-xs);
}

.skiplink {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--shape-m) var(--shape-m);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--t-s);
  text-decoration: none;
}
.skiplink:focus { inset-block-start: 0; }

.wrap {
  inline-size: 100%;
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-end: 1.1rem;
  color: var(--lacre);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  max-inline-size: 4.5rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.4;
}
.eyebrow--inherit { color: inherit; opacity: 0.72; }

.lede {
  max-inline-size: 60ch;
  color: var(--on-muted);
  font-family: var(--font-doc);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.55;
}
.lede strong { color: var(--on-ground); }

/* -- Botones -- */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 48px;
  padding: 0.85rem 1.75rem;
  border: 0;
  border-radius: var(--shape-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-stretch: 90%;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-radius var(--dur-slow) var(--spring),
    background-color var(--dur-base) var(--standard),
    box-shadow var(--dur-base) var(--standard),
    translate var(--dur-base) var(--emphasized);
}
.btn:hover { border-radius: var(--shape-m); box-shadow: var(--shadow-soft); }
.btn:active { translate: 0 1px; }
.btn--sm { min-block-size: 40px; padding: 0.55rem 1.2rem; font-size: 0.94rem; }

.btn--lacre { --btn-bg: var(--lacre); --btn-fg: var(--on-lacre); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-ground);
  box-shadow: inset 0 0 0 1.5px var(--outline);
}
.btn--ghost:hover { --btn-bg: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--primary-bright); }

.btn__arrow { transition: translate var(--dur-base) var(--emphasized); }
.btn:hover .btn__arrow { translate: 3px 0; }

/* ---------------------------------------------------------------------------
   3. CHROME: progreso, cabecera, drawer
   ------------------------------------------------------------------------ */
#progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--lacre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 95;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    #progress { animation: grow-progress auto linear; animation-timeline: scroll(); }
  }
}

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.35);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--standard),
              background-color var(--dur-base) var(--standard);
}
.masthead[data-stuck="true"] {
  border-block-end-color: var(--outline-soft);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.masthead__end { display: flex; align-items: center; gap: 0.5rem; }

.wordmark {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__seal {
  inline-size: 28px;
  block-size: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%;
  background: var(--lacre);
  color: var(--on-lacre);
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-weight: 700;
  transition: border-radius var(--dur-slow) var(--spring);
}
.wordmark:hover .wordmark__seal { border-radius: var(--shape-xs); }

.masthead__nav { display: none; gap: 0.15rem; }
.navlink {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 0.85rem;
  border-radius: var(--shape-pill);
  color: var(--on-muted);
  font-size: var(--t-s);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--standard), color var(--dur-fast) var(--standard);
}
.navlink:hover { background: var(--surface-2); color: var(--on-ground); }

.burger {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--shape-s);
  background: transparent;
  color: var(--on-ground);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--standard);
}
.burger:hover { background: var(--surface-2); }
.burger span {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}

@media (width >= 62rem) {
  .masthead__nav { display: flex; }
  .burger { display: none; }
}
@media (width < 26rem) { .masthead__cta { display: none; } }

/* -- Drawer móvil -- */
.drawer {
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* La clase .is-open (no :popover-open) maneja la animación: permite
   deslizar hacia afuera ANTES de sacar el elemento de la capa superior. */
.drawer::backdrop { background: rgb(4 8 16 / .55); opacity: 0; transition: opacity var(--dur-base) var(--standard); }
.drawer.is-open::backdrop { opacity: 1; }

.drawer__sheet {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(20rem, 86vw);
  block-size: 100svh;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--surface-1);
  border-start-start-radius: var(--shape-xl);
  border-end-start-radius: var(--shape-xl);
  box-shadow: var(--shadow-lift);
  overflow-y: auto;
  overscroll-behavior: contain;
  translate: 100% 0;
  transition: translate var(--dur-slow) var(--emphasized);
}
.drawer.is-open .drawer__sheet { translate: 0 0; }
/* El panel recibe el foco sólo como punto de entrada; el anillo pertenece
   a los enlaces de adentro, no al contenedor. */
.drawer__sheet:focus-visible { outline: none; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.75rem; }
.drawer__close {
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: var(--shape-pill);
  background: var(--surface-2);
  color: var(--on-ground);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--standard);
}
.drawer__close:hover { background: var(--surface-3); }

.drawer__link {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding-inline: 0.9rem;
  border-radius: var(--shape-s);
  color: var(--on-ground);
  font-family: var(--font-display);
  font-stretch: 90%;
  font-size: 1.08rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--standard),
              border-radius var(--dur-slow) var(--spring);
}
.drawer__link:hover { background: var(--primary-container); border-radius: var(--shape-m); }
.drawer__cta { margin-block-start: 0.9rem; }

/* ---------------------------------------------------------------------------
   4. HERO — ocupa exactamente el alto de pantalla
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  display: grid;
  /* `safe`: si el contenido no entra, se alinea al inicio en vez de
     desbordar por arriba y quedar tapado por la cabecera. */
  align-content: safe center;
  min-block-size: calc(100svh - var(--header-h));
  padding-block: clamp(1rem, 3vh, 3.5rem) clamp(2rem, 6vh, 4.5rem);
}

.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (width >= 68rem) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }

.hero__copy { min-inline-size: 0; }

.hero h1 {
  margin-block-end: 1.25rem;
  font-size: var(--t-mega);
  font-stretch: 80%;
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.hero h1 em { position: relative; display: inline-block; font-style: normal; color: var(--lacre); }
.hero h1 em::after {
  content: "";
  position: absolute;
  inset-inline: -0.05em;
  inset-block-end: 0.04em;
  block-size: 0.075em;
  border-radius: var(--shape-pill);
  background: currentColor;
  transform-origin: 0 50%;
  scale: 1 1;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block: clamp(1.1rem, 2.6vh, 2.2rem) 0.8rem; }
.hero__note { color: var(--on-faint); font-size: var(--t-s); }

/* Pantallas bajas: se comprime lo accesorio antes que el titular. */
@media (height < 46rem) {
  .hero .eyebrow { margin-block-end: 0.7rem; }
  .hero h1 { margin-block-end: 0.9rem; }
  .hero .lede { font-size: 1rem; line-height: 1.45; max-inline-size: 52ch; }
  .hero__note { display: none; }
}

.hero__scroll {
  position: absolute;
  inset-block-end: clamp(1rem, 3vh, 2rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 26px;
  block-size: 42px;
  border: 1.5px solid var(--outline);
  border-radius: var(--shape-pill);
  display: grid;
  justify-items: center;
  padding-block-start: 7px;
  transition: border-color var(--dur-base) var(--standard);
}
.hero__scroll:hover { border-color: var(--lacre); }
.hero__scroll span {
  inline-size: 3px;
  block-size: 7px;
  border-radius: var(--shape-pill);
  background: var(--on-faint);
}
@media (width < 68rem), (height < 44rem) { .hero__scroll { display: none; } }

/* -- Panel de registro de auditoría -- */
.record {
  container-type: inline-size;
  min-inline-size: 0;
  background: var(--surface-1);
  border: 1px solid var(--outline-soft);
  border-radius: var(--shape-xl);
  box-shadow: var(--shadow-lift);
  overflow: clip;
}
.record__bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.1rem;
  background: var(--surface-2);
  border-block-end: 1px solid var(--outline-soft);
  color: var(--on-muted);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.record__dot {
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--verified);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verified) 18%, transparent);
}
.record__count { margin-inline-start: auto; letter-spacing: 0.06em; white-space: nowrap; }

.record__body { padding: 0.4rem 0.45rem 0.85rem; }
.record__rows { display: flex; flex-direction: column; }

.rec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--shape-s);
  font-family: var(--font-data);
  font-size: 0.78rem;
  transition: background-color var(--dur-base) var(--standard);
}
.rec:hover { background: var(--surface-2); }
.rec__t { color: var(--on-faint); font-variant-numeric: tabular-nums; }
.rec__c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; min-inline-size: 0; }
.rec__e { color: var(--on-ground); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rec__m { color: var(--on-muted); font-size: 0.72rem; }
.rec__ok {
  inline-size: 21px;
  block-size: 21px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verified-container);
  color: var(--verified);
  font-size: 0.7rem;
  font-weight: 700;
}
@container (width < 24rem) {
  .rec { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.1rem; }
  .rec__t { grid-column: 1 / -1; font-size: 0.68rem; }
}

.record__more {
  display: none;
  padding: 0.5rem 0.8rem 0.15rem;
  color: var(--on-faint);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
}
.record__seal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  margin: 0.4rem 0.45rem 0;
  padding: 0.8rem 1rem;
  border-radius: var(--shape-m);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-family: var(--font-data);
  font-size: 0.72rem;
}
.record__seal b { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.record__hash { color: var(--primary-bright); overflow-wrap: anywhere; }
.record__cap {
  margin: 0.7rem 0.45rem 0;
  color: var(--on-faint);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* En una sola columna el registro se recorta para no romper el fold.
   Cuántas filas quedan depende del alto real disponible. */
@media (width < 68rem) {
  .record__rows .rec:nth-child(n + 4) { display: none; }
  .record__more { display: block; }
  .record__cap { display: none; }
}
/* Celular en vertical: el texto NO compite con el panel por el fold.
   El bloque de copy ocupa exactamente la pantalla y el registro asoma
   debajo — así el fold se respeta en cualquier alto de teléfono. */
@media (width < 48rem) {
  .hero { min-block-size: auto; padding-block-end: 2rem; }
  .hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-block-size: calc(100svh - var(--header-h) - 5.5rem);
  }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (width < 68rem) and (height < 46rem) {
  .record__rows .rec:nth-child(n + 3) { display: none; }
  .hero__grid { gap: 0.9rem; }
  .hero { padding-block-end: 1.5rem; }
  .record__body { padding-block: 0.3rem 0.6rem; }
  .record__seal { padding-block: 0.6rem; }
}

/* Pantallas muy bajas (celular apaisado): el hero deja de forzar altura */
@media (height < 34rem) {
  .hero { min-block-size: auto; padding-block: 2.5rem; }
}

/* -- Tira de confianza -- */
.band { border-block: 1px solid var(--outline-soft); background: var(--surface-1); }
.trust { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block: 1.15rem; }
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--shape-pill);
  background: var(--surface-2);
  color: var(--on-muted);
  font-size: var(--t-xs);
  transition: border-radius var(--dur-slow) var(--spring), background-color var(--dur-base) var(--standard);
}
.trust__item::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--lacre); }
.trust__item:hover { border-radius: var(--shape-xs); background: var(--surface-3); }

/* ---------------------------------------------------------------------------
   5. SECCIONES
   ------------------------------------------------------------------------ */
.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-2); }
.section__head { max-inline-size: 58ch; margin-block-end: clamp(2.25rem, 5vw, 3.75rem); }
.section__head--wide { max-inline-size: 68ch; margin-block-end: 0; }
.section__head h2 { margin-block-end: 1rem; font-size: var(--t-xxl); }

/* Revelado al entrar: sólo opacidad + 18px. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    @keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } }
  }
}

/* Entrada del hero: escalonada y corta. */
@media (prefers-reduced-motion: no-preference) {
  .anim { animation: rise-in 0.6s var(--emphasized) backwards; animation-delay: calc(var(--i, 1) * 0.07s); }
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }

  .hero h1 em::after { scale: 0 1; animation: rule-in 0.7s var(--emphasized) 0.5s forwards; }
  @keyframes rule-in { to { scale: 1 1; } }

  .rec { animation: rec-in 0.45s var(--emphasized) backwards; animation-delay: calc(var(--i) * 0.08s + 0.35s); }
  @keyframes rec-in { from { opacity: 0; transform: translateY(6px); } }
}

/* -- Los tres momentos -- */
.moments { display: grid; gap: 1rem; }
@media (width >= 52rem) { .moments { grid-template-columns: repeat(3, 1fr); } }

.moment {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  border: 1px solid var(--outline-soft);
  border-radius: var(--shape-l);
  background: var(--surface-1);
  transition: border-radius var(--dur-slow) var(--spring),
              translate var(--dur-base) var(--emphasized),
              box-shadow var(--dur-base) var(--standard),
              border-color var(--dur-base) var(--standard);
}
.moment:hover {
  border-radius: var(--shape-xxl) var(--shape-s) var(--shape-xxl) var(--shape-s);
  translate: 0 -4px;
  box-shadow: var(--shadow-lift);
  border-color: var(--lacre);
}
.moment__tag {
  align-self: flex-start;
  padding: 0.28rem 0.75rem;
  border-radius: var(--shape-pill);
  background: var(--alert-container);
  color: var(--alert);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.moment h3 { font-size: var(--t-l); }
.moment p { color: var(--on-muted); font-family: var(--font-doc); font-size: 1.02rem; line-height: 1.5; }

.verdict {
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--shape-xl);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-stretch: 84%;
  font-size: clamp(1.35rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.verdict span { color: var(--verdict-accent); }

/* -- Scrollytelling: el legajo -- */
.dossier { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (width >= 64rem) {
  .dossier { grid-template-columns: 0.92fr 1.08fr; }
  .dossier__sticky { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
}

.folder {
  border: 1px solid var(--outline-soft);
  border-radius: var(--shape-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
  overflow: clip;
}
.folder__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--primary);
  color: var(--on-primary);
}
.folder__top h3 { font-size: 1.25rem; font-stretch: 86%; }
.folder__top .mono { font-size: var(--t-micro); letter-spacing: 0.1em; opacity: 0.78; text-transform: uppercase; }

.folder__rows { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem; }
.frow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.8rem 0.85rem;
  border-radius: var(--shape-s);
  opacity: 0.35;
  transition: opacity var(--dur-slow) var(--standard),
              background-color var(--dur-slow) var(--standard),
              border-radius var(--dur-slow) var(--spring);
}
.frow[data-on="true"] { opacity: 1; background: var(--surface-2); border-radius: var(--shape-m); }
.frow__mark {
  inline-size: 26px;
  block-size: 26px;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: var(--surface-3);
  color: var(--on-faint);
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-weight: 700;
  transition: background-color var(--dur-slow) var(--standard),
              color var(--dur-slow) var(--standard),
              border-radius var(--dur-slow) var(--spring);
}
.frow[data-on="true"] .frow__mark { background: var(--verified); color: var(--on-verified); border-radius: var(--shape-xs); }
.frow__c { display: block; min-inline-size: 0; }
.frow__t { display: block; font-size: var(--t-s); font-weight: 650; }
.frow__d { display: block; margin-block-start: 0.15rem; color: var(--on-muted); font-family: var(--font-data); font-size: 0.71rem; overflow-wrap: anywhere; }

.folder__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.3rem 1.2rem;
  border-block-start: 1px solid var(--outline-soft);
  color: var(--on-muted);
  font-family: var(--font-data);
  font-size: var(--t-xs);
}
.folder__meter { flex: 1 1 80px; block-size: 6px; border-radius: var(--shape-pill); background: var(--surface-3); overflow: clip; }
.folder__fill { display: block; block-size: 100%; inline-size: 0%; border-radius: inherit; background: var(--verified); transition: inline-size 0.6s var(--emphasized); }

.steps { display: flex; flex-direction: column; gap: clamp(2.5rem, 9vh, 6.5rem); }
.step__n {
  display: inline-grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  margin-block-end: 1rem;
  border-radius: 44% 56% 50% 50% / 52% 48% 52% 48%;
  background: var(--lacre-container);
  color: var(--on-lacre-container);
  font-family: var(--font-display);
  font-stretch: 84%;
  font-size: 1.22rem;
  font-weight: 700;
  transition: border-radius var(--dur-slow) var(--spring);
}
.step:hover .step__n { border-radius: var(--shape-s); }
.step h3 { margin-block-end: 0.75rem; font-size: var(--t-xl); }
.step p { max-inline-size: 46ch; color: var(--on-muted); font-family: var(--font-doc); font-size: 1.08rem; line-height: 1.58; }
.step p strong { color: var(--on-ground); font-weight: 700; }

/* -- Pilares -- */
.pillars { display: grid; gap: 1rem; }
@media (width >= 46rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 74rem) { .pillars { grid-template-columns: repeat(6, 1fr); } }
.pillars--pair { margin-block-start: 1rem; }
@media (width >= 74rem) { .pillars--pair { grid-template-columns: repeat(2, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.4rem, 2.3vw, 2rem);
  border: 1px solid var(--outline-soft);
  border-radius: var(--shape-l);
  background: var(--surface-1);
  transition: border-radius var(--dur-slow) var(--spring),
              translate var(--dur-base) var(--emphasized),
              box-shadow var(--dur-base) var(--standard);
}
.pillar:hover {
  border-radius: var(--shape-xxl) var(--shape-s) var(--shape-xxl) var(--shape-s);
  translate: 0 -3px;
  box-shadow: var(--shadow-lift);
}
.pillar h3 { font-size: 1.28rem; }
.pillar p { color: var(--on-muted); font-size: var(--t-s); line-height: 1.55; }
.pillar__glyph {
  align-self: flex-start;
  padding: 0.4rem 0.7rem;
  border-radius: var(--shape-s);
  background: var(--surface-3);
  color: var(--primary-bright);
  font-family: var(--font-data);
  font-size: 1.1rem;
  font-weight: 700;
}
@media (width >= 74rem) {
  .pillar { grid-column: span 2; }
  .pillar--hero { grid-column: span 3; }
  .pillar--seal { grid-column: span 3; }
  .pillars--pair .pillar { grid-column: auto; }
}
.pillar--hero { background: var(--primary-container); border-color: transparent; }
.pillar--hero h3, .pillar--hero p { color: var(--on-primary-container); }
.pillar--hero .pillar__glyph { background: var(--primary); color: var(--on-primary); }
.pillar--seal { background: var(--lacre-container); border-color: transparent; }
.pillar--seal h3, .pillar--seal p { color: var(--on-lacre-container); }
.pillar--seal .pillar__glyph { background: var(--lacre); color: var(--on-lacre); }

.verify {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
  border: 1px dashed var(--outline);
  border-radius: var(--shape-l);
  background: var(--surface-4);
}
@media (width >= 40rem) { .verify { grid-template-columns: auto minmax(0, 1fr); } }
.verify__qr {
  inline-size: 124px;
  block-size: 124px;
  padding: 9px;
  border-radius: var(--shape-m);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
  transition: border-radius var(--dur-slow) var(--spring);
}
.verify:hover .verify__qr { border-radius: var(--shape-xxl); }
.verify__qr canvas { display: block; inline-size: 100%; block-size: 100%; image-rendering: pixelated; }
.verify__body { min-inline-size: 0; }
.verify h3 { margin-block-end: 0.55rem; font-size: var(--t-l); }
.verify p { max-inline-size: 52ch; color: var(--on-muted); font-size: var(--t-s); }
.verify p strong { color: var(--on-ground); }
.verify__code {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-block-start: 0.9rem;
  padding: 0.55rem 1rem;
  border-radius: var(--shape-pill);
  background: var(--surface-1);
  font-family: var(--font-data);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.verify__code small { color: var(--on-faint); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0.08em; }

/* -- Grupo conectado: atajos cerrados -- */
.locks { display: flex; flex-direction: column; gap: 3px; }
.lock {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 1.05rem 1.3rem;
  border-radius: var(--shape-xs);
  background: var(--surface-1);
  transition: border-radius var(--dur-slow) var(--spring),
              background-color var(--dur-base) var(--standard),
              padding-inline-start var(--dur-base) var(--emphasized);
}
.lock:first-child { border-start-start-radius: var(--shape-xl); border-start-end-radius: var(--shape-xl); }
.lock:last-child { border-end-start-radius: var(--shape-xl); border-end-end-radius: var(--shape-xl); }
.lock:hover { background: var(--primary-container); border-radius: var(--shape-l); padding-inline-start: 1.7rem; }
.lock:hover p { color: var(--on-primary-container); }
.lock__x { color: var(--lacre); font-family: var(--font-data); font-size: 0.9rem; font-weight: 700; }
.lock p { font-size: var(--t-s); line-height: 1.5; }

/* -- Multi-empresa -- */
.orgs { display: grid; gap: 1rem; }
@media (width >= 42rem) { .orgs { grid-template-columns: repeat(3, 1fr); } }
.org {
  padding: 1.3rem;
  border: 1.5px solid var(--outline-soft);
  border-radius: var(--shape-l);
  background: var(--surface-1);
  transition: border-color var(--dur-base) var(--standard), border-radius var(--dur-slow) var(--spring);
}
.org:hover { border-color: var(--primary-bright); border-radius: var(--shape-m); }
.org__name { margin-block-end: 0.8rem; font-family: var(--font-display); font-stretch: 86%; font-size: 1.08rem; font-weight: 700; }
.org__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--outline-soft);
  color: var(--on-muted);
  font-family: var(--font-data);
  font-size: 0.75rem;
}
.org__row:last-child { border-block-end: 0; }
.org__bar { inline-size: 56px; block-size: 5px; border-radius: var(--shape-pill); background: var(--surface-3); overflow: clip; }
.org__bar i { display: block; block-size: 100%; inline-size: var(--w, 0%); border-radius: inherit; background: var(--verified); }

/* -- Precios -- */
.plans { display: grid; gap: 1rem; }
@media (width >= 42rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 62rem) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  border: 1px solid var(--outline-soft);
  border-radius: var(--shape-xl);
  background: var(--surface-1);
  transition: border-radius var(--dur-slow) var(--spring),
              translate var(--dur-base) var(--emphasized),
              box-shadow var(--dur-base) var(--standard);
}
.plan:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); border-radius: var(--shape-xxl); }
.plan--featured { background: var(--primary-container); border-color: transparent; }
.plan--featured h3,
.plan--featured .plan__price,
.plan--featured .plan__price small,
.plan--featured .plan__who { color: var(--on-primary-container); }
.plan--featured .plan__who { opacity: 0.82; }

.plan__badge {
  align-self: flex-start;
  padding: 0.28rem 0.8rem;
  border-radius: var(--shape-pill);
  background: var(--lacre);
  color: var(--on-lacre);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.plan h3 { font-size: 1.45rem; }
.plan__who { margin-block-start: -0.5rem; color: var(--on-muted); font-size: var(--t-xs); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-stretch: 84%;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
}
.plan__price small { color: var(--on-muted); font-family: var(--font-ui); font-size: 0.88rem; font-weight: 400; }
.plan__price[data-placeholder] { color: var(--on-faint); }
.plan ul { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-s); }
/* El marcador va absoluto, no como celda de grilla: si el `li` fuera grid o
   flex, un <strong> interno se volvería otro ítem y cortaría el renglón. */
.plan li { position: relative; padding-inline-start: 1.5rem; color: var(--on-muted); line-height: 1.45; }
.plan li::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0;
  color: var(--verified);
  font-family: var(--font-data);
  font-weight: 700;
}
.plan li strong { color: var(--on-ground); font-weight: 650; }
.plan--featured li { color: var(--on-primary-container); opacity: 0.92; }
.plan--featured li strong { color: var(--on-primary-container); }
.plan .btn { margin-block-start: auto; }

.finelines { margin-block-start: 1.5rem; color: var(--on-faint); font-size: var(--t-s); max-inline-size: 70ch; }

.workingnote {
  margin-block-start: 1.4rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--lacre);
  border-radius: var(--shape-m);
  background: var(--lacre-container);
  color: var(--on-lacre-container);
  font-size: var(--t-xs);
  line-height: 1.55;
}
.workingnote b {
  display: block;
  margin-block-end: 0.3rem;
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -- Objeciones -- */
.faq { display: flex; flex-direction: column; gap: 0.45rem; max-inline-size: 78ch; }
.qa {
  border: 1px solid var(--outline-soft);
  border-radius: var(--shape-m);
  background: var(--surface-1);
  overflow: clip;
  transition: border-radius var(--dur-slow) var(--spring), border-color var(--dur-base) var(--standard);
}
.qa[open] { border-radius: var(--shape-l); border-color: var(--primary-bright); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 56px;
  padding: 1rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-stretch: 88%;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.008em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  flex: none;
  color: var(--lacre);
  font-family: var(--font-data);
  font-size: 1.25rem;
  transition: rotate var(--dur-base) var(--emphasized);
}
.qa[open] summary::after { rotate: 135deg; }
.qa__a { padding: 0 1.35rem 1.3rem; }
.qa__a p { max-inline-size: 62ch; color: var(--on-muted); font-family: var(--font-doc); font-size: 1.03rem; line-height: 1.6; }
.qa__a strong { color: var(--on-ground); }

/* -- CTA final -- */
.finale {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: var(--shape-xxl);
  background: var(--primary);
  color: var(--on-primary);
  text-align: center;
  overflow: clip;
}
.finale h2 { max-inline-size: 18ch; font-size: var(--t-xxl); font-stretch: 80%; }
.finale__p { max-inline-size: 46ch; font-family: var(--font-doc); font-size: 1.08rem; opacity: 0.85; }
.finale__fine { font-size: var(--t-s); opacity: 0.7; }
.finale__seal {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -8%;
  inline-size: 280px;
  block-size: 280px;
  border: 2px dashed currentColor;
  border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%;
  opacity: 0.12;
  pointer-events: none;
}

/* -- Pie -- */
.foot { margin-block-start: var(--section-y); border-block-start: 1px solid var(--outline-soft); }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2.25rem 3rem;
  color: var(--on-faint);
  font-size: var(--t-xs);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 0.7rem;
  border-radius: var(--shape-pill);
  text-decoration: none;
  transition: color var(--dur-fast) var(--standard), background-color var(--dur-fast) var(--standard);
}
.foot__links a:hover { color: var(--lacre); background: var(--surface-2); }

/* ---------------------------------------------------------------------------
   6. PREFERENCIAS DE USUARIO
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* En pantallas táctiles los efectos de hover no aportan: se apagan. */
@media (hover: none) {
  .moment:hover, .pillar:hover, .plan:hover { translate: none; box-shadow: none; }
  .lock:hover { padding-inline-start: 1.3rem; background: var(--surface-1); }
  .lock:hover p { color: inherit; }
}

@media print {
  .masthead, .drawer, #progress, .hero__scroll, .skiplink { display: none; }
  body { background: #fff; color: #000; }
}