/* =========================================================
   InvadX · "la web se construye frente a vos"
   Editor (pino), plano técnico (azul), terminal (señal), navegador (papel).
   ========================================================= */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2-variations"),url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument";src:url("../fonts/instrument.woff2") format("woff2-variations"),url("../fonts/instrument.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/mono.woff2") format("woff2-variations"),url("../fonts/mono.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Instrument fallback";src:local("Arial");size-adjust:98%;ascent-override:92%;descent-override:24%}
@font-face{font-family:"Bricolage fallback";src:local("Arial");size-adjust:94%;ascent-override:96%;descent-override:26%}

:root{
  --pine:#0A1A35; --pine-2:#13294F; --pine-3:#21406F;
  --paper:#F4F5F7; --mist:#E6E9ED; --white:#FFFFFF;
  --blue:#1E4ED8; --blue-2:#1A44C2;
  --sky:#8FB0FF; --sky-2:#7FA3FF;
  --signal:#FF6B2C; --mint:#8FB0FF; --sun:#FF9B6E;
  --max:1200px; --pad:max(var(--m),calc((100% - var(--max))/2));
  --f-display:"Bricolage","Bricolage fallback",system-ui,sans-serif;
  --f-body:"Instrument","Instrument fallback",system-ui,sans-serif;
  --f-code:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --m:clamp(20px,3vw,40px);
  --gap:clamp(12px,1.6vw,24px);
  --radius:14px;
  --t-small:clamp(.9rem,.86rem + .15vw,1rem);
  --t-body:clamp(1rem,.97rem + .15vw,1.0938rem);
  --t-mid:clamp(1.2rem,1.08rem + .45vw,1.55rem);
  --t-big:clamp(2rem,1.45rem + 2.2vw,3.4rem);
  --t-huge:clamp(2.6rem,1.4rem + 3.6vw,4.75rem);
}
.ch{--bg:var(--paper);--fg:var(--pine);--fg-2:#46546B;--accent:var(--blue);--btn:var(--blue);--btn-fg:#fff;--tile:var(--mist);background:var(--bg);color:var(--fg);position:relative}
.ch--pine{--bg:var(--pine);--fg:#fff;--fg-2:#AFC0DA;--accent:var(--signal);--btn:var(--signal);--btn-fg:#0A1A35;--tile:var(--pine-2)}
.ch--blue{--bg:var(--blue);--fg:#fff;--fg-2:#DCE6FF;--accent:#fff;--btn:var(--signal);--btn-fg:#0C0F12;--tile:var(--blue-2)}
.ch--sky{--bg:#fff;--fg:var(--pine);--fg-2:#46546B;--accent:var(--blue);--btn:var(--pine);--btn-fg:#fff;--tile:var(--paper)}
.ch--signal{--bg:#0D2142;--fg:#fff;--fg-2:#AFC0DA;--accent:var(--signal);--btn:var(--signal);--btn-fg:#0A1A35;--tile:#17305B}
.ch--paper{--bg:var(--paper)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--pine-3) var(--paper);-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--pine);font-family:var(--f-body);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;caret-color:var(--signal);overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:.98;letter-spacing:-.035em;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
::selection{background:var(--signal);color:#0C0F12}
:focus-visible{outline:3px solid var(--accent,var(--blue));outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--pine-3);border-radius:12px;border:3px solid var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--signal);color:var(--pine);padding:.8em 1.2em;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.icon{width:1.2em;height:1.2em;flex:none}
.tnum{font-variant-numeric:tabular-nums}
.h2{font-size:var(--t-big);font-stretch:88%;letter-spacing:-.04em}
.lead{font-size:var(--t-mid);line-height:1.3;max-width:34ch}
.muted{color:var(--fg-2)}
.chapter{padding:clamp(80px,8vw,136px) var(--pad)}
.chapter--auto{min-height:0}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-weight:600;font-size:var(--t-body);text-decoration:none;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform .16s var(--ease-out),color .25s ease;user-select:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path .5s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--line{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn .icon{width:1.1em;height:1.1em}
@media (hover:hover) and (pointer:fine){.btn:hover::before{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}.btn:hover{color:var(--bg)}}
.textlink{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em;transition:color .2s ease}
.textlink:hover{color:var(--accent)}

/* ---------- Barra superior (color del capítulo debajo) ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;view-transition-name:site-header;background:var(--hb,var(--pine));color:var(--hf,#fff);transition:transform .45s var(--ease-drawer),background-color .35s ease,color .35s ease}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px;padding-inline:var(--pad)}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.65rem;letter-spacing:-.04em;font-stretch:85%;line-height:1}
/* InvadX: logotipo vectorial elegido, X y órbitas con animación CSS independiente. */
.brand{display:inline-flex;align-items:center;flex:none;line-height:0;text-decoration:none}
.brand__logo{display:block;width:clamp(150px,12.9vw,182px);height:auto;overflow:visible;color:inherit}
.brand__glyph,.brand__orbits{transform-box:fill-box;transform-origin:center;will-change:transform}
.brand__glyph{transition:transform .95s cubic-bezier(.22,.8,.22,1)}
.brand__orbits{transition:transform 1.8s ease-out}
@media (hover:hover){.brand:hover .brand__glyph{transform:rotate(360deg)}.brand:hover .brand__orbits{transform:rotate(-33deg)}}
.brand:focus-visible .brand__glyph{transform:rotate(360deg)}
.brand:focus-visible .brand__orbits{transform:rotate(-33deg)}
.foot .brand__logo{width:200px}
@media(max-width:600px){.brand__logo{width:145px}.foot .brand__logo{width:170px}}
@media(prefers-reduced-motion:reduce){.brand__glyph,.brand__orbits{transition:none!important;transform:none!important}}

.nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem)}
.nav a:not(.btn){text-decoration:none;font-weight:500;position:relative;padding:.4em 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:.15em;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.site-header .btn{--btn:var(--hbtn,var(--signal));--btn-fg:var(--hbtnf,var(--pine));--fg:var(--hf,#fff);--bg:var(--hb,var(--pine));min-height:44px;padding:0 1.2em;font-size:var(--t-small)}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:46px;padding:0;flex-shrink:0;border-radius:14px;border:0;background:var(--hbtn,var(--signal));color:var(--hbtnf,var(--pine));cursor:pointer;transition:transform .16s var(--ease-out)}
.menu-btn svg{display:block;width:24px;height:24px}
.menu-btn:active{transform:scale(.95)}
@media (max-width:1279px), (hover:none) and (pointer:coarse){.nav{display:none}.menu-btn{display:inline-flex}}
.mobile-menu{position:fixed;inset:0;z-index:150;background:var(--pine);color:#fff;padding:100px var(--m) 32px;display:none;flex-direction:column;justify-content:space-between;gap:2rem;overflow:auto}
.mobile-menu.is-open{display:flex}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font-family:var(--f-display);font-size:clamp(2.6rem,12vw,4rem);font-weight:700;letter-spacing:-.04em;font-stretch:86%;text-decoration:none;line-height:1.08}
.mobile-menu nav a:hover{color:var(--signal)}
@media (prefers-reduced-motion:no-preference){
  .mobile-menu.is-open{animation:menu-in .6s var(--ease-drawer) both}
  .mobile-menu.is-open nav a{animation:fade-up .6s var(--ease-out) both;animation-delay:calc(var(--k,0)*50ms + 120ms)}
}
@keyframes menu-in{from{clip-path:circle(0px at var(--ox,90%) var(--oy,36px))}to{clip-path:circle(150vmax at var(--ox,90%) var(--oy,36px))}}
.mobile-menu .close{position:absolute;top:14px;right:var(--m);height:44px;padding:0 1.1em;border-radius:999px;border:0;background:var(--signal);color:var(--pine);font-weight:600;cursor:pointer}
.mobile-menu .meta{display:grid;gap:.4rem}
.mobile-menu .meta a{text-decoration:none}

/* ---------- Ventanas (editor, terminal, navegador): fragmentos de interfaz ---------- */
.win{border-radius:12px;overflow:clip;background:#102447;color:#E6ECF5;font-family:var(--f-code);font-size:clamp(12.5px,.62rem + .32vw,15px);line-height:1.7;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)} /* taste-skill-ignore: ventana flotante */
.win__bar{display:flex;align-items:center;gap:.5rem;height:40px;padding:0 14px;background:#0B1A36;color:#9AACC8;font-size:12.5px}
.win__bar i{width:11px;height:11px;border-radius:50%;background:#2B4675}
.win__tabs{display:flex;gap:2px;margin-left:12px;align-self:stretch}
.win__tabs span{display:flex;align-items:center;padding:0 14px;color:#97A1AD}
.win__tabs span.on{background:var(--pine-2);color:#fff}
.win__title{margin-left:auto;margin-right:auto;color:#97A1AD}
.tok-t{color:#8FB0FF}.tok-a{color:#C6D3E8}.tok-s{color:#FF9B6E}.tok-c{color:#8FA3C2}.tok-k{color:#FF9B6E}.tok-n{color:#FF9B6E}.tok-ok{color:#8FB0FF}.tok-p{color:var(--signal)}

/* Hero: editor que escribe la web */
.hero{min-height:min(100svh,920px);padding:120px var(--pad) clamp(48px,7vh,88px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem;align-items:center}
.hero-copy{grid-column:1/7}
.hero h1{font-size:var(--t-huge);line-height:.92;letter-spacing:-.045em;font-weight:760;font-stretch:86%}
.lines .line{display:block;overflow:clip;padding-bottom:.09em;margin-bottom:-.09em}
.lines [data-line]{display:block}
.h1-sub{display:block;font-family:var(--f-body);font-size:var(--t-mid);font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--sky);margin-top:1rem}
.hero .standfirst{font-size:var(--t-mid);line-height:1.3;color:var(--fg-2);margin:1.4rem 0 2rem;max-width:30ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem}
.namer{margin-top:2rem;display:grid;gap:.5rem;max-width:420px}
.namer label{font-size:var(--t-small);font-weight:600;color:var(--fg-2)}
.namer input{min-height:52px;border-radius:12px;border:2px solid var(--pine-3);background:var(--pine-2);color:#fff;padding:0 1rem;font-size:16px;transition:border-color .2s ease}
.namer input::placeholder{color:#8FA3C2}
.namer input:focus{outline:none;border-color:var(--signal)}
.ide{grid-column:7/13;display:grid;gap:14px}
.code{display:grid;grid-template-columns:auto 1fr;padding:18px 0;min-height:var(--code-h,0)}
.code .gutter{padding:0 14px 0 18px;color:#7F94B6;text-align:right;user-select:none}
.code pre{margin:0;padding-right:18px;overflow:hidden;font:inherit;white-space:pre}
.code .ln{display:block}
.code .ln{position:relative;width:fit-content;max-width:100%}
@media (prefers-reduced-motion:no-preference){
  .js [data-ide] .code .ln::before{content:"";position:absolute;inset:0 -2px 0 0;background:var(--pine-2);transform-origin:right;z-index:1}
  .js [data-ide] .code .ln.on::before{transform:scaleX(0);transition:transform calc(var(--len,20)*9ms) steps(var(--len,20))}
}
.code .ln.cur::after{content:"";display:inline-block;width:.6em;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--signal)}
@media (prefers-reduced-motion:no-preference){.code .ln.cur::after{animation:blink 1s steps(2) infinite}}
@keyframes blink{50%{opacity:0}}
.win__status{display:flex;justify-content:space-between;gap:1rem;padding:6px 14px;background:var(--blue);color:#fff;font-size:12px}
.preview{border-radius:12px;overflow:clip;background:#fff;color:var(--pine);font-family:var(--f-body);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} /* taste-skill-ignore: ventana flotante */
.preview .win__bar{background:var(--mist);color:#5A6472}
.preview .url{flex:1;max-width:360px;margin:0 auto;height:24px;border-radius:999px;background:#fff;display:flex;align-items:center;gap:.4rem;padding:0 12px;font-family:var(--f-code);font-size:11.5px;color:#3C5450;white-space:nowrap;overflow:hidden}
.preview .url .icon{width:12px;height:12px;color:#17955A}
.pv{padding:clamp(16px,2.4vw,28px);display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:center}
.pv-nav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}
.pv-nav span:last-child{display:flex;gap:12px;font-weight:500;color:#5A706B;font-size:12px}
.pv h3{font-size:clamp(1.3rem,.9rem + 1.3vw,2.2rem);letter-spacing:-.035em;line-height:1;overflow-wrap:anywhere}
.pv p{font-size:13px;color:#3C5450;margin:.5rem 0 .8rem}
.pv .pv-btn{display:inline-block;background:var(--signal);color:var(--pine);font-weight:700;font-size:12px;padding:.55em 1em;border-radius:999px}
.pv .pv-img{aspect-ratio:4/3;border-radius:10px;background:var(--pine);position:relative;overflow:hidden}
.pv .pv-img::before{content:"";position:absolute;left:12%;right:12%;bottom:0;height:62%;border-radius:999px 999px 0 0;background:var(--blue)}
.pv .pv-img::after{content:"";position:absolute;right:16%;top:16%;width:18%;aspect-ratio:1;border-radius:50%;background:var(--signal)}
@media (prefers-reduced-motion:no-preference){
  .js [data-at]{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .6s var(--ease-out)}
  .js [data-at].on{opacity:1;transform:none}
}
@media (max-width:1000px){.hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding-top:110px}.hero-copy,.ide{grid-column:1/-1}}
.hero > *,.ide,.speed > *,.plan-grid > *,.gitlog > *{min-width:0}
.code{overflow:hidden}
@media (max-width:520px){.pv{grid-template-columns:1fr}.pv .pv-img{display:none}.code .gutter{padding-left:12px}}
@media (prefers-reduced-motion:no-preference){
  .js .lines .line{position:relative}
  .js .lines .line::after{content:"";position:absolute;inset:0 0 -.12em;background:var(--bg);transform-origin:top;animation:line-cover .8s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*90ms + 80ms)}
  .js .hero .after-lines{opacity:0;transform:translateY(16px);animation:fade-up .7s var(--ease-out) forwards;animation-delay:.45s}
}
@keyframes line-cover{to{transform:scaleY(0)}}
@keyframes fade-up{to{opacity:1;transform:none}}

/* Hero de páginas internas: así te ve Google */
.hero--inner{min-height:86svh}
.hero--inner h1{font-size:clamp(2.4rem,1.4rem + 3vw,4.25rem)}
.hero--inner .standfirst{max-width:34ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:var(--t-small);color:var(--fg-2);margin:0 0 1.4rem;list-style:none}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6}
.serp-wrap{grid-column:8/13;display:grid;gap:14px}
.serp{background:#fff;color:#202124;border-radius:12px;padding:20px 22px;font-family:var(--f-body);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} /* taste-skill-ignore: ventana flotante */
.serp .src{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.serp .fav{width:28px;height:28px;border-radius:50%;background:var(--mist);display:grid;place-items:center}
.serp .fav svg{width:18px;height:18px;color:var(--blue)}
.serp .site{font-size:14px;line-height:1.25}.serp .site small{display:block;color:#4d5156;font-size:12.5px}
.serp .t{display:block;color:#1a0dab;font-size:20px;line-height:1.3;margin:2px 0 4px}
.serp .d{color:#4d5156;font-size:14px;line-height:1.55;margin:0}
.serp-cap{font-size:var(--t-small);color:var(--fg-2);margin:0}
@media (max-width:1000px){.serp-wrap{grid-column:1/-1}}

/* ---------- Terminal: velocidad medida ---------- */
.speed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem;align-items:center}
.speed .copy{grid-column:1/6}
.speed .copy p{margin-top:1.2rem}
.readout{display:block;font-family:var(--f-display);font-size:clamp(3.4rem,2rem + 4.4vw,6.25rem);font-weight:780;line-height:.85;letter-spacing:-.05em;font-stretch:78%;font-variant-numeric:tabular-nums;margin-top:1.6rem}
.readout small{font-size:.32em;margin-left:.12em;letter-spacing:-.02em;font-stretch:100%}
.speed .term{grid-column:6/13}
.term .body{padding:18px 20px 22px;min-height:290px}
.term .tl{display:flex;gap:1.2em;white-space:pre-wrap}
.term .tl b{font-weight:500;min-width:15ch}
@media (prefers-reduced-motion:no-preference){.js .term .tl{opacity:0}.js .term .tl.on{opacity:1}}
@media (max-width:900px){.speed{grid-template-columns:minmax(0,1fr)}.speed .copy,.speed .term{grid-column:1/-1}.term .tl{flex-wrap:wrap;gap:0 .8em}.term .tl b{min-width:0}}

/* ---------- Servicios: cartel con vista previa (se mantiene) ---------- */
.poster{padding:clamp(80px,8vw,136px) var(--pad)}
.poster .h2{margin-bottom:clamp(32px,4vw,56px);font-size:var(--t-mid);letter-spacing:-.02em;font-stretch:95%}
.poster-list{list-style:none}
.poster-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1rem;text-decoration:none;padding:.06em 0}
.poster-list .name{font-family:var(--f-display);font-size:clamp(2.4rem,1rem + 4.6vw,5.6rem);font-weight:720;line-height:.95;letter-spacing:-.05em;font-stretch:82%;transition:color .3s ease,transform .6s var(--ease-out);display:inline-block}
.poster-list .detail{font-size:var(--t-body);font-variant-numeric:tabular-nums;text-align:right;color:var(--fg-2);max-width:30ch;transition:color .3s ease}
@media (hover:hover) and (pointer:fine){.poster-list a:hover .name{color:var(--accent);transform:translateX(.08em)}.poster-list a:hover .detail{color:var(--fg)}}
.poster-list a:focus-visible .name{color:var(--accent)}
.poster-foot{margin-top:clamp(32px,4vw,56px);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.poster-foot p{margin:0;max-width:52ch;color:var(--fg-2)}
@media (max-width:900px){.poster-list a{grid-template-columns:1fr;gap:6px;padding:0 0 26px}.poster-list .name{font-size:clamp(2.6rem,12vw,6rem)}.poster-list .detail{text-align:left;font-size:var(--t-small);max-width:none}}
.svc-preview{position:fixed;left:0;top:0;width:min(360px,28vw);aspect-ratio:480/340;z-index:60;pointer-events:none;border-radius:var(--radius);overflow:hidden;opacity:0;transform:translate3d(var(--px,0),var(--py,0),0) rotate(var(--rot,0deg));transition:opacity .2s ease;box-shadow:0 30px 60px -24px rgba(15,36,33,.5)} /* taste-skill-ignore: flota sobre la página */
.svc-preview.is-on{opacity:1}
.svc-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path .5s var(--ease-out)}
.svc-preview img.is-active{clip-path:inset(0)}
@media (hover:none),(pointer:coarse){.svc-preview{display:none}}

/* ---------- Plano técnico: anatomía de una web ---------- */
.plan{background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:32px 32px} /* taste-skill-ignore: es el plano técnico pedido */
.plan-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem;align-items:start}
.plan-grid .head{grid-column:1/-1;max-width:62rem}
.plan-grid .head p{margin-top:1.2rem}
.specimen{grid-column:1/8;position:sticky;top:100px}
.site-mock{background:#fff;color:var(--pine);border-radius:12px;overflow:visible;position:relative}
.site-mock .win__bar{background:var(--mist);color:#5A6472;border-radius:12px 12px 0 0}
.sm{padding:clamp(18px,3vw,36px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(14px,2vw,28px);align-items:center}
.sm-nav{grid-column:1/-1;display:flex;justify-content:space-between;font-weight:700}
.sm-nav span:last-child{display:flex;gap:14px;font-weight:500;color:#5A706B;font-size:14px}
.sm h4{margin:0;font-family:var(--f-display);font-size:clamp(1.4rem,1rem + 1.4vw,2.4rem);line-height:.98;letter-spacing:-.04em}
.sm p{font-size:14px;color:#3C5450;margin:.8rem 0 1rem}
.sm-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.2em;border-radius:999px;background:var(--signal);font-weight:700;font-size:14px}
.sm-img{aspect-ratio:4/3;border-radius:10px;background:var(--pine);position:relative;overflow:hidden}
.sm-img::before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:60%;border-radius:999px 999px 0 0;background:var(--blue)}
.sm-img::after{content:"";position:absolute;right:14%;top:14%;width:18%;aspect-ratio:1;border-radius:50%;background:var(--signal)}
.sm-foot{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sm-foot span{height:56px;border-radius:8px;background:var(--mist)}
[data-spec-el]{position:relative;transition:outline-color .2s ease}
[data-spec-el].is-inspect{outline:2px dashed var(--blue);outline-offset:4px}
[data-spec-el] .tag{position:absolute;left:-2px;top:-30px;z-index:3;white-space:nowrap;background:var(--blue);color:#fff;font-family:var(--f-code);font-size:12px;font-weight:500;line-height:1;padding:6px 8px;border-radius:5px;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .3s var(--ease-out);pointer-events:none}
[data-spec-el] .tag em{font-style:normal;color:var(--sky)}
[data-spec-el].is-inspect .tag{opacity:1;transform:none}
.specs{grid-column:8/13;list-style:none;display:grid;gap:8px}
.specs li{border-radius:var(--radius);background:var(--tile);padding:1.15rem 1.3rem;cursor:default;transition:background-color .25s ease,color .25s ease}
.specs li.is-on{background:#fff;color:var(--pine)}
.specs b{display:block;font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:.3rem}
.specs code{font-family:var(--f-code);font-size:.85em;color:#FFB08C}
.specs li.is-on code{color:var(--blue)}
.specs span{color:var(--fg-2);font-size:var(--t-small);display:block}
.specs li.is-on span{color:#3C5450}
@media (max-width:1000px){
  .specimen{grid-column:1/-1;position:relative;top:auto}
  .specs{grid-column:1/-1;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 8px;scroll-padding-inline:var(--pad);scrollbar-width:none;margin-top:-1rem}
  .specs::-webkit-scrollbar{display:none}
  .specs li{flex:0 0 min(82%,420px);scroll-snap-align:start;cursor:pointer;user-select:none}
  .spec-dots{grid-column:1/-1;display:flex;justify-content:center;gap:8px;margin-top:-1.4rem}
  .spec-dots span{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .35s var(--ease-out),background-color .25s ease}
  .spec-dots span.on{width:26px;background:#fff}
  .sm{grid-template-columns:1.1fr 1fr;padding:18px;gap:14px}
  .sm-nav span:last-child{display:none}
  .sm p{display:none}
  .sm-btn{min-height:40px;font-size:13px}
  [data-spec-el] .tag{font-size:11px;padding:5px 7px;top:-26px}
}
@media (min-width:1001px){.spec-dots{display:none}}

/* ---------- Proceso: historial de commits ---------- */
.gitlog{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.gitlog .head{grid-column:1/-1;margin-bottom:clamp(32px,5vw,64px)}
.gitlog .head p{margin-top:1.2rem}
.commits{grid-column:1/7;list-style:none;position:relative;padding-left:44px}
.commits::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--fg)}
.commit{position:relative;min-height:46vh;padding-bottom:2rem;opacity:.4;transition:opacity .4s ease}
.commit.is-on{opacity:1}
.commit::before{content:"";position:absolute;left:-41px;top:10px;width:19px;height:19px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 4px var(--fg);transition:background-color .3s ease} /* taste-skill-ignore: nodo del gráfico */
.commit.is-on::before{background:var(--signal)}
.commit .hash{font-family:var(--f-code);font-size:var(--t-small);color:var(--fg-2);margin:.2rem 0 .6rem}
.commit .hash em{font-style:normal;background:var(--signal);color:#0C0F12;border-radius:5px;padding:1px 6px;margin-left:.4rem}
.commit h3{font-size:clamp(1.6rem,1.2rem + 1.3vw,2.3rem);letter-spacing:-.035em;margin:0;font-stretch:90%}
.commit p{color:var(--fg-2);max-width:40ch;margin:0}
.commit .files{font-family:var(--f-code);font-size:var(--t-small);margin-top:.8rem;color:var(--fg)}
.commit .files span{color:var(--signal)}
.gitlog .stage-view{grid-column:8/13;position:sticky;top:120px}
.gitlog .stage-view p{font-size:var(--t-small);color:var(--fg-2);margin:.8rem 0 0}
@media (max-width:900px){.commits,.gitlog .stage-view{grid-column:1/-1}.gitlog .stage-view{position:relative;top:auto;margin-top:0;order:-1;margin-bottom:2.5rem}.gitlog .head{order:-2}.commit{min-height:0;opacity:1;padding-bottom:2.4rem}}
/* Navegador que se construye */
.browser{position:relative;width:100%;aspect-ratio:16/11;border-radius:12px;background:#fff;overflow:clip;container-type:inline-size;box-shadow:0 30px 60px -30px rgba(15,36,33,.45)} /* taste-skill-ignore: ventana flotante */
.browser__bar{display:flex;align-items:center;gap:4%;height:9%;padding:0 4%;background:var(--mist)}
.browser__bar i{width:2.2cqi;height:2.2cqi;border-radius:50%;background:#B9C8C4}
.browser__url{flex:1;height:52%;border-radius:999px;background:#fff;display:flex;align-items:center;gap:2cqi;padding:0 3cqi;font-family:var(--f-code);font-size:max(10px,2.4cqi);color:#3C5450;white-space:nowrap;overflow:hidden}
.browser__url .lock{width:2.8cqi;height:2.8cqi;min-width:10px;min-height:10px;color:#17955A;opacity:0;transition:opacity .4s ease}
.bb{position:absolute;border-radius:1.4cqi;background:var(--mist);transition:background-color .6s var(--ease-out),opacity .5s ease,outline-color .3s ease}
.bb--nav{left:6%;right:6%;top:15%;height:5%}
.bb--h1{left:6%;width:50%;top:26%;height:9%}
.bb--h1b{left:6%;width:34%;top:37%;height:9%}
.bb--p{left:6%;width:42%;top:51%;height:3.5%}
.bb--cta{left:6%;width:20%;top:60%;height:7%;border-radius:99px}
.bb--img{right:6%;width:34%;top:26%;height:41%}
.bb--c1,.bb--c2,.bb--c3{top:75%;height:17%;width:27%}
.bb--c1{left:6%}.bb--c2{left:36.5%}.bb--c3{left:67%}
.browser[data-stage="1"] .bb{background:transparent;outline:2px dashed #A9B2BD;outline-offset:-2px}
.browser[data-stage="2"] .bb--h1,.browser[data-stage="2"] .bb--h1b,.browser[data-stage="3"] .bb--h1,.browser[data-stage="3"] .bb--h1b,.browser[data-stage="4"] .bb--h1,.browser[data-stage="4"] .bb--h1b{background:var(--pine)}
.browser[data-stage="2"] .bb--cta,.browser[data-stage="3"] .bb--cta,.browser[data-stage="4"] .bb--cta{background:var(--signal)}
.browser[data-stage="2"] .bb--img,.browser[data-stage="2"] .bb--c2,.browser[data-stage="3"] .bb--img,.browser[data-stage="3"] .bb--c2,.browser[data-stage="4"] .bb--img,.browser[data-stage="4"] .bb--c2{background:var(--blue)}
.browser[data-stage="2"] .bb--p,.browser[data-stage="3"] .bb--p,.browser[data-stage="4"] .bb--p{background:#9DB4AE}
.browser[data-stage="4"] .lock{opacity:1}
.browser pre{position:absolute;inset:9% 0 0;margin:0;padding:6% 7%;background:var(--pine);color:#E6ECF5;font-family:var(--f-code);font-size:max(10px,2.4cqi);line-height:1.7;white-space:pre;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io)}
.browser[data-stage="3"] pre{clip-path:inset(0)}
.browser .launch{position:absolute;right:5%;bottom:5%;padding:1.6cqi 3cqi;border-radius:99px;background:var(--signal);color:var(--pine);font-weight:700;font-family:var(--f-code);font-size:max(10px,2.6cqi);opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .6s var(--ease-out)}
.browser[data-stage="4"] .launch{opacity:1;transform:none}

/* ---------- Equipo: whoami ---------- */
.team{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:3rem;align-items:start}
.team .head{grid-column:1/5}
.team .head p{margin-top:1.2rem}
.member{grid-column:span 4;display:grid;gap:14px}
.member:nth-of-type(2){margin-top:clamp(0px,8vw,120px)}
.member .photo{aspect-ratio:4/5;border-radius:var(--radius);overflow:clip;background:var(--tint)}
.member .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;transition:transform 1s var(--ease-out)}
@media (hover:hover){.member:hover .photo img{transform:scale(1.04)}}
.member h3{font-size:var(--t-mid);letter-spacing:-.025em;font-stretch:92%;margin-top:.4rem}
.member .win{font-size:13.5px}
.member .win .body{padding:14px 16px 16px}
.member .win .k{color:#8FB3AB}
@media (max-width:900px){.team .head{grid-column:1/-1}.member{grid-column:span 6}.member:nth-of-type(2){margin-top:3rem}}
@media (max-width:560px){.member{grid-column:1/-1}.member:nth-of-type(2){margin-top:0}}

/* ---------- Mapa ---------- */
.zones{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2rem;align-items:center}
.zones .map{grid-column:1/6}
.zones .copy{grid-column:6/13}
.zones .copy p{margin:1.2rem 0 2rem}
.map svg{width:auto;max-width:100%;height:auto;max-height:84vh;margin-inline:auto;overflow:visible}
.map .land{fill:#21406F}
.map .gust{fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round;stroke-dasharray:70 420;opacity:.55}
@media (prefers-reduced-motion:no-preference){.map .gust{animation:gustline 7s linear infinite}}
@keyframes gustline{from{stroke-dashoffset:490}to{stroke-dashoffset:0}}
.map .city .dot{fill:var(--signal);transition:r .3s var(--ease-out)}
.map .city .ring{fill:none;stroke:var(--signal);stroke-width:2;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.map .city .ring{animation:ring 2.8s var(--ease-out) infinite;animation-delay:var(--d,0s)}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.map .city text{fill:#0A1A35;font-family:var(--f-body);font-size:16px;font-weight:750;opacity:0;transition:opacity .25s ease;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round;pointer-events:none}
.map .city.is-hot .dot{r:8}
.map .city.is-hot text{opacity:1}
.city-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.city-links a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 1.05em;border-radius:999px;background:var(--tile);text-decoration:none;font-weight:600;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.city-links a .icon{width:1em;height:1em}
.city-links a:hover,.city-links a.is-hot{background:var(--fg);color:var(--bg)}
.city-links a:active{transform:scale(.97)}
@media (max-width:900px){.zones .map,.zones .copy{grid-column:1/-1}.zones .map svg{max-height:62vh}}

/* ---------- Preguntas ---------- */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2rem;align-items:start}
.faq .head{grid-column:1/5;position:sticky;top:110px}
.faq .head p{margin-top:1.2rem}
.faq-list{grid-column:5/13;display:grid;gap:8px}
.faq-item{border-radius:var(--radius);background:var(--tile);transition:background-color .3s ease,color .3s ease}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:72px;padding:1rem 1.5rem;font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);font-weight:620;letter-spacing:-.015em;line-height:1.2}
.faq-item summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:16px;height:16px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease-out)}
.pm::after{transform:rotate(90deg)}
.faq-item[open]{background:var(--fg);color:var(--bg)}
.faq-item[open] .pm::after{transform:rotate(0)}
.faq-item .ans{padding:0 1.5rem 1.4rem;max-width:58ch}
.faq-item .ans p{margin:0}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}.faq-item::details-content{height:0;overflow:clip;transition:height .4s var(--ease-out),content-visibility .4s allow-discrete}.faq-item[open]::details-content{height:auto}}
@media (max-width:900px){.faq .head,.faq-list{grid-column:1/-1}.faq .head{position:static}}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem;align-items:start}
.contact .copy{grid-column:1/6}
.contact .copy p{margin-top:1.2rem}
.contact .form-wrap{grid-column:7/13}
.ways{list-style:none;display:grid;gap:8px;margin-top:2rem}
.ways a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:68px;padding:.8rem 1.3rem;border-radius:var(--radius);background:var(--tile);text-decoration:none;font-family:var(--f-display);font-size:clamp(1.1rem,1rem + .6vw,1.5rem);font-weight:650;letter-spacing:-.03em;overflow-wrap:anywhere;transition:background-color .25s ease,color .25s ease}
.ways a .icon{width:1.1em;height:1.1em;color:var(--signal);transition:color .25s ease}
.ways a:hover{background:var(--signal);color:#0C0F12}.ways a:hover .icon{color:#0C0F12}
.ways small{display:block;font-family:var(--f-body);font-size:var(--t-small);font-weight:500;letter-spacing:0;color:var(--fg-2)}
.ways a:hover small{color:#0C0F12}
.status-line{margin-top:1.4rem;color:var(--fg-2);font-size:var(--t-small)}
.live-dot{position:relative;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--signal);margin-right:.5em;vertical-align:.05em}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--signal);opacity:0}
@media (prefers-reduced-motion:no-preference){.live-dot::after{animation:ping 2.2s var(--ease-out) infinite}}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.2);opacity:0}}
.form{display:grid;gap:1rem;background:var(--tile);padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--radius)}
.form .form-head{font-family:var(--f-code);font-size:var(--t-small);color:var(--sky);margin:0}
.field{display:grid;gap:.4rem}
.field label,.chips legend{font-size:var(--t-small);font-weight:600}
.field input,.field textarea{width:100%;min-height:52px;background:var(--bg);border:2px solid transparent;border-radius:10px;padding:.8em 1em;color:var(--fg);font-size:16px;transition:border-color .2s ease}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8FA3C2}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--signal)}
.field [aria-invalid="true"]{border-color:#FF8A73}
.field .err{color:#FFB3A3;font-size:var(--t-small);font-weight:600}
.ch--paper .field .err{color:#B42B1B}
.chips{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.chips legend{margin-bottom:.5rem;padding:0}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 1em;border-radius:999px;background:var(--bg);font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.chips input:checked+span{background:var(--signal);color:#0C0F12}
.chips input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.chips label:active span{transform:scale(.96)}
.form .btn{width:100%}
.form-status{font-size:var(--t-small);font-weight:600;min-height:1.3em;margin:0}
@media (max-width:900px){.contact .copy,.contact .form-wrap{grid-column:1/-1}}

/* ---------- Footer ---------- */
.site-footer{background:#071429;color:#AFC0DA;padding:clamp(56px,6vw,88px) var(--pad) 28px;font-size:var(--t-small)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1fr;gap:2.5rem}
.foot .brand{color:#fff;font-size:1.5rem;margin-bottom:1rem}.foot .brand svg{color:var(--signal)}
.foot p{max-width:32ch;margin:0 0 1rem}
.foot h2{font-family:var(--f-body);font-size:var(--t-small);font-weight:600;letter-spacing:0;color:#fff;margin:0 0 .9rem}
.foot ul{list-style:none;display:grid;gap:.45rem}
.foot .cols2{grid-template-columns:1fr 1fr;column-gap:1rem}
.foot a{text-decoration:none;transition:color .2s ease}.foot a:hover{color:#fff}
.foot .mail{color:#fff;font-weight:600}
.foot-cta{display:inline-flex;margin-top:.4rem}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;margin-top:clamp(40px,5vw,64px);padding-top:20px;box-shadow:0 -1px 0 #1C3359}
.foot-bottom p{margin:0}.foot-bottom a{text-decoration:none}.foot-bottom a:hover{color:#fff}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}

.wa-float{position:fixed;right:16px;bottom:16px;z-index:90;width:58px;height:58px;border-radius:50%;background:#1FAF55;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(15,36,33,.55);transition:transform .25s var(--ease-out);text-decoration:none} /* taste-skill-ignore: botón flotante */
.wa-float .icon{width:30px;height:30px}
.wa-float:active{transform:scale(.94)}
.wa-float.is-away{transform:translateY(140%);pointer-events:none}
@media (hover:hover){.wa-float:not(.is-away):hover{transform:translateY(-3px)}}

/* ---------- Bloques de páginas internas ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2rem;align-items:start}
.split > .head{grid-column:1/6}
.split > .body{grid-column:6/13}
.split .head p{margin-top:1.2rem}
.split figure{margin:2rem 0 0}.split figure img{border-radius:var(--radius);width:100%}
@media (max-width:900px){.split > .head,.split > .body{grid-column:1/-1}}
.prose{max-width:66ch}
.prose h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);margin:2em 0 .6em;letter-spacing:-.03em}
.prose h3{font-size:var(--t-mid);margin:1.6em 0 .5em;letter-spacing:-.02em}
.prose p,.prose li{line-height:1.7}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em;display:grid;gap:.5em}
.prose li::marker{color:var(--signal);font-weight:700}
.prose a{color:var(--blue);font-weight:600}
.prose > :first-child{margin-top:0}
.prose code{font-family:var(--f-code);font-size:.9em;background:var(--mist);padding:.1em .35em;border-radius:5px}
.big-p{font-size:var(--t-mid);line-height:1.35}
.list-rows{list-style:none;display:grid;gap:8px}
.list-rows li{background:var(--tile);border-radius:var(--radius);padding:1.2rem 1.4rem;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:.4rem 2rem}
.list-rows b{font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:650;letter-spacing:-.02em;line-height:1.15}
.list-rows span{color:var(--fg-2)}
@media (max-width:640px){.list-rows li{grid-template-columns:1fr}}
.link-rows{list-style:none;display:grid;gap:8px}
.link-rows a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:76px;padding:1rem 1.5rem;border-radius:var(--radius);background:var(--tile);text-decoration:none;font-family:var(--f-display);font-size:clamp(1.2rem,1rem + .8vw,1.75rem);font-weight:650;letter-spacing:-.03em;transition:background-color .25s ease,color .25s ease}
.link-rows a .icon{transition:transform .45s var(--ease-out);width:1em;height:1em}
.link-rows a:hover{background:var(--fg);color:var(--bg)}.link-rows a:hover .icon{transform:rotate(45deg)}
.link-rows small{display:block;font-family:var(--f-body);font-size:var(--t-small);font-weight:500;letter-spacing:0;opacity:.85;margin-top:.2rem}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:1.4rem}
.chips-row li{background:var(--tile);border-radius:999px;padding:.55em 1.1em;font-weight:500}
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.article .toc{grid-column:1/4;position:sticky;top:110px;align-self:start;font-size:var(--t-small)}
.article .toc b{display:block;margin-bottom:.7rem}
.article .toc ol{list-style:none;display:grid;gap:.5rem}
.article .toc a{text-decoration:none;color:var(--fg-2)}.article .toc a:hover{color:var(--blue)}
.article .prose{grid-column:4/12}
@media (max-width:900px){.article .toc{display:none}.article .prose{grid-column:1/-1}}
.post-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;color:var(--fg-2);font-size:var(--t-small);margin-top:1.4rem}
.reading-bar{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--signal);transform-origin:0 50%;transform:scaleX(0);z-index:120}
@supports (animation-timeline:scroll()){.reading-bar{animation:grow linear both;animation-timeline:scroll(root)}@keyframes grow{to{transform:scaleX(1)}}}
.posts{list-style:none;display:grid;gap:8px}
.posts a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 2rem;padding:clamp(1.4rem,3vw,2.4rem);border-radius:var(--radius);background:var(--tile);text-decoration:none;transition:background-color .25s ease,color .25s ease}
.posts h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,2.1rem);font-stretch:90%;letter-spacing:-.035em}
.posts p{margin:0;max-width:60ch;color:var(--fg-2);transition:color .25s ease}
.posts time{grid-column:2;grid-row:1;white-space:nowrap;font-family:var(--f-code);font-size:var(--t-small);color:var(--fg-2)}
.posts a:hover{background:var(--pine);color:#fff}.posts a:hover p,.posts a:hover time{color:#AFC0DA}
@media (max-width:640px){.posts a{grid-template-columns:1fr}.posts time{grid-column:1;grid-row:auto}}
.lost{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 64px}
.lost h1{font-size:clamp(5rem,26vw,18rem);line-height:.8;letter-spacing:-.06em;font-stretch:78%}
.lost .win{max-width:560px;margin:2rem 0}
.lost .win .body{padding:16px 18px}

/* Entradas por sección (contenido visible sin JS) */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal] > *{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .9s var(--ease-out);transition-delay:calc(var(--k,0)*75ms)}
  .js [data-reveal].in > *{opacity:1;transform:none}
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .3s var(--ease-out) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.ch--paper .form .form-head{color:var(--blue)}
figure{margin:0}
@media (max-width:640px){.term .tl .tok-c:last-child{display:none}.term .tl b{min-width:0}.code pre{font-size:12px}}
.sm-img .tag{top:10px;left:10px}

.sm-btn .tag{top:auto;bottom:-30px}

.hero{background-image:linear-gradient(rgba(143,176,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,255,.07) 1px,transparent 1px);background-size:44px 44px;background-position:center top} /* taste-skill-ignore: grilla de plano pedida */

/* ---------- Galería de proyectos de ejemplo ---------- */
.gal-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-bottom:clamp(32px,4vw,56px)}
.gal-head h2{grid-column:1/7}.gal-head p{grid-column:7/13;margin:0;align-self:end}
.gal-feature{margin-bottom:clamp(28px,4vw,48px)}
.vid{position:relative;border-radius:var(--radius);overflow:clip;background:var(--tile);aspect-ratio:16/10}
.vid video{display:block;width:100%;height:100%;object-fit:cover}
.vid-cap{font-size:var(--t-small);color:var(--fg-2);margin:.8rem 0 0}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.ej{margin:0}
.ej__img{border-radius:var(--radius);background:var(--tile);padding:clamp(12px,2vw,24px) clamp(8px,1.4vw,16px) 0;overflow:clip}
.ej__img img{width:100%;height:auto;transition:transform .9s var(--ease-out)}
@media (hover:hover){.ej:hover .ej__img img{transform:translateY(-6px) scale(1.015)}}
.ej figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;margin-top:.9rem}
.ej figcaption b{font-family:var(--f-display);font-size:var(--t-mid);letter-spacing:-.02em}
.ej figcaption span{color:var(--fg-2);font-size:var(--t-small);align-self:center}
.shot{margin:2rem 0 0}
.shot img,.shot .vid{border-radius:var(--radius);width:100%}
.shot img{background:var(--tile)}
.shot figcaption{font-size:var(--t-small);color:var(--fg-2);margin-top:.7rem}
@media (max-width:900px){.gal-head h2,.gal-head p{grid-column:1/-1}.gal-head p{margin-top:1rem}.gal{grid-template-columns:1fr}}

/* ---------- Planes y precios ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
.tier{display:flex;flex-direction:column;gap:1.4rem;background:#fff;color:var(--pine);border-radius:22px;padding:clamp(24px,2.6vw,36px)}
.ch--pine .tier,.ch--signal .tier{background:var(--tile);color:#fff}
.tier h3{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);letter-spacing:-.03em}
.tier__type{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.5rem 0 0;font-weight:600;color:var(--blue)}
.tier__type span{font-size:13px;font-weight:700;color:var(--signal)}
.tier__for{margin:.6rem 0 0;color:#46546B;font-size:var(--t-small);line-height:1.5}
.tier__price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}
.tier__price b{font-family:var(--f-display);font-size:clamp(2.2rem,1.6rem + 1.6vw,3rem);letter-spacing:-.04em;font-weight:760;font-variant-numeric:tabular-nums}
.tier__price small{font-size:var(--t-small);color:#46546B}
.tier__list{list-style:none;display:grid;gap:.7rem;flex:1}
.tier__list li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.4;font-size:var(--t-small)}
.tier__list .icon{width:1.15em;height:1.15em;color:var(--blue);margin-top:.1em}
.tier__cta{display:grid;gap:.9rem;justify-items:center}
.tier__cta .btn{width:100%;--fg:var(--pine);--bg:#fff;--btn:var(--pine);--btn-fg:#fff}
.tier__cta .btn--line{color:var(--pine);border-color:var(--pine);background:transparent}
.tier__cta .textlink{font-size:var(--t-small)}
.tier--featured{background:var(--pine);color:#fff;transform:translateY(-10px)}
.tier--featured .tier__for,.tier--featured .tier__price small{color:#AFC0DA}
.tier--featured .tier__type{color:var(--sky)}
.tier--featured .tier__list .icon{color:var(--signal)}
.tier--featured .tier__cta .btn{--btn:var(--signal);--btn-fg:#0A1A35;--fg:#fff;--bg:var(--pine)}
.tier-extra{margin-top:clamp(28px,3vw,40px);display:grid;gap:.4rem;font-size:var(--t-small)}
.tier-extra p{margin:0}
.tier-extra b{font-weight:700}
@media (max-width:980px){.tiers{grid-template-columns:1fr;max-width:560px}.tier--featured{transform:none}}

/* ---------- Portadas del blog ---------- */
.posts .cover{grid-column:1/-1;width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin-bottom:.6rem}

.posts time{grid-row:2}
@media (max-width:640px){.posts time{grid-row:auto}}

/* --- InvadX: contrastes de hover accesibles para CTA y ciudades. --- */
@media (hover:hover) and (pointer:fine){
 .tier__cta .btn:hover{color:#fff!important}
 .tier__cta .btn:hover::before{background:var(--pine-2)!important}
 .foot .btn.foot-cta:hover{color:#1E4ED8!important}
 .foot .btn.foot-cta:hover::before{background:#fff!important}
}
/* Mantener contraste también con teclado y cuando el CTA recibe foco. */
.tier__cta .btn:focus-visible{color:#fff!important;background:var(--pine-2)!important}
.foot .btn.foot-cta:focus-visible{color:#1E4ED8!important;background:#fff!important}
.city-links a:hover,.city-links a:focus-visible,.city-links a.is-hot{background:#0A1A35;color:#fff}


/* v10 – pestañas del editor accesibles + sorpresa en la vista previa */
.win__tabs button{font:inherit;font-size:inherit;display:flex;align-items:center;padding:0 14px;color:#AFC0DA;background:transparent;border:0;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.win__tabs button.on{background:var(--pine-2);color:#fff}
.win__tabs button:hover:not(.on){background:#172B4C;color:#fff}
.win__tabs button:focus-visible{outline:2px solid var(--signal);outline-offset:-3px}
.code[hidden]{display:none!important}
.pv .pv-img img.pv-easter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .5s ease,transform .7s var(--ease-out);z-index:2}
.ide.has-easter .pv .pv-img img.pv-easter{opacity:1;transform:scale(1)}
.member .win__title{font-size:12px;overflow-wrap:anywhere;white-space:normal}
.member .win__title a{color:inherit;text-decoration:none}
.member .win__title a:hover{text-decoration:underline;text-decoration-color:var(--signal)}

/* v10 – servicios: tarjetas legibles, ilustración aparece en hover/focus */
.services-cards{padding:clamp(82px,8vw,136px) var(--pad)}
.services-cards__head{display:flex;justify-content:space-between;align-items:end;gap:2.5rem;margin-bottom:clamp(32px,4vw,56px)}
.services-cards__eyebrow{display:inline-block;font-family:var(--f-code);font-size:clamp(.75rem,.7rem + .1vw,.875rem);text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:var(--blue);margin-bottom:1.1rem}
.services-cards__head .h2{font-size:clamp(2.5rem,1.5rem + 3.5vw,5.3rem);line-height:.98;max-width:13ch;letter-spacing:-.047em}
.services-cards__head > p{color:var(--fg-2);font-size:var(--t-mid);max-width:30ch;margin:0 0 .2rem}
.services-cards__grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);margin:0;padding:0}
.service-card{grid-column:span 2;min-width:0}
.service-card:nth-child(4),.service-card:nth-child(5){grid-column:span 3}
.service-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;border:1px solid #DFE4EC;border-radius:18px;background:#fff;overflow:hidden;transition:border-color .25s ease,transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.service-card__visual{aspect-ratio:480/285;background:#0C2040;position:relative;overflow:hidden;isolation:isolate}
.service-card__visual::before{content:"";position:absolute;left:11%;top:25%;width:70%;height:70%;background:radial-gradient(circle at 50% 65%,#265FEA 0 30%,transparent 31%),linear-gradient(125deg,transparent 0 25%,#FF6B2C 25% 27%,transparent 28%);opacity:.8;transform:rotate(-7deg);z-index:-1}
.service-card__visual::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.045) 26px 27px);z-index:-1}
.service-card__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(10px) scale(1.065);transition:opacity .42s ease,transform .62s var(--ease-out)}
.service-card__visual-cta{position:absolute;z-index:2;right:16px;bottom:15px;color:#fff;background:#0A1A35;padding:7px 12px;border-radius:99px;font-size:.8rem;font-weight:650;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.service-card__body{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;flex:1}
.service-card__title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.service-card__title h3{font-size:clamp(1.45rem,1.12rem + 1.15vw,2.2rem);line-height:1.08;letter-spacing:-.04em}
.service-card__title>span{display:inline-flex;justify-content:center;align-items:center;flex:none;width:34px;height:34px;background:var(--paper);border-radius:50%;font-size:1.2rem;transition:background .3s ease,color .3s ease,transform .3s ease}
.service-card__body p{margin:0;color:#495B71;line-height:1.5;font-size:var(--t-body);max-width:38ch}
.service-card__time{margin-top:auto;padding-top:12px;border-top:1px solid #E5EAF1;font-size:clamp(.85rem,.82rem + .12vw,.96rem);color:var(--blue);font-weight:650}
.services-cards__foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:clamp(26px,3vw,42px);flex-wrap:wrap}
.services-cards__foot p{color:var(--fg-2);margin:0;max-width:52ch}
@media(hover:hover) and (pointer:fine){.service-card__link:hover{border-color:#9CAFD8;transform:translateY(-7px);box-shadow:0 25px 45px -32px rgba(10,26,53,.45)}.service-card__link:hover .service-card__visual img{opacity:1;transform:none}.service-card__link:hover .service-card__visual-cta{opacity:1;transform:none}.service-card__link:hover .service-card__title>span{background:var(--signal);color:var(--pine);transform:rotate(45deg)}}
.service-card__link:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.service-card__link:focus-visible .service-card__visual img{opacity:1;transform:none}
.service-card__link:focus-visible .service-card__visual-cta{opacity:1;transform:none}
@media(hover:none),(pointer:coarse){.service-card__visual img{opacity:1;transform:none}.service-card__visual-cta{opacity:1;transform:none}}
@media(max-width:980px){.services-cards__head{align-items:start;flex-direction:column;gap:1rem}.services-cards__head>p{max-width:46ch}.service-card{grid-column:span 3}}
@media(max-width:620px){.services-cards__grid{grid-template-columns:minmax(0,1fr);gap:18px}.service-card,.service-card:nth-child(4),.service-card:nth-child(5){grid-column:1}.service-card__visual{aspect-ratio:480/245}.services-cards__head .h2{font-size:clamp(2.5rem,12vw,4.4rem)}.service-card__visual img{opacity:1;transform:none}.service-card__body{padding:21px}.services-cards__foot{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.service-card__link,.service-card__visual img,.service-card__visual-cta,.pv-easter{transition:none!important}}
/* La pestaña CSS muestra el código entero sin la animación de tecleo de HTML. */
.js [data-code-css] .ln::before{display:none!important}
/* La sorpresa también se muestra en la vista previa de pantallas chicas. */
@media(max-width:520px){.ide.has-easter .pv .pv-img{display:block}}


/* v11 · Equipo: fotografías reales en color */
.member .photo{background:#0e2a1e}
.member .photo img{filter:none;mix-blend-mode:normal;object-position:center 25%;}

/* v12 · Portadas siempre visibles en tarjetas, sin contador ni vista flotante */
.service-card__visual{background:#eef2f8}
.service-card__visual::before,.service-card__visual::after{display:none}
.service-card__visual img,.service-card__link:hover .service-card__visual img,.service-card__link:focus-visible .service-card__visual img{opacity:1;transform:none;object-fit:cover;object-position:center top}
.service-card__visual-cta{opacity:1;transform:none;background:rgba(9,27,54,.93);font-size:12px}
.service-card__link:hover .service-card__visual-cta{opacity:1;transform:none}

/* v11 · Precios visibles en el hero de cada ficha de servicio */
.service-investment{margin-top:clamp(24px,3vw,38px);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid rgba(190,207,233,.32);border-radius:18px;background:rgba(19,48,91,.72);box-shadow:0 12px 40px rgba(0,0,0,.07);backdrop-filter:blur(5px)}
.service-investment__copy{min-width:0}
.service-investment__eyebrow{color:#9eb9eb;text-transform:uppercase;font:600 10px/1.3 var(--f-code,monospace);letter-spacing:.11em}
.service-investment__plan{font-weight:700;color:white;font-size:clamp(15px,1.35vw,18px);margin:5px 0 3px}
.service-investment__desc{font-size:13px;line-height:1.45;color:#bfcee6;margin:0;max-width:36ch}
.service-investment__right{text-align:right;flex-shrink:0}
.service-investment__amount{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.service-investment__amount strong{font:800 clamp(22px,2.25vw,32px)/1.18 var(--f-display,inherit);letter-spacing:-.035em;color:#fff}
.service-investment__unit{font-size:11px;color:#c3d1ea;white-space:nowrap}
.service-investment__link{display:inline-block;color:#ff925b;text-decoration:underline;text-underline-offset:3px;margin-top:6px;font-size:12px}
.service-investment__link:hover{color:#fff}
@media(max-width:720px){.service-investment{padding:18px;flex-direction:column;align-items:start;gap:10px}.service-investment__right{text-align:left}.service-investment__amount{justify-content:flex-start}.service-investment__amount strong{font-size:25px}}

/* v18: diferencias claras entre SEO técnico básico (desarrollo) y SEO profesional (mensual) */
.seo-difference{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,3.5vw,50px)}
.seo-difference__item{padding:clamp(22px,2.4vw,34px);border-radius:18px;border:1px solid #DCE4F3;background:#fff}
.seo-difference__tag{display:block;font-family:var(--f-code);font-size:.75rem;letter-spacing:.045em;color:var(--blue);margin-bottom:14px;font-weight:700;text-transform:uppercase}
.seo-difference__item h3{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.08;margin-bottom:12px}
.seo-difference__item p{margin:0;color:#46546B;line-height:1.55;max-width:56ch}
.seo-difference__item--pro{background:var(--pine);border-color:var(--pine);color:#fff}
.seo-difference__item--pro .seo-difference__tag{color:var(--signal)}
.seo-difference__item--pro p{color:#CFDBEF}
.seo-difference__item--pro .textlink{display:inline-block;color:#fff;margin-top:16px}
@media(max-width:720px){.seo-difference{grid-template-columns:1fr}}

/* InvadX v21: CTA del menú lleva directamente al formulario, con margen para la cabecera. */
#form-contacto{scroll-margin-top:100px}