/* Álex Cabrera · páginas interiores con el lenguaje de "la pizarra"
   Se carga después de home.css. Viste las clases que ya usan las páginas (servicios,
   cómo trabajo, sobre mí, contacto, dossier, legales) sin cambiar su contenido. */

/* nombres de color antiguos que quedan en estilos en línea */
:root{--acc:var(--blue-d);--acc2:var(--blue);--navy:var(--steel-lo);--navy2:var(--steel);--navy3:var(--steel);--mut:var(--ink2);--mutD:var(--ink2);--lineD:var(--line)}

/* ---------- tipografía ---------- */
.d1,.d2{font-stretch:68%;font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;text-wrap:balance}
.d1{font-size:clamp(46px,7.2vw,100px)!important}
.d2{font-size:clamp(36px,5vw,72px)}
.d3{font-size:clamp(26px,3vw,40px);font-weight:800;font-stretch:84%;line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
.h4{font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.005em}
.small{font-size:14.5px}
.acc{color:var(--blue)}
.d3.acc,.d3 .acc{color:var(--blue-d)}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d)}
/* la etiqueta que solo repite el título de debajo sobra */
.eyebrow:has(+h1),.eyebrow:has(+h2){display:none}
.lead{max-width:62ch}
.crumbs{font-size:14px;color:var(--ink2);margin-bottom:22px}
.crumbs a{text-decoration:underline;text-underline-offset:.18em;text-decoration-color:rgba(18,22,29,.3)}

/* ---------- botones heredados ---------- */
.btn-p{background:var(--blue);color:#fff}
.btn-g{border:1.5px solid rgba(18,22,29,.24);color:var(--ink)}
.btn svg{transition:transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .btn-p:hover{background:#1B6FFF}
  .btn-g:hover{background:rgba(18,22,29,.05);border-color:rgba(18,22,29,.4)}
  .btn-p:hover svg,.btn-g:hover svg{transform:translateX(3px)}
  .crumbs a:hover{color:var(--blue-d)}
}

/* ---------- secciones: pared y tablero se alternan ---------- */
.light{background:var(--board)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,84px);align-items:start}
@media(max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}

/* ---------- cabecera de página ---------- */
.sv-hero{padding:calc(var(--nav) + clamp(28px,5vw,64px)) 0 clamp(48px,7vw,88px)}
.sv-hero h1{max-width:1040px}
.sv-hero .num{display:none}
.sv-hero .q{font-size:clamp(23px,2.7vw,36px);font-weight:750;font-stretch:88%;line-height:1.14;letter-spacing:-.012em;max-width:26ch;margin-top:22px;text-wrap:balance}
/* en los servicios, el número es la chapa de la taquilla */
.svc .sv-hero .num{display:block;width:fit-content;margin:0 0 18px max(var(--gut),calc((100vw - var(--w)) / 2 + var(--gut)));font-weight:800;font-size:17px;line-height:1;color:#0E1726;background:linear-gradient(180deg,#D5DEEA,#93A2B6);padding:7px 12px 6px;border-radius:3px;box-shadow:0 1px 2px rgba(18,32,56,.45);font-variant-numeric:tabular-nums}
.svc .sv-hero .num::before{content:"Taquilla ";font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.pricebar{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.pricebar small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue-d);margin-bottom:4px}
.pricebar>div:first-child>b{font-size:clamp(40px,4.6vw,62px);font-weight:800;font-stretch:72%;line-height:1;font-variant-numeric:tabular-nums}
.pricebar .t{color:var(--ink2);font-size:15.5px;line-height:1.45}
.pricebar .t b{color:var(--ink)}

/* ---------- la idea clave: una frase a rotulador sobre el tablero ---------- */
.pin{background:var(--board);border-block:1px solid var(--line)}
.pin .stick{padding:clamp(64px,9vw,128px) 0}
.scrub{font-size:clamp(34px,5.4vw,78px);font-weight:800;font-stretch:68%;text-transform:uppercase;line-height:.94;max-width:1060px;text-wrap:balance}
.scrub em{font-style:normal;color:var(--blue);background:linear-gradient(180deg,transparent 78%,rgba(10,98,246,.2) 78%)}
.light+.pin,.pin+.light{border-top:0}
.big-pull{font-size:clamp(28px,3.6vw,50px);font-weight:800;font-stretch:76%;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.big-pull em{font-style:normal;color:var(--blue-d)}

/* ---------- piezas de contenido ---------- */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:22px}
.flow span{font-size:13px;font-weight:700;letter-spacing:.08em;padding:9px 14px;border-radius:999px;border:1.5px solid rgba(18,22,29,.28);background:var(--board)}
.flow span.hl{background:var(--blue);border-color:var(--blue);color:#fff}
.flow i{font-style:normal;font-weight:700;color:var(--blue-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{font-size:15px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid rgba(10,98,246,.35);background:rgba(10,98,246,.07)}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;counter-reset:i;margin-top:36px;list-style:none}
.incl li{counter-increment:i;display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);font-weight:600;line-height:1.4}
.incl li::before{content:counter(i,decimal-leading-zero);flex:none;width:26px;margin-top:2px;font-size:14px;font-weight:800;color:var(--blue-d);font-variant-numeric:tabular-nums}
@media(max-width:720px){.incl{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 28px}
.light .card{background:var(--wall)}
/* la tarjeta oscura es una puerta de taquilla: acero y texto claro */
.card-d{background:linear-gradient(165deg,var(--steel-hi),var(--steel) 45%,var(--steel-lo));color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:26px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 30px -26px rgba(18,32,56,.6)}
.card-d .mut{color:#B4C0D0}
.card-d .acc,.card-d .eyebrow{color:var(--sky)}
.card-d .big-pull em{color:var(--sky)}
.scope{border:1.5px solid rgba(10,98,246,.45);background:rgba(10,98,246,.07)!important;border-radius:6px;padding:22px 26px;margin-top:30px}
.vs{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:28px}
.vs div{border-radius:6px;padding:26px 28px;border:1.5px solid rgba(18,22,29,.24)}
.vs div:last-child{background:var(--blue);border-color:var(--blue)}
.vs small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.vs b{display:block;margin-top:8px;font-size:clamp(26px,3vw,40px);font-weight:800;font-stretch:76%;line-height:1.02}
@media(max-width:620px){.vs{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:38px}
.tile{background:linear-gradient(165deg,var(--steel-hi),var(--steel) 45%,var(--steel-lo))!important;color:#fff;border-radius:6px;padding:26px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.tile>b{display:block;font-size:clamp(60px,6.4vw,92px);font-weight:800;font-stretch:68%;line-height:.86;color:var(--sky);white-space:nowrap;font-variant-numeric:tabular-nums}
.tile>span{display:block;margin-top:14px;font-weight:700;line-height:1.3}
.tile small{display:block;margin-top:6px;font-size:14.5px;line-height:1.4;color:#B4C0D0}
.tile.blue{background:var(--blue)!important}
.tile.blue>b{color:#fff}.tile.blue small{color:rgba(255,255,255,.88)}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}

/* ---------- inversión ---------- */
.invest{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;padding:clamp(28px,4.4vw,52px);border-radius:6px;color:#fff;background:linear-gradient(165deg,var(--steel-hi),var(--steel) 45%,var(--steel-lo));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 34px -28px rgba(18,32,56,.6)}
.invest small{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--sky)}
.invest b{display:block;margin-top:6px;font-size:clamp(54px,7.4vw,104px);font-weight:800;font-stretch:68%;line-height:.92;font-variant-numeric:tabular-nums}
.invest b span{font-size:.28em;font-stretch:100%;font-weight:600;color:#B4C0D0}
.invest .t{text-align:right;line-height:1.6;color:#B4C0D0}
.invest .t strong{display:block;color:#fff}
@media(max-width:720px){.invest{grid-template-columns:1fr}.invest .t{text-align:left}}
.tnote{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14.5px;font-weight:700;color:var(--red-d)}
.tnote i{display:none}
.tax{font-size:14px;color:var(--ink2);margin-top:6px}
.warns{grid-template-columns:1fr 1fr}
.warn .dot{display:none}
@media(max-width:820px){.warns{grid-template-columns:1fr}}

/* ---------- preguntas (en páginas de servicio van a una columna) ---------- */
.faq{max-width:780px;margin-top:22px}
.faq summary::after{content:none}

/* ---------- cómo trabajo: el método paso a paso ---------- */
.method{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,92px);align-items:start}
.method .side{position:sticky;top:calc(var(--nav) + 32px)}
.steps{position:relative;padding-left:44px}
.steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(180deg,rgba(18,22,29,.3) 0 6px,transparent 6px 12px)}
.steps .fill{display:none}
.steps .step{display:block;min-height:0;position:relative;padding:0 0 40px;gap:0;opacity:1}
.steps .step::before{content:"";position:absolute;left:-41px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 3px rgba(18,32,56,.3)}
.steps .step small{font-size:13.5px;font-weight:800;letter-spacing:.1em;color:var(--blue-d);font-variant-numeric:tabular-nums}
.steps .step h3{font-size:clamp(26px,2.8vw,38px);font-stretch:72%;text-transform:uppercase;line-height:1;margin:2px 0 6px}
.steps .step p{color:var(--ink2);max-width:44ch}
@media(max-width:900px){.method{grid-template-columns:minmax(0,1fr)}.method .side{position:static}}
.nofor{list-style:none;margin-top:14px}
.nofor li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--line);font-weight:600}
.nofor li::before{content:"";position:absolute;left:2px;top:15px;width:20px;height:20px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23D92D2D' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6C13 12 21 21 28 28M28 6C21 13 12 21 6 28'/%3E%3C/svg%3E")}
.nofor li[style*="padding-left:0"]::before{content:none}
.logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.logos .logo-chip.txt b{font-size:17px;font-weight:700}
.disc{font-size:14px;color:var(--ink2);margin-top:14px;max-width:66ch}

/* ---------- sobre mí ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,88px);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--board);border:8px solid #CBD3DC;box-shadow:inset 0 1px 0 #fff,var(--shadow)}
.portrait .ring{position:absolute;width:76%;aspect-ratio:1;left:12%;top:11%;border-radius:50%;background:var(--blue)}
.portrait img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:95%;width:auto;max-width:none}
.quote{font-weight:750;font-stretch:88%;line-height:1.2;letter-spacing:-.01em;max-width:30ch}
@media(max-width:900px){.about{grid-template-columns:minmax(0,1fr)}.portrait{max-width:380px}}
.traj{padding:var(--sec) 0;min-height:0!important}
.traj .bg{display:none}
.traj-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,72px);align-items:center}
.big5{font-size:clamp(120px,18vw,250px);font-weight:800;font-stretch:66%;line-height:.78;font-variant-numeric:tabular-nums}
.big5 span{color:var(--blue)}
.facts{display:grid;gap:18px}
.fact{display:flex;gap:20px;align-items:center}
.fact img{flex:none;width:180px;height:136px;object-fit:cover;background:#fff;padding:6px;border-radius:4px;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.fact+.fact img{transform:rotate(1deg)}
.fact b{display:block;font-size:clamp(19px,1.8vw,23px);font-weight:800;font-stretch:86%;line-height:1.15}
.fact small{display:block;margin-top:5px;font-size:15.5px;color:var(--ink2);line-height:1.45}
@media(max-width:900px){.traj-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.fact img{width:100px;height:80px}}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,84px);align-items:start}
.contact-grid .form{max-width:none}
.form textarea{font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:#fff;border:1px solid rgba(18,22,29,.22);border-radius:10px;padding:12px 14px;width:100%;min-height:150px;resize:vertical}
.form textarea::placeholder{color:#677386}
.form textarea:focus-visible,.form select:focus-visible{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(10,98,246,.18)}
.form-ok{margin-bottom:6px;font-weight:700}
.chan{display:grid;gap:10px}
.chan .eyebrow{margin-bottom:4px}
.chan>a{display:flex;align-items:center;gap:16px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:6px;transition:border-color .2s,transform .16s var(--ease-out)}
.chan>a:active{transform:scale(.985)}
.chan .ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.chan .ic svg{width:22px;height:22px;fill:#fff}
.chan b{display:block}
.chan small{font-size:14.5px;color:var(--ink2)}
.chan .card-d small,.chan .card-d .mut{color:#B4C0D0}
@media(hover:hover) and (pointer:fine){.chan>a:hover{border-color:var(--blue)}}
@media(max-width:820px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- legales ---------- */
.legal{max-width:820px}
.legal h2{font-size:clamp(22px,2.2vw,28px);font-stretch:84%;margin:38px 0 10px}
.legal p,.legal li{color:var(--ink2);margin-bottom:10px;max-width:68ch}
.legal ul{padding-left:20px}
.legal a{text-decoration:underline;text-underline-offset:.18em}
.pending{background:#FFDD55;color:var(--ink);padding:1px 6px;border-radius:3px;font-weight:700}

/* ---------- cierre de página: el azul a página completa ---------- */
.final{background:var(--blue);color:#fff;padding:clamp(80px,11vw,152px) 0}
.final h2{font-size:clamp(38px,6vw,92px);max-width:1100px}
.final h2 .acc{display:block;color:#061126}
.final .lead{color:rgba(255,255,255,.9);margin:24px 0 0!important;max-width:36ch!important;font-size:clamp(19px,1.7vw,23px)}
.final .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.final .btn-wa{background:#fff;color:var(--ink)}
.final .btn-wa svg{fill:#12B755}
.final .btn-g{border-color:rgba(255,255,255,.6);color:#fff}
.final .mut{color:rgba(255,255,255,.85)}
.final ::selection{background:#061126}
.final :focus-visible{outline-color:#fff}
@media(hover:hover) and (pointer:fine){.final .btn-wa:hover{background:#EDF1F5}.final .btn-g:hover{background:rgba(255,255,255,.14);border-color:#fff}}
.nextsv{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:40px}
.nextsv a{display:flex;flex-direction:column;gap:2px}
.nextsv small{font-size:14px;color:var(--ink2)}
.nextsv b{font-size:clamp(22px,2.4vw,30px);font-weight:800;font-stretch:76%;text-transform:uppercase;line-height:1.05}
@media(hover:hover) and (pointer:fine){.nextsv a:hover b{color:var(--blue-d)}}

/* ---------- 404 ---------- */
.hero.lost{min-height:100svh;display:flex;align-items:center;padding:40px 0}

/* la sección de inversión venía pegada a la anterior: ahora cambia de fondo y necesita su aire */
.sec.light[style*="padding-top:0"]{padding-top:clamp(48px,6vw,84px)!important}
.sv-hero h1 .acc{display:block}
.hero.lost .wrap{width:100%}
p.q{font-size:clamp(23px,2.7vw,36px);font-weight:750;font-stretch:88%;line-height:1.14;letter-spacing:-.012em;text-wrap:balance}