/* ---- marca canonica de Peaks (la NAVY del 16-ago) ----
   Söhne va primera: cuando se compre la licencia en klim.co.nz se anade el
   @font-face y ya esta. Mientras, Inter de Google Fonts. */
:root{
  --navy:#0A1B37; --gold:#EEA105; --cream:#F3F1EC;
  --bg:var(--navy); --fg:#FFFFFF;
  --muted:rgba(255,255,255,.58); --faint:rgba(255,255,255,.38);
  --rule:rgba(255,255,255,.15); --surface:#0E2246;
  --accent:var(--gold); --ink:#06122B; --paper:var(--cream);
  --sans:"Söhne","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--navy)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 44px}
@media(max-width:720px){.wrap{padding:0 24px}}
.mark{fill:currentColor;display:block}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}

/* wordmark PEAKS con la A triangular */
.wm{display:inline-flex;align-items:baseline;font-weight:500;letter-spacing:.2em;
  text-indent:.2em;line-height:1;white-space:nowrap}
.wm .tri{font-weight:400}
.brand{display:flex;align-items:center;gap:14px}
.brand .mark{width:38px;height:auto}
.brand b{display:flex;align-items:baseline;font-weight:500;font-size:.95rem}

.kicker{letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-size:.72rem}
.kicker.r{color:var(--faint);margin-left:auto}

/* titulares: mayusculas y tracking cerrado, como la navy original */
.t-xl{text-transform:uppercase;letter-spacing:-.03em;font-weight:600;line-height:1.02;
  font-size:clamp(2.3rem,6.6vw,5.8rem)}
.t-l{text-transform:uppercase;letter-spacing:-.03em;font-weight:600;line-height:1.05;
  font-size:clamp(1.9rem,4.6vw,3.1rem);max-width:18ch;text-wrap:balance}
.t-m{text-transform:uppercase;letter-spacing:-.02em;font-weight:600;line-height:1.1;
  font-size:clamp(1.3rem,2.4vw,1.8rem)}
.ac{color:var(--accent)}
.lead{color:var(--muted);font-size:1.05rem;max-width:56ch}
.lead b{color:var(--fg);font-weight:500}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;background:rgba(10,27,55,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:1200px;margin:0 auto;padding:0 44px;height:72px;
  display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex;align-items:stretch;height:72px}
.blk,.nav-links .cta{display:flex;align-items:center;border-left:1px solid var(--rule);
  padding:0 18px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;transition:color .3s,background .3s}
.blk:hover{background:rgba(255,255,255,.04)}
.nav-links .cta{color:var(--accent)}
.nav-links .cta .a{margin-left:10px}
@media(max-width:1120px){.nav-links{display:none}.nav-in{padding:0 24px}}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-gold{background:var(--accent);color:var(--navy)}
.btn-ghost{border-color:var(--rule);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---- hero: grafo de nodos difuminado al fondo ---- */
.hero{position:relative;overflow:hidden;padding:96px 0 76px;border-bottom:1px solid var(--rule)}
.hero-foto{position:absolute;inset:-3%;background:url('/img/hero-suave.jpg') 70% center/cover no-repeat;
  filter:blur(5px) saturate(.95);transform:scale(1.05);opacity:.95}
.hero-velo{position:absolute;inset:0;
  background:linear-gradient(100deg,var(--navy) 34%,rgba(10,27,55,.78) 56%,rgba(10,27,55,.18) 100%)}
.hero .wrap{position:relative}
.hero-top{letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-size:.72rem}
.hero h1{margin:34px 0 30px;max-width:15ch}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;max-width:54ch}
.hero .ctas{margin-top:42px}
.micro{margin-top:46px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;gap:28px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
@media(max-width:820px){
  /* en vertical la foto se comia una pantalla entera antes de decir nada:
     se queda como textura tenue detras del titular, no como portada. */
  .hero{padding:56px 0 48px}
  .hero-foto{background-position:58% center;filter:blur(4px) saturate(1);opacity:.9}
  .hero-velo{background:linear-gradient(180deg,rgba(10,27,55,.55) 0%,rgba(10,27,55,.62) 55%,var(--navy) 100%)}
  .hero h1{margin:24px 0 22px}
  .micro{gap:16px 20px;margin-top:34px}
}

/* ---- ruleta de clientes ---- */
.ruleta{padding:32px 0 28px;border-bottom:1px solid var(--rule);overflow:hidden}
.ruleta .kicker{display:block;text-align:center;margin-bottom:24px}
.pista-v{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pista{display:flex;width:max-content;align-items:center;gap:72px;animation:rodar 36s linear infinite}
.pista-v:hover .pista{animation-play-state:paused}
@keyframes rodar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cli{display:flex;align-items:center;height:40px;flex:none}
.cli img{max-height:34px;width:auto;display:block;
  filter:grayscale(1) brightness(0) invert(1);opacity:.62;transition:opacity .25s}
.cli:hover img{opacity:1}
/* altura POR logotipo; los SVG de Illustrator sin width/height necesitan medidas */
.cli img.l-monest{width:113px;height:44px;max-height:none}
.cli img.l-marmot{width:96px;height:48px;max-height:none}
.cli img.l-cuca{max-height:38px}
.cli img.l-bd{max-height:26px;filter:none}
.cli img.l-upscale{max-height:28px}
.cli img.l-eres{max-height:36px}
.cli img.l-fulfill{max-height:26px}
.cli img.l-bdf{max-height:38px}
@media(prefers-reduced-motion:reduce){
  .pista{animation:none;width:100%;flex-wrap:wrap;justify-content:center;gap:40px}
  .pista .dup{display:none}
  .pista-v{-webkit-mask-image:none;mask-image:none}
}

/* ---- secciones ---- */
.section{padding:44px 0;border-bottom:1px solid var(--rule)}
.section.ink{background:var(--ink)}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:26px}
.sec-num{font-size:.9rem;letter-spacing:.2em;color:var(--accent)}

/* ---- declaracion a pantalla: las tres frases que mandan ---- */
.decl{position:relative;padding:clamp(64px,9vw,104px) 0;border-bottom:1px solid var(--rule);
  background:var(--ink);overflow:hidden}
/* foto al fondo: va desenfocada y con un velo denso a la izquierda, que es donde
   vive el texto. La imagen aporta textura, no informacion. */
.conFoto{position:relative;overflow:hidden;background:var(--ink)}
.conFoto .foto{position:absolute;inset:-3%;background-position:center right;background-size:cover;
  filter:blur(6px) saturate(.8);opacity:.85;transform:scale(1.05)}
.conFoto .velo{position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 26%,rgba(6,18,43,.88) 52%,rgba(6,18,43,.46) 100%)}
.conFoto .wrap{position:relative}
.decl::after{content:"";position:absolute;right:-8%;top:-40%;width:55%;height:180%;
  background:radial-gradient(closest-side,rgba(238,161,5,.12),transparent 70%);pointer-events:none}
@media(max-width:820px){
  .conFoto .foto{background-position:60% center;filter:blur(5px) saturate(.85)}
  .conFoto .velo{background:linear-gradient(180deg,rgba(6,18,43,.66),rgba(6,18,43,.34) 45%,var(--ink))}
}
.decl .wrap{position:relative}
.decl .frase{text-transform:uppercase;letter-spacing:-.03em;font-weight:600;line-height:1.03;
  font-size:clamp(2rem,5.6vw,4.4rem);max-width:19ch;text-wrap:balance}
.decl .frase .ac{display:block}
.decl .pie{margin-top:36px;color:var(--muted);max-width:56ch;font-size:1.05rem;
  /* no hereda las mayusculas ni el tracking del titular de la declaracion */
  text-transform:none;letter-spacing:normal;font-weight:400;line-height:1.65}

/* friccion: lo que pasa entre las herramientas */
.fric{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:56px}
.fric li{background:var(--navy);padding:26px 24px;color:var(--muted);font-size:.98rem;line-height:1.5}
.fric li::before{content:"";display:block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-bottom:12px}
@media(max-width:860px){.fric{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fric{grid-template-columns:1fr}}

/* soluciones: cuatro bloques anchos */
.sols{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
.sol{background:var(--navy);padding:32px 36px;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:36px;align-items:baseline}
.sol .n{font-size:.72rem;letter-spacing:.22em;color:var(--accent);display:block;margin-bottom:14px}
.sol p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:52ch}
.sol p + p{margin-top:14px}
.sol .rem{color:var(--fg);font-weight:500}
@media(max-width:860px){.sol{grid-template-columns:1fr;gap:18px;padding:34px 24px}}

/* casos de uso: cinco columnas densas */
.usos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:52px}
.uso{background:var(--navy);padding:30px 22px}
.uso h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:18px}
.uso li{color:var(--muted);font-size:.93rem;line-height:1.45;padding:7px 0;border-top:1px solid var(--rule)}
.uso li:first-child{border-top:none;padding-top:0}
@media(max-width:1040px){.usos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.usos{grid-template-columns:repeat(2,1fr)}}

/* proceso 01-04 */
.pasos{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
.paso{background:var(--navy);padding:28px 36px;display:grid;
  grid-template-columns:150px minmax(0,1fr);gap:36px;align-items:baseline}
.paso .n{font-size:.78rem;letter-spacing:.2em;color:var(--accent)}
.paso p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:60ch;margin-top:12px}
@media(max-width:760px){.paso{grid-template-columns:1fr;gap:10px;padding:30px 24px}}

/* pares: dos columnas de texto */
.par{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:52px}
.par > div{background:var(--navy);padding:40px}
.par p{color:var(--muted);margin-top:16px;line-height:1.6}
.par .rem{color:var(--fg);font-weight:500}
@media(max-width:860px){.par{grid-template-columns:1fr}.par > div{padding:32px 24px}}

/* principios: seis */
.prin{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:52px}
.prin > div{background:var(--navy);padding:32px 28px}
.prin h3{font-size:1.02rem;font-weight:500;margin-bottom:10px}
.prin p{color:var(--muted);font-size:.95rem;line-height:1.55}
@media(max-width:900px){.prin{grid-template-columns:repeat(2,1fr)}}

/* casos reales */
.sist{display:grid;gap:0;margin-top:52px;border-top:1px solid var(--rule)}
.sist article{padding:34px 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:44px;align-items:baseline}
.sist p{color:var(--muted);line-height:1.6;max-width:58ch}
.sist .rem{display:block;color:var(--fg);font-weight:500;margin-top:14px}
@media(max-width:760px){.sist article{grid-template-columns:1fr;gap:14px}}

/* faq */
.faq{margin-top:52px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:26px 0;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:24px;align-items:baseline;font-size:1.05rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding:0 0 28px;color:var(--muted);max-width:66ch;line-height:1.65}
.faq .resp p + p{margin-top:12px}

/* formulario */
.form{margin-top:48px;display:grid;gap:22px;max-width:620px}
.campo{display:grid;gap:8px}
.campo label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.campo input,.campo textarea{background:rgba(255,255,255,.04);border:1px solid var(--rule);
  border-radius:14px;color:var(--fg);font:inherit;font-size:1rem;padding:14px 16px;width:100%}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--accent)}
.campo .ayuda{font-size:.88rem;color:var(--faint);line-height:1.5}
.form .micro-f{font-size:.88rem;color:var(--faint);line-height:1.55;max-width:52ch}

/* ---- diagramas ----
   SVG a mano, sin librerias. Trazos y texto en currentColor para que hereden el
   color de la seccion; el ambar se reserva para lo unico que lleva significado
   (el paso que hace la IA, el punto donde decides tu). */
/* imagen de seccion: render 3D a sangre por el lado derecho, el texto vive a la izquierda */
.grafico{margin:36px 0 0;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--rule);aspect-ratio:16/6.8;background:var(--ink)}
.grafico img{width:100%;height:100%;object-fit:cover;display:block}
.grafico::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,27,55,.55),rgba(10,27,55,0) 45%)}
@media(max-width:700px){.grafico{aspect-ratio:16/11}}

figure.dia{margin:44px 0 0}
figure.dia svg{width:100%;height:auto;display:block;overflow:visible}
figure.dia figcaption{margin-top:20px;color:var(--faint);font-size:.88rem;line-height:1.55;max-width:60ch}
.dia .cja{fill:rgba(255,255,255,.03);stroke:currentColor;stroke-opacity:.26;rx:10}
.dia .cja-ac{fill:rgba(238,161,5,.08);stroke:var(--accent);stroke-opacity:.55;rx:10}
.dia .ln{stroke:currentColor;stroke-opacity:.34;fill:none}
.dia .ln-ac{stroke:var(--accent);stroke-opacity:.8;fill:none}
.dia .tt{fill:currentColor;font-size:13px;font-weight:500}
.dia .tt-ac{fill:var(--accent);font-size:13px;font-weight:500}
.dia .sub{fill:currentColor;fill-opacity:.52;font-size:11px;letter-spacing:.06em}
.dia .arw{fill:currentColor;fill-opacity:.42}
.dia .arw-ac{fill:var(--accent);fill-opacity:.85}
@media(max-width:700px){.dia .tt,.dia .tt-ac{font-size:15px}.dia .sub{font-size:13px}}

/* tira de tecnologia: sustituye a la seccion de texto que habia */
.tec{padding:30px 0;border-bottom:1px solid var(--rule);overflow:hidden}
.tec .pista{gap:56px;animation-duration:44s}
.tec .pista{gap:52px;animation-duration:70s}
.tec .tl{flex:none;display:inline-flex;align-items:center;gap:11px;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
/* iconos de Simple Icons (CC0), a blanco: ninguna marca ajena grita mas que la nuestra */
.tec .tl img{height:22px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.82}
.tec .tl.ia{color:var(--fg)}
.tec .tl.ia img{opacity:1}

/* pie */
.foot{border-top:1px solid var(--rule);background:var(--ink)}
.foot-in{max-width:1200px;margin:0 auto;padding:64px 44px 48px;display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px}
.foot .lema{color:var(--muted);margin-top:18px;max-width:34ch}
.foot .tags{margin-top:16px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.foot nav{display:flex;flex-direction:column;gap:12px;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot nav a:hover{color:var(--accent)}
.foot-bajo{max-width:1200px;margin:0 auto;padding:0 44px 44px;color:var(--faint);font-size:.78rem;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:760px){
  .foot-in{grid-template-columns:1fr;padding:48px 24px 32px}
  .foot-bajo{padding:0 24px 36px}
}

/* ══ DOS SECCIONES ══════════════════════════════════════════════════════
   Aqui no hay imagen: el peso visual lo lleva la tipografia. Numero grande,
   titular a sangre y tres lineas. La segunda invierte el fondo para que se
   note el cambio de bloque sin tener que leer. */
.bloque{padding:64px 0;border-bottom:1px solid var(--rule)}
.bloque.alt{background:var(--ink)}
.bq-n{font-size:clamp(3.4rem,13vw,6rem);font-weight:600;letter-spacing:-.04em;
  line-height:.85;color:var(--accent);opacity:.9}
.bq-k{margin-top:10px;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.bloque h2{margin:22px 0 0;text-transform:uppercase;letter-spacing:-.03em;font-weight:600;
  line-height:1.02;font-size:clamp(2rem,8.4vw,3.6rem);max-width:13ch}
.bq-sub{margin-top:18px;color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:44ch}
.bq-lista{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.bq-lista li{display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--rule);font-size:1.02rem;line-height:1.4}
.bq-lista li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--accent);transform:translateY(-2px)}
.bq-pie{margin-top:26px;font-size:1.02rem;font-weight:500;line-height:1.45;max-width:40ch}
@media(min-width:900px){
  /* el bloque ya no se parte en dos columnas: la cabecera (.bq-cab) reparte
     texto | puntos, y el lienzo va debajo a todo el ancho */
  .bloque .wrap{display:block}
  .bloque h2{max-width:11ch}
  .bq-lista{margin-top:0;border-top:none}
  .bq-lista li:first-child{border-top:1px solid var(--rule)}
}

/* ══ AGENTE POR DENTRO ═══════════════════════════════════════════════════
   Ni esquema ni render: la conversacion tal cual la ve el cliente, y al lado
   lo que dispara el sistema mientras tanto. Todo HTML, sin imagenes. */
.demo{padding:56px 0;border-bottom:1px solid var(--rule)}
.demo-cab{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.demo-cab h2{flex:1 1 100%;min-width:0;text-transform:uppercase;letter-spacing:-.02em;
  font-weight:600;font-size:clamp(1.35rem,4.4vw,2.1rem);line-height:1.08;text-wrap:balance}
.demo-rej{display:grid;gap:18px;align-items:start}
@media(min-width:880px){.demo-rej{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}}

.chat{background:var(--ink);border:1px solid var(--rule);border-radius:16px;padding:18px 16px}
.chat-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--rule)}
.chat-top .pt{width:28px;height:28px;border-radius:50%;background:rgba(238,161,5,.16);
  border:1px solid rgba(238,161,5,.45);flex:none}
.chat-top b{font-size:.92rem;font-weight:500}
.chat-top span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-left:auto}
.msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:.94rem;line-height:1.45;margin-bottom:10px}
.msg.ellos{background:rgba(255,255,255,.06);border-bottom-left-radius:5px}
.msg.nos{background:rgba(238,161,5,.13);border:1px solid rgba(238,161,5,.3);
  margin-left:auto;border-bottom-right-radius:5px}
.msg .hora{display:block;margin-top:6px;font-size:.66rem;color:var(--faint);letter-spacing:.08em}

.traza{background:rgba(255,255,255,.02);border:1px solid var(--rule);border-radius:16px;padding:20px 18px}
.traza .tk{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--rule);display:block}
.traza ul{margin:0;padding:0;list-style:none}
.traza li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule);font-size:.92rem;line-height:1.4}
.traza li:last-child{border-bottom:none}
.traza .t{color:var(--faint);font-size:.76rem;letter-spacing:.04em}
.traza .q b{font-weight:500}
.traza .q span{display:block;color:var(--muted);font-size:.84rem;margin-top:3px}
.traza li.fin .q b{color:var(--accent)}

/* ══ LIENZO n8n ═══════════════════════════════════════════════════════════
   Nodos con icono sobre rejilla de puntos, curvas entre ellos y la senal
   recorriendo la linea. En movil el lienzo se desplaza en horizontal, como
   un editor de flujos: mejor eso que encoger los nodos hasta no verlos. */
.lienzo{position:relative;margin-top:26px;border:1px solid var(--rule);border-radius:16px;
  background:var(--ink);overflow:hidden}
.lienzo{max-width:100%}
.lienzo svg{display:block;width:100%;max-width:100%;height:auto}
/* dos dibujos por flujo: el ancho para escritorio, el vertical para movil.
   Asi en el telefono entra entero, sin desplazar, con los nodos grandes. */
.lienzo svg.ancho{display:block}.lienzo svg.vert{display:none}
@media(max-width:760px){.lienzo svg.ancho{display:none}.lienzo svg.vert{display:block}}
.lienzo .nd{fill:#0E2246;stroke:rgba(255,255,255,.22);stroke-width:1}
.lienzo .nd.on{stroke:var(--accent);stroke-opacity:.9}
.lienzo .nd.big{fill:#10254B}
.lienzo .ic{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.lienzo .ic.au{stroke:var(--accent);opacity:1}
.lienzo .lb{fill:#fff;font-size:15px;font-weight:500;text-anchor:middle}
.lienzo .sb{fill:rgba(255,255,255,.5);font-size:12px;text-anchor:middle;letter-spacing:.03em}
.lienzo .cn{fill:none;stroke:rgba(255,255,255,.30);stroke-width:1.6}
.lienzo .cn.au{stroke:var(--accent);stroke-opacity:.85;stroke-width:2}
.lienzo .cn.dim{stroke-dasharray:3 6;stroke:rgba(255,255,255,.22)}
.lienzo .cn.sub{stroke-dasharray:2 5;stroke:rgba(238,161,5,.55);stroke-width:1.4}
.lienzo .pt{fill:#0E2246;stroke:rgba(255,255,255,.35);stroke-width:1.2}
.lienzo .pt.au{stroke:var(--accent);fill:#1a2a4a}
.lienzo .fin{fill:rgba(255,255,255,.25)}
.bq-nota{margin:14px 0 0;font-size:.74rem;color:var(--faint);letter-spacing:.04em}
.bq-lista.mini{margin-top:18px;border-top:none}
.bq-lista.mini li{padding:11px 0;font-size:.95rem}
@media(prefers-reduced-motion:no-preference){
  .lienzo .cn.au{stroke-dasharray:7 9;animation:fluye 1.4s linear infinite}
  .lienzo .cn.sub{animation:fluye 2.6s linear infinite reverse}
  @keyframes fluye{to{stroke-dashoffset:-32}}
  .lienzo .nd.p{animation:late 4.5s ease-in-out infinite}
  .lienzo .nd.p1{animation-delay:.0s}.lienzo .nd.p2{animation-delay:.9s}.lienzo .nd.p3{animation-delay:1.8s}
  .lienzo .nd.p4{animation-delay:2.7s}.lienzo .nd.p5{animation-delay:3.6s}
  @keyframes late{0%,8%{filter:none}14%{filter:drop-shadow(0 0 10px rgba(238,161,5,.75))}30%,100%{filter:none}}
  .lienzo .nd.big{animation:resp 3.2s ease-in-out infinite}
  @keyframes resp{0%,100%{filter:drop-shadow(0 0 6px rgba(238,161,5,.25))}50%{filter:drop-shadow(0 0 18px rgba(238,161,5,.6))}}
}
@media(min-width:900px){
  .bloque .wrap.ancho{grid-template-columns:minmax(0,.55fr) minmax(0,1.85fr)}
  .bloque .wrap.ancho h2{max-width:none;font-size:clamp(1.6rem,2.9vw,2.5rem)}
  .bloque .wrap.ancho .bq-n{font-size:clamp(3rem,6vw,5rem)}
}

/* ── hero compacto: texto | imagen nitida. La foto desenfocada a sangre se va. ── */
.hero{padding:60px 0 52px;position:relative;overflow:hidden}
.hero .wrap{position:relative}
.hero-g{display:grid;gap:36px;align-items:center}
.hero h1.t-xl{font-size:clamp(1.9rem,3.9vw,3.3rem);max-width:15ch;margin:20px 0 18px}
.hero .lead{font-size:1.02rem;max-width:46ch}
.hero .ctas{margin-top:30px}
.hero-img{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background:var(--ink);box-shadow:0 34px 90px -34px rgba(238,161,5,.28);aspect-ratio:4/3}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:900px){.hero{min-height:540px;display:flex;align-items:center}.hero .wrap{width:100%}.hero-txt{max-width:60ch}}
@media(max-width:820px){.hero{padding:44px 0 40px;min-height:0}.hero-img{aspect-ratio:16/10}}

/* ── bloques 01/02: cabecera (texto | puntos) y el lienzo a TODO el ancho ── */
.bq-cab{display:grid;gap:22px 48px;align-items:end}
.bloque .lienzo{margin-top:30px}
@media(min-width:900px){
  .bq-cab{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .bloque h2{max-width:none;font-size:clamp(1.7rem,3vw,2.6rem)}
  .bq-n{font-size:clamp(3rem,6vw,4.6rem)}
  .bq-lista.mini{margin-top:0}
}
.lienzo .lb{font-size:16px}
.lienzo .sb{font-size:13px}

/* ── patron de fondo. Rejilla fina (graph paper) en las secciones normales y puntos
   en las alternas, a 4-6% de blanco: se nota la textura, no compite con el texto.
   Las declaraciones con foto no llevan patron. ── */
.section,.bloque{position:relative;background-image:
  radial-gradient(60% 55% at 85% 0%,rgba(238,161,5,.07),transparent 65%),
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px}
.bloque.alt,.section.ink{background-color:var(--ink);background-image:
  radial-gradient(60% 55% at 15% 100%,rgba(238,161,5,.07),transparent 65%),
  radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);
  background-size:auto,22px 22px}
.section.conFoto{background-image:none}
.lienzo{background-color:rgba(6,18,43,.92)}

/* ═══ páginas de búsqueda (14-oct-2026): misma piel que la portada, sin recuadros ═══ */
.miga{display:flex;gap:10px;align-items:center;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-size:.72rem}
.miga a:hover{color:var(--accent)}.miga i{font-style:normal;color:var(--faint)}
.hero.p h1{margin:30px 0 26px;max-width:18ch;font-size:clamp(2.1rem,5vw,4.2rem)}
.hero.p .lead b{color:var(--fg)}
.sec{padding:84px 0;border-bottom:1px solid var(--rule)}.sec.ink{background:var(--ink)}
.sec .kicker{display:block;margin-bottom:22px}
.dos{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:end}
.dos p{color:var(--muted);font-size:1.08rem;line-height:1.6;max-width:52ch}.dos p b{color:var(--fg);font-weight:500}
.t-l .ac,.t-m .ac{color:var(--accent)}
/* pasos: una línea fina con puntos, el primero en dorado */
.pasosl{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.pasosl li{position:relative;padding:30px 18px 0 0;font-size:.95rem;line-height:1.4;color:var(--fg)}
.pasosl li span{display:block;font-size:.68rem;letter-spacing:.2em;color:var(--faint);margin-bottom:8px}
.pasosl li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%;background:var(--navy);border:1px solid rgba(255,255,255,.6);z-index:1}
.pasosl li:first-child::before{background:var(--accent);border-color:var(--accent)}
.pasosl li::after{content:"";position:absolute;left:9px;right:0;top:7.5px;height:1px;background:var(--rule)}
.pasosl li:last-child::after{display:none}
.incl{margin:56px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--rule)}
.incl div{padding:22px 0;border-bottom:1px solid var(--rule)}
.incl dt{font-weight:500;margin-bottom:6px}.incl dd{margin:0;color:var(--muted);line-height:1.55}
/* precios: filas con el importe en dorado */
.precios{margin-top:40px;border-top:1px solid rgba(255,255,255,.5)}
.precios div{display:grid;grid-template-columns:1fr 1.1fr 1.6fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.precios b{font-weight:500;font-size:1.05rem}.precios strong{color:var(--accent);font-weight:600;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em}
.precios p{color:var(--muted);line-height:1.55}
.nota-p{margin-top:20px;color:var(--faint);font-size:.9rem;max-width:70ch}
/* banda de la guía */
.banda{display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center}
.banda p{color:var(--muted);margin-top:16px;max-width:52ch;line-height:1.6}
/* preguntas */
.faq{margin-top:30px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-size:1.08rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;color:var(--accent);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 24px;max-width:70ch;line-height:1.6}
.rel{display:flex;gap:34px;flex-wrap:wrap;margin-top:8px}
.rel a{border-bottom:1px solid var(--rule);padding-bottom:4px;font-size:.95rem}.rel a:hover{color:var(--accent);border-color:var(--accent)}
/* pie con las páginas */
.foot-in.ancho{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
.foot nav b{font-size:.68rem;letter-spacing:.22em;color:var(--faint);font-weight:500;margin-bottom:4px}
/* guía */
.guia-g{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.guia-g ul{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--rule)}
.guia-g li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--muted);display:flex;gap:14px}
.guia-g li span{color:var(--accent);font-size:.75rem;letter-spacing:.15em;min-width:22px;padding-top:3px}
.campo select{background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:10px;color:var(--fg);padding:14px 16px;font:inherit}
.campo select option{color:#000}
.ok-g{display:none;margin-top:30px;padding-top:26px;border-top:1px solid var(--accent)}
.ok-g.v{display:block}.ok-g a{color:var(--accent);border-bottom:1px solid var(--accent)}
.err-g{display:none;color:#ffb4a8;margin-top:12px}.err-g.v{display:block}
@media(max-width:900px){
  .dos,.banda,.guia-g{grid-template-columns:1fr;gap:28px}
  .incl{grid-template-columns:1fr}
  .precios div{grid-template-columns:1fr;gap:6px}
  .pasosl{grid-template-columns:1fr}.pasosl li{padding:0 0 22px 28px}.pasosl li::before{top:4px}
  .pasosl li::after{left:4px;right:auto;top:14px;bottom:-4px;width:1px;height:auto}
  .foot-in.ancho{grid-template-columns:1fr 1fr}
  .sec{padding:60px 0}
}