/* =========================================================
   Konzeppt · Sistema visual v2
   Bloques de color completos. Cada sección cambia de fondo,
   así que el corte entre secciones se ve sin necesidad de líneas.
   ========================================================= */

:root {
  --red: #B31C27;
  --red-lo: #8E1620;
  --red-xlo: #74111A;
  --black: #0B0C0E;
  --ink: #17191D;
  --coal: #24272C;
  --steel: #3A3E45;      /* líneas decorativas sobre oscuro */
  --edge: #757A82;       /* bordes de control sobre oscuro: 4.53:1 sobre negro */
  --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: 1240px;
  --gut: 20px;
  --pad: 64px;
  --head: 76px;
}

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

*, *::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, 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-black textarea: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: -0.022em; text-wrap: balance; }

h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.0; }
h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; }
h3 { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.22; letter-spacing: -0.012em; }

/* Variación de peso dentro del mismo titular: la segunda línea
   baja a regular y a un color más tenue. La jerarquía se construye
   con peso y valor, no con un color de acento por palabra. */
.thin { font-weight: 300; display: block; }
.thin-muted { font-weight: 300; display: block; color: var(--muted); }
.on-black .thin-muted, .on-coal .thin-muted { color: var(--on-dark); }

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

.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.48; max-width: 56ch; color: var(--muted); }
.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: 0.16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 var(--s3);
}
.eyebrow::before { content: ""; width: 32px; 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); }
.on-red .eyebrow { color: var(--white); }
.on-red .eyebrow::before { background: var(--white); }

.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) * 0.6); }

.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); }

/* ---------- Rejilla ---------- */

.grid { display: grid; gap: var(--s5); }

@media (min-width: 980px) {
  .grid--7-5 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--s7); align-items: center; }
  .grid--5-7 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); 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); }
}

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

/* ---------- Cabecera ---------- */

.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;
}

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--black); color: var(--white);
  border-bottom: 1px solid var(--steel);
}

.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); min-height: var(--head);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }

/* Marcador tipográfico del logotipo, con más presencia que la v1.
   Se sustituye por <img> al recibir los PNG. */
.brand__txt {
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 700; letter-spacing: -0.035em; white-space: nowrap; color: var(--white);
}
.brand__txt i { font-style: normal; color: var(--red); }

.nav { display: none; }
@media (min-width: 1080px) { .nav { display: flex; align-items: center; gap: var(--s4); } }

.nav a {
  text-decoration: none; font-size: 15px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--on-dark);
  padding-block: 8px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--red); }

.header .hcta { display: none; }
@media (min-width: 1080px) { .header .hcta { display: inline-flex; flex: 0 0 auto; } }

.menu { display: block; position: relative; flex: 0 0 auto; }
@media (min-width: 1080px) { .menu { display: none; } }

.menu > summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--white);
  border: 1px solid var(--edge); border-radius: 4px; padding-inline: 16px; background: transparent;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu[open] > summary::after { content: "Cerrar"; }
.menu:not([open]) > summary::after { content: "Menú"; }

.menu__panel {
  position: absolute; right: 0; top: calc(100% + 14px);
  width: min(calc(100vw - 2 * var(--gut)), 340px);
  background: var(--coal); border: 1px solid var(--steel);
  padding: var(--s2) var(--s3) var(--s3);
}
.menu__panel a {
  display: block; text-decoration: none; font-size: 18px; color: var(--white);
  padding-block: 14px; border-bottom: 1px solid var(--steel);
}
.menu__panel a[aria-current="page"] { color: var(--red); font-weight: 700; }
.menu__panel .btn { margin-top: var(--s3); width: 100%; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 30px; border-radius: 3px;
  font-family: inherit; font-size: 16px; 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); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--line); color: var(--muted); border-color: var(--line); cursor: not-allowed;
}

.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);
}
.tlink:hover { box-shadow: inset 0 -3px 0 0 var(--red); }

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.note { font-size: 14px; color: var(--muted); margin: 0; }
.on-black .note, .on-coal .note { color: var(--on-dark); }
.stack > .acts + .note { margin-top: var(--s2); }

/* ---------- Hero ---------- */

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

.hero__fig { margin-top: var(--s6); }
@media (min-width: 980px) { .hero__fig { margin-top: 0; } }

/* ---------- Gráficos ---------- */

.fig { width: 100%; }
.fig text { font-family: var(--font); }
.fig__cap {
  font-size: 13px; color: var(--muted); margin-top: var(--s2);
  max-width: 48ch; line-height: 1.45;
}
.on-black .fig__cap, .on-coal .fig__cap { color: var(--on-dark); }

figure { margin: 0; }

/* ---------- Tarjetas y listas ---------- */

.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); }
.on-red   .card { background: var(--red-xlo); }

.card h3 { margin-bottom: var(--s2); }
.card p { margin: 0; max-width: none; color: var(--muted); }
.on-black .card p, .on-coal .card p { color: var(--on-dark); }
.on-red .card p { color: var(--white); }

.card__n {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--red); margin-bottom: var(--s2);
}
.on-black .card__n, .on-coal .card__n { color: var(--white); }

/* Filas numeradas */
.rows { margin: 0; padding: 0; list-style: none; }
.row {
  display: grid; gap: var(--s1);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.on-black .row, .on-coal .row { border-top-color: var(--steel); }
.on-red .row { border-top-color: rgba(255,255,255,.3); }
.rows > .row:last-child { border-bottom: 1px solid var(--line); }
.on-black .rows > .row:last-child, .on-coal .rows > .row:last-child { border-bottom-color: var(--steel); }
.on-red .rows > .row:last-child { border-bottom-color: rgba(255,255,255,.3); }

@media (min-width: 860px) {
  .row { grid-template-columns: 76px minmax(0,4fr) minmax(0,6fr); gap: var(--s4); align-items: start; }
}

.row__n { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); }
.on-black .row__n, .on-coal .row__n, .on-red .row__n { color: var(--white); }
.row__t { font-size: 20px; font-weight: 700; line-height: 1.25; }
.row__d { margin: 0; max-width: none; color: var(--muted); }
.on-black .row__d, .on-coal .row__d { color: var(--on-dark); }
.on-red .row__d { color: var(--white); }

/* Declaración de gran tamaño */
.claim {
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.18; font-weight: 300; letter-spacing: -0.02em;
  max-width: 24ch; margin: 0;
}
.claim b { font-weight: 700; }

/* Estaciones del método */
.station { padding-block: var(--s6); border-top: 1px solid var(--line); }
.on-black .station, .on-coal .station { border-top-color: var(--steel); }

@media (min-width: 980px) {
  .station__g { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: var(--s7); align-items: start; }
}
.station h2 { font-size: clamp(24px, 2.4vw, 34px); max-width: 18ch; }
.station__n { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--red); margin-bottom: var(--s2); }
.on-black .station__n, .on-coal .station__n { color: var(--white); }

.f { margin-top: var(--s3); }
.f:first-child { margin-top: 0; }
.f__l {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.on-black .f__l, .on-coal .f__l { color: var(--on-dark); }
.f p { margin: 0; color: var(--muted); }
.on-black .f p, .on-coal .f p { color: var(--on-dark); }

.f--key { border-left: 3px solid var(--red); padding-left: var(--s3); }
.f--key .f__l { color: var(--red); }
.on-black .f--key .f__l, .on-coal .f--key .f__l { color: var(--white); }
.f--key p { color: var(--ink); }
.on-black .f--key p, .on-coal .f--key p { color: var(--white); }

/* Reparto */
.duo { display: grid; gap: var(--s5); }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2,1fr); gap: var(--s6); } }
.duo h3 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s3); }
.on-black .duo h3, .on-coal .duo h3 { color: var(--white); }
.duo ul { margin: 0; padding: 0; list-style: none; }
.duo li { padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.on-black .duo li, .on-coal .duo li { border-bottom-color: var(--steel); }
.duo li:first-child { border-top: 1px solid var(--line); }
.on-black .duo li:first-child, .on-coal .duo li:first-child { border-top-color: var(--steel); }

/* Datos en definición */
.defs { margin: 0; }
.def { display: grid; gap: 2px; padding-block: var(--s3); border-top: 1px solid var(--line); }
.on-black .def, .on-coal .def { border-top-color: var(--steel); }
.defs > .def:last-child { border-bottom: 1px solid var(--line); }
.on-black .defs > .def:last-child, .on-coal .defs > .def:last-child { border-bottom-color: var(--steel); }
@media (min-width: 760px) { .def { grid-template-columns: minmax(0,3fr) minmax(0,7fr); gap: var(--s4); align-items: baseline; } }
.def dt { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.on-black .def dt, .on-coal .def dt { color: var(--on-dark); }
.def dd { margin: 0; }

/* ---------- Lead magnet ---------- */

.magnet { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .magnet { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s7); } }

.magnet__cover {
  aspect-ratio: 3 / 4;
  background: var(--coal);
  border: 1px dashed var(--steel);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s4);
  max-width: 300px;
}
.magnet__cover span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); }

/* ---------- Marcadores de pendiente ---------- */

.todo { border: 1px dashed var(--muted); padding: var(--s4); }
.on-black .todo, .on-coal .todo { border-color: var(--steel); background: rgba(255,255,255,.03); }
.on-white .todo, .on-ivory .todo { background: var(--warm); }
.todo__t { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s1); }
.on-black .todo__t, .on-coal .todo__t { color: var(--white); }
.todo p { margin: 0; font-size: 16px; color: var(--muted); max-width: none; }
.on-black .todo p, .on-coal .todo p { color: var(--on-dark); }
.todo p + p { margin-top: var(--s2); }

.slots { display: grid; gap: 2px; }
@media (min-width: 760px) { .slots { grid-template-columns: repeat(2,1fr); } }
.slot {
  border: 1px dashed var(--steel); min-height: 190px;
  display: flex; align-items: flex-end; padding: var(--s4);
  background: rgba(255,255,255,.03);
}
.slot span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); }

.portrait {
  aspect-ratio: 4/5; background: var(--coal); border: 1px dashed var(--steel);
  display: flex; align-items: flex-end; padding: var(--s3); max-width: 320px;
}
.portrait span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); }

.profile { display: grid; gap: var(--s5); }
@media (min-width: 860px) { .profile { grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: var(--s7); align-items: start; } }
.role { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s2); }
.on-black .role, .on-coal .role { color: var(--white); }

/* ---------- FAQ ---------- */

.faq__i { border-top: 1px solid var(--line); }
.on-black .faq__i, .on-coal .faq__i { border-top-color: var(--steel); }
.faq > .faq__i:last-child { border-bottom: 1px solid var(--line); }
.on-black .faq > .faq__i:last-child, .on-coal .faq > .faq__i:last-child { border-bottom-color: var(--steel); }

.faq__i > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s3); min-height: 68px;
  padding-block: var(--s2); font-size: 19px; font-weight: 700; line-height: 1.3;
}
.faq__i > summary::-webkit-details-marker { display: none; }
.faq__i > summary::marker { content: ""; }
.chev {
  flex: 0 0 auto; width: 13px; height: 13px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform 160ms ease; margin-right: 6px;
}
.on-black .chev, .on-coal .chev { border-color: var(--white); }
.faq__i[open] .chev { transform: rotate(225deg); }
.faq__a { padding-bottom: var(--s4); }
.faq__a p { color: var(--muted); }
.on-black .faq__a p, .on-coal .faq__a p { color: var(--on-dark); }

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

.form { max-width: 640px; }
.fld { margin-bottom: var(--s4); }
.fld label { display: block; font-size: 15px; font-weight: 700; margin-bottom: var(--s1); }
.opt { font-weight: 400; color: var(--muted); }
.on-black .opt, .on-coal .opt { color: var(--on-dark); }
.hint { font-size: 14px; color: var(--muted); margin: 0 0 var(--s1); max-width: none; }
.on-black .hint, .on-coal .hint { color: var(--on-dark); }

.form input, .form textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font-family: inherit; font-size: 17px;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--muted); border-radius: 3px;
}
.on-black .form input, .on-black .form textarea,
.on-coal .form input, .on-coal .form textarea {
  background: var(--black); color: var(--white); border-color: var(--edge);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--ink); }
.on-black .form input:hover, .on-coal .form input:hover,
.on-black .form textarea:hover, .on-coal .form textarea:hover { border-color: var(--on-dark); }

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

.priv { font-size: 14px; color: var(--muted); margin-top: var(--s3); max-width: 56ch; }
.on-black .priv, .on-coal .priv { color: var(--on-dark); }
.priv a { text-decoration: underline; }

/* ---------- Índice editorial ---------- */

.posts { margin: 0; padding: 0; list-style: none; }
.post { padding-block: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s1); }
.posts > .post:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .post { grid-template-columns: minmax(0,3fr) minmax(0,8fr); gap: var(--s4); align-items: baseline; } }
.post__m { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.post__t { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.post p { color: var(--muted); margin: 0; }

/* ---------- Pie ---------- */

.foot { background: var(--black); color: var(--white); padding-block: var(--s7) var(--s5); }
.foot__g { display: grid; gap: var(--s5); }
@media (min-width: 880px) { .foot__g { grid-template-columns: repeat(4, minmax(0,1fr)); } .foot__g > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .foot__g { grid-template-columns: minmax(0,3fr) repeat(4, minmax(0,2fr)); } .foot__g > :first-child { grid-column: auto; } }
.foot h2 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s3); font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--white); text-decoration: none; font-size: 16px; display: inline-block; padding-block: 4px; }
.foot a:hover { text-decoration: underline; }
.foot__d { color: var(--on-dark); font-size: 16px; max-width: 32ch; margin-top: var(--s3); }
.foot__l {
  margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--steel);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: center; justify-content: space-between; font-size: 14px; color: var(--on-dark);
}
.foot__l p { margin: 0; max-width: none; }
.foot__l ul { display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot__l li { margin: 0; }
.foot__l a { font-size: 14px; }

/* ---------- Barra 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;
}

/* ---------- Migas ---------- */

.crumb { font-size: 14px; color: var(--on-dark); padding-block: var(--s2); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.crumb li { display: inline-flex; align-items: center; }
.crumb a, .crumb li[aria-current] { display: inline-flex; align-items: center; min-height: 24px; padding-block: 4px; }
.crumb li::after { content: "/"; margin-left: 8px; color: var(--steel); }
.crumb li:last-child::after { content: ""; }

/* ---------- 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: 780px; }
.sw { display: inline-block; width: 22px; height: 22px; border: 1px solid var(--line); vertical-align: -5px; margin-right: 8px; }

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

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

/* =========================================================
   v3 · Añadidos
   ========================================================= */

/* ---------- Figuras de posición para imágenes ---------- */

.ph {
  position: relative;
  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);
}
.on-red .ph { border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.08); }

.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--1x1  { aspect-ratio: 1 / 1; }

.ph span {
  font-size: 13px;
  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, .on-red .ph span { color: var(--muted); }
.on-red .ph span { color: #fff; }

/* ---------- Tarjeta de recurso descargable ---------- */

/* La tarjeta de recurso se lee como pieza, no como bloque de texto:
   sobre negro toma el carbón para separarse del fondo. */
.res {
  display: grid;
  gap: var(--s4);
  border: 1px solid var(--edge);
  padding: var(--s4);
}
.on-black .res { background: var(--coal); border-color: var(--steel); }
.on-coal .res  { background: var(--black); border-color: var(--steel); }
.on-white .res { background: var(--ivory); border-color: var(--line); }
.on-ivory .res { background: var(--white); border-color: var(--line); }

@media (min-width: 620px) {
  .res { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: var(--s4); align-items: start; }
}
@media (min-width: 980px) {
  .res--wide { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: var(--s5); }
}

.res__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: var(--s1);
}
.on-black .res__k, .on-coal .res__k { color: #fff; }
.res h2, .res h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.18; margin-bottom: var(--s2); }
.res p { font-size: 16px; color: var(--muted); margin-bottom: var(--s3); max-width: none; }
.on-black .res p, .on-coal .res p { color: var(--on-dark); }
.res .btn { min-height: 48px; font-size: 15px; padding: 12px 24px; }

/* ---------- Línea de tiempo ---------- */

.tl { margin: 0; padding: 0; list-style: none; }

.tl li {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.on-black .tl li, .on-coal .tl li { border-top-color: var(--steel); }
.tl > li:last-child { border-bottom: 1px solid var(--line); }
.on-black .tl > li:last-child, .on-coal .tl > li:last-child { border-bottom-color: var(--steel); }

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

.tl .y {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--red);
  line-height: 1;
}
.on-black .tl .y, .on-coal .tl .y { color: #fff; }
.tl .d { margin: 0; max-width: none; }
.tl .d b { font-weight: 700; display: block; margin-bottom: 4px; }
.tl .d span { color: var(--muted); display: block; }
.on-black .tl .d span, .on-coal .tl .d span { color: var(--on-dark); }

/* ---------- Hero con recurso al costado ---------- */

/* En móvil el recurso baja bajo el titular y necesita aire propio. */
.hero__two > * + * { margin-top: var(--s6); }

@media (min-width: 1040px) {
  .hero__two {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s7);
    align-items: center;
  }
  .hero__two > * + * { margin-top: 0; }
}

/* ---------- Pilares con icono tipográfico ---------- */

.pillars { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 880px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar { padding: var(--s5) var(--s4); }
.on-black .pillar { background: var(--coal); }
.on-coal .pillar { background: var(--black); }
.on-white .pillar { background: var(--ivory); }
.on-ivory .pillar { background: var(--white); }
.pillar h3 { font-size: 21px; margin-bottom: var(--s2); }
.pillar p { margin: 0; max-width: none; color: var(--muted); font-size: 16px; }
.on-black .pillar p, .on-coal .pillar p { color: var(--on-dark); }
.pillar .tagn {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s2);
}
.on-black .pillar .tagn, .on-coal .pillar .tagn { color: #fff; }

/* Nota al pie de la tarjeta de recurso */
.res__n {
  font-size: 13px;
  color: var(--muted);
  margin: var(--s2) 0 0;
  max-width: none;
}
.on-black .res__n, .on-coal .res__n { color: var(--on-dark); }

/* ---------- Formulario de contacto v3 ---------- */

/* El asterisco de campo obligatorio no es el único portador de la
   información: cada campo opcional se rotula "(opcional)" y la nota
   bajo el formulario explica la convención. */
.req {
  color: var(--red);
  text-decoration: none;
  border: 0;
  font-weight: 700;
  margin-left: 2px;
}
.on-black .req, .on-coal .req { color: #FF8A93; }

.reqnote {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 var(--s3);
  max-width: none;
}
.on-black .reqnote, .on-coal .reqnote { color: var(--on-dark); }

.legal {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.on-black .legal, .on-coal .legal { border-top-color: var(--steel); }

.legal p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: var(--s2);
}
.on-black .legal p, .on-coal .legal p { color: var(--on-dark); }
.legal p:last-child { margin-bottom: 0; }
.legal a { text-decoration: underline; padding-block: 4px; display: inline-block; }

/* =========================================================
   v3.1 · Logotipos, teléfono, KPIs, certificaciones y móvil
   ========================================================= */

/* ---------- Logotipo de marca ---------- */

/* El logo se dimensiona por ALTO, no por ancho: así conserva el área de
   reserva dentro de la cabecera y los dos círculos de la ö no tocan el borde.
   La especificidad sube a .header/.foot para ganar a cualquier regla de .brand. */
.header .brand__img,
.foot .brand__img {
  height: 42px;
  width: auto;
  max-width: 56vw;
}

@media (min-width: 768px) {
  .header .brand__img { height: 48px; }
  .foot .brand__img   { height: 52px; }
}

@media (min-width: 1024px) {
  .header .brand__img { height: 54px; }
}

@media (max-width: 420px) {
  .header .brand__img { height: 36px; }
}

/* ---------- Logotipos de aliados ---------- */

/* Altura óptica equiparada: el de LinkedIn es mucho más ancho,
   entonces se fija por alto y no por ancho. */
.ally { height: auto; width: auto; }
.ally--li { height: 22px; }
.ally--cl { height: 26px; }

@media (min-width: 880px) {
  .ally--li { height: 24px; }
  .ally--cl { height: 28px; }
}

.ally--hs { height: 26px; }
@media (min-width: 880px) { .ally--hs { height: 28px; } }

/* En las tres capacidades los logos ocupan una caja del mismo tamaño. */
.pillar .ally { display: block; box-sizing: border-box; width: 168px; height: 52px; object-fit: contain; margin-bottom: var(--s3); }
.on-black .pillar .ally, .on-coal .pillar .ally { padding: 12px 18px; }
.stack > .ally { margin-bottom: 0; }

/* Sobre fondo oscuro el azul corporativo de ambos pierde contraste,
   entonces reciben una base clara en lugar de recolorearse. */
.on-black .ally, .on-coal .ally, .on-red .ally {
  background: var(--white);
  padding: 7px 12px;
  border-radius: 3px;
}

/* ---------- Teléfono con clave de país ---------- */

.tel { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: var(--s2); }

@media (max-width: 420px) {
  .tel { grid-template-columns: 1fr; }
}

.tel__c { display: block; position: relative; }

.form select {
  width: 100%;
  min-height: 52px;
  padding: 14px 38px 14px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--muted);
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}
.on-black .form select, .on-coal .form select {
  background: var(--black); color: var(--white); border-color: var(--edge);
}
.form select:hover { border-color: var(--ink); }
.on-black .form select:hover, .on-coal .form select:hover { border-color: var(--on-dark); }

/* Punta del desplegable, dibujada con bordes para no cargar un icono. */
.tel__c::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.on-black .tel__c::after, .on-coal .tel__c::after { border-color: var(--on-dark); }

/* ---------- Cifras de trayectoria ---------- */

.kpis { display: grid; gap: var(--s5); margin: 0; }

@media (min-width: 680px) { .kpis { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(4, 1fr); } }

.kpis dt {
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--red);
  margin-bottom: var(--s2);
}
.on-coal .kpis dt, .on-black .kpis dt { color: var(--white); }
.kpis dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--on-dark); max-width: 24ch; }

/* ---------- Pregunta bajo una declaración ---------- */

.claim__q {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  margin-top: var(--s4);
  max-width: 44ch;
  color: #fff;
}

/* ---------- Certificaciones ---------- */

.certs { display: grid; gap: 2px; }
@media (min-width: 720px) { .certs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .certs { grid-template-columns: repeat(4, 1fr); } }

.certg { background: var(--ivory); padding: var(--s4); }
.on-ivory .certg { background: var(--white); }

.certg__h {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.certg__n { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.certg ul { margin: 0; padding: 0; list-style: none; }
.certg li {
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  padding-block: 8px;
  padding-left: 16px;
  position: relative;
}
.certg li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.02em;
  width: 7px;
  height: 2px;
  background: var(--red);
}

/* =========================================================
   Ergonomía móvil
   El ritmo vertical de escritorio deja huecos largos en una
   pantalla de 390 px, donde el pulgar recorre más y la atención
   se pierde entre bloques.
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --pad: 48px;     /* separación entre secciones */
    --s7: 56px;
    --s8: 72px;
  }

  .hero { padding-block: var(--s6) var(--pad); }
  .hero--simple { padding-block: var(--s5) var(--pad); }

  /* Las rejillas de dos columnas colapsan: el salto entre la
     columna de título y la de contenido se acorta. */
  .grid { gap: var(--s4); }
  .stack-lg > * + * { margin-top: var(--s5); }

  /* Los gráficos no necesitan tanto aire propio al apilarse. */
  figure + div, div + figure { margin-top: var(--s4); }

  /* Titulares más compactos para que quepa más contenido por pantalla. */
  h1 { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.04; }
  h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .lead { font-size: 18px; }
  .claim { font-size: clamp(24px, 6.6vw, 30px); }

  .block--sm { padding-block: var(--s5); }

  /* Las tarjetas y filas pierden el aire de escritorio. */
  .card { padding: var(--s4) var(--s3); }
  .pillar { padding: var(--s4) var(--s3); }
  .row { padding-block: var(--s3); }
  .station { padding-block: var(--s5); }
  .tl li { padding-block: var(--s3); }
  .def { padding-block: var(--s2); }

  /* El pie se agrupa en dos columnas en lugar de cuatro bloques apilados. */
  .foot { padding-block: var(--s6) var(--s4); }
  .foot__g { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .foot__g > :first-child { grid-column: 1 / -1; }
  .foot__l { margin-top: var(--s5); }

  /* Acciones a ancho completo: objetivo táctil cómodo y sin dudas. */
  .acts { gap: var(--s2); }
  .acts .btn,
  .form button[type="submit"] { width: 100%; }

  .res { padding: var(--s3); }
  .legal { margin-top: var(--s3); }
}

@media (max-width: 420px) {
  :root { --pad: 44px; }
  .brand__img { width: 145px; }
}

/* =========================================================
   v3.2 · Retrato, botón de LinkedIn, capacidades y recurso
   ========================================================= */

/* ---------- Retrato con fondo recortado ---------- */

/* La foto llega sin fondo, entonces se apoya sobre el bloque oscuro
   en lugar de encerrarse en un marco. Centrada para que la fila crezca
   con ella y el retrato nunca se corte por arriba. */
.profile--photo { align-items: center; }

.portrait__img {
  width: 100%;
  max-width: 330px;
  height: auto;
  justify-self: start;
}

@media (min-width: 860px) {
  .profile--photo { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .portrait__img { max-width: none; }
}

/* ---------- Botón de LinkedIn ---------- */

.btn-li {
  display: inline-block;
  align-self: flex-start;
  line-height: 0;
  border-radius: 10px;
}
.btn-li img { height: 46px; width: auto; }
.btn-li:hover { opacity: .88; }
.btn-li:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

@media (max-width: 767px) { .btn-li img { height: 42px; } }

/* ---------- Capacidades ---------- */

/* Cinco grupos, entonces la rejilla no se reparte igual que las
   cuatro columnas de certificaciones. */
@media (min-width: 720px)  { .certs--caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .certs--caps { grid-template-columns: repeat(3, 1fr); } }

.certs--caps .certg__n { font-size: 17px; line-height: 1.3; }

/* ---------- Tarjeta del recurso: más aire ---------- */

.res { gap: var(--s5); padding: var(--s5); }
.res h2 { margin-bottom: var(--s3); }
.res p { margin-bottom: var(--s4); line-height: 1.5; }

@media (min-width: 620px) {
  .res { grid-template-columns: minmax(0, 185px) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 1040px) {
  .res--wide { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 767px) {
  .res { padding: var(--s4); gap: var(--s4); }
}

/* El titular del recurso vive en una columna estrecha: se evita que el
   navegador parta la palabra y se permite el salto natural entre palabras. */
.res h2 {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

/* En el hero la tarjeta vive en una columna angosta: el mockup pasa arriba
   y el texto ocupa el ancho completo, para no leer en una medida de 20
   caracteres. */
.hero__two .res { grid-template-columns: 1fr; gap: var(--s4); }
.hero__two .res .ph { max-width: 190px; }

@media (min-width: 620px) {
  .hero__two .res .ph { max-width: 220px; }
}

/* ---------- Fotos (sustituyen a las figuras de posición) ---------- */

.foto { margin: 0; width: 100%; }
.foto img { display: block; width: 100%; height: auto; }
.hero__two .res .foto { max-width: 190px; }

@media (min-width: 620px) {
  .hero__two .res .foto { max-width: 220px; }
}

/* Recorte cuadrado centrado en un marco 16:9 en escritorio;
   en móvil se ve a ancho completo. */
@media (min-width: 768px) {
  .foto--contain { aspect-ratio: 16 / 9; }
  .foto--contain picture { display: block; height: 100%; }
  .foto--contain img { height: 100%; object-fit: contain; }
}

/* =========================================================
   Transiciones nativas entre páginas (View Transitions entre documentos)
   Sin JavaScript: el navegador funde una página con la siguiente.
   Chrome, Edge y Safari las muestran; los demás navegan como siempre.
   ========================================================= */

@view-transition { navigation: auto; }

/* La cabecera se queda quieta mientras el contenido cambia. */
.header { view-transition-name: cabecera; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* =========================================================
   v3.3 · Imágenes más grandes, lead magnets, contadores y WhatsApp
   ========================================================= */

/* Todas las fotos con esquinas de 5px. */
.foto img { border-radius: 5px; }

/* La imagen de la tarjeta del hero ocupa el ancho del texto. */
.hero__two .res .foto { max-width: none; }

/* En las tarjetas anchas la imagen crece y se centra con el texto. */
@media (min-width: 620px) {
  .res--wide { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 980px) {
  .res--wide { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--s6); }
}

/* Lead magnets: tarjeta con acento rojo, brillo que sigue al cursor
   y la imagen inclinada hacia él (ver src/scripts/interaccion.js). */
.res {
  --mx: 50%; --my: 0%; --rx: 0deg; --ry: 0deg;
  position: relative;
  isolation: isolate;
  border-radius: 6px;
  border-top: 3px solid var(--red);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.res::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(179, 28, 39, .22), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.on-white .res::before, .on-ivory .res::before {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(179, 28, 39, .10), transparent 65%);
}
.res .foto { perspective: 900px; }
.res .foto img {
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
  will-change: transform;
}
.res.is-activa { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: translateY(-3px); }
.res.is-activa::before { opacity: 1; }
.res.is-activa .foto img {
  transition-duration: .12s;
  box-shadow: calc(var(--ry) * -1.4) calc(var(--rx) * 1.4 + 14px) 30px rgba(0, 0, 0, .35);
}
.res .btn { transition: transform .2s ease, background-color .2s ease; }
.res.is-activa .btn { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .res, .res .foto img, .res .btn { transition: none; }
}

/* Cifras de Resultados: ancho estable mientras cuentan. */
[data-cuenta] { font-variant-numeric: tabular-nums; }

/* ---------- WhatsApp flotante ---------- */
.wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa:hover { transform: scale(1.07); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.wa:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--black); }
@media (max-width: 420px) { .wa { right: 14px; bottom: 14px; width: 52px; height: 52px; } }
@media print { .wa { display: none; } }
[class*="on-"] .res { border-top-color: var(--red); }

/* El botón flotante de WhatsApp no tapa los enlaces legales del pie. */
.foot__l { padding-right: 76px; }

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

/* Páginas legales: aviso de privacidad, términos y cookies */
.legal-doc h3 { margin-top: var(--s5); }
.legal-doc h3:first-child { margin-top: 0; }
.legal-doc ul { margin: 0 0 var(--s2); padding-left: 1.2em; max-width: 66ch; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc .pend { background: var(--warm); border: 1px dashed var(--muted); padding: 0 4px; }