/* Tokens de «The Flaming Leads Design System» (artifact
   EKyj1C5uSMoAsDxsxdxAAU, versión del 17 de septiembre de 2026), registro
   loud. Sólo los que el sitio usa, con sus nombres exactos: un hex nuevo
   entra primero acá como token, nunca suelto en una regla. */
:root{
  --tfl-flame-500:#e5432e; --tfl-flame-600:#c6321f; --tfl-flame-700:#9c2517;
  --tfl-amber-300:#f5be64; --tfl-amber-400:#f0a231;
  --tfl-blossom-300:#f49cb2;
  --tfl-sky-300:#b3dcf9;
  --tfl-electric-500:#1e8fdc; --tfl-electric-600:#1571b2;
  --tfl-ink-900:#1a1a1c; --tfl-ink-600:#4f5052; --tfl-ink-500:#6e7073;
  --tfl-ink-300:#c3c5c9; --tfl-ink-100:#f0f1f3;
  --tfl-paper:#ffffff; --tfl-bone:#faf8f5;

  --brand-primary:var(--tfl-flame-500);
  --brand-primary-hover:var(--tfl-flame-600);
  --brand-primary-press:var(--tfl-flame-700);
  --text-strong:var(--tfl-ink-900);
  --text-body:var(--tfl-ink-600);
  --text-muted:var(--tfl-ink-500);
  --text-inverse:var(--tfl-paper);
  --text-brand:var(--tfl-flame-500);
  --text-link:var(--tfl-electric-600);
  --text-link-hover:var(--tfl-flame-500);
  --surface-page:var(--tfl-paper);
  --surface-page-alt:var(--tfl-bone);
  --surface-card:var(--tfl-paper);
  --surface-sunken:var(--tfl-ink-100);
  --surface-sky:var(--tfl-sky-300);
  --surface-ink:var(--tfl-ink-900);
  --border-default:var(--tfl-ink-300);
  --border-strong:var(--tfl-ink-900);
  --border-brand:var(--tfl-flame-500);
  --focus-ring:var(--tfl-electric-500);
  --chevron-band-1:var(--tfl-flame-500);
  --chevron-band-2:var(--tfl-blossom-300);
  --chevron-band-3:var(--tfl-amber-400);
  --chevron-bg:var(--tfl-sky-300);

  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display-stretch-wide:125%;
  --fs-h2:26px; --fs-h3:21px; --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-eyebrow:12px;
  --ls-display:-0.022em; --ls-heading:-0.018em; --ls-eyebrow:0.14em; --ls-button:0.02em;

  --radius-sm:4px; --radius-md:8px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(26,26,28,.07);
  --shadow-md:0 8px 20px -6px rgba(26,26,28,.14);
  --shadow-flame:0 12px 28px -10px rgba(229,67,46,.45);
  --shadow-inset-hairline:inset 0 0 0 1px #e1e3e6;

  --gutter-inline:24px; --gutter-inline-lg:56px;
  --section-y:96px; --section-y-sm:56px;
  --container-max:1240px; --container-narrow:720px;
  --control-h:42px; --control-h-lg:52px;

  /* Los valores reales de movimiento; el tokens.json del sistema los trae en
     0 por un error de exportación que su propio README documenta. */
  --dur-fast:150ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --press-scale:.97;
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms}}

/* ── Base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 var(--fs-body)/1.55 var(--font-body);color:var(--text-body);
  background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--ls-heading);margin:0}
h2{font-size:clamp(26px,3.6vw,34px);font-weight:700;line-height:1.2}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.12}
p,ul,ol,dl,dd,blockquote,figure{margin:0}
a{color:var(--text-link);text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:var(--tfl-amber-300);color:var(--tfl-ink-900)}
[hidden]{display:none!important}

/* ── Piezas del sistema ───────────────────────────────── */
.tfl-eyebrow{font:700 var(--fs-eyebrow)/1.2 var(--font-display);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-brand);margin-bottom:12px}
.tfl-stripe-rule{height:10px;background:linear-gradient(90deg,var(--tfl-flame-500) 0 25%,
  var(--tfl-amber-400) 25% 50%,var(--tfl-blossom-300) 50% 75%,var(--tfl-electric-500) 75% 100%)}
.tfl-chevrons{background-color:var(--chevron-bg);background-image:
  repeating-linear-gradient(135deg,transparent 0 96px,var(--chevron-band-1) 96px 122px,var(--chevron-bg) 122px 132px,var(--chevron-band-2) 132px 148px,var(--chevron-band-3) 148px 162px,transparent 162px 240px),
  repeating-linear-gradient(45deg,transparent 0 96px,var(--chevron-band-1) 96px 122px,var(--chevron-bg) 122px 132px,var(--chevron-band-2) 132px 148px,var(--chevron-band-3) 148px 162px,transparent 162px 240px)}

/* ── Maqueta ──────────────────────────────────────────── */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-inline)}
.seccion{padding:var(--section-y-sm) 0}
@media (min-width:900px){
  .wrap{padding:0 var(--gutter-inline-lg)}
  .seccion{padding:var(--section-y) 0}
}
.cabeza{max-width:var(--container-narrow);margin-bottom:40px}
.cabeza p{font-size:var(--fs-body-lg);margin-top:14px}
.acento{color:var(--text-brand)}

/* ── Wordmark en tipografía ───────────────────────────── */
.marca{display:inline-flex;flex-direction:column;font-family:var(--font-display);
  font-stretch:var(--font-display-stretch-wide);line-height:.9;letter-spacing:-.02em;text-decoration:none}
.marca .the{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--tfl-electric-500)}
.marca .fl{font-size:22px;font-weight:900;color:var(--tfl-ink-600)}
.marca .ld{font-size:22px;font-weight:900;color:var(--text-inverse);background:var(--brand-primary);
  padding:0 .1em;align-self:flex-start}

/* ── Encabezado (estático en marketing, según el sistema) ─ */
.encabezado .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.nav{display:none;gap:28px;font-size:var(--fs-body-sm);font-weight:600}
.nav a{color:var(--text-strong);text-decoration:none}
.nav a:hover{color:var(--text-link-hover)}
@media (min-width:900px){.nav{display:flex}}

/* ── Botones ──────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h);
  padding:0 22px;border-radius:var(--radius-pill);border:2px solid transparent;
  font:700 15px/1.15 var(--font-display);letter-spacing:var(--ls-button);text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform 90ms var(--ease-standard)}
.boton:active{transform:scale(var(--press-scale))}
.boton-primario{background:var(--brand-primary);color:var(--text-inverse);box-shadow:var(--shadow-flame)}
.boton-primario:hover{background:var(--brand-primary-hover);color:var(--text-inverse)}
.boton-primario:active{background:var(--brand-primary-press)}
.boton-contorno{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.boton-contorno:hover{background:var(--border-strong);color:var(--text-inverse)}
.boton-grande{min-height:var(--control-h-lg);padding:0 28px;font-size:16px}

/* ── Hero: chevrones con el texto en placa blanca ─────── */
.hero{padding:clamp(24px,6vw,88px) 0}
.placa{background:var(--surface-card);max-width:880px;padding:clamp(28px,5vw,64px);box-shadow:var(--shadow-md)}
.display{font-family:var(--font-display);font-stretch:var(--font-display-stretch-wide);font-weight:800;
  font-size:clamp(28px,6.2vw,72px);line-height:.94;letter-spacing:var(--ls-display);
  text-transform:uppercase;color:var(--text-strong)}
.bajada{font-size:var(--fs-body-lg);max-width:56ch;margin:24px 0 32px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ── Tarjetas ─────────────────────────────────────────── */
.tarjeta{background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-inset-hairline);padding:32px}
.tarjeta-acento{border-top:6px solid var(--border-brand)}
.pilares{display:grid;gap:24px}
@media (min-width:820px){.pilares{grid-template-columns:1fr 1fr}}
.numero{display:block;font:800 40px/.94 var(--font-display);font-stretch:var(--font-display-stretch-wide);
  color:var(--text-brand);font-variant-numeric:tabular-nums}
.tarjeta h3{margin:16px 0 10px}
.tarjeta > p{margin-bottom:20px}
.puntos{list-style:none;padding:0;display:grid;gap:10px}
.puntos li{position:relative;padding-left:22px}
.puntos li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:12px;background:var(--brand-primary);
  clip-path:polygon(0 0,50% 0,100% 50%,50% 100%,0 100%,50% 50%)}

/* ── Método, sobre placa sky: sólo ink encima ─────────── */
.metodo{background:var(--surface-sky);position:relative;overflow:hidden}
.metodo > .wrap{position:relative;z-index:1}
/* Franja de chevrones de marca sobre el borde: derecho en escritorio, inferior
   en móvil. El texto nunca va encima: las etapas son placas blancas. */
.metodo::after{content:"";position:absolute;top:0;right:0;bottom:0;width:clamp(48px,8vw,120px);
  background-color:var(--chevron-bg);background-image:
  repeating-linear-gradient(135deg,transparent 0 96px,var(--chevron-band-1) 96px 122px,var(--chevron-bg) 122px 132px,var(--chevron-band-2) 132px 148px,var(--chevron-band-3) 148px 162px,transparent 162px 240px),
  repeating-linear-gradient(45deg,transparent 0 96px,var(--chevron-band-1) 96px 122px,var(--chevron-bg) 122px 132px,var(--chevron-band-2) 132px 148px,var(--chevron-band-3) 148px 162px,transparent 162px 240px)}
@media (max-width:899px){
  .metodo{padding-bottom:calc(var(--section-y-sm) + 88px)}
  /* A media escala: el campo completo se repite cada ~340 px y en un teléfono
     quedaría una sola X suelta. */
  .metodo::after{top:auto;left:0;width:auto;height:88px;background-image:
    repeating-linear-gradient(135deg,transparent 0 48px,var(--chevron-band-1) 48px 61px,var(--chevron-bg) 61px 66px,var(--chevron-band-2) 66px 74px,var(--chevron-band-3) 74px 81px,transparent 81px 120px),
    repeating-linear-gradient(45deg,transparent 0 48px,var(--chevron-band-1) 48px 61px,var(--chevron-bg) 61px 66px,var(--chevron-band-2) 66px 74px,var(--chevron-band-3) 74px 81px,transparent 81px 120px)}
}
.metodo .tfl-eyebrow{color:var(--text-strong)}
.metodo .cabeza p{color:var(--text-strong)}
.dividido{display:grid;gap:40px}
@media (min-width:900px){.dividido{grid-template-columns:.9fr 1.1fr;align-items:start}.dividido .cabeza{margin-bottom:0}}
.etapas{list-style:none;padding:0;counter-reset:etapa;display:grid;gap:16px}
.etapa{counter-increment:etapa;position:relative;background:var(--surface-card);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);padding:24px 24px 24px 84px}
.etapa::before{content:counter(etapa,decimal-leading-zero);position:absolute;left:24px;top:22px;
  font:800 26px/1 var(--font-display);font-stretch:var(--font-display-stretch-wide);color:var(--text-brand)}
.etapa h3{margin-bottom:6px}

/* ── Producción ───────────────────────────────────────── */
.pasos{display:grid;gap:16px}
@media (min-width:760px){.pasos{grid-template-columns:repeat(3,1fr)}}
.pasos .tarjeta h3{margin:0 0 8px}
.etiquetas{display:grid;gap:14px;margin-top:36px}
.fila-etiquetas{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fila-etiquetas dt{font:700 var(--fs-eyebrow)/1.2 var(--font-display);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);min-width:96px}
.etiqueta{border-radius:var(--radius-pill);padding:6px 14px;font-size:var(--fs-body-sm);font-weight:600;
  background:var(--surface-sunken);color:var(--text-strong)}

/* ── Pruebas (sale oculta hasta tener material real) ──── */
.pruebas{background:var(--surface-page-alt)}
.logos{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:40px;margin-bottom:48px}
.logos img{height:40px;width:auto;display:block}
.caso{display:grid;gap:40px}
@media (min-width:900px){.caso{grid-template-columns:1.2fr .8fr;align-items:start}}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px 28px}
.cifra dd{font:800 clamp(30px,3vw,38px)/.94 var(--font-display);white-space:nowrap;font-stretch:var(--font-display-stretch-wide);
  color:var(--text-strong);font-variant-numeric:tabular-nums}
.cifra dt{font-size:var(--fs-body-sm);margin-top:8px}
.cifra{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.cita blockquote p{font:700 var(--fs-h2)/1.3 var(--font-display);color:var(--text-strong)}
.cita figcaption{font-size:var(--fs-body-sm);color:var(--text-muted);margin-top:14px}

/* ── Contacto, sobre placa ink: blanco encima ─────────── */
.contacto{background:var(--surface-ink);color:var(--text-inverse)}
.contacto h2{color:var(--text-inverse)}
.contacto .tfl-eyebrow{color:rgba(255,255,255,.86)}
.contacto .cabeza p{color:rgba(255,255,255,.86)}
/* El correo escrito, para quien no tiene cliente de correo configurado. */
.correo-visible{margin-top:20px;font:700 clamp(18px,2.4vw,22px)/1.3 var(--font-display)}
.correo-visible a{color:var(--text-inverse);overflow-wrap:anywhere}
.correo-visible a:hover{color:var(--tfl-sky-300)}

/* ── Pie ──────────────────────────────────────────────── */
.pie .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-top:28px;padding-bottom:36px;font-size:var(--fs-body-sm);color:var(--text-muted)}