/* Agentiam · estilos de marca (Manual de identidad v1.1) */
@import url("/fonts/poppins.css");

:root{
  /* paleta */
  --azul:#005B7C; --celeste:#69B1C9; --ambar:#FFB401; --noche:#0A2733;
  --blanco:#FFFFFF; --niebla:#F3F7F9; --linea:#DCE6EB; --grafito:#4B5C66; --bruma:#A8C2CD; --noche-2:#12384A;
  --exito:#17774D; --error:#C2412D;
  /* semánticos (tema claro) */
  --superficie:var(--blanco); --superficie-2:var(--niebla); --tinta:var(--noche); --tinta-suave:var(--grafito);
  --acento:var(--azul); --accion:var(--azul); --sobre-accion:var(--blanco);
  --destacado:var(--ambar); --sobre-destacado:var(--noche); --foco:var(--azul); --borde:var(--linea);
  /* forma y ritmo (escala de 4 px) */
  --radio-sm:8px; --radio-md:12px; --radio-lg:16px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --lateral:64px; --max:1200px;
}
.oscuro{
  --superficie:var(--noche); --superficie-2:var(--noche-2); --tinta:var(--blanco); --tinta-suave:var(--bruma);
  --acento:var(--celeste); --accion:var(--celeste); --sobre-accion:var(--noche); --foco:var(--celeste); --borde:rgba(168,194,205,.22);
  background:var(--superficie); color:var(--tinta);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:Poppins,"Segoe UI",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:26px;background:var(--superficie);color:var(--tinta);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--acento)}
b,strong{font-weight:500}
.wrap{max-width:calc(var(--max) + 2*var(--lateral));margin:0 auto;padding:0 var(--lateral)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:2px}

/* tipografía */
.display{font-weight:300;font-size:64px;line-height:68px;letter-spacing:-.01em}
h1,.h1{font-weight:300;font-size:44px;line-height:52px;letter-spacing:-.005em}
h2,.h2{font-weight:400;font-size:30px;line-height:38px}
h3,.h3{font-weight:500;font-size:21px;line-height:30px}
.dato{font-weight:300;font-size:48px;line-height:52px}
.pq{font-size:14px;line-height:22px}
.etiqueta{font-weight:600;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.lead{font-size:18px;line-height:30px;color:var(--tinta-suave)}
.suave{color:var(--tinta-suave)}

/* encabezado */
.top{position:sticky;top:0;z-index:30;background:var(--blanco);border-bottom:1px solid var(--linea)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:72px}
.marca{display:block;padding:var(--s3) 0}
.marca img{height:36px;width:auto}
.menu{display:flex;gap:var(--s6);list-style:none;padding:0}
.menu a{color:var(--tinta);text-decoration:none;font-size:15px;line-height:20px}
.menu a:hover,.menu a[aria-current]{color:var(--azul)}
.menu a[aria-current]{font-weight:500}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--radio-md);font:500 15px/20px Poppins,"Segoe UI",system-ui,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn svg{width:20px;height:20px;flex:none}
.btn-accion{background:var(--accion);color:var(--sobre-accion)}
.btn-accion:hover{background:var(--noche-2)}
.oscuro .btn-accion:hover{background:var(--blanco)}
.btn-destacado{background:var(--destacado);color:var(--sobre-destacado)}
.btn-destacado:hover{background:#FFC53D}
.btn-linea{background:transparent;color:var(--tinta);border-color:currentColor}
.btn-linea:hover{background:var(--tinta);color:var(--superficie)}
.btn-sm{min-height:40px;padding:0 var(--s4);font-size:14px}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* cintas (60°, hacia la derecha, desde la esquina superior derecha; nunca detrás de texto) */
.cintas{position:absolute;top:0;right:0;width:420px;height:200px;pointer-events:none}
.cintas svg{width:100%;height:100%}
.pista{display:flex;gap:6px;margin-bottom:var(--s5)}
.pista i{display:block;width:18px;height:6px;background:var(--celeste);transform:skewX(-30deg)}
.pista i:last-child{background:var(--azul)}

/* secciones */
.s{padding:var(--s9) 0}
.s-niebla{background:var(--niebla)}
.cab{max-width:760px;margin-bottom:var(--s7)}
.cab .etiqueta{display:block;margin-bottom:var(--s3)}
.cab h2{margin-bottom:var(--s3)}
.cab p{color:var(--tinta-suave);font-size:18px;line-height:30px}

/* héroe */
.heroe{position:relative;overflow:hidden;padding:var(--s8) 0 var(--s9)}
.heroe .recorrido,.heroe .piezas{margin-top:136px}
.heroe .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:center}
.heroe .display{margin:var(--s4) 0 var(--s5)}
.heroe .lead{max-width:560px;margin-bottom:var(--s6)}
.heroe .nota{margin-top:var(--s4);font-size:14px;line-height:22px;color:var(--tinta-suave)}

/* recorrido (diagrama) */
.recorrido{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:var(--s5)}
.recorrido .etiqueta{display:block;margin-bottom:var(--s4);color:var(--grafito)}
.pasos{list-style:none;padding:0;display:grid;gap:0}
.pasos li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);background:var(--niebla);border:1px solid var(--linea);border-radius:var(--radio-sm);padding:var(--s3) var(--s4);font-size:15px;line-height:22px}
.pasos li small{font-size:13px;color:var(--grafito)}
.pasos li.res{background:var(--azul);border-color:var(--azul);color:var(--blanco);font-weight:500}
.pasos li.res small{color:var(--blanco)}
.pasos .flecha{position:relative;display:block;height:20px;background:none;border:0;padding:0;border-radius:0}
.pasos .flecha::before{content:"";position:absolute;left:50%;top:2px;width:2px;height:14px;margin-left:-1px;background:var(--grafito)}
.pasos .flecha::after{content:"";position:absolute;left:50%;bottom:2px;width:7px;height:7px;margin-left:-3.5px;border-right:2px solid var(--grafito);border-bottom:2px solid var(--grafito);transform:rotate(45deg)}
.pasos .flecha.fin::before{background:var(--ambar)}
.pasos .flecha.fin::after{border-color:var(--ambar)}
.ficha{margin-top:var(--s4);border-top:1px solid var(--linea);padding-top:var(--s4);display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);font-size:14px;line-height:22px}
.ficha .etiqueta{grid-column:1/-1;margin-bottom:var(--s1)}
.ficha span{color:var(--grafito)}
.ficha strong{text-align:right}

/* tarjetas */
.rejilla{display:grid;gap:var(--s4)}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-lg);padding:var(--s5)}
.s-niebla .tarjeta{background:var(--blanco)}
.oscuro .tarjeta{background:var(--noche-2);border-color:transparent}
.tarjeta h3{margin-bottom:var(--s2)}
.tarjeta p{color:var(--tinta-suave);font-size:15px;line-height:24px}
.ico{width:48px;height:48px;border-radius:var(--radio-md);background:var(--niebla);color:var(--azul);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.s-niebla .ico{background:var(--niebla)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lista{padding:0;list-style:none;display:grid;gap:var(--s2);font-size:15px;line-height:24px}
.lista li{position:relative;padding-left:var(--s5)}
.lista li::before{content:"";position:absolute;left:2px;top:9px;width:12px;height:6px;border-left:1.75px solid var(--acento);border-bottom:1.75px solid var(--acento);transform:rotate(-45deg)}

/* capas: marcador de cinta a 60° */
.capa{position:relative;padding-top:var(--s6)}
.capa::before{content:"";position:absolute;top:var(--s5);left:var(--s5);width:40px;height:8px;transform:skewX(-30deg);background:var(--c,var(--azul))}
.capa .etiqueta{display:block;margin:var(--s3) 0 var(--s2);color:var(--grafito)}
.capa p{margin-bottom:var(--s4)}
.principio{margin-top:var(--s7);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4);font-weight:300;font-size:22px;line-height:32px;text-align:center}
.principio i{font-style:normal;color:var(--grafito)}

/* calculadora de fuga */
.fuga{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:stretch}
.control{margin-bottom:var(--s5)}
.control .fila{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s2)}
.control label{font-size:15px;line-height:22px}
.control output{font-weight:500;color:var(--acento);font-size:15px}
input[type=range]{width:100%;height:28px;accent-color:var(--celeste)}
.resultado{background:var(--noche-2);border-radius:var(--radio-lg);padding:var(--s6);display:flex;flex-direction:column}
.resultado .dato{color:var(--blanco);margin:var(--s2) 0 var(--s3)}
.resultado p{color:var(--bruma);font-size:15px;line-height:24px}
.resultado .anual{margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--borde);color:var(--blanco)}
.resultado .anual b{font-weight:500}
.fino{margin-top:var(--s4);font-size:13px;line-height:20px;color:var(--tinta-suave)}

/* proceso */
.proceso{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s7);counter-reset:p}
.proceso article{position:relative;background:var(--niebla);border:1px solid var(--linea);border-radius:var(--radio-md);padding:var(--s5);counter-increment:p}
.proceso article::before{content:"0" counter(p);display:block;font-weight:300;font-size:32px;line-height:40px;color:var(--azul);margin-bottom:var(--s3)}
.proceso article:last-child{background:var(--azul);border-color:var(--azul);color:var(--blanco)}
.proceso article:last-child::before,.proceso article:last-child p{color:var(--blanco)}
.proceso article p{color:var(--grafito);font-size:15px;line-height:24px}
.proceso article:not(:last-child)::after{content:"";position:absolute;right:-34px;top:50%;width:20px;height:2px;background:var(--grafito)}
.proceso article:nth-child(3)::after{background:var(--ambar)}
.proceso h3{margin-bottom:var(--s2)}

/* demo */
.demo{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center}
.captura{border:1px solid var(--linea);border-radius:var(--radio-lg);overflow:hidden;background:var(--blanco)}
.captura .barra{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--niebla);border-bottom:1px solid var(--linea);font-size:12px;line-height:16px;color:var(--grafito)}
.captura .barra i{width:9px;height:9px;border-radius:50%;background:var(--linea)}
.captura .barra span{margin-left:var(--s2)}
.captura img{width:100%;height:auto}
.demo h2{margin:var(--s3) 0}
.demo .lista{margin:var(--s5) 0 var(--s6)}
.demo .fino{margin-top:var(--s5)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips span{border:1px solid var(--linea);background:var(--blanco);border-radius:999px;padding:var(--s2) var(--s4);font-size:15px;line-height:22px}
.chips span.on{background:var(--azul);border-color:var(--azul);color:var(--blanco)}

/* contacto */
.contacto{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.form{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:14px;line-height:22px;font-weight:500;margin-bottom:var(--s1)}
.form input,.form select,.form textarea{width:100%;min-height:48px;border:1px solid #B9CBD4;border-radius:var(--radio-sm);padding:var(--s3) var(--s4);font:400 16px/24px Poppins,"Segoe UI",system-ui,sans-serif;background:var(--blanco);color:var(--noche)}
.form textarea{min-height:104px;resize:vertical}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-color:var(--azul)}
.chk{display:flex;gap:var(--s3);align-items:flex-start;font-size:14px;line-height:22px;color:var(--grafito)}
.chk input{width:20px;min-height:20px;height:20px;margin-top:1px;accent-color:var(--azul);flex:none}
.msg{font-size:15px;line-height:22px}.msg.ok{color:var(--exito)}.msg.err{color:var(--error)}

/* pie */
.pie{padding:var(--s8) 0 var(--s6)}
.pie .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:end}
.pie .marca img{height:40px}
.pie .slogan{font-weight:300;font-size:22px;line-height:32px;margin-top:var(--s4)}
.pie .desc{color:var(--bruma);font-size:14px;line-height:22px}
.pie nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:flex-end;font-size:14px;line-height:22px}
.pie nav a{color:var(--blanco);text-decoration:none}
.pie nav a:hover{color:var(--celeste)}
.pie .legal{grid-column:1/-1;border-top:1px solid var(--borde);padding-top:var(--s5);color:var(--bruma);font-size:13px;line-height:20px}

/* responsivo */
@media (max-width:1024px){
  .heroe .wrap,.fuga,.demo,.contacto{grid-template-columns:1fr}
  .r3,.r4{grid-template-columns:1fr 1fr}
  .proceso{grid-template-columns:1fr 1fr;row-gap:var(--s5)}
  .proceso article::after{display:none}
  .menu{display:none}
  .heroe{padding-top:168px}
  .heroe .recorrido,.heroe .piezas{margin-top:0}
}
@media (max-width:640px){
  :root{--lateral:16px}
  .display{font-size:40px;line-height:46px}
  h1,.h1{font-size:32px;line-height:40px}
  h2,.h2{font-size:26px;line-height:34px}
  .dato{font-size:40px;line-height:46px}
  .s{padding:var(--s8) 0}
  .heroe{padding:var(--s7) 0 var(--s8)}
  .r2,.r3,.r4,.proceso{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;padding:var(--s5)}
  .resultado{padding:var(--s5)}
  .top .wrap{height:64px}
  .marca img{height:30px}
  .top .btn{padding:0 var(--s3);font-size:13px}
  .pie .wrap{grid-template-columns:1fr}
  .pie nav{justify-content:flex-start}
  .heroe{padding-top:128px}
  .cintas{width:240px;height:114px}
}

/* ===== página Solución ===== */
.piezas{display:grid;gap:var(--s3)}
.pieza{display:grid;grid-template-columns:48px 1fr;gap:var(--s4);align-items:start;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-md);padding:var(--s4)}
.pieza .ico{margin:0}
.pieza b{display:block;font-weight:500;font-size:17px;line-height:26px}
.pieza span{color:var(--grafito);font-size:15px;line-height:24px}
.linea-flujo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5)}
.linea-flujo article{position:relative;background:var(--niebla);border:1px solid var(--linea);border-radius:var(--radio-md);padding:var(--s4)}
.linea-flujo article:last-child{background:var(--azul);border-color:var(--azul);color:var(--blanco)}
.linea-flujo article:last-child p,.linea-flujo article:last-child .etiqueta{color:var(--blanco)}
.linea-flujo article:not(:last-child)::after{content:"";position:absolute;right:-20px;top:50%;width:16px;height:2px;background:var(--grafito)}
.linea-flujo article:nth-child(4)::after{background:var(--ambar)}
.linea-flujo .etiqueta{display:block;color:var(--grafito);margin-bottom:var(--s2)}
.linea-flujo h3{font-size:17px;line-height:26px;margin-bottom:var(--s1)}
.linea-flujo p{font-size:14px;line-height:22px;color:var(--grafito)}
.no-hace{margin-top:var(--s5);border-left:3px solid var(--azul);background:var(--niebla);padding:var(--s4) var(--s5);border-radius:0 var(--radio-sm) var(--radio-sm) 0;font-size:15px;line-height:24px}
/* pipeline ilustrativo */
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);background:var(--noche-2);border-radius:var(--radio-lg);padding:var(--s4);overflow-x:auto}
.col{min-width:150px}
.col h4{font-weight:600;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--bruma);display:flex;justify-content:space-between;margin:var(--s1) var(--s1) var(--s3)}
.tk{background:var(--blanco);color:var(--noche);border-radius:var(--radio-sm);padding:var(--s3);margin-bottom:var(--s2);font-size:13px;line-height:20px}
.tk b{display:block;font-weight:500;font-size:14px}
.tk span{display:block;color:var(--grafito)}
.tk em{font-style:normal;display:inline-block;margin-top:var(--s1);font-size:12px;color:var(--azul)}
.tk.alerta{box-shadow:inset 3px 0 0 var(--ambar)}
.ilus{margin-top:var(--s3);font-size:13px;line-height:20px;color:var(--bruma)}
.puntos{margin-top:var(--s6)}
.puntos .tarjeta b{display:block;font-weight:500;color:var(--blanco);margin-bottom:var(--s1)}
.puntos .tarjeta span{color:var(--bruma);font-size:15px;line-height:24px}
/* ficha ilustrativa */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
.fichap{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:var(--s5);font-size:14px;line-height:22px}
.fichap .tit{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--linea);margin-bottom:var(--s4)}
.fichap .tit b{font-weight:500;font-size:17px}
.fichap .estado{background:var(--azul);color:var(--blanco);border-radius:999px;padding:2px var(--s3);font-size:12px;line-height:20px}
.fichap dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4)}
.fichap dt{color:var(--grafito)}
.fichap dd{margin:0;text-align:right}
.fichap .resumen{margin-top:var(--s4);background:var(--niebla);border-radius:var(--radio-sm);padding:var(--s3) var(--s4);color:var(--noche)}
.fichap .resumen .etiqueta{display:block;margin-bottom:var(--s1)}
/* métricas */
.kpi{display:flex;flex-direction:column;gap:var(--s1)}
.kpi .q{color:var(--grafito);font-size:14px;line-height:22px}
.kpi b{font-weight:500;font-size:17px;line-height:26px}
.kpi .tg{align-self:flex-start;margin-top:var(--s3);font-weight:600;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px var(--s3);background:var(--niebla);color:var(--azul)}
.kpi .tg.int{background:var(--azul);color:var(--blanco)}
/* paquetes */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:var(--s6) var(--s5)}
.plan.rec{border:2px solid var(--azul)}
.plan .rec-tag{align-self:flex-start;margin-bottom:var(--s3)}
.plan .pn{font-weight:500;font-size:21px;line-height:30px}
.plan .pt{color:var(--grafito);font-size:15px;line-height:24px;margin:var(--s1) 0 var(--s4)}
.plan .pp{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:var(--s4) 0;margin-bottom:var(--s4);font-size:14px;line-height:22px;color:var(--grafito)}
.plan .pp b{display:block;color:var(--noche);font-weight:500;font-size:16px}
.plan .lista{margin-bottom:var(--s5)}
.plan .lista li.mas{font-weight:500}
.plan .para{margin-top:auto;font-size:14px;line-height:22px;color:var(--grafito);margin-bottom:var(--s4)}
.pnota{margin-top:var(--s5);font-size:14px;line-height:22px;color:var(--grafito);max-width:760px}
.necesitamos{margin-top:var(--s6);background:var(--niebla);border-radius:var(--radio-lg);padding:var(--s5)}
.necesitamos h3{margin-bottom:var(--s4)}
.necesitamos .lista{grid-template-columns:1fr 1fr}
/* preguntas */
.faq{display:grid;gap:var(--s2);max-width:860px}
.faq details{border:1px solid var(--linea);border-radius:var(--radio-md);background:var(--blanco)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-weight:500;font-size:17px;line-height:26px;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:24px;color:var(--azul)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 var(--s5) var(--s4);color:var(--grafito);font-size:15px;line-height:24px}
/* banda final */
.final{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s5)}
.final h2{margin-bottom:var(--s2)}
.final p{color:var(--bruma)}

@media (max-width:1024px){
  .linea-flujo{grid-template-columns:1fr 1fr}
  .linea-flujo article::after{display:none}
  .split,.planes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .linea-flujo,.necesitamos .lista{grid-template-columns:1fr}
  .pipeline{grid-template-columns:repeat(5,170px)}
}

/* ===== aviso de privacidad ===== */
.legal-doc{max-width:760px;padding:var(--s8) 0 var(--s9)}
.legal-doc h1{margin-bottom:var(--s2)}
.legal-doc .meta{color:var(--grafito);font-size:14px;line-height:22px;margin-bottom:var(--s6)}
.legal-doc h2{font-size:21px;line-height:30px;font-weight:500;margin:var(--s6) 0 var(--s2)}
.legal-doc p,.legal-doc li{font-size:16px;line-height:26px}
.legal-doc p+p{margin-top:var(--s3)}
.legal-doc ul{padding-left:var(--s5);display:grid;gap:var(--s2);margin-bottom:var(--s3)}
@media (max-width:640px){
  .principio{flex-direction:column;align-items:center;font-size:19px;line-height:28px}
  .principio i{transform:rotate(90deg)}
}

/* ===== v3 · más color (dentro de la proporción del manual) ===== */
/* encabezado noche con logo negativo cuando el héroe es noche */
.top .logo-n{display:none}
.top.oscuro{background:var(--noche);border-bottom-color:rgba(168,194,205,.16)}
.top.oscuro .logo-c{display:none}
.top.oscuro .logo-n{display:block}
.top.oscuro .menu a{color:var(--blanco)}
.top.oscuro .menu a:hover,.top.oscuro .menu a[aria-current]{color:var(--celeste)}

/* héroe noche */
.heroe.oscuro .lead,.heroe.oscuro .nota{color:var(--bruma)}
.heroe.oscuro .pista i{background:var(--celeste)}
.heroe.oscuro .pista i:last-child{background:var(--blanco)}
.enfasis{color:var(--celeste)}
.recorrido,.piezas{--tinta:var(--noche);--tinta-suave:var(--grafito);--acento:var(--azul);--borde:var(--linea);color:var(--noche)}
.heroe.oscuro .recorrido{border:0}
.heroe.oscuro .pieza{border:0}
.heroe.oscuro .btn-linea{color:var(--blanco)}
.heroe.oscuro .btn-linea:hover{background:var(--blanco);color:var(--noche)}

/* banda azul (lámina dato) */
.s-azul{--superficie:var(--azul);--tinta:var(--blanco);--tinta-suave:var(--blanco);--acento:var(--blanco);--accion:var(--blanco);--sobre-accion:var(--azul);--foco:var(--blanco);--borde:rgba(255,255,255,.28);background:var(--azul);color:var(--blanco)}
.s-azul .etiqueta{color:var(--blanco)}
.s-azul .lista li::before{border-color:var(--blanco)}
.s-azul .btn-accion:hover{background:var(--niebla)}
.s-azul .btn-linea:hover{background:var(--blanco);color:var(--azul)}
.s-azul .captura{border:0}
.datos{padding:var(--s8) 0;position:relative;overflow:hidden}
.datos .rejilla{gap:var(--s6)}
.datos .dato{font-size:64px;line-height:68px;margin-bottom:var(--s2)}
.datos p{font-size:17px;line-height:26px;max-width:300px}
.datos .cintas{top:auto;bottom:0;right:0;width:300px;height:140px}

/* capas con cinta más visible */
.capa{padding-top:56px}
.capa::before{top:24px;width:72px;height:12px}

/* contacto con cintas desde la esquina inferior izquierda */
#contacto{position:relative;overflow:hidden}
#contacto .wrap{position:relative;z-index:1}
.cintas-ii{position:absolute;left:0;bottom:0;width:360px;height:180px;pointer-events:none}
.cintas-ii svg{width:100%;height:100%}

@media (max-width:1024px){
  .cintas-ii{display:none}
  .datos .cintas{display:none}
}
@media (max-width:640px){
  .datos .dato{font-size:48px;line-height:52px}
}
.fichap{--tinta:var(--noche);--tinta-suave:var(--grafito);--acento:var(--azul);color:var(--noche)}
.s-azul .fichap .etiqueta{color:var(--azul)}

/* ===== ajuste de espaciado (2026-10-18): el header es sticky, no hace falta compensarlo ===== */
@media (max-width:1024px){
  .heroe{padding-top:var(--s8)}
}
@media (max-width:640px){
  .s{padding:var(--s7) 0}
  .heroe{padding:var(--s6) 0 var(--s7)}
  .heroe .wrap{gap:var(--s6)}
  .heroe .lead{margin-bottom:var(--s5)}
  .cab{margin-bottom:var(--s6)}
  .fuga,.demo,.contacto{gap:var(--s6)}
  .datos{padding:var(--s7) 0}
  .pie{padding:var(--s7) 0 var(--s5)}
  .pie .wrap{gap:var(--s5)}
  .cintas{width:180px;height:86px;opacity:.85}
}