/* lead10x · sitio v4 (3-oct-2026). Sistema visual de la v3: casi negro, teal y naranja; títulos condensados.
   Regla de José (3-oct): el naranja SOLO donde hay que actuar (botones). Lo destacado del texto, los datos y los sellos van
   en teal (#0FB0D2 sobre fondo oscuro). Los colores de puntaje 0-1-2 de la maqueta no son de marca: se quedan. */
:root{
  --bg:#FFFFFF; --bg-2:#F4F6F6; --ink:#141414; --muted:#54595f; --faint:#8b9098; --line:#E7ECEC;
  --dark:#0E1216; --dark-2:#181D22; --on-dark:#EFF3F3; --on-dark-mut:#a2adb0; --dark-line:#243036;
  --teal:#0FB0D2; --teal-ink:#0A7C93; --teal-soft:#E3F5FA;
  --orange:#F2801A; --orange-ink:#D96C10; --red:#C6413A; --red-soft:#FBE9E7;
  --maxw:1120px; --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Public Sans",system-ui,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
p{margin:0 0 1em}
.kick{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.display,h1,h2.sec{font-family:"Anton",Bahnschrift,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.008em;line-height:.98}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:8px;cursor:pointer;transition:transform .15s;text-decoration:none;border:0;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(242,128,26,.3)}
.btn-ghost{background:transparent;border:1px solid var(--dark-line);color:var(--on-dark)}
.btn-line{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* barra */
nav.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;height:66px;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logomark{width:30px;height:30px;flex:none;color:var(--teal)}
.brand b{font-family:"Anton",Bahnschrift,sans-serif;font-weight:400;font-size:22px;letter-spacing:.04em}
nav.top .spacer{flex:1}
nav.top .navlink{font-size:14.5px;color:var(--muted);font-weight:600;text-decoration:none}
nav.top .navlink:hover,nav.top .navlink.on{color:var(--ink)}
nav.top .btn{padding:10px 16px;font-size:14px}
nav.top .links{display:flex;gap:18px;align-items:center}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-weight:700}
@media(max-width:900px){nav.top .navlink{display:none}.menu-btn{display:block}nav.top .btn{display:none}nav.top.abierto .links .btn-movil{display:inline-flex}nav.top.abierto .links{display:flex}
  nav.top .links{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 28px 20px;border-bottom:1px solid var(--line)}
  nav.top.abierto .navlink{display:block;padding:8px 0}}

/* portada */
.hero{display:grid;grid-template-columns:1.05fr .95fr;background:var(--dark)}
.hero-txt{padding:80px 56px;color:var(--on-dark);display:flex;flex-direction:column;justify-content:center}
.hero .kick{color:var(--teal)}
.hero h1{font-size:clamp(40px,5.4vw,68px);margin:20px 0 0}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .sub{margin-top:24px;color:var(--on-dark-mut);font-size:19px;line-height:1.5;max-width:46ch}
.hero .despues{margin-top:22px;color:#fff;font-size:21px;font-weight:700;max-width:40ch}
.hero .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-img{background:#20262b center/cover no-repeat;min-height:560px}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-img{min-height:240px}.hero-txt{padding:44px 22px}.wrap{padding:0 20px}section{padding:60px 0}}
.franja{background:var(--dark-2);color:var(--on-dark-mut);border-top:1px solid var(--dark-line)}
.franja .wrap{padding:18px 28px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.05em;text-align:center}
.franja b{color:var(--on-dark)}

/* secciones */
section{padding:84px 0;border-bottom:1px solid var(--line)}
section.gris{background:var(--bg-2)}
section.on-dark{background:var(--dark);color:var(--on-dark);border-color:var(--dark-line)}
section.on-dark .lead,section.on-dark .muted{color:var(--on-dark-mut)}
.eyb{display:block;margin-bottom:14px}
h2.sec{font-size:clamp(30px,4.4vw,46px);margin:0}
h2.sec em{font-style:normal;color:var(--teal-ink)}
section.on-dark h2.sec em{color:var(--teal)}
h3{font-size:20px;margin:0 0 8px;line-height:1.25}
.lead{margin-top:16px;color:var(--muted);font-size:19px;max-width:64ch}
.muted{color:var(--muted)}
.chico{font-size:14px}
.nota{font-size:13.5px;color:var(--faint);margin-top:14px}
section.on-dark .nota{color:var(--on-dark-mut)}

/* antes / después */
.ad{margin-top:40px;border:2px solid var(--line);border-radius:14px;overflow:hidden}
.ad .fila{display:grid;grid-template-columns:1fr 1fr}
.ad .fila>div{padding:22px 26px;border-top:1px solid var(--line);font-size:16.5px}
.ad .fila:first-child>div{border-top:0;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:16px 26px}
.ad .antes{background:var(--bg-2);color:var(--muted)}
.ad .desp{background:var(--dark);color:var(--on-dark);border-left:1px solid var(--dark-line)}
.ad .fila:first-child .antes{color:var(--red)}
.ad .fila:first-child .desp{color:var(--teal)}
.ad .desp b{color:#fff}
@media(max-width:720px){.ad .fila{grid-template-columns:1fr}.ad .desp{border-left:0}.ad .fila:first-child{display:none}
  .ad .fila:nth-child(2)>div{border-top:0}
  .ad .fila>div::before{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
  .ad .antes::before{content:"Hoy";color:var(--red)}.ad .desp::before{content:"Con lead10x";color:var(--teal)}}

/* tarjetas y pasos */
.grid3{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{border:2px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff}
section.on-dark .card{background:var(--dark-2);border-color:var(--dark-line)}
.card .no{font-family:"Anton",sans-serif;font-size:34px;color:var(--teal-ink);line-height:1;margin-bottom:12px}
section.on-dark .card .no{color:var(--teal)}
.card p:last-child{margin-bottom:0}
.cambia{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:15px}
.cambia b{color:var(--teal-ink)}

/* cifras */
.cifras{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.cifras{grid-template-columns:1fr}}
.cifra{border-left:4px solid var(--teal);padding:6px 0 6px 18px}
.cifra .n{font-family:"Anton",sans-serif;font-size:46px;line-height:1;color:var(--ink)}
section.on-dark .cifra .n{color:#fff}
.cifra .t{font-size:15.5px;margin-top:8px}
.cifra .f{font-size:12.5px;color:var(--faint);margin-top:6px}

/* gráfico de causas */
.barras{margin-top:34px;max-width:760px}
.barra{display:grid;grid-template-columns:190px 1fr 56px;gap:12px;align-items:center;margin-bottom:12px;font-size:15px}
.barra .b{height:26px;border-radius:6px;background:var(--line);position:relative;overflow:hidden}
.barra .b i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--faint)}
.barra.clave .b i{background:var(--teal)}
.barra .v{font-weight:800;text-align:right}
@media(max-width:600px){.barra{grid-template-columns:1fr 50px}.barra .b{grid-column:1/3;grid-row:2}}

/* calculadora */
.calc{margin-top:40px;display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc .entrada{border:2px solid var(--line);border-radius:14px;padding:26px;background:#fff}
.calc label{display:block;font-weight:700;font-size:14.5px;margin:16px 0 6px}
.calc label:first-child{margin-top:0}
.calc input,.calc select{width:100%;padding:12px 14px;border:1px solid #cfd6d8;border-radius:8px;font:inherit;font-size:16px}
.calc .ayuda{font-size:13px;color:var(--faint);margin-top:4px}
.calc .salida{border-radius:14px;padding:28px;background:var(--dark);color:var(--on-dark)}
.calc .esc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.calc .esc>div{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:10px;padding:14px}
.calc .esc>div.base{border-color:var(--teal)}
.calc .esc .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mut)}
.calc .esc .n{font-family:"Anton",sans-serif;font-size:30px;line-height:1.1;color:#fff;margin-top:6px}
.calc .esc .s{font-size:13px;color:var(--on-dark-mut)}
@media(max-width:520px){.calc .esc{grid-template-columns:1fr}}
.calc details{margin-top:14px;font-size:14px;color:var(--on-dark-mut)}
.calc details summary{cursor:pointer;color:var(--on-dark);font-weight:700}
.calc table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.calc td{border-top:1px solid var(--dark-line);padding:8px 6px;vertical-align:top}
.calc td input{padding:6px 8px;font-size:14px;width:90px;background:var(--dark-2);color:#fff;border-color:var(--dark-line)}
.sello{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--teal);color:var(--teal);padding:3px 8px;border-radius:6px}

/* citas y casos */
.cita{border-left:4px solid var(--teal);padding:8px 0 8px 20px;margin:26px 0;font-family:"Newsreader",Georgia,serif;font-size:22px;line-height:1.4}
.cita small{display:block;font-family:"Public Sans",sans-serif;font-size:13.5px;color:var(--faint);margin-top:8px}
.ficha{border:2px solid var(--line);border-radius:14px;padding:30px;margin-top:30px;background:#fff}
.ficha dl{display:grid;grid-template-columns:170px 1fr;gap:12px 22px;margin:18px 0 0}
.ficha dt{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);padding-top:3px}
.ficha dd{margin:0}
@media(max-width:640px){.ficha dl{grid-template-columns:1fr}.ficha dt{padding-top:0}}
/* Citas del comité: NO se muestran hasta tener la aprobación escrita de cada persona (José, 3-oct). */
.pendiente-aprobacion{display:none}

/* garantía, preguntas, para quién */
.garantia{border:2px solid var(--teal);border-radius:14px;padding:28px 30px;background:var(--teal-soft);margin-top:34px}
.garantia .display{font-size:28px}
.pregunta{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:12px;padding:22px 26px;font-size:20px;font-weight:700;color:#fff;margin-top:26px}
.lista{list-style:none;padding:0;margin:18px 0 0}
.lista li{position:relative;padding-left:30px;margin-bottom:12px}
.lista li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:4px;background:var(--teal)}
.lista.no li:before{background:var(--red)}
.firma{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:860px){.firma{grid-template-columns:1fr}}
.firma div{border:1px solid var(--dark-line);border-radius:12px;padding:20px;font-size:15.5px}
.firma b{display:block;color:#fff;margin-bottom:6px}

/* cierre */
.final{text-align:center}
.final h2.sec{max-width:20ch;margin:0 auto}
.final .cta-row{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* pie */
footer{background:var(--dark);color:var(--on-dark-mut);padding:46px 0;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
footer a{color:var(--on-dark);text-decoration:none;display:block;margin-bottom:6px}
footer .brand{color:var(--on-dark)}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}
.legal{border-top:1px solid var(--dark-line);margin-top:28px;padding-top:18px;font-size:12.5px}
footer .legal{display:block}
footer .legal a{display:inline;margin:0;text-decoration:underline}

.btn-movil{display:none}

/* cabecera de páginas internas */
.cab{background:var(--dark);color:var(--on-dark);padding:76px 0 64px}
.cab .kick{color:var(--teal)}
.cab h1{font-size:clamp(36px,5vw,60px);margin:16px 0 0;max-width:22ch}
.cab h1 em{font-style:normal;color:var(--teal)}
.cab .sub{margin-top:20px;color:var(--on-dark-mut);font-size:19px;max-width:60ch}
.cab.con-foto{display:grid;grid-template-columns:1.1fr .9fr;padding:0}
.cab.con-foto .txt{padding:76px 56px}
.cab.con-foto .foto{background:#20262b center/cover no-repeat;min-height:420px}
@media(max-width:860px){.cab.con-foto{grid-template-columns:1fr}.cab.con-foto .txt{padding:44px 22px}.cab.con-foto .foto{min-height:220px}}
.pasos{margin-top:40px;display:grid;gap:18px}
.paso{display:grid;grid-template-columns:90px 1fr;gap:22px;border:2px solid var(--line);border-radius:14px;padding:28px;background:#fff}
.paso .no{font-family:"Anton",sans-serif;font-size:48px;line-height:1;color:var(--teal-ink)}
.paso .pie-paso{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:15px}
.paso .pie-paso b{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:4px;font-weight:500}
@media(max-width:700px){.paso{grid-template-columns:1fr}.paso .pie-paso{grid-template-columns:1fr}}
.roles{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.roles{grid-template-columns:1fr 1fr}}
.rol{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:12px;padding:20px}
.rol b{display:block;color:#fff;font-size:17px;margin-bottom:6px}
.rol span{color:var(--on-dark-mut);font-size:15px}
.libros{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:860px){.libros{grid-template-columns:1fr 1fr}}
.libro{border:2px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.libro b{display:block;font-size:16px}
.libro span{font-size:13px;color:var(--faint)}

/* maqueta de la devolución (página de entrenamiento) */
.maqueta{display:grid;place-items:center;padding:40px 28px;background:linear-gradient(160deg,#0A7C93 0%,#0E1216 75%)}
.pantalla{width:100%;max-width:380px;background:#fff;color:var(--ink);border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.p-cab{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:10px}
.p-nota{font-family:"Anton",sans-serif;font-size:40px;line-height:1;text-align:right}
.p-nota small{display:block;font-family:"Public Sans",sans-serif;font-size:11px;color:var(--faint);margin-top:4px}
.p-fila{display:flex;gap:10px;align-items:center;font-size:14px;padding:7px 0;border-bottom:1px solid var(--bg-2)}
.chip{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.chip.c2{background:var(--teal-soft);color:var(--teal-ink)}.chip.c1{background:#FDF0E2;color:var(--orange-ink)}.chip.c0{background:var(--red-soft);color:var(--red)}
.p-ej{margin-top:12px;background:var(--bg-2);border-radius:10px;padding:12px;font-size:13px;display:grid;gap:3px}
.p-ej span{color:var(--muted);font-style:italic}
.p-guia{margin-top:10px;font-size:13px;border-left:3px solid var(--teal);padding-left:10px}

/* artículos (3-oct): lectura cómoda, ~70 caracteres por línea. Lo destacado va en teal; el naranja, solo en botones. */
.cab .meta{margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.05em;color:var(--on-dark-mut)}
.cab .meta a{color:var(--teal);text-decoration:none}
.lectura{max-width:calc(70ch + 56px);font-size:18px;line-height:1.7}
.lectura h2{font-family:"Anton",Bahnschrift,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.008em;line-height:1.05;font-size:clamp(26px,3.2vw,34px);margin:2.1em 0 .6em}
.lectura h3{margin:1.7em 0 .4em}
.lectura .resumen{border-left:4px solid var(--teal);background:var(--teal-soft);border-radius:0 12px 12px 0;padding:20px 24px;margin-bottom:2.4em}
.lectura .resumen .kick,.lectura .recuadro .kick{display:block;margin-bottom:8px}
.lectura .resumen p:last-child,.lectura .recuadro p:last-child{margin-bottom:0}
.lectura .cita{font-size:21px}
.lectura .fuente{font-size:13.5px;color:var(--faint);margin-top:-.4em}
.lectura ol.jugadas{list-style:none;counter-reset:j;padding:0;margin:1.4em 0}
.lectura ol.jugadas li{counter-increment:j;position:relative;padding-left:54px;margin-bottom:1.2em}
.lectura ol.jugadas li:before{content:counter(j,decimal-leading-zero);position:absolute;left:0;top:0;font-family:"Anton",sans-serif;font-size:26px;line-height:1.2;color:var(--teal-ink)}
.lectura ol.jugadas b,.lectura .lista b{display:block}
.lectura .recuadro{border:2px solid var(--line);border-radius:14px;padding:24px 26px;margin:2.2em 0;background:var(--bg-2)}
.lectura .recuadro .titulo{font-weight:800;font-size:20px;margin-bottom:8px}
.lectura .volver{margin-top:2.6em;font-weight:700}
.lectura .volver a{text-decoration:none}
/* índice de artículos */
.articulos .card{display:flex;flex-direction:column}
.articulos .card h3 a{color:var(--ink);text-decoration:none}
.articulos .card .canal{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px}
.articulos .card .ir{margin-top:auto;padding-top:14px;font-weight:700;text-decoration:none}

/* Formulario de contacto (3-oct) */
.contacto{max-width:760px;display:grid;gap:18px}
.contacto .dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.contacto .dos{grid-template-columns:1fr}}
.contacto label{display:block;font-weight:700;font-size:14.5px}
.contacto .opc{font-weight:400;color:var(--muted)}
.contacto input,.contacto select,.contacto textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:12px 14px;border:2px solid var(--line);border-radius:10px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff}
.contacto input:focus,.contacto select:focus,.contacto textarea:focus{outline:none;border-color:var(--teal)}
.contacto .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;color:var(--muted)}
.contacto .check input{width:auto;margin:4px 0 0}
.contacto .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contacto button{justify-self:start;border:0;cursor:pointer;font:inherit}
.contacto button:disabled{opacity:.6;cursor:wait}
.aviso-error{background:var(--red-soft);color:var(--red);border-radius:10px;padding:12px 16px;font-weight:600}
[hidden]{display:none!important}