/* =========================================================
   Konzeppt · Landings de lead magnet
   Hereda los tokens del sitio. La composición es propia:
   una landing tiene un solo objetivo y no compite consigo misma.
   ========================================================= */

:root {
  --red: #B31C27;
  --red-lo: #8E1620;
  --red-xlo: #74111A;
  --black: #0B0C0E;
  --ink: #17191D;
  --coal: #24272C;
  --steel: #3A3E45;
  --edge: #757A82;
  --muted: #5E6269;
  --line: #DEDAD6;
  --ivory: #F2EFEB;
  --warm: #E7E0DA;
  --white: #FFFFFF;
  --on-dark: #C9CCD2;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 80px; --s8: 112px;

  --max: 1200px;
  --gut: 20px;
  --pad: 48px;
  --head: 72px;
}

@media (min-width: 768px) {
  :root { --gut: 44px; --pad: 96px; --head: 84px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (min-width: 768px) { body { font-size: 18px; } }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-black a:focus-visible, .on-black button:focus-visible,
.on-black input:focus-visible, .on-coal button:focus-visible,
.on-coal input:focus-visible, .on-red a:focus-visible,
.on-red button:focus-visible { outline-color: var(--white); }

[id] { scroll-margin-top: calc(var(--head) + 16px); }

/* ---------- Tipografía ---------- */

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; }
h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; }
h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -.012em; }

.thin { display: block; font-weight: 300; }
.thin-muted { display: block; font-weight: 300; color: var(--muted); }
.on-black .thin-muted, .on-coal .thin-muted { color: var(--on-dark); }
.on-red .thin-muted { color: rgba(255,255,255,.88); }

p { margin: 0 0 var(--s2); max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; max-width: 52ch; color: var(--muted); }
/* El título cierra en Thin; sin aire propio, el intro se le pega. */
h1 + .lead, h2 + .lead, h1 + p, h2 + p { margin-top: var(--s4); }
.on-black .lead, .on-coal .lead { color: var(--on-dark); }
.on-red .lead { color: var(--white); }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 var(--s3);
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--red); flex: 0 0 auto; }
.on-black .eyebrow, .on-coal .eyebrow { color: var(--white); }
.on-black .eyebrow::before, .on-coal .eyebrow::before { background: var(--red); }

.small { font-size: 15px; }
.dim { color: var(--muted); }
.on-black .dim, .on-coal .dim { color: var(--on-dark); }

/* ---------- Superficies ---------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.block { padding-block: var(--pad); }
.block--sm { padding-block: calc(var(--pad) * .62); }

.on-white { background: var(--white); color: var(--ink); }
.on-ivory { background: var(--ivory); color: var(--ink); }
.on-black { background: var(--black); color: var(--white); }
.on-coal  { background: var(--coal);  color: var(--white); }
.on-red   { background: var(--red);   color: var(--white); }
.on-black h2, .on-black h3, .on-coal h2, .on-coal h3,
.on-red h2, .on-red h3 { color: var(--white); }

.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s5); }

.grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (min-width: 980px) {
  .grid--5-7 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s7); align-items: start; }
  .grid--7-5 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--s7); align-items: start; }
  .grid--2   { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6); }
  .grid--3   { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); }
}

/* ---------- Cabecera mínima ---------- */

/* Una landing no lleva menú: cada ruta de salida es una fuga.
   Queda el logo, que ancla la marca, y nada más. */
.lp-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  border-bottom: 1px solid var(--steel);
}
.lp-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: var(--head);
}
.lp-head__in img { height: 40px; width: auto; }
@media (min-width: 768px) { .lp-head__in img { height: 48px; } }

.lp-head__n {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark); font-weight: 700; text-align: right; margin: 0;
}
.lp-head__n a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none;
}
.lp-head__n a:hover { color: var(--white); }
@media (max-width: 560px) { .lp-head__n { display: none; } }

.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; z-index: 300;
  background: var(--red); color: var(--white); text-decoration: none; font-weight: 700;
}
.skip:focus {
  position: fixed; left: 16px; top: 12px; width: auto; height: auto;
  overflow: visible; clip: auto; padding: 12px 20px;
}

/* ---------- Acciones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 15px 32px; border-radius: 3px;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn--red { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--red:hover { background: var(--red-lo); border-color: var(--red-lo); }
.btn--red:active { background: var(--red-xlo); border-color: var(--red-xlo); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.on-black .btn--line, .on-coal .btn--line { color: var(--white); border-color: var(--edge); }
.on-black .btn--line:hover, .on-coal .btn--line:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.on-red .btn--line { color: var(--white); border-color: var(--white); }
.on-red .btn--line:hover { background: var(--white); color: var(--red-xlo); }

/* Botón claro, para el cierre sobre rojo */
.btn--white { background: var(--white); color: var(--red); border-color: var(--white); }
.btn--white:hover { background: var(--ivory); border-color: var(--ivory); color: var(--red-xlo); }

.btn--lg { min-height: 62px; font-size: 18px; padding: 18px 40px; }

.tlink {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 700; font-size: 16px; text-decoration: none; padding-block: 12px;
  box-shadow: inset 0 -2px 0 0 var(--red);
}
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.ticks + .acts, .lead + .acts, p + .acts { margin-top: var(--s4); }
.acts + .note { margin-top: var(--s3); }
.note { font-size: 14px; color: var(--muted); margin: 0; }
.on-black .note, .on-coal .note { color: var(--on-dark); }
.on-red .note { color: rgba(255,255,255,.9); }

/* ---------- Hero de landing ---------- */

.lp-hero { padding-block: var(--s6) var(--pad); }
@media (min-width: 980px) { .lp-hero { padding-block: var(--s7) var(--pad); } }

/* El mockup y el formulario conviven: las propuestas de valor
   quedan junto al campo que hay que llenar. */
.lp-hero__g { display: grid; gap: var(--s6); }
@media (min-width: 980px) {
  .lp-hero__g { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
}

/* El mockup se presenta sobre una plataforma, no flotando:
   una pieza descargable necesita verse como producto. */
.mockbox {
  margin-top: var(--s5); position: relative;
  background: linear-gradient(180deg, #1A1D22 0%, #0C0E11 100%);
  border: 1px solid #262A30; border-top: 2px solid var(--red);
  padding: var(--s4) var(--s4) 0;
}
@media (min-width: 980px) { .mockbox { margin-top: var(--s6); } }
.mockbox__k {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s3);
}
.mock {
  display: block; width: 100%; max-width: 400px; margin-inline: auto;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.65));
}

/* Columna derecha del hero: formulario arriba, prueba de valor debajo */
.hcol { display: grid; gap: var(--s4); align-content: start; }
.tickbox { border-top: 1px solid var(--edge); padding-top: var(--s4); }
.tickbox__k {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark); margin: 0 0 var(--s2);
}

/* Lista de beneficios con marca roja */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative; padding-left: 30px; padding-block: 9px;
  font-size: 17px; line-height: 1.45;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 16px; height: 2px; background: var(--red);
}
.on-black .ticks li::before, .on-coal .ticks li::before { background: var(--red); }

/* ---------- Tarjeta de formulario ---------- */

.fcard {
  background: var(--coal);
  border: 1px solid var(--steel);
  padding: var(--s5);
}
.on-white .fcard, .on-ivory .fcard { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* Sobre carbón la tarjeta baja de tono para seguir leyéndose como pieza aparte */
.on-coal .fcard { background: var(--ink); border-color: var(--steel); }
.fcard h2, .fcard h3 { color: var(--white); }

@media (max-width: 767px) { .fcard { padding: var(--s4) var(--s3); } }

.fcard__k {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white); margin-bottom: var(--s2);
}
.fcard__t { font-size: clamp(21px, 2vw, 26px); font-weight: 700; color: var(--white); margin-bottom: var(--s2); line-height: 1.2; }
.fcard__s { font-size: 15px; color: var(--on-dark); margin-bottom: var(--s4); max-width: none; }

/* ---------- Formulario ---------- */

.form { max-width: 620px; }
.fld { margin-bottom: var(--s3); }
.fld label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--white); }
.on-white .form:not(.fcard .form) label { color: var(--ink); }

.req { color: #FF8A93; text-decoration: none; border: 0; font-weight: 700; margin-left: 2px; }

.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font-family: inherit; font-size: 17px;
  color: var(--white); background: var(--black);
  border: 1px solid var(--edge); border-radius: 3px;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--on-dark); }
.form input::placeholder { color: #7F848C; }

.hint { font-size: 14px; color: var(--on-dark); margin: 0 0 6px; max-width: none; }

.err {
  display: none; align-items: flex-start; gap: 8px; margin-top: 6px;
  font-size: 14px; color: #FF8A93; max-width: none;
}
.err::before {
  content: "!"; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px;
  border-radius: 50%; background: var(--red); color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.fld[data-error="true"] .err { display: flex; }
.fld[data-error="true"] input { border-color: var(--red); border-width: 2px; }

.form button[type="submit"] { width: 100%; margin-top: var(--s2); }

.legal {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--steel);
}
.legal p { font-size: 13px; line-height: 1.5; color: var(--on-dark); margin-bottom: var(--s2); max-width: none; }
.legal p:last-child { margin-bottom: 0; }
.legal a { text-decoration: underline; padding-block: 4px; display: inline-block; }

.reqnote { font-size: 13px; color: var(--on-dark); margin: 0 0 var(--s3); max-width: none; }

/* ---------- Índice del contenido ---------- */

.toc { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li {
  display: grid; gap: var(--s1);
  padding-block: var(--s3);
  border-top: 1px solid var(--line);
  counter-increment: toc;
}
.on-black .toc li, .on-coal .toc li { border-top-color: var(--steel); }
.toc > li:last-child { border-bottom: 1px solid var(--line); }
.on-black .toc > li:last-child, .on-coal .toc > li:last-child { border-bottom-color: var(--steel); }

@media (min-width: 760px) {
  .toc li { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
}

.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--red);
}
.on-black .toc li::before, .on-coal .toc li::before { color: var(--white); }
.toc b { display: block; font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.toc span { color: var(--muted); font-size: 16px; }
.on-black .toc span, .on-coal .toc span { color: var(--on-dark); }

/* ---------- Tarjetas ---------- */

.cards { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 880px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
}
.card { padding: var(--s5) var(--s4); }
.on-white .card { background: var(--ivory); }
.on-ivory .card { background: var(--white); }
.on-black .card { background: var(--coal); }
.on-coal  .card { background: var(--black); }
.card h3 { margin-bottom: var(--s2); }
.card p { margin: 0; max-width: none; color: var(--muted); font-size: 16px; }
.on-black .card p, .on-coal .card p { color: var(--on-dark); }
.card__n {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--red); margin-bottom: var(--s2);
}
.on-black .card__n, .on-coal .card__n { color: var(--white); }

/* ---------- Declaración ---------- */

.claim {
  font-size: clamp(25px, 3.2vw, 40px); line-height: 1.16;
  font-weight: 300; letter-spacing: -.02em; max-width: 24ch; margin: 0;
  text-wrap: balance;
}
.claim b { font-weight: 700; }

/* ---------- Autor ---------- */

.author { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 760px) { .author { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s6); } }
.author img { width: 100%; max-width: 220px; }
.author__r { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s2); }
.on-black .author__r, .on-coal .author__r { color: var(--white); }

.acts--ally { gap: var(--s4); margin-top: var(--s2); }
.ally { height: 30px; width: auto; background: var(--white); padding: 9px 16px; border-radius: 3px; }
.acts--ally .sep { width: 1px; align-self: stretch; background: var(--edge); }
.on-white .acts--ally .sep, .on-ivory .acts--ally .sep { background: var(--line); }

/* ---------- Diagnóstico: pasos y vista previa ---------- */

.steps { display: grid; gap: var(--s5); margin: var(--s3) 0 0; padding: 0; list-style: none; counter-reset: st; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.steps li {
  counter-increment: st; position: relative;
  padding-top: var(--s4); border-top: 2px solid var(--red);
}
.steps li::before {
  content: counter(st); display: block;
  font-size: 54px; font-weight: 700; line-height: 1;
  color: var(--red); letter-spacing: -.04em; margin-bottom: var(--s3);
}
.on-black .steps li::before, .on-coal .steps li::before { color: var(--white); }
.steps h3 { margin-bottom: var(--s2); }
.steps p { margin: 0; color: var(--muted); font-size: 16px; max-width: none; }
.on-black .steps p, .on-coal .steps p { color: var(--on-dark); }

/* Barra de avance del diagnóstico */
.prog { display: flex; gap: 6px; margin-bottom: var(--s5); }
.prog span { flex: 1; height: 4px; background: var(--edge); }
.prog span.on { background: var(--red); }

/* Resultado de ejemplo */
.rescard { background: var(--coal); border: 1px solid var(--steel); padding: var(--s5); }
.resnum { display: grid; gap: var(--s4); margin: 0 0 var(--s5); }
@media (min-width: 620px) { .resnum { grid-template-columns: repeat(3, 1fr); } }
.resnum > div { border-top: 1px solid var(--edge); padding-top: var(--s3); }
.resnum dt { font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; line-height: 1; color: var(--white); letter-spacing: -.03em; }
.resnum dt.pend { color: var(--edge); font-weight: 300; }
.resnum dd { margin: 10px 0 0; font-size: 14px; color: var(--on-dark); line-height: 1.4; }

/* ---------- Figura de posición ---------- */

.ph {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--edge); background: rgba(255,255,255,.04);
  margin: 0; width: 100%;
}
.on-white .ph, .on-ivory .ph { border-color: var(--muted); background: var(--warm); }
.ph--16x9 { aspect-ratio: 16/9; }
.ph--1x1 { aspect-ratio: 1/1; }
.ph--4x5 { aspect-ratio: 4/5; }
.ph span {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark); text-align: center; padding: var(--s3); line-height: 1.5;
}
.on-white .ph span, .on-ivory .ph span { color: var(--muted); }

/* ---------- Pie mínimo ---------- */

.lp-foot { background: var(--black); color: var(--on-dark); padding-block: var(--s5); }
.lp-foot__in { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; font-size: 14px; }
.lp-foot img { height: 36px; width: auto; }
.lp-foot ul { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.lp-foot a { color: var(--on-dark); text-decoration: none; padding-block: 6px; display: inline-block; }
.lp-foot a:hover { color: var(--white); text-decoration: underline; }
.lp-foot p { margin: 0; max-width: none; }

/* ---------- Aviso de versión local ---------- */

.localbar {
  background: var(--red); color: var(--white); font-size: 13px; line-height: 1.4;
  padding: 9px var(--gut); text-align: center; margin: 0; max-width: none; font-weight: 500;
}

/* ---------- Utilidades ---------- */

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }
.center p, .center .lead { margin-inline: auto; }

/* ---------- Ergonomía móvil ---------- */

@media (max-width: 767px) {
  :root { --pad: 44px; --s7: 56px; --s8: 72px; }
  h1 { font-size: clamp(32px, 8.6vw, 42px); line-height: 1.04; }
  h2 { font-size: clamp(26px, 7vw, 34px); }
  .lead { font-size: 18px; }
  .claim { font-size: clamp(24px, 6.4vw, 30px); }
  .grid { gap: var(--s4); }
  .stack-lg > * + * { margin-top: var(--s5); }
  .card { padding: var(--s4) var(--s3); }
  .acts .btn { width: 100%; }
  .mock { max-width: 330px; margin-inline: auto; }
  .lp-foot__in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .lp-head, .lp-foot, .localbar, .skip { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .on-black, .on-coal, .on-red { background: #fff !important; color: #000 !important; }
}


/* =========================================================
   LANDING FINAL · una sola promesa, un solo formulario
   ========================================================= */

/* --- Hero: el producto a la izquierda, la decisión a la derecha --- */
.hero { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.hero__g { display: grid; gap: var(--s6); }
@media (min-width: 1020px) {
  .hero__g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 4.4vw, 68px); }
  /* El producto acompaña al formulario mientras se llena */
  .hero__mock .mockpanel { position: sticky; top: calc(var(--head) + 28px); }
}
.hero__mock { min-width: 0; }
.hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.0; }
.hero .lead { font-size: clamp(18px, 1.5vw, 22px); max-width: 46ch; }

/* --- El mockup sobre plataforma clara: el objeto se ve, no se adivina --- */
.mockpanel {
  position: relative; margin: 0;
  background: linear-gradient(170deg, #FFFFFF 0%, var(--ivory) 100%);
  padding: clamp(14px, 2vw, 26px);
  box-shadow: 0 30px 64px rgba(0,0,0,.52);
}
.mockpanel img { display: block; width: 100%; max-width: 100%; height: auto; }
.mockpanel--ok { padding-top: clamp(56px, 6vw, 72px); }

/* Sello de enviado */
.sello {
  position: absolute; top: clamp(14px, 2vw, 26px); left: clamp(14px, 2vw, 26px);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--red); color: var(--white);
  padding: 9px 16px 9px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sello svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Palomita grande de confirmación */
.ok {
  display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 50%; background: var(--red); margin-bottom: var(--s4);
}
.ok svg { width: 32px; height: 32px; }

/* --- Las 6 disciplinas con peso --- */
.disc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 760px) { .disc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } }
.disc li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px;
  align-items: baseline; padding-block: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--steel);
}
.on-white .disc li, .on-ivory .disc li { border-top-color: var(--line); }
.disc__n {
  grid-row: 1 / span 2; align-self: start;
  font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1;
  color: var(--red); letter-spacing: -.04em;
}
.disc b { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.disc b span { font-weight: 300; color: var(--on-dark); }
.on-white .disc b span, .on-ivory .disc b span { color: var(--muted); }
.disc p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--on-dark); max-width: 46ch; }
.on-white .disc p, .on-ivory .disc p { color: var(--muted); }

/* --- Páginas reales del documento --- */
.pag { position: relative; display: block; width: 100%; min-width: 0; margin: 0; }
.pag img { display: block; width: 100%; max-width: 100%; height: auto; box-shadow: 0 26px 48px rgba(0,0,0,.55); }
.on-white .pag img, .on-ivory .pag img { box-shadow: 0 20px 40px rgba(11,12,14,.2); }
.pag__k {
  display: block; margin-top: var(--s3); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark);
}
.on-white .pag__k, .on-ivory .pag__k { color: var(--muted); }
.tira { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .tira { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); } }

/* --- Autodiagnóstico interactivo (gracias) --- */
.chk { list-style: none; margin: 0; padding: 0; }
.chk li { border-top: 1px solid var(--steel); }
.on-white .chk li, .on-ivory .chk li { border-top-color: var(--line); }
.chk li:last-child { border-bottom: 1px solid var(--steel); }
.on-white .chk li:last-child, .on-ivory .chk li:last-child { border-bottom-color: var(--line); }
.chk label {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px;
  align-items: start; padding-block: 16px; cursor: pointer;
  font-size: 16px; line-height: 1.45; min-height: 44px;
}
.chk input {
  appearance: none; -webkit-appearance: none;
  width: 28px; height: 28px; margin: 0; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 4px; background: var(--black);
  display: grid; place-items: center;
}
.chk input::after {
  content: ""; width: 12px; height: 7px; margin-top: -3px;
  border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.chk input:checked { background: var(--red); border-color: var(--red); }
.chk input:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.chk input:hover { border-color: var(--on-dark); }
.chk input:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .chk input::after { transition: none; } }

.marcador { background: var(--ink); padding: var(--s5); }
@media (min-width: 1020px) { .marcador { position: sticky; top: 104px; } }
.marcador__n { font-size: clamp(46px, 6vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--white); margin: 0; }
.marcador__n .de { font-weight: 300; color: var(--edge); }
.marcador__t { font-size: clamp(19px, 2vw, 25px); font-weight: 700; margin: var(--s3) 0 8px; color: var(--white); }
.marcador__d { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--on-dark); max-width: 56ch; }

@media (max-width: 767px) {
  .hero h1 { font-size: clamp(34px, 9.4vw, 46px); }
  .marcador { padding: var(--s4) var(--s3); }
  .disc li { grid-template-columns: auto minmax(0, 1fr); }
}

/* Formulario de Clientify: se dibuja directo sobre el fondo de la sección. */
.form__embed { min-height: 120px; }
.form--clientify .legal { margin-top: var(--s3); }