/* ===== _fuentes.css ===== */

/* _fuentes.css — GENERADO por scripts/descargar-fuentes.py. No editar a mano.
   Fuentes autoalojadas en /fonts/: ninguna petición del visitante sale hacia
   Google, así que no se transfiere su IP a un tercero y no hay que pedir
   consentimiento por este motivo. */

@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/dm-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/dm-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/dm-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/fonts/manrope-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/fonts/manrope-variable-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== _base.css ===== */

/* _base.css — tokens y componentes extraídos literalmente del <style> inline
   de /var/www/cesarcabrera-ia/index.html (build de Vite). NO reinventar tokens:
   si el index compilado cambia, volver a extraer con scripts/extraer-base-css.py. */

:root{--ink:#101414;--paper:#f2f1ec;--muted:#626c69;--line:#d0d1ca;--acid:#ffb76a;--white:#fff;--max:1360px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--acid);color:var(--ink)}
.shell{max-width:var(--max);margin:auto;padding:0 clamp(22px,5vw,76px)}.eyebrow,.mono,.kicker,.micro{font-family:'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase}.eyebrow{font-size:12px;font-weight:500}.micro{font-size:12px;color:var(--muted)}
header{position:relative;z-index:5;border-bottom:1px solid var(--line)}.nav{height:78px;display:flex;align-items:center;gap:32px}.brand{font-size:17px;font-weight:800;letter-spacing:-.06em;line-height:1}.brand span{display:block;font:400 10px 'DM Mono',monospace;letter-spacing:.12em;margin-top:6px;color:var(--muted)}.navlinks{display:flex;gap:30px;margin-left:auto;align-items:center}.navlinks a{font-size:13px;font-weight:700}.navlinks a:hover{text-decoration:underline;text-underline-offset:5px}.navcta{background:var(--ink);color:white;padding:13px 18px;border-radius:2px;font-size:13px;font-weight:800;white-space:nowrap}.navcta:hover,.btn-dark:hover{background:#37413d}.menubtn{display:none;border:0;background:none;padding:8px;cursor:pointer}
.hero{padding-top:clamp(60px,7vw,108px);padding-bottom:92px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(350px,.76fr);gap:6vw;align-items:end}.hero .eyebrow{display:flex;align-items:center;gap:12px}.hero .eyebrow:before{content:"";width:32px;height:2px;background:var(--ink)}h1{font-size:clamp(50px,6.75vw,104px);line-height:.99;letter-spacing:-.075em;margin:29px 0 34px;max-width:960px;font-weight:800}h1 em{font-style:normal;box-shadow:inset 0 -.19em var(--acid)}.lead{font-size:clamp(18px,1.55vw,23px);line-height:1.48;max-width:740px;letter-spacing:-.025em;margin:0 0 30px}.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.btn-dark{display:inline-flex;align-items:center;gap:28px;background:var(--ink);color:white;font-size:14px;font-weight:800;padding:17px 21px;border-radius:2px;transition:.2s}.btn-dark span{font-size:22px;line-height:0}.textlink{font-size:13px;font-weight:800;border-bottom:1px solid;padding-bottom:5px}.textlink:hover{opacity:.6}.hero-note{margin:43px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.system-card{background:var(--ink);color:#f5f8f3;min-height:560px;padding:26px;display:flex;flex-direction:column;position:relative;overflow:hidden}.card-top{display:flex;justify-content:space-between;align-items:center;color:#aab5b0;font:11px 'DM Mono',monospace;letter-spacing:.04em}.card-top strong{color:var(--acid);font-weight:400}.flow{margin:auto 0;display:grid;gap:0}.flow-item{border:1px solid #42504b;background:#19211f;padding:19px 20px;display:grid;grid-template-columns:35px 1fr;gap:12px;align-items:start}.flow-item b{color:var(--acid);font:13px 'DM Mono',monospace}.flow-item strong{font-size:18px;letter-spacing:-.03em}.flow-item small{display:block;color:#aab5b0;font-size:13px;line-height:1.4;margin-top:4px}.connector{height:34px;border-left:1px solid var(--acid);margin-left:17px;position:relative}.connector:after{content:"";position:absolute;bottom:0;left:-4px;border:4px solid transparent;border-top-color:var(--acid);transform:translateY(7px)}.card-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #42504b;padding-top:18px;color:#aab5b0;font:11px 'DM Mono',monospace;line-height:1.5}.card-bottom span:last-child{color:var(--acid);text-align:right}
section{scroll-margin-top:24px}.section{padding:96px 0;border-top:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:260px 1fr;gap:45px;margin-bottom:47px}.section-heading h2{margin:0;font-size:clamp(35px,4vw,62px);letter-spacing:-.065em;line-height:1.07;max-width:910px}.section-heading p{font-size:17px;line-height:1.58;max-width:740px;color:#4b5651;margin:20px 0 0}.index{font:12px 'DM Mono',monospace;color:var(--muted);padding-top:10px}.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.offer{background:white;padding:28px;min-height:445px;display:flex;flex-direction:column;border:1px solid #dce0da}.offer.dark{background:var(--ink);color:white;border-color:var(--ink)}.offer .num{font:12px 'DM Mono',monospace;color:var(--muted)}.offer.dark .num{color:var(--acid)}.offer h3{font-size:31px;line-height:1.12;letter-spacing:-.05em;margin:57px 0 20px}.offer p{font-size:15px;line-height:1.6;margin:0 0 20px;color:#4a5650}.offer.dark p{color:#bdc7c1}.deliver{margin-top:auto;border-top:1px solid var(--line);padding-top:19px;font-size:14px;line-height:1.52}.offer.dark .deliver{border-color:#4c5751}.deliver strong{display:block;font:11px 'DM Mono',monospace;color:#6b7770;text-transform:uppercase;margin-bottom:8px}.offer.dark .deliver strong{color:var(--acid)}
.usecases{background:var(--acid);padding:98px 0}.usecases .section-heading{margin-bottom:55px}.usecases .index,.usecases .section-heading p{color:#303a27}.case-list{border-top:1px solid #829346}.case{display:grid;grid-template-columns:100px minmax(230px,.85fr) minmax(260px,1.2fr) 115px;gap:30px;padding:29px 0;border-bottom:1px solid #829346;align-items:start}.case .id{font:12px 'DM Mono',monospace}.case h3{margin:0;font-size:22px;line-height:1.24;letter-spacing:-.04em}.case p{margin:0;font-size:15px;line-height:1.55}.case .state{font:11px 'DM Mono',monospace;text-transform:uppercase;text-align:right;white-space:nowrap;padding-top:5px}.case .state:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:2px}
.method{padding:98px 0;background:var(--ink);color:white}.method .index{color:var(--acid)}.method .section-heading p{color:#b4c0ba}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #4a5650}.step{padding:25px 28px 0 0;border-right:1px solid #4a5650;min-height:205px}.step:not(:first-child){padding-left:28px}.step:last-child{border:0}.step .n{font:12px 'DM Mono',monospace;color:var(--acid)}.step h3{font-size:20px;letter-spacing:-.04em;margin:26px 0 11px}.step p{color:#b4c0ba;font-size:14px;line-height:1.55;margin:0}
.profile{display:grid;grid-template-columns:minmax(270px,.65fr) 1.35fr;gap:9vw;align-items:start}.profile .stamp{background:var(--acid);padding:30px;aspect-ratio:1/1.04;display:flex;flex-direction:column;justify-content:space-between}.stamp .cc{font-size:clamp(90px,12vw,180px);line-height:.8;letter-spacing:-.13em;font-weight:800}.stamp small{font:12px 'DM Mono',monospace;line-height:1.6}.profile h2{font-size:clamp(36px,4.2vw,64px);line-height:1.08;letter-spacing:-.065em;margin:25px 0}.profile p{font-size:17px;line-height:1.66;max-width:670px;color:#3e4b45}.profile .links{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px}.profile .links a{font-size:14px;font-weight:800;border-bottom:1px solid;padding-bottom:5px}
.contact{background:var(--acid);padding:95px 0 105px}.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end}.contact h2{font-size:clamp(48px,6.2vw,90px);line-height:1;letter-spacing:-.075em;margin:20px 0 30px}.contact p{font-size:18px;line-height:1.5;max-width:690px}.contact .btn-dark{margin-top:14px}.contact aside{border-top:1px solid #829346;padding-top:20px;font-size:14px;line-height:1.6}.contact aside strong{display:block;margin-bottom:12px;font:12px 'DM Mono',monospace;text-transform:uppercase}footer{background:var(--ink);color:#c5d0c9;padding:30px 0}.footer-inner{display:flex;justify-content:space-between;gap:25px;align-items:center;font:11px 'DM Mono',monospace}.footer-inner a:hover{text-decoration:underline}
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr}.system-card{min-height:400px}.flow{grid-template-columns:repeat(3,1fr);align-items:stretch;gap:8px}.connector{display:none}.flow-item{grid-template-columns:1fr}.offers{grid-template-columns:1fr 1fr}.offer{min-height:400px}.offer:last-child{grid-column:span 2;min-height:300px}.case{grid-template-columns:60px 1fr 1.2fr}.case .state{grid-column:2/-1;text-align:left;padding:0}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border:0}.step:nth-child(n+3){border-top:1px solid #4a5650}}
@media(max-width:720px){.nav{height:68px}.navlinks{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper);border-bottom:1px solid var(--line);padding:22px;flex-direction:column;align-items:stretch;gap:20px}.navlinks.open{display:flex}.navcta{margin-left:auto;padding:11px 13px}.menubtn{display:block}.hero{padding-top:56px;padding-bottom:72px}h1{font-size:clamp(47px,12vw,77px)}.hero-note{margin-top:34px}.system-card{min-height:540px}.flow{display:grid;grid-template-columns:1fr}.connector{display:block}.section,.method,.usecases{padding:72px 0}.section-heading{display:block}.index{display:block;margin-bottom:25px}.offers{display:block}.offer{min-height:360px;margin-bottom:9px}.offer h3{margin-top:45px}.case{display:block;padding:25px 0}.case h3{margin:15px 0 12px}.case .state{display:block;margin-top:14px}.steps{display:block}.step,.step:not(:first-child){border-right:0;border-top:1px solid #4a5650;padding:23px 0;min-height:auto}.step:first-child{border-top:0}.step h3{margin:18px 0 8px}.profile{display:block}.profile .stamp{aspect-ratio:auto;height:235px;margin-bottom:45px}.stamp .cc{font-size:120px}.contact{padding:75px 0}.contact-grid{display:block}.contact aside{margin-top:55px}.footer-inner{display:block;line-height:2}.footer-inner span{display:block}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== _extra.css ===== */

/* _extra.css — SÓLO lo que el index compilado no traía: tipografía de lectura para
   los artículos, listado del blog, cuerpo de las páginas legales y la fila legal del
   footer. Reutiliza las variables de _base.css (--ink, --paper, --acid…); no crea
   tokens nuevos ni redefine componentes existentes. */

/* ---------- Cabecera de página interior ---------- */
/* Mismo lenguaje que .section-heading del index, pero a una columna. */
.page-head{padding:clamp(52px,6vw,92px) 0 0}
.page-head .eyebrow{display:flex;align-items:center;gap:12px;color:var(--muted)}
.page-head .eyebrow:before{content:"";width:32px;height:2px;background:var(--ink)}
.page-head h1{font-size:clamp(38px,5vw,74px);line-height:1.02;letter-spacing:-.065em;margin:26px 0 0;max-width:20ch}
.page-head .sumario{font-size:clamp(17px,1.4vw,21px);line-height:1.5;letter-spacing:-.022em;color:#3e4b45;max-width:64ch;margin:26px 0 0}
.page-head .firma{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 26px;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.page-head .firma b{font-weight:500;color:var(--ink)}

/* ---------- Columna de lectura ---------- */
/* 68ch de medida: unas 12-14 palabras por línea, que es donde el ojo no se pierde. */
.prosa{max-width:68ch;padding:clamp(44px,5vw,66px) 0 clamp(64px,7vw,96px);font-size:18px;line-height:1.72;letter-spacing:-.011em;color:#26302c}
.prosa>*:first-child{margin-top:0}
.prosa p{margin:0 0 1.5em}
.prosa h2{font-size:clamp(26px,2.5vw,34px);line-height:1.15;letter-spacing:-.05em;color:var(--ink);margin:2.1em 0 .7em}
.prosa h3{font-size:20px;line-height:1.28;letter-spacing:-.035em;color:var(--ink);margin:1.9em 0 .55em}
.prosa a{border-bottom:1px solid var(--line);transition:.15s}
.prosa a:hover{border-bottom-color:var(--ink)}
.prosa strong{font-weight:700;color:var(--ink)}
.prosa ul,.prosa ol{margin:0 0 1.5em;padding-left:1.15em}
.prosa li{margin-bottom:.55em}
.prosa li::marker{color:var(--muted)}
.prosa hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.prosa code{font-family:'DM Mono',monospace;font-size:.88em;background:#e7e6e0;padding:.12em .36em;border-radius:2px}

/* Cita destacada: el subrayado acid del index, aquí como barra lateral. */
.prosa blockquote{margin:2.2em 0;padding:4px 0 4px 26px;border-left:3px solid var(--acid);font-size:clamp(20px,2vw,25px);line-height:1.38;letter-spacing:-.035em;font-weight:600;color:var(--ink)}
.prosa blockquote p{margin:0}

/* Dato suelto que merece destacarse sin ser cita. */
.prosa .dato{margin:2.2em 0;background:white;border:1px solid #dce0da;padding:24px 26px;font-size:16px;line-height:1.6}
.prosa .dato strong{display:block;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:#6b7770;margin-bottom:9px;font-weight:400}

/* ---------- Bloque de fuentes al final del artículo ---------- */
.fuentes{max-width:68ch;border-top:1px solid var(--line);padding:26px 0 38px}
.fuentes h2{font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:500}
.fuentes ol{margin:0;padding-left:1.3em;font-size:15px;line-height:1.58;color:#4a5650}
.fuentes li{margin-bottom:.8em}
.fuentes a{border-bottom:1px solid var(--line);word-break:break-word}
.fuentes a:hover{border-bottom-color:var(--ink)}
.fuentes .medio{font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}

/* Vuelta al listado: necesita su propio aire para no pegarse al footer oscuro. */
.volver{margin:0;padding:0 0 clamp(64px,7vw,96px);font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.volver a{border-bottom:1px solid var(--line);padding-bottom:4px}
.volver a:hover{border-bottom-color:var(--ink)}

/* ---------- Listado del blog (calcado de .case-list del index) ---------- */
.post-list{border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:118px minmax(0,1fr) 128px;gap:30px;padding:29px 0;border-bottom:1px solid var(--line);align-items:start}
.post:hover{background:#eceae4}
.post .fecha{font:12px 'DM Mono',monospace;color:var(--muted);padding-top:4px}
.post h2{margin:0;font-size:clamp(22px,2.1vw,28px);line-height:1.18;letter-spacing:-.045em}
.post h2 a:hover{box-shadow:inset 0 -.13em var(--acid)}
.post p{margin:11px 0 0;font-size:15px;line-height:1.58;color:#4a5650;max-width:62ch}
.post .lectura{font:11px 'DM Mono',monospace;text-transform:uppercase;text-align:right;color:var(--muted);white-space:nowrap;padding-top:6px}
/* Cierre del listado, bajo la última fila. */
.cierre{margin:0;padding:36px 0 clamp(64px,7vw,96px);font-size:15px;color:var(--muted)}
.cierre a{font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.cierre a:hover{border-bottom-color:var(--ink)}
/* Estado vacío: el blog no debe verse roto con cero artículos. */
.post-vacio{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:60ch}

/* ---------- Datos fiscales aún no facilitados ---------- */
/* Visible a propósito: si esto se publica sin rellenar, tiene que cantar. */
.pendiente{color:#b3261e;font-weight:700;background:#fdeceb;border:1px dashed #b3261e;padding:.05em .4em;border-radius:2px;white-space:nowrap}
.aviso-borrador{max-width:68ch;margin:clamp(40px,5vw,60px) 0 0;background:#fdeceb;border:1px solid #b3261e;border-left-width:4px;padding:22px 26px;font-size:15px;line-height:1.6;color:#7a1a13}
.aviso-borrador strong{display:block;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;color:#b3261e}

/* ---------- Tabla sobria para las legales ---------- */
.prosa table{width:100%;border-collapse:collapse;margin:0 0 1.9em;font-size:15px;line-height:1.5}
.prosa th,.prosa td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;border-bottom:1px solid var(--line)}
.prosa th{font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:#6b7770;font-weight:400;border-bottom-color:var(--ink)}

/* ---------- Footer: segunda fila con los enlaces legales ---------- */
.footer-legal{border-top:1px solid #2b3633;margin-top:22px;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 26px;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.footer-legal a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-legal .nota{color:#7d8a84;margin-left:auto}

/* ---------- Cabecera en móvil ---------- */
/* Arreglo de un fallo que venía del build original y estaba en producción: a 390px
   el bloque de marca no cabía, «IA APLICADA · DIRECCIÓN Y EJECUCIÓN» se partía en
   cuatro líneas y se montaba encima del botón. La solución es la de siempre:
   quitar lo secundario. El antetítulo desaparece por debajo de 720px —es una
   descripción, no el nombre— y el botón se ajusta. Va aquí y no en _base.css
   porque _base.css es la extracción literal del original y no se toca. */
@media(max-width:720px){
  .nav{gap:14px}
  .brand{font-size:15px;line-height:1;white-space:nowrap}
  .brand span{display:none}
  .navcta{font-size:12px;padding:10px 12px;letter-spacing:-.01em}
}
@media(max-width:380px){
  .nav{gap:10px}
  .brand{font-size:14px}
  .navcta{font-size:11px;padding:9px 10px}
}

@media(max-width:720px){
  .prosa{font-size:17px}
  .post{display:block;padding:25px 0}
  .post h2{margin:12px 0 0}
  .post .lectura{text-align:left;margin-top:13px;display:block}
  .footer-legal{display:block;line-height:2.1}
  .footer-legal .nota{margin:8px 0 0;display:block}
}

/* ---------- Fichas de la página de casos ---------- */
.caso-ficha{border-top:1px solid var(--line);padding:clamp(40px,4.5vw,64px) 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:5vw;align-items:start}
.caso-ficha:first-of-type{border-top:0}
.caso-cab h2{margin:22px 0 0;font-size:clamp(27px,2.8vw,38px);line-height:1.1;letter-spacing:-.055em}
.caso-cab .sumario{margin:18px 0 0;font-size:16px;line-height:1.55;color:#4a5650;max-width:44ch}
.caso-cab .state{display:inline-block;margin-top:20px;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em;background:var(--acid);color:var(--ink);padding:6px 11px;border-radius:2px}
.caso-ficha .prosa{max-width:62ch;padding:0;font-size:16px}
.caso-ficha .prosa h3{margin:0 0 .45em;font-size:13px;font-family:'DM Mono',monospace;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.caso-ficha .prosa h3:not(:first-child){margin-top:1.8em}
.caso-ficha .prosa p{margin:0 0 .4em}
.caso-ficha .micro{margin-top:2em}
.caso-ficha .micro a{border-bottom:1px solid var(--line);padding-bottom:3px}
.caso-ficha .micro a:hover{border-bottom-color:var(--ink)}
@media(max-width:900px){.caso-ficha{grid-template-columns:1fr;gap:32px}}

/* ---------- Cifras destacadas ---------- */
/* Manrope 800 con el tracking cerrado del sitio, acid sobre ink. Una cifra sin
   contexto es relleno, así que el número nunca va solo: siempre lleva su línea. */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:#3a4642;border:1px solid #3a4642;margin:0}
.cifra{background:var(--ink);padding:26px 24px 24px;display:flex;flex-direction:column;gap:11px}
.cifra b{font-size:clamp(38px,4.4vw,58px);font-weight:800;letter-spacing:-.07em;line-height:.92;color:var(--acid)}
.cifra span{font-size:14px;line-height:1.45;color:#b4c0ba;max-width:26ch}

/* Variante sobre papel, para dentro de una ficha de caso. */
.cifras.claras{background:var(--line);border-color:var(--line)}
.cifras.claras .cifra{background:var(--paper)}
.cifras.claras .cifra b{color:var(--ink);box-shadow:inset 0 -.17em var(--acid);align-self:flex-start;padding-right:.06em}
.cifras.claras .cifra span{color:#4a5650}

/* ---------- Franja de resultados de la portada ---------- */
.resultados{background:var(--ink);color:#f5f8f3;padding:clamp(44px,5vw,64px) 0}
.resultados .cab{display:flex;align-items:baseline;gap:16px 36px;flex-wrap:wrap;margin-bottom:30px}
.resultados .eyebrow{color:#8d9a94;white-space:nowrap}
.resultados .marcas{display:flex;gap:12px 34px;flex-wrap:wrap;margin:0}
.resultados .marcas span{font-size:clamp(19px,1.9vw,26px);font-weight:800;letter-spacing:-.05em;line-height:1}
.resultados .mas{margin-left:auto;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--acid);border-bottom:1px solid #4a5650;padding-bottom:4px;white-space:nowrap}
.resultados .mas:hover{border-bottom-color:var(--acid)}
@media(max-width:720px){
  .resultados .cab{display:block}
  .resultados .marcas{margin-top:12px}
  .resultados .mas{margin:16px 0 0;display:inline-block}
}

/* ---------- Ficha de caso: bloque de resultado ---------- */
.caso-ficha .resultado{margin-top:1.9em;border-top:1px solid var(--line);padding-top:1.6em}
.caso-ficha .resultado h3{color:var(--ink)}

/* ---------- Preguntas frecuentes ---------- */
.faq-indice{margin:clamp(40px,4.5vw,60px) 0 0;border-top:1px solid var(--line);padding-top:24px}
.faq-indice ol{margin:0;padding-left:1.25em;columns:2;column-gap:44px;font-size:15px;line-height:1.5}
.faq-indice li{margin-bottom:.7em;break-inside:avoid}
.faq-indice a{border-bottom:1px solid var(--line);padding-bottom:2px}
.faq-indice a:hover{border-bottom-color:var(--ink)}
.faq-item{border-top:1px solid var(--line);padding:clamp(34px,3.6vw,50px) 0;max-width:72ch;scroll-margin-top:24px}
.faq-item h2{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.18;letter-spacing:-.05em}
/* La respuesta directa va destacada: es la frase que citan los buscadores con IA. */
.faq-directa{margin:16px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;letter-spacing:-.025em;font-weight:600;color:var(--ink);padding-left:18px;border-left:3px solid var(--acid)}
.faq-cuerpo{margin-top:20px;font-size:16px;line-height:1.68;color:#39443f}
.faq-cuerpo p{margin:0 0 1.2em}
.faq-cuerpo ul{margin:0 0 1.2em;padding-left:1.15em}
.faq-cuerpo li{margin-bottom:.6em}
.faq-cuerpo a{border-bottom:1px solid var(--line)}
.faq-cuerpo a:hover{border-bottom-color:var(--ink)}
.faq-cuerpo strong{font-weight:700;color:var(--ink)}
.mas-sobre{font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0}
.mas-sobre a{font-weight:500;color:var(--ink)}
@media(max-width:720px){.faq-indice ol{columns:1}}

/* ---------- Enlaces relacionados al pie de un artículo o servicio ---------- */
.relacionado{max-width:68ch;border-top:1px solid var(--line);padding:26px 0 0;margin-top:0}
.relacionado h2{font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.relacionado ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.relacionado li{font-size:16px;line-height:1.45}
.relacionado a{font-weight:700;border-bottom:1px solid var(--line);padding-bottom:2px}
.relacionado a:hover{border-bottom-color:var(--ink)}
.relacionado .que{display:block;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-top:3px}

/* Cara pequeña en la firma del artículo. width/height explícitos y aspect-ratio
   para que no desplace nada mientras carga. */
.firma-cara{display:block;width:34px;flex:0 0 auto;align-self:center;margin-right:-12px}
.firma-cara img{display:block;width:34px;height:35px;aspect-ratio:1/1.04;object-fit:cover;border-radius:2px;background:var(--ink)}

/* ===== _portada.css ===== */

/* _portada.css — las secciones nuevas de la portada.
   Reutiliza los tokens y los componentes de _base.css (--ink, --paper, --acid,
   .shell, .section, .section-heading, .cifras, .flow-item, .connector). No crea
   tokens nuevos: el lenguaje visual tiene que seguir siendo exactamente el mismo.

   Convención de color heredada del original:
     · papel (--paper) para las secciones de explicación
     · ink para las de dato duro y las de sistema
     · acid a página completa sólo para los dos momentos de conversión */

/* ---------- Franja bajo el héroe de partículas ---------- */
/* El canvas ocupa #particle-root entero. Esta franja va DEBAJO, en HTML normal:
   así el claim, los dos botones y la nota existen aunque el WebGL no arranque. */
.sub-hero{background:#070c0a;color:#f5f8f3;border-top:1px solid #1d2422;padding:30px 0 34px}
.sub-hero .shell{display:flex;align-items:center;gap:26px 44px;flex-wrap:wrap}
.sub-hero .claim{margin:0;font-size:clamp(17px,1.7vw,23px);font-weight:800;letter-spacing:-.045em;line-height:1.24;max-width:22ch}
.sub-hero .claim b{color:var(--acid);font-weight:800}
.sub-hero .acciones{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-left:auto}
.sub-hero .btn-acid{display:inline-flex;align-items:center;gap:24px;background:var(--acid);color:var(--ink);font-size:14px;font-weight:800;padding:17px 21px;border-radius:2px;transition:.2s}
.sub-hero .btn-acid:hover{background:#ffc98d}
.sub-hero .btn-acid span{font-size:22px;line-height:0}
.sub-hero .secundario{font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-weight:500;border-bottom:1px solid #3c4643;padding-bottom:4px}
.sub-hero .secundario:hover{border-bottom-color:var(--acid)}
.sub-hero .nota{margin:0;width:100%;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#8d9a94}
@media(max-width:860px){
  .sub-hero .acciones{margin-left:0;width:100%}
  .sub-hero .btn-acid{flex:1 1 auto;justify-content:space-between}
}

/* ---------- Marca de procedencia del dato ---------- */
/* La regla del 26/09/2026: ningún número se presenta como comprobado si no lo
   está. Estas marcas son la forma de cumplirla sin llenar la página de descargos:
   una línea corta, en mono, del tamaño de un pie de foto. */
.origen{display:inline-flex;align-items:center;gap:8px;font:10px 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.origen:before{content:"";width:6px;height:6px;flex:0 0 auto;border:1px solid currentColor;transform:rotate(45deg)}
.origen a{border-bottom:1px solid var(--line)}
.origen a:hover{border-bottom-color:currentColor}
.sobre-ink .origen,.origen.claro{color:#8d9a94}
.sobre-ink .origen a,.origen.claro a{border-bottom-color:#4a5650}
.nota-datos{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted);max-width:76ch}
.sobre-ink .nota-datos{border-top-color:#3a4642;color:#8d9a94}

/* Rótulo sólo para lectores de pantalla: las dos tablas de escalabilidad necesitan
   un <caption> que las distinga, pero en pantalla las distingue ya el titular. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Secciones sobre ink ---------- */
.sobre-ink{background:var(--ink);color:#f5f8f3;padding:96px 0;border-top:1px solid var(--ink)}
/* Dos secciones oscuras seguidas se leerían como una sola. Un filete tenue las
   separa sin romper el bloque: siguen siendo el mismo capítulo. */
.sobre-ink+.sobre-ink{border-top-color:#2b3633}
.sobre-ink .section-heading p{color:#b4c0ba}
.sobre-ink .index{color:var(--acid)}
.sobre-ink .section-heading h2{color:#fff}

/* ---------- 01 · Resultados: ficha del caso destacado ---------- */
.ficha-dest{border:1px solid #3a4642;background:#19211f;padding:0;margin:0 0 10px}
.ficha-dest .cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px 30px;flex-wrap:wrap;padding:22px 26px;border-bottom:1px solid #3a4642}
.ficha-dest .cab b{font-size:clamp(20px,2vw,27px);font-weight:800;letter-spacing:-.05em;line-height:1}
.ficha-dest .cab b a{border-bottom:1px solid #4a5650}
.ficha-dest .cab b a:hover{border-bottom-color:var(--acid)}
.ficha-dest .cab .que{font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--acid)}
.ficha-dest .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3a4642}
.ficha-dest .tres>div{background:#19211f;padding:24px 26px 26px}
.ficha-dest .tres b{display:block;font-size:clamp(32px,3.8vw,50px);font-weight:800;letter-spacing:-.07em;line-height:.94;color:var(--acid)}
.ficha-dest .tres span{display:block;margin-top:11px;font-size:14px;line-height:1.45;color:#b4c0ba;max-width:28ch}
.ficha-dest .pie{padding:16px 26px 18px;border-top:1px solid #3a4642}
@media(max-width:720px){.ficha-dest .tres{grid-template-columns:1fr}}

.sistemas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3a4642;border:1px solid #3a4642}
.sistemas article{background:var(--ink);padding:24px 26px 26px;display:flex;flex-direction:column}
.sistemas h3{margin:0 0 12px;font-size:20px;letter-spacing:-.04em;line-height:1.2}
.sistemas p{margin:0 0 16px;font-size:14px;line-height:1.55;color:#b4c0ba}
.sistemas .donde{margin-top:auto;padding-top:14px;border-top:1px solid #3a4642;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:#8d9a94;line-height:1.7}
.sistemas .ver{margin-top:14px;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--acid);border-bottom:1px solid #4a5650;padding-bottom:4px;align-self:flex-start}
.sistemas .ver:hover{border-bottom-color:var(--acid)}
@media(max-width:900px){.sistemas{grid-template-columns:1fr}}

/* ---------- 02 · Caso DACRISA ---------- */
.caso-bloques{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.caso-bloque{background:white;border:1px solid #dce0da;padding:28px}
.caso-bloque h3{margin:0 0 18px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#6b7770;font-weight:400}
.caso-bloque p{margin:0 0 1.05em;font-size:16px;line-height:1.62;color:#39443f}
.caso-bloque p:last-child{margin-bottom:0}
@media(max-width:900px){.caso-bloques{grid-template-columns:1fr}}

/* Las dos cadenas antes/después. Misma retícula y mismo conector que la tarjeta
   de sistema del original, para que se lean como la misma familia de diagrama. */
.dos-flujos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flujo{border:1px solid #dce0da;background:white;padding:26px 28px 28px;display:flex;flex-direction:column}
.flujo.malo{background:#f7f2ea;border-color:#e2d7c5}
.flujo.bueno{background:var(--ink);border-color:var(--ink);color:#f5f8f3}
.flujo>h3{margin:0 0 20px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:#6b7770}
.flujo.bueno>h3{color:var(--acid)}
.cadena{list-style:none;margin:0;padding:0;display:grid}
.cadena li{font-size:15px;line-height:1.35;letter-spacing:-.02em;font-weight:700;padding:13px 16px;border:1px solid var(--line);background:var(--paper)}
.flujo.malo .cadena li{border-color:#e2d7c5;background:#fdfaf5}
.flujo.bueno .cadena li{border-color:#42504b;background:#19211f}
.cadena li+li{margin-top:22px;position:relative}
.cadena li+li:before{content:"";position:absolute;left:19px;top:-22px;height:22px;border-left:1px solid var(--acid)}
.cadena li+li:after{content:"";position:absolute;left:15px;top:-6px;border:4px solid transparent;border-top-color:var(--acid)}
.flujo .pie{margin:auto 0 0;padding-top:20px;font-size:13px;line-height:1.55;color:var(--muted)}
.flujo.bueno .pie{color:#8d9a94}
.flujo .pie strong{display:block;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px;color:inherit;font-weight:400}
@media(max-width:820px){.dos-flujos{grid-template-columns:1fr}}

/* Cita de intención. El mismo gesto que .prosa blockquote, a tamaño de portada. */
.cita-caso{margin:10px 0 0;background:var(--acid);color:var(--ink);padding:clamp(28px,3.4vw,44px)}
.cita-caso p{margin:0;font-size:clamp(20px,2.3vw,31px);line-height:1.26;letter-spacing:-.045em;font-weight:700;max-width:40ch}

/* ---------- 03 · La aritmética, a la vista ---------- */
.aritmetica{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;background:#3a4642;border:1px solid #3a4642;align-items:stretch}
.aritmetica>div{background:var(--ink);padding:24px 22px;display:flex;flex-direction:column;justify-content:center}
.aritmetica b{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.06em;line-height:1}
.aritmetica .et{margin-top:8px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--acid)}
.aritmetica .pie{margin-top:7px;font-size:13px;line-height:1.4;color:#8d9a94}
.aritmetica .total{background:var(--acid);color:var(--ink);min-width:clamp(170px,18vw,260px)}
.aritmetica .total b{font-size:clamp(40px,5vw,68px);color:var(--ink)}
.aritmetica .total .et{color:#5a4a2c}
@media(max-width:1050px){.aritmetica{grid-template-columns:repeat(2,1fr)}.aritmetica .total{grid-column:span 2}}
@media(max-width:560px){.aritmetica{grid-template-columns:1fr}.aritmetica .total{grid-column:span 1}}

/* El texto obligatorio del encargo. Caja propia: es una acotación del dato, no
   una nota al pie, y tiene que leerse igual que el número al que acota. */
.acotacion{margin:10px 0 0;border:1px solid #3a4642;border-left:4px solid var(--acid);background:#19211f;padding:22px 26px;font-size:15px;line-height:1.62;color:#c5d0c9;max-width:86ch}
.acotacion strong{color:#fff;font-weight:700}
.acotacion+.acotacion{margin-top:8px}
.sobre-papel .acotacion{border-color:#dce0da;border-left-color:var(--acid);background:white;color:#39443f}
.sobre-papel .acotacion strong{color:var(--ink)}

/* ---------- 04 · Productividad por pedido ---------- */
.por-pedido{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;align-items:stretch}
.volumen{background:var(--ink);color:#f5f8f3;padding:30px 32px;display:flex;flex-direction:column;justify-content:center;min-width:clamp(160px,16vw,230px)}
.volumen b{font-size:clamp(48px,6vw,86px);font-weight:800;letter-spacing:-.075em;line-height:.9;color:var(--acid)}
.volumen span{margin-top:10px;font:11px 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:#b4c0ba}
.ap{border:1px solid #dce0da;background:white;padding:28px}
.ap h3{margin:0 0 14px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#6b7770;font-weight:400}
.ap p{margin:0;font-size:16px;line-height:1.6;color:#39443f}
.ap.despues{background:var(--ink);border-color:var(--ink);color:#f5f8f3}
.ap.despues h3{color:var(--acid)}
.ap.despues p{color:#c5d0c9}
@media(max-width:900px){.por-pedido{grid-template-columns:1fr}}

.mensaje-clave{margin:10px 0 0;background:var(--acid);color:var(--ink);padding:clamp(28px,3.4vw,44px)}
.mensaje-clave p{margin:0;font-size:clamp(21px,2.6vw,36px);line-height:1.18;letter-spacing:-.055em;font-weight:800;max-width:24ch}
/* "remate", no "cierre": .cierre ya existe en _extra.css para el pie del listado
   del blog, con color:var(--muted) y 96px de relleno inferior. Sobre el fondo
   acid eso dejaba el texto casi ilegible y abría un hueco enorme debajo. */
.mensaje-clave .remate{margin:20px 0 0;font-size:16px;line-height:1.55;font-weight:500;letter-spacing:-.02em;max-width:60ch;color:var(--ink)}

/* ---------- 05 · Impacto económico ---------- */
.formula{font-family:'DM Mono',monospace;font-size:clamp(13px,1.35vw,17px);line-height:1.7;letter-spacing:.01em;background:#19211f;border:1px solid #3a4642;padding:22px 26px;color:#c5d0c9;overflow-x:auto}
.formula b{color:var(--acid);font-weight:400}
.sobre-papel .formula{background:white;border-color:#dce0da;color:#39443f}
.sobre-papel .formula b{color:var(--ink);box-shadow:inset 0 -.16em var(--acid)}

.fuente-dato{margin:10px 0 0;border:1px solid #3a4642;background:#19211f;padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:baseline}
.fuente-dato .val{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--acid);grid-row:span 2}
.fuente-dato .desc{font-size:16px;line-height:1.45;color:#f5f8f3;font-weight:700;letter-spacing:-.025em}
.fuente-dato .meta{font:11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:#8d9a94;line-height:1.75}
.fuente-dato .meta a{color:var(--acid);border-bottom:1px solid #4a5650}
.fuente-dato .meta a:hover{border-bottom-color:var(--acid)}
.fuente-dato .nota{grid-column:1/-1;margin:12px 0 0;padding-top:14px;border-top:1px solid #3a4642;font-size:13px;line-height:1.6;color:#8d9a94}
@media(max-width:680px){.fuente-dato{grid-template-columns:1fr}.fuente-dato .val{grid-row:auto}}

.resultado-euro{margin:10px 0 0;background:var(--acid);color:var(--ink);padding:clamp(28px,3.4vw,44px);display:flex;align-items:baseline;gap:14px 30px;flex-wrap:wrap}
.resultado-euro b{font-size:clamp(44px,6.4vw,92px);font-weight:800;letter-spacing:-.075em;line-height:.9}
.resultado-euro span{font-size:16px;line-height:1.45;font-weight:700;letter-spacing:-.02em;max-width:30ch}

/* ---------- 06 · ROI ---------- */
.formulas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formulas .f{border:1px solid #dce0da;background:white;padding:26px 28px}
.formulas .f h3{margin:0 0 14px;font-size:22px;letter-spacing:-.05em}
.formulas .f code{display:block;font-family:'DM Mono',monospace;font-size:14px;line-height:1.65;color:#39443f;background:var(--paper);border:1px solid var(--line);padding:16px 18px;overflow-x:auto}
.formulas .f .u{display:block;margin-top:11px;font:11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.formulas{grid-template-columns:1fr}}

.pendiente-roi{margin:10px 0 0;border:1px solid #dce0da;border-left:4px solid var(--ink);background:white;padding:26px 28px}
.pendiente-roi h3{margin:0 0 12px;font-size:20px;letter-spacing:-.04em}
.pendiente-roi p{margin:0;font-size:16px;line-height:1.62;color:#39443f;max-width:78ch}

.entradas{margin:10px 0 0;border:1px solid var(--line);background:white}
.entradas h3{margin:0;padding:18px 24px;border-bottom:1px solid var(--line);font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#6b7770;font-weight:400}
.entradas ul{list-style:none;margin:0;padding:0}
.entradas li{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;padding:14px 24px;border-bottom:1px solid #e6e5df;font-size:15px;line-height:1.4;flex-wrap:wrap}
.entradas li:last-child{border-bottom:0}
.entradas li b{font-weight:700}
.entradas .est{font:10px 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:2px;white-space:nowrap}
.entradas .est.falta{background:#f7ece0;color:#8a5a1e;border:1px solid #e6cfae;font-weight:400}
.entradas .est.estim{background:var(--acid);color:var(--ink)}
.entradas .est.publico{background:var(--ink);color:var(--acid)}

.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.dos-col .c{border:1px solid #dce0da;background:white;padding:26px 28px}
.dos-col .c h3{margin:0 0 12px;font-size:20px;letter-spacing:-.045em}
.dos-col .c p{margin:0;font-size:15px;line-height:1.6;color:#4a5650}
.dos-col .c:first-child{border-top:4px solid var(--ink)}
.dos-col .c:last-child{border-top:4px solid var(--acid)}
@media(max-width:820px){.dos-col{grid-template-columns:1fr}}

/* ---------- 07 · Escalabilidad ---------- */
.escala{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.escala .col{border:1px solid #3a4642;background:#19211f;padding:26px 28px 28px}
.escala .col.auto{border-color:var(--acid)}
.escala .col h3{margin:0 0 20px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:#8d9a94}
.escala .col.auto h3{color:var(--acid)}
.escala table{width:100%;border-collapse:collapse;font-size:15px}
.escala th,.escala td{text-align:left;padding:14px 0;border-bottom:1px solid #3a4642;vertical-align:baseline}
.escala tr:last-child td,.escala tr:last-child th{border-bottom:0}
.escala th{font-weight:800;letter-spacing:-.03em;white-space:nowrap;padding-right:20px;color:#f5f8f3}
.escala td{color:#b4c0ba;line-height:1.4}
.escala .col.auto td{color:var(--acid)}
/* La barra es la que cuenta la historia: en manual crece, en automatizado no. */
.escala .barra{display:block;height:6px;background:#3a4642;margin-top:9px}
.escala .barra i{display:block;height:100%;background:#7d8a84}
.escala .col.auto .barra i{background:var(--acid)}
@media(max-width:820px){.escala{grid-template-columns:1fr}}

/* ---------- Diagramas de capas (Clientalia y arquitectura técnica) ---------- */
.capas{list-style:none;margin:0;padding:0;display:grid;max-width:760px}
.capas li{border:1px solid #42504b;background:#19211f;padding:18px 22px;display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:baseline}
.capas li b{font-size:17px;letter-spacing:-.035em;line-height:1.25}
.capas li small{font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:#8d9a94;text-align:right;line-height:1.5}
.capas li.dest{border-color:var(--acid);background:#231d12}
.capas li.dest b{color:var(--acid)}
.capas li+li{margin-top:30px;position:relative}
.capas li+li:before{content:"";position:absolute;left:21px;top:-30px;height:30px;border-left:1px solid var(--acid)}
.capas li+li:after{content:"";position:absolute;left:17px;top:-9px;border:4px solid transparent;border-top-color:var(--acid)}
@media(max-width:620px){.capas li{grid-template-columns:1fr}.capas li small{text-align:left}}

.plataforma{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:start}
.plataforma .texto h3{margin:0 0 18px;font-size:clamp(20px,2vw,27px);line-height:1.22;letter-spacing:-.045em;color:var(--acid);max-width:26ch}
.plataforma .texto p{margin:0 0 1.1em;font-size:16px;line-height:1.62;color:#c5d0c9;max-width:56ch}
.plataforma .texto .donde{font:11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:#8d9a94;line-height:1.7;margin:0}
@media(max-width:900px){.plataforma{grid-template-columns:1fr;gap:38px}}

/* Tesis de una plataforma cuando no hay diagrama al lado: a una columna, con el
   mismo aire que .plataforma .texto pero sin la retícula. */
.tesis-plataforma{max-width:70ch;margin:0 0 34px}
.tesis-plataforma h3{margin:0 0 16px;font-size:clamp(20px,2vw,27px);line-height:1.22;letter-spacing:-.045em;color:var(--acid);max-width:30ch}
.tesis-plataforma p{margin:0 0 1.1em;font-size:16px;line-height:1.62;color:#c5d0c9}
.tesis-plataforma .donde{margin:0;font:11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:#8d9a94;line-height:1.7}

/* ---------- 09 · WebPriceTracker: dos cadenas sobre ink ---------- */
.dos-flujos.sobre-ink-flujos .flujo{background:#19211f;border-color:#3a4642;color:#f5f8f3}
.dos-flujos.sobre-ink-flujos .flujo>h3{color:#8d9a94}
.dos-flujos.sobre-ink-flujos .flujo.bueno>h3{color:var(--acid)}
.dos-flujos.sobre-ink-flujos .cadena li{background:var(--ink);border-color:#42504b}
.dos-flujos.sobre-ink-flujos .flujo.bueno{border-color:var(--acid)}
.dos-flujos.sobre-ink-flujos .pie{color:#8d9a94}

/* ---------- 10 · Servicios (tres tarjetas, calcadas de .offer) ---------- */
.tres-servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tres-servicios .offer{min-height:300px}
@media(max-width:900px){.tres-servicios{grid-template-columns:1fr}}

/* ---------- 11 · Metodología: seis pasos ---------- */
.seis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #4a5650}
.seis .step{border-right:1px solid #4a5650;border-bottom:1px solid #4a5650;padding:25px 28px 28px 0;min-height:190px}
.seis .step:not(:nth-child(3n+1)){padding-left:28px}
.seis .step:nth-child(3n){border-right:0}
.seis .step:nth-last-child(-n+3){border-bottom:0}
@media(max-width:900px){
  .seis{grid-template-columns:1fr 1fr}
  .seis .step:nth-child(3n){border-right:1px solid #4a5650}
  .seis .step:nth-child(2n){border-right:0}
  .seis .step:not(:nth-child(3n+1)){padding-left:0}
  .seis .step:nth-child(2n){padding-left:28px}
  .seis .step:nth-last-child(-n+3){border-bottom:1px solid #4a5650}
  .seis .step:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){
  .seis{display:block}
  .seis .step{border-right:0;border-bottom:0;border-top:1px solid #4a5650;padding:23px 0;min-height:auto}
  .seis .step:first-child{border-top:0}
  .seis .step:nth-child(2n){padding-left:0}
}

/* ---------- 12 · Arquitectura: capas + tesis ---------- */
.arq-tesis{border-left:4px solid var(--acid);padding-left:26px;max-width:52ch}
.arq-tesis h3{margin:0 0 16px;font-size:clamp(21px,2.2vw,30px);line-height:1.2;letter-spacing:-.05em;color:#fff}
.arq-tesis p{margin:0;font-size:16px;line-height:1.62;color:#c5d0c9}

/* ---------- Enlace al pie de cada tarjeta de servicio ---------- */
/* Venían del <style> que inyectaba scripts/aplicar-seo.py en el index compilado.
   Al retirar aquel script se quedaron sin hoja, así que se traen aquí tal cual:
   un ancla dentro de la portada no posiciona para «consultoría IA para empresas»;
   una página propia sí, y estos enlaces son los que le dan autoridad. */
.offer-link{margin-top:18px;font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:4px;align-self:flex-start}
.offer-link:hover{border-bottom-color:currentColor}
.offer.dark .offer-link{border-bottom-color:#4c5751;color:var(--acid)}

/* ---------- Retrato de «quién lo dirige» ---------- */
/* Mismo origen que el bloque anterior. Sustituyó al sello «CC.» acid, que era el
   bloque de color que equilibraba esa zona: de ahí que el retrato no llegue solo,
   sino con un filete acid —el mismo gesto que el subrayado de "h1 em"— y un pie
   sobre ink con el antetítulo en acid. */
.retrato{margin:0;display:block}
.retrato picture,.retrato img{display:block;width:100%;height:auto}
.retrato img{aspect-ratio:1/1.04;object-fit:cover;background:var(--ink)}
.retrato .filete{height:6px;background:var(--acid)}
.retrato figcaption{background:var(--ink);color:#c5d0c9;padding:18px 20px 20px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;line-height:1.9}
.retrato figcaption b{display:block;color:var(--acid);font-weight:400;margin-bottom:6px}
@media(max-width:820px){
  .retrato{margin-bottom:38px}
  .retrato figcaption{padding:16px 18px 18px;line-height:1.8}
}

/* ---------- 13 · Perfil (versión reducida: no es el centro de la página) ---------- */
.perfil-corto{display:grid;grid-template-columns:minmax(200px,.4fr) 1.6fr;gap:6vw;align-items:start}
.perfil-corto h2{margin:20px 0 10px;font-size:clamp(30px,3.4vw,50px);letter-spacing:-.065em;line-height:1.05}
.perfil-corto h3{margin:0 0 20px;font-size:clamp(17px,1.6vw,21px);line-height:1.35;letter-spacing:-.03em;color:#4b5651;font-weight:700;max-width:34ch}
.perfil-corto p{margin:0;font-size:17px;line-height:1.66;color:#3e4b45;max-width:64ch}
.perfil-corto .links{display:flex;flex-wrap:wrap;gap:24px;margin-top:26px}
.perfil-corto .links a{font-size:14px;font-weight:800;border-bottom:1px solid;padding-bottom:5px}
@media(max-width:820px){.perfil-corto{grid-template-columns:1fr;gap:34px}}

/* ---------- 14 · Diagnóstico (gancho acid a página completa) ---------- */
.gancho{background:var(--acid);color:var(--ink);padding:clamp(56px,6vw,86px) 0}
.gancho .shell{display:flex;align-items:flex-end;justify-content:space-between;gap:34px 60px;flex-wrap:wrap}
.gancho .texto{max-width:60ch}
.gancho h2{margin:16px 0 18px;font-size:clamp(31px,4vw,58px);line-height:1.05;letter-spacing:-.065em;max-width:18ch}
.gancho p{margin:0;font-size:17px;line-height:1.55;max-width:56ch}
.gancho .nota{margin:18px 0 0;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:820px){.gancho .shell{display:block}.gancho .btn-dark{margin-top:32px}}

/* ---------- 15 · Calculadora de ROI ---------- */
.calc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10px;align-items:start}
.calc .entrada,.calc .salida{border:1px solid #3a4642;background:#19211f;padding:26px 28px 28px}
.calc .salida{border-color:var(--acid)}
.calc h3{margin:0 0 22px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:#8d9a94}
.calc .salida h3{color:var(--acid)}
.calc .campo{margin-bottom:20px}
.calc .campo:last-of-type{margin-bottom:0}
.calc label{display:block;font-size:14px;line-height:1.4;font-weight:700;letter-spacing:-.02em;color:#f5f8f3;margin-bottom:9px}
.calc .fila{display:flex;align-items:stretch;border:1px solid #42504b;background:var(--ink)}
.calc .fila:focus-within{border-color:var(--acid)}
/* min-height 44px: el mínimo de área táctil. Con el relleno actual ya se llega,
   pero escrito queda garantizado si algún día cambia el tipo o el relleno. */
.calc input{flex:1 1 auto;min-width:0;min-height:44px;box-sizing:border-box;background:transparent;border:0;color:#fff;font:700 17px Manrope,Arial,sans-serif;letter-spacing:-.03em;padding:13px 15px}
.calc input:focus{outline:0}
/* El foco se ve en el borde de .fila (:focus-within), pero sólo con ratón basta
   el borde; con teclado tiene que verse sin depender del color del borde. */
.calc .fila:focus-within{outline:2px solid var(--acid);outline-offset:2px}
/* Las flechas nativas estrechan el campo y no aportan nada con paso 0,01. */
.calc input::-webkit-outer-spin-button,.calc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input[type=number]{-moz-appearance:textfield;appearance:textfield}
.calc .u{flex:0 0 auto;display:flex;align-items:center;padding:0 15px;border-left:1px solid #42504b;font:11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:#8d9a94}
.calc .pista{margin:9px 0 0;font-size:12px;line-height:1.5;color:#8d9a94}
/* La fuente del dato va enlazada y visible. Se sube el color por encima del gris
   de la pista: es lo único de ese párrafo que hay que poder pulsar y comprobar. */
.calc .pista a{display:inline-block;margin-top:6px;color:#c5d0c9;border-bottom:1px solid #4a5650}
.calc .pista a:hover{color:var(--acid);border-bottom-color:var(--acid)}

.calc .res{list-style:none;margin:0;padding:0}
.calc .res li{display:flex;align-items:baseline;justify-content:space-between;gap:4px 22px;padding:14px 0;border-bottom:1px solid #3a4642;flex-wrap:wrap}
.calc .res li:last-child{border-bottom:0;padding-bottom:0}
.calc .res .et{font-size:14px;line-height:1.4;color:#b4c0ba;max-width:32ch}
.calc .res .v{font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-.05em;line-height:1;color:#f5f8f3;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc .res li.dest .v{color:var(--acid);font-size:clamp(24px,2.8vw,36px)}
.calc .res li.dest .et{color:#f5f8f3;font-weight:700}
.calc .res .v.malo{color:#ff9b8a}
/* La cuenta debajo del número, con los valores tecleados ya sustituidos. Ocupa la
   fila entera (flex-basis:100%) para no pelearse con la cifra, y va en monoespaciada
   porque es aritmética, no prosa. Un número cuya cuenta se ve es defendible. */
.calc .res .cuenta{flex:1 0 100%;margin:2px 0 0;font-family:'DM Mono',monospace;font-size:12px;line-height:1.6;color:#8d9a94;font-variant-numeric:tabular-nums}
.calc .res .cuenta:empty{display:none}

/* La región viva: existe para el lector de pantalla, no para la vista. No se puede
   usar display:none ni visibility:hidden, porque entonces tampoco la anunciaría. */
.calc-vivo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Las fórmulas, a la vista de todo el mundo y no sólo de quien navega sin JS. */
.calc-formulas{margin:10px 0 0;border:1px solid #3a4642;background:#19211f;padding:0 26px}
.calc-formulas summary{cursor:pointer;padding:18px 0;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--acid);min-height:44px;display:flex;align-items:center}
.calc-formulas summary:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.calc-formulas ol{margin:0 0 16px;padding-left:1.3em;font-family:'DM Mono',monospace;font-size:13px;line-height:1.95;color:#b4c0ba}
.calc-formulas li::marker{color:var(--acid)}
.calc-formulas p{margin:0 0 22px;font-size:14px;line-height:1.6;color:#8d9a94;max-width:76ch}

/* El enlace a la página propia de la calculadora, bajo el aparato de la portada. */
.calc-pagina{margin:18px 0 0;font-size:15px;line-height:1.6}
.calc-pagina a{color:var(--ink);font-weight:700;border-bottom:2px solid var(--acid);display:inline-block;min-height:44px;display:inline-flex;align-items:center}

.calc-aviso{margin:10px 0 0;border:1px solid #3a4642;border-left:4px solid var(--acid);background:#19211f;padding:18px 24px;font-size:14px;line-height:1.6;color:#c5d0c9}
/* Las notas van sobre papel, no sobre ink como los paneles: el gris claro de los
   paneles aquí se quedaría en 2,6:1 contra el fondo y no habría quien lo leyera. */
.calc-notas{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;line-height:1.6;color:var(--muted);max-width:80ch}
.calc-notas a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.calc-notas a:hover{border-bottom-color:var(--ink)}
/* Sin JavaScript no hay cálculo posible, pero sí fórmulas: se enseñan enteras.
   Mismo criterio que el diagnóstico, que tampoco finge funcionar sin JS. */
.calc noscript{display:block}
.calc-sinjs{border:1px solid #3a4642;background:#19211f;padding:24px 26px}
.calc-sinjs h3{margin:0 0 14px}
.calc-sinjs p{margin:0 0 16px;font-size:15px;line-height:1.6;color:#c5d0c9}
.calc-sinjs ol{margin:0;padding-left:1.3em;font-family:'DM Mono',monospace;font-size:13px;line-height:1.95;color:#b4c0ba}
.calc-sinjs li::marker{color:var(--acid)}
@media(max-width:900px){.calc{grid-template-columns:1fr}}

/* El método, sólo en /calculadora/. En la portada sobraría: ahí la calculadora es
   un remate del argumento, no el asunto de la página. */
.calc-metodo{margin:56px 0 0;max-width:72ch}
.calc-metodo h2{margin:38px 0 14px;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.045em;color:var(--ink)}
.calc-metodo h2:first-child{margin-top:0}
.calc-metodo p{margin:0 0 16px;font-size:16px;line-height:1.7;color:#39443f}
.calc-metodo b{color:var(--ink)}
.calc-metodo a{color:var(--ink);font-weight:700;border-bottom:2px solid var(--acid)}
.calc-metodo a:hover{background:var(--acid)}

/* ---------- 16 · Cierre ---------- */
.cierre-cta{background:var(--ink);color:#f5f8f3;padding:clamp(64px,7vw,104px) 0}
.cierre-cta h2{margin:18px 0 22px;font-size:clamp(33px,4.6vw,70px);line-height:1.02;letter-spacing:-.07em;max-width:20ch;color:#fff}
.cierre-cta p{margin:0 0 34px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.025em;color:#b4c0ba;max-width:62ch}
.cierre-cta .acciones{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cierre-cta .btn-acid{display:inline-flex;align-items:center;gap:28px;background:var(--acid);color:var(--ink);font-size:15px;font-weight:800;padding:19px 24px;border-radius:2px;transition:.2s}
.cierre-cta .btn-acid:hover{background:#ffc98d}
.cierre-cta .btn-acid span{font-size:22px;line-height:0}
.cierre-cta .secundario{font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-weight:500;border-bottom:1px solid #4a5650;padding-bottom:4px}
.cierre-cta .secundario:hover{border-bottom-color:var(--acid)}

/* ---------- Ajustes generales de la portada ---------- */
/* El h1 del héroe lo pinta el bundle dentro de #particle-root. El de reserva, el
   que ven los buscadores sin JavaScript, tiene que decir exactamente lo mismo. */
.particle-fallback h1{font-size:clamp(38px,5.4vw,78px);line-height:1.02;letter-spacing:-.06em}
.particle-fallback .claim{font:12px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#ffad68;margin:0 0 6px}

/* ===== _formulario.css ===== */

/* _formulario.css — formulario de contacto. Fuente única: lo usa tanto el
   index compilado (lo inyecta aplicar-seo.py) como las páginas generadas
   (construir.py lo mete en paginas.css). Sólo tokens ya existentes. */

/* La sección de contacto pasa a dos columnas iguales: el formulario necesita
   sitio. En el original era 1.3fr/.7fr con los bloques alineados abajo. */
.contact-grid.con-formulario{grid-template-columns:1fr 1fr;align-items:start;gap:6vw}
.contact-grid.con-formulario .contact-intro h2{margin-top:18px}
.alternativa{margin:26px 0 0;padding-top:20px;border-top:1px solid #829346;font-size:14px;line-height:1.6}
.alternativa strong{display:block;margin-bottom:10px;font:12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em}
.alternativa a{font-weight:700;border-bottom:1px solid;padding-bottom:2px}

.formulario{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formulario .campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.formulario .ancho{grid-column:1/-1}
.formulario label{font:12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em;color:#3d4a2f}
.formulario label .opc{text-transform:none;letter-spacing:0;color:#5c6a4c}

/* Campos blancos sobre el fondo acid: es el mismo recurso que usan las tarjetas
   .offer (blanco sobre papel) y da el máximo contraste para escribir. */
.formulario input[type=text],
.formulario input[type=email],
.formulario textarea{
  font:inherit;font-size:16px;             /* 16px evita que iOS haga zoom al enfocar */
  color:var(--ink);background:var(--white);
  border:1px solid rgba(16,20,20,.18);border-radius:2px;
  padding:13px 14px;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.formulario textarea{resize:vertical;min-height:132px;line-height:1.55}
.formulario input:focus-visible,
.formulario textarea:focus-visible{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,20,20,.14);
}
.formulario input[aria-invalid=true],
.formulario textarea[aria-invalid=true]{border-color:#9b1c14;box-shadow:0 0 0 3px rgba(155,28,20,.13)}
.formulario .ayuda{font-size:13px;line-height:1.45;color:#4a5738}
.formulario .error-campo{font-size:13px;line-height:1.4;color:#7d160f;font-weight:700}
.formulario .error-campo:empty{display:none}

/* Consentimiento: la casilla y su texto, alineados arriba. */
.formulario .consentimiento{flex-direction:row;align-items:flex-start;gap:11px}
.formulario .consentimiento input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--ink)}
.formulario .consentimiento span{font:inherit;font-size:14px;line-height:1.5;color:#33402a;text-transform:none;letter-spacing:0}
.formulario .consentimiento a{font-weight:700;border-bottom:1px solid}

.formulario .acciones{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.formulario button[type=submit]{border:0;cursor:pointer}
.formulario button[type=submit][disabled]{opacity:.55;cursor:progress}

/* Trampa para robots: fuera de la vista pero sin display:none, que algunos bots
   detectan. No es accesible ni tabulable, así que nadie la rellena por error. */
.formulario .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formulario .estado{margin:0;font-size:14px;line-height:1.5;font-weight:700}
.formulario .estado:empty{display:none}
.formulario .estado.mal{color:#7d160f}

/* Confirmación tras enviar: sustituye al formulario. */
.enviado{background:var(--ink);color:#f5f8f3;padding:34px 32px;border-radius:2px}
.enviado .eyebrow{color:var(--acid);display:block;margin-bottom:14px}
.enviado h3{margin:0 0 12px;font-size:27px;letter-spacing:-.045em;line-height:1.15}
.enviado p{margin:0;font-size:15px;line-height:1.6;color:#bdc7c1}

@media(max-width:1050px){
  .contact-grid.con-formulario{grid-template-columns:1fr;gap:48px}
}
@media(max-width:720px){
  .formulario{grid-template-columns:1fr}
  .contact-grid.con-formulario{display:block}
  .contact-grid.con-formulario .formulario{margin-top:44px}
}

/* ===== _whatsapp.css ===== */

/* _whatsapp.css — botón de WhatsApp. Fuente única: lo usan tanto las páginas
   generadas como el index compilado (lo inyecta aplicar-seo.py).
   Dos puntos de entrada y ni uno más: junto al formulario y flotante en móvil. */

/* ---------- Botón dentro de la sección de contacto ---------- */
/* Va sobre fondo acid, así que fondo --ink con el glifo en --acid: es el contraste
   que ya usa .btn-dark en esa misma sección. */
.wa-boton{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--acid);font-size:14px;font-weight:800;padding:14px 20px;border-radius:2px;margin:4px 0 16px;min-height:44px;transition:.2s}
.wa-boton span{color:#fff}
.wa-boton:hover{background:#37413d}
.wa-nota{margin:0 0 6px;font-size:13px;line-height:1.55}
.wa-nota a{font-weight:700;border-bottom:1px solid;padding-bottom:1px}

/* ---------- Flotante, sólo en móvil ---------- */
/* Oculto por defecto: en escritorio el botón de la sección de contacto basta y un
   elemento fijo encima del contenido molesta más de lo que aporta. */
.wa-flotante{display:none}
@media(max-width:720px){
  .wa-flotante{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:16px;bottom:16px;z-index:50;
    width:52px;height:52px;           /* por encima de los 44px de área táctil mínima */
    background:var(--ink);color:var(--acid);
    border:1px solid #3a4642;border-radius:50%;
    box-shadow:0 6px 20px rgba(16,20,20,.26);
  }
  .wa-flotante:active{background:#37413d}
  /* Que no tape la última línea del footer al llegar abajo del todo. */
  footer{padding-bottom:84px}
}

/* ===== _diagnostico.css ===== */

/* _diagnostico.css — autodiagnóstico. Sólo tokens ya existentes del sitio. */

.dg-caja{max-width:760px;margin:0;padding:0 0 clamp(64px,7vw,96px)}

/* ---------- Progreso ---------- */
.dg-progreso{position:relative;height:3px;background:var(--line);margin:0 0 34px}
.dg-barra{height:3px;background:var(--acid);transition:width .28s ease}
.dg-paso{position:absolute;top:12px;left:0;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* ---------- Pregunta ---------- */
.dg-pregunta{border:0;padding:26px 0 0;margin:0;min-width:0}
.dg-pregunta legend{padding:0;float:left;width:100%}
.dg-pregunta h2{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.06em}
.dg-ayuda{margin:14px 0 0;font-size:16px;line-height:1.5;color:#4a5650;max-width:56ch}
.dg-opciones{clear:both;display:grid;gap:9px;padding-top:30px}

.dg-opcion{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid #dce0da;border-radius:2px;padding:16px 18px;cursor:pointer;min-height:44px;transition:border-color .15s,background .15s}
.dg-opcion:hover{border-color:var(--ink)}
.dg-opcion input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--ink);margin:0}
.dg-opcion:has(input:checked){border-color:var(--ink);background:#fbfaf6;box-shadow:inset 3px 0 0 var(--acid)}
.dg-opcion:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.dg-texto{font-size:16px;line-height:1.35;letter-spacing:-.02em}
.dg-min{margin-left:auto;font:11px 'DM Mono',monospace;letter-spacing:.04em;color:var(--muted);white-space:nowrap}

.dg-acciones{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}
.dg-atras{background:none;border:0;padding:10px 0;cursor:pointer;font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);min-height:44px}
.dg-atras:hover{color:var(--ink)}
.dg-acciones .btn-dark{border:0;cursor:pointer}
.dg-acciones .btn-dark[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- Resultado ---------- */
.dg-resultado{padding-top:8px;scroll-margin-top:20px}
.dg-resultado h2{font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.055em;margin:2em 0 .7em}
.dg-resultado h2:first-of-type{margin-top:1.2em}

/* La cifra es del usuario, no nuestra: por eso va grande y con la fórmula debajo. */
.dg-horas{background:var(--ink);color:#f5f8f3;padding:34px 32px;border-radius:2px;margin:22px 0 0;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.dg-horas b{font-size:clamp(52px,8vw,88px);font-weight:800;letter-spacing:-.075em;line-height:.88;color:var(--acid)}
.dg-horas span{font-size:clamp(17px,1.6vw,21px);line-height:1.3;letter-spacing:-.03em;max-width:24ch}
.dg-formula{margin:16px 0 0;font-size:15px;line-height:1.6;color:#4a5650;background:#eceae4;border-left:3px solid var(--acid);padding:16px 18px}
.dg-formula b{color:var(--ink)}

.dg-ops{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.dg-op{background:var(--paper);display:grid;grid-template-columns:52px 1fr;gap:16px;padding:24px 22px}
.dg-num{font:700 26px Manrope,sans-serif;letter-spacing:-.05em;color:var(--ink);background:var(--acid);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.dg-op h3{margin:6px 0 0;font-size:21px;line-height:1.2;letter-spacing:-.045em}
.dg-op p{margin:11px 0 0;font-size:15px;line-height:1.6;color:#39443f}
.dg-op p b{color:var(--ink)}
.dg-dif{display:inline-block;margin-top:9px;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:2px;border:1px solid var(--line)}
.dg-baja{background:#e6f0e2;border-color:#9dbd90}
.dg-media{background:#fdf0dc;border-color:#e0b678}
.dg-alta{background:#fbe3e0;border-color:#d79a92}
.dg-serv{margin-top:14px!important}
.dg-serv a{font-weight:700;border-bottom:1px solid var(--line);padding-bottom:2px}
.dg-serv a:hover{border-bottom-color:var(--ink)}

.dg-grafico-caja{margin-top:8px}
.dg-gráfico{width:100%;max-width:460px;height:auto;display:block;margin-top:6px}
.dg-leyenda{margin:14px 0 0;padding-left:1.3em;font-size:14px;line-height:1.5;color:#4a5650}

/* ---------- Captura del correo ---------- */
.dg-cta{background:var(--acid);padding:32px 30px;border-radius:2px;margin-top:2.4em}
.dg-cta h2{margin:0 0 12px;font-size:clamp(24px,2.6vw,32px)}
.dg-cta>p{margin:0 0 22px;font-size:16px;line-height:1.55;max-width:58ch}
.dg-form{display:grid;gap:11px;max-width:460px}
.dg-form label{font:12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em;color:#3d4a2f}
.dg-form input[type=email]{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid rgba(16,20,20,.18);border-radius:2px;padding:13px 14px;width:100%}
.dg-form input[type=email]:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,20,20,.14)}
.dg-consent{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0}
.dg-consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--ink)}
.dg-consent span{font:inherit;font-size:14px;line-height:1.5;color:#33402a}
.dg-consent a{font-weight:700;border-bottom:1px solid}
.dg-form button{border:0;cursor:pointer;justify-self:start;margin-top:4px}
.dg-estado{margin:0;font-size:14px;font-weight:700}
.dg-estado:empty{display:none}
.dg-estado.mal{color:#7d160f}

.dg-pie{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;align-items:center}
.dg-compartir,.dg-reiniciar{background:none;border:0;cursor:pointer;font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;padding:12px 0;min-height:44px;border-bottom:1px solid var(--line)}
.dg-compartir{font-weight:500;color:var(--ink)}
.dg-reiniciar{color:var(--muted)}
.dg-compartir:hover,.dg-reiniciar:hover{border-bottom-color:var(--ink)}

/* ---------- Versión sin JavaScript ---------- */
/* Una sola página con las siete preguntas y envío normal al servidor. Menos
   cómoda, pero completamente funcional: nadie se queda fuera. */
.dg-sinjs{max-width:760px}
.dg-sinjs fieldset{border:0;border-top:1px solid var(--line);padding:26px 0 0;margin:34px 0 0}
.dg-sinjs legend{padding:0}
.dg-sinjs h2{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.045em}

/* Sólo se ve una de las dos versiones. La clase la pone el propio script. */
.js .dg-sinjs{display:none}
.dg-caja{display:none}
.js .dg-caja{display:block}

@media(max-width:720px){
  .dg-horas{display:block}
  .dg-horas span{display:block;margin-top:10px}
  .dg-op{grid-template-columns:1fr;gap:4px}
  .dg-num{margin-bottom:8px}
}

/* ---------- Lo que añade la app instalada ---------- */
/* Panel de diagnósticos guardados, comparación, plan e invitación a instalar.
   Todo vive en el dispositivo; se dice en la interfaz porque es un argumento de
   privacidad, no una carencia. */

.app-panel,.app-comparacion,.app-plan,.app-invita{max-width:760px;margin:0 0 30px;background:var(--white);border:1px solid #dce0da;border-radius:2px;padding:26px 24px}
.app-panel .eyebrow,.app-comparacion .eyebrow,.app-plan .eyebrow,.app-invita .eyebrow{display:block;color:var(--muted);margin-bottom:14px}
.app-nota{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.app-privacidad{border-top:1px solid var(--line);padding-top:12px;margin-top:18px}

.app-lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.app-lista li{display:flex;background:var(--paper)}
.app-lista button[data-abrir]{flex:1;display:flex;align-items:baseline;gap:14px;background:none;border:0;cursor:pointer;text-align:left;padding:15px 16px;min-height:44px;font:inherit}
.app-lista button[data-abrir]:hover{background:#eceae4}
.app-lista b{font-size:21px;font-weight:800;letter-spacing:-.05em}
.app-lista span{font-size:13px;color:var(--muted)}
.app-borrar{background:none;border:0;cursor:pointer;font-size:20px;line-height:1;color:var(--muted);padding:0 16px;min-width:44px;min-height:44px}
.app-borrar:hover{color:#7d160f}
.app-comparar{margin-top:18px;background:none;border:0;cursor:pointer;font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;padding:12px 0;min-height:44px;border-bottom:1px solid var(--line)}
.app-comparar:hover{border-bottom-color:var(--ink)}

.app-delta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;background:var(--ink);color:#f5f8f3;padding:22px 22px;border-radius:2px;margin-bottom:20px}
.app-delta b{font-size:clamp(36px,5vw,54px);font-weight:800;letter-spacing:-.07em;line-height:.9}
.app-delta span{font-size:15px;line-height:1.35}
.app-baja b{color:#8fd08a}
.app-sube b{color:#ff9b8a}
.app-igual b{color:var(--acid)}
.app-columnas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:8px}
.app-columnas div{background:var(--paper);padding:16px}
.app-columnas h4{margin:0;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:400}
.app-columnas p{margin:8px 0 0;font-size:24px;font-weight:800;letter-spacing:-.05em}
.app-comparacion h4{margin:22px 0 10px;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:400}
.app-comparacion ul{margin:0;padding-left:1.2em;font-size:15px;line-height:1.6}

.app-plan h3{margin:0 0 6px;font-size:24px;letter-spacing:-.05em}
.app-op{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
.app-op h4{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:18px;letter-spacing:-.04em;line-height:1.25}
.app-op h4 .dg-num{width:30px;height:30px;font-size:16px;flex:0 0 auto}
.app-op h4 small{margin-left:auto;font:11px 'DM Mono',monospace;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.app-pasos{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:paso}
.app-pasos label{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;min-height:44px;cursor:pointer;border-radius:2px;font-size:15px;line-height:1.5}
.app-pasos label:hover{background:#f7f6f1}
.app-pasos input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--ink)}
.app-pasos input:checked+span{color:var(--muted);text-decoration:line-through}

/* Invitación a instalar: sobre acid, para que no se confunda con el resultado. */
.app-invita{background:var(--acid);border-color:rgba(16,20,20,.18)}
.app-invita .eyebrow{color:#3d4a2f}
.app-invita h3{margin:0 0 14px;font-size:22px;letter-spacing:-.045em;line-height:1.2;max-width:26ch}
.app-invita .btn-dark{border:0;cursor:pointer;margin-top:18px}
.app-invita .app-nota{color:#3d4a2f}
.app-pasos-ios{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:n}
.app-pasos-ios li{display:flex;align-items:center;gap:13px;background:var(--white);border-radius:2px;padding:13px 15px;font-size:15px;line-height:1.35}
.app-pasos-ios li svg{flex:0 0 auto;color:#0a84ff}
.app-pasos-ios b{font-weight:700}

.dg-guardar{background:none;border:0;cursor:pointer;font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;padding:12px 0;min-height:44px;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink)}
.dg-guardar:hover{border-bottom-color:var(--ink)}
.dg-guardar[disabled]{color:var(--muted);cursor:default;border-bottom-color:transparent}

@media(max-width:720px){
  .app-columnas{grid-template-columns:1fr}
  .app-delta{display:block}
  .app-delta span{display:block;margin-top:8px}
}

/* ---------- Clip del avatar en el asistente ---------- */
/* Integrado en el bloque de la pregunta, no un reproductor pegado encima. Las
   opciones van justo debajo y son pulsables desde el primer instante: el vídeo
   acompaña, nunca bloquea. */
.dg-video{position:relative;margin:0 0 26px;max-width:420px;border-radius:2px;overflow:hidden;background:var(--ink);border:1px solid #dce0da}
/* 16/9: los clips se graban ya en apaisado, así que el marco respeta su relación
   nativa y `contain` garantiza que nunca se recorte la cabeza. */
.dg-video video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:contain;background:var(--ink)}
.dg-video video::cue{font-family:Manrope,Arial,sans-serif;font-size:.85em;background:rgba(16,20,20,.82);line-height:1.3}

/* Botón de sonido sobre el vídeo: sin él nadie sabe que se puede oír. */
.dg-son{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;background:rgba(16,20,20,.86);color:var(--acid);border:1px solid #42504b;border-radius:2px;padding:9px 12px;min-height:44px;cursor:pointer;font:11px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.dg-son:hover{background:var(--ink)}
.dg-son:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.dg-son span{color:#f5f8f3}
.dg-son[aria-pressed=true]{border-color:var(--acid)}

/* Alternativa para quien pide menos movimiento: sin autoplay, a demanda. */
.dg-play{display:block;width:100%;background:var(--ink);color:var(--acid);border:0;border-top:1px solid #42504b;padding:14px;min-height:44px;cursor:pointer;font:12px 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.dg-play:hover{background:#19211f}

/* Aviso de IA del asistente: una sola vez, encima de todo. */
.dg-ia{margin:26px 0 0;max-width:60ch}

@media(max-width:720px){
  .dg-video{max-width:100%;margin-bottom:20px}
  .dg-son{right:8px;bottom:8px;padding:9px 10px}
  .dg-son span{display:none}          /* en móvil manda el icono: el texto estorba */
  .dg-son{min-width:44px;justify-content:center}
}

/* ===== _video.css ===== */

/* _video.css — reproductor de los vídeos del avatar en las preguntas frecuentes.
   El vídeo se SUMA al texto, nunca lo sustituye: el texto es lo que indexa Google
   y lo que citan los buscadores con IA. */

.faq-video{margin:22px 0 0;max-width:640px}
.faq-video video{width:100%;height:auto;display:block;background:var(--ink);border-radius:2px;border:1px solid #dce0da}
.faq-video video:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Aviso de IA. Va pegado al reproductor a propósito: el artículo 50 del reglamento
   europeo pide transparencia, y aquí además demuestra el servicio que se vende. */
.faq-ia{display:flex;align-items:flex-start;gap:9px;margin:9px 0 0;font:11px 'DM Mono',monospace;letter-spacing:.04em;line-height:1.5;color:var(--muted);text-transform:uppercase}
.faq-ia svg{flex:0 0 auto;margin-top:1px}
.faq-ia b{color:var(--ink);font-weight:500}