/* Solo lo de /services/. Los tokens y la base van en base.css; la
   cabecera y el pie, en chrome.css. Aqui no se repite nada de eso. */
/* Solo lo de /services/. Los tokens y la base van en base.css; la
   cabecera y el pie, en chrome.css. Aqui no se repite nada de eso. */
/* HEADER — identico a la home */
/* migas */
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
 color:rgba(236,229,219,.5);margin-bottom:clamp(14px,2.2vh,26px)}
.crumb a{color:rgba(236,229,219,.5);transition:color .25s}
.crumb a:hover{color:var(--cream)}
.crumb span{color:#F0794F}

/* ═══════════ 1. HERO — LA PILA EXPLOSIONADA ═══════════
   Cuatro planos isometricos que llegan montados y se separan al hacer scroll.
   Es el argumento de la pagina hecho objeto: un sistema, no cuatro facturas. */
#svc-hero{position:relative;background:var(--dark);color:var(--cream);overflow:hidden;
 min-height:100vh;display:flex;align-items:center;padding:calc(var(--navh) + clamp(30px,5vh,64px)) 0 clamp(40px,6vh,80px);
 background-image:var(--dots-d);background-size:30px 30px}
#svc-hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
 background:radial-gradient(72% 58% at 50% 46%,transparent 0%,rgba(16,7,4,.55) 78%,rgba(16,7,4,.9) 100%)}
#svc-hero > .wrap{position:relative;z-index:2}
.xh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.xh1{font-size:clamp(28px,min(3.9vw,5.6vh),56px);max-width:17ch}
.xh1 .xw{display:inline-block;white-space:nowrap}
.xh1 .xl{display:inline-block;will-change:transform}
.xh1 .xsp{display:inline-block;width:.27em}
.xh1 em{font-style:normal;color:var(--accent)}
.xh-claim{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(15px,1.7vw,19px);line-height:1.55;
 font-weight:600;color:var(--dark);max-width:52ch}
.dark .xh-claim,[data-dark] .xh-claim,[data-dark] .xh-claim{color:var(--cream)}
.xh-sub{margin-top:clamp(18px,2.6vh,30px);max-width:46ch;font-size:clamp(15px,1.6vw,18.5px);color:rgba(236,229,219,.7)}
.xh-sub b{color:var(--cream);font-weight:600}
.xh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,34px)}

/* la pila */
.xstage{position:relative;height:clamp(280px,44vh,420px);perspective:1300px;perspective-origin:44% 44%}
.xstack{position:absolute;inset:0;transform-style:preserve-3d;
 transform:rotateX(56deg) rotateZ(-40deg) translateZ(30px)}
.xplate{position:absolute;left:38%;top:50%;width:min(50%,215px);aspect-ratio:1/1;
 transform:translate(-50%,-50%);
 transform-style:preserve-3d;border-radius:14px;border:1.5px solid rgba(236,229,219,.3);
 background:rgba(236,229,219,.055);backdrop-filter:blur(2px);
 display:flex;align-items:center;justify-content:center}
.xplate::before{content:'';position:absolute;inset:9px;border-radius:8px;
 background-image:var(--dots-d);background-size:19px 19px;opacity:.85}
.xplate[data-i="0"]{border-color:rgba(199,42,8,.85);background:rgba(199,42,8,.14);transform:translate(-50%,-50%) translateZ(0)}
.xplate[data-i="1"]{transform:translate(-50%,-50%) translateZ(-44px)}
.xplate[data-i="2"]{transform:translate(-50%,-50%) translateZ(-88px)}
.xplate[data-i="3"]{transform:translate(-50%,-50%) translateZ(-132px)}
.xplate[data-i="4"]{transform:translate(-50%,-50%) translateZ(-176px)}
.xplate[data-i="5"]{transform:translate(-50%,-50%) translateZ(-220px)}
.xkey{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:3;
 display:flex;flex-direction:column;gap:clamp(14px,2.6vh,26px);text-align:right;pointer-events:none}
.xkey li{list-style:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;
 font-family:var(--display);font-weight:800;font-size:clamp(12px,1.15vw,15px);letter-spacing:.13em;
 text-transform:uppercase;color:rgba(236,229,219,.72);white-space:nowrap}
.xkey li::after{content:'';width:clamp(16px,2.4vw,34px);height:1px;background:rgba(236,229,219,.34)}

/* Visible por defecto. El estado montado/separado solo existe si el JS confirma
   que va a animar — sin .sfx la pila se ve entera y quieta. */


/* ═══════════ 2. INDICE CINETICO ═══════════ */
#svc-idx{background:var(--bg);padding:clamp(60px,8vw,110px) 0 clamp(40px,6vw,80px)}
.kidx{margin-top:clamp(26px,4vh,48px);border-top:1px solid var(--line)}
.krow{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);
 align-items:center;padding:clamp(20px,3.2vh,38px) 0;border-bottom:1px solid var(--line);
 overflow:hidden;isolation:isolate}
.krow::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--dark);
 transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.66,0,.2,1)}
.krow:hover::before,.krow:focus-within::before{transform:scaleY(1);transform-origin:top}
.krow:hover,.krow:focus-within{color:var(--cream)}
.krow:hover .k-n,.krow:focus-within .k-n{color:#F0794F}
.krow:hover .k-out,.krow:focus-within .k-out{color:rgba(236,229,219,.62)}
.krow:hover .k-go,.krow:focus-within .k-go{background:var(--accent);color:#fff;border-color:var(--accent)}
.krow > *{position:relative;padding-inline:clamp(0px,1.4vw,18px)}
.k-n{font-family:var(--display);font-weight:800;font-size:clamp(14px,1.5vw,18px);
 letter-spacing:.1em;color:var(--muted);transition:color .4s;padding-left:clamp(0px,1.4vw,18px)}
.k-t{min-width:0}
.k-name{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
 line-height:.92;font-size:clamp(26px,min(5.4vw,7vh),74px);display:block}
.k-out{display:block;margin-top:7px;font-size:clamp(13px,1.4vw,16px);color:var(--muted);
 max-width:52ch;transition:color .4s}
.k-go{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);
 display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s,transform .4s}
.krow:hover .k-go{transform:rotate(-45deg)}
.k-go svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.krow a.k-link{position:absolute;inset:0;z-index:3}
.k-lang{display:inline-block;margin-left:10px;font-family:var(--body);font-size:10.5px;font-weight:600;
 letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:100px;
 background:rgba(199,42,8,.13);color:var(--accent-dk);vertical-align:middle;transition:background .4s,color .4s}
.krow:hover .k-lang{background:rgba(240,121,79,.2);color:#F0794F}

/* La definicion factual: lo que la pagina dice de si misma en una frase que
   un motor puede extraer entera. Va aparte del copy creativo a proposito. */
.def{max-width:none;margin:clamp(24px,3.6vh,40px) 0 clamp(20px,3vh,32px);padding:clamp(20px,2.6vw,30px) clamp(22px,2.8vw,34px);
 border-radius:14px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent)}
.def p{font-size:clamp(15px,1.6vw,18px);line-height:1.68;max-width:74ch}
.def p + p{margin-top:11px;font-size:clamp(13.5px,1.45vw,15.5px);color:var(--muted)}
/* La frase que enmarca los seis servicios, entre el recuadro y el indice. */
.idx-sub{max-width:56ch;margin:0 0 clamp(6px,1vh,14px);font-size:clamp(15px,1.6vw,18px);
 line-height:1.6;color:var(--muted)}
.idx-sub b{color:var(--dark);font-weight:600}
.def b{font-weight:600}

/* Diagnostico: reduce la carga mental y de paso crea enlaces internos con
   contexto semantico en vez de anclas sueltas. */
#pick{background:var(--bg);padding:clamp(60px,8vw,104px) 0}
.pk{margin-top:clamp(24px,4vh,44px);border-top:1px solid var(--line)}
.pkr{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,2.6vw,36px);align-items:center;
 padding:clamp(16px,2.4vh,24px) clamp(6px,1.2vw,16px);border-bottom:1px solid var(--line);
 transition:background .35s}
.pkr:hover{background:var(--paper)}
.pk-q{font-size:clamp(15px,1.65vw,19px);line-height:1.5;max-width:44ch}
.pk-q b{font-weight:600}
.pk-a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
 font-family:var(--display);font-weight:800;font-size:clamp(14px,1.5vw,18px);
 text-transform:uppercase;letter-spacing:.04em;color:var(--accent-dk);transition:gap .25s}
.pkr:hover .pk-a{gap:14px}
.pk-n{margin-top:clamp(18px,2.6vh,28px);font-size:13.5px;color:var(--muted);max-width:62ch}

/* ═══════════ 3. EL VIAJE — scrollytelling ═══════════
   Un movil fijo a la derecha que cambia de pantalla mientras los pasos del
   relato pasan por la izquierda. La historia entera vive en el texto: el
   movil es adorno (aria-hidden). En movil desaparece y quedan los pasos. */
#journey{background:var(--dark);color:var(--cream);position:relative;
 background-image:var(--dots-d);background-size:30px 30px}
.jr-head{max-width:1220px;margin:0 auto;text-align:center;
 padding:clamp(70px,9vw,120px) clamp(20px,5vw,52px) clamp(26px,4vh,52px)}
.jr-head .h2{margin:0 auto;max-width:20ch}
.jr-head .lead{margin:18px auto 0;color:rgba(236,229,219,.66)}
.jr-grid{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,52px);
 display:grid;grid-template-columns:1fr clamp(260px,29vw,360px);gap:clamp(30px,6vw,90px);align-items:start}
.jr-steps{padding:22vh 0 26vh}
.jr-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;
 border-left:2px solid transparent;padding-left:clamp(16px,2.4vw,30px);
 transition:opacity .45s ease,border-color .45s ease}
.jr-n{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
 font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:#F0794F;margin-bottom:15px}
.jr-n::before{content:'';width:26px;height:1px;background:#F0794F}
.jr-step h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
 line-height:.94;font-size:clamp(24px,min(3.4vw,4.8vh),46px);max-width:15ch}
.jr-step h3{color:var(--cream)}
.jr-step p{margin-top:clamp(12px,1.9vh,20px);max-width:46ch;
 font-size:clamp(15px,1.55vw,18px);line-height:1.68;color:rgba(236,229,219,.86)}
.jr-step p b{color:#fff;font-weight:600}
.jr-step.is-on{border-left-color:var(--accent)}
.jr-tag{margin-top:clamp(14px,2.2vh,22px);display:inline-flex;align-items:center;gap:9px;
 font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
 padding:8px 15px;border-radius:100px;background:rgba(199,42,8,.2);color:#F0794F;
 border:1px solid rgba(240,121,79,.3);width:fit-content}
.jr-step.jr-last h3{color:#F0794F;max-width:17ch}

/* el movil fijo */
.jr-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;
 padding:calc(var(--navh) + 6px) 0 12px}
/* ── iPhone ──────────────────────────────────────────────────────────────── */
.iph{position:relative;width:100%;max-width:340px;aspect-ratio:.464/1;max-height:86vh;flex:none;
 border-radius:clamp(30px,3.6vw,46px);background:#100604;padding:clamp(7px,.9vw,11px);
 box-shadow:0 0 0 1.5px #3A211B,0 0 0 3.5px #1C0D09,0 34px 80px rgba(0,0,0,.55)}
.iph-scr{position:relative;width:100%;height:100%;border-radius:clamp(24px,3vw,37px);
 overflow:hidden;background:var(--paper);isolation:isolate}
/* Dynamic Island */
.iph::after{content:'';position:absolute;left:50%;top:clamp(14px,1.7vw,21px);transform:translateX(-50%);
 width:31%;height:clamp(17px,2vw,24px);border-radius:100px;background:#000;z-index:30;pointer-events:none}
.iph-bar{position:absolute;top:0;left:0;right:0;z-index:25;height:clamp(34px,4.2vw,50px);
 display:flex;align-items:center;justify-content:space-between;padding:0 clamp(15px,1.9vw,23px);
 font-size:clamp(9px,1.05vw,11.5px);font-weight:600;color:#fff;pointer-events:none;
 mix-blend-mode:difference}
.iph-bar b{font-weight:600;letter-spacing:-.01em}
.iph-sg{display:flex;align-items:flex-end;gap:2px;height:9px}
.iph-sg i{width:2px;background:currentColor;border-radius:1px}
.iph-sg i:nth-child(1){height:3px}.iph-sg i:nth-child(2){height:5px}
.iph-sg i:nth-child(3){height:7px}.iph-sg i:nth-child(4){height:9px}
.iph-bt{width:16px;height:8px;border:1.2px solid currentColor;border-radius:2.5px;position:relative;opacity:.8}
.iph-bt::after{content:'';position:absolute;inset:1.4px;width:64%;background:currentColor;border-radius:1px}
.iph-hm{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:33%;height:3.5px;
 border-radius:100px;background:#fff;z-index:26;mix-blend-mode:difference;opacity:.55}

/* ── KIT DE INTERFAZ TIPO GOOGLE MAPS, en la paleta de Krelo ──────────────── */
.gm{position:absolute;inset:0;display:flex;flex-direction:column;background:#EFE8DC}
/* el lienzo del mapa: calles, un parque y agua, todo en CSS */
.gm-cv{position:absolute;inset:0;z-index:0;background:#EFE8DC}
.gm-cv::before{content:'';position:absolute;inset:-30%;
 background:
  repeating-linear-gradient(64deg,transparent 0 26px,#F8F4EC 26px 32px),
  repeating-linear-gradient(154deg,transparent 0 34px,#F8F4EC 34px 39px);}
.gm-cv::after{content:'';position:absolute;inset:-30%;
 background:repeating-linear-gradient(64deg,transparent 0 108px,#FCFAF5 108px 121px)}
.gm-pk{position:absolute;border-radius:14px;background:#DCE3CE;z-index:1}
.gm-wt{position:absolute;z-index:1;background:#CBDCE4}
.gm-top{position:relative;z-index:6;padding:clamp(38px,4.6vw,54px) clamp(9px,1.15vw,14px) 0;
 display:flex;flex-direction:column;gap:clamp(6px,.8vw,9px)}
.gm-sb{display:flex;align-items:center;gap:9px;background:#fff;border-radius:100px;
 padding:clamp(8px,1vw,11px) clamp(11px,1.35vw,15px);
 box-shadow:0 1px 3px rgba(26,8,4,.14),0 4px 14px rgba(26,8,4,.1)}
.gm-sb svg{width:13px;height:13px;flex:none;stroke:var(--muted);fill:none;stroke-width:2.1}
.gm-sb span{flex:1;font-size:clamp(9.5px,1.08vw,11.8px);color:var(--dark);white-space:nowrap;overflow:hidden}
.gm-sb .av{width:19px;height:19px;border-radius:50%;background:var(--muted);flex:none;opacity:.55}
.gm-chips{display:flex;gap:6px;overflow:hidden}
.gm-chip{font-size:clamp(8px,.92vw,10px);font-weight:600;padding:5px 10px;border-radius:100px;
 background:#fff;color:var(--muted);white-space:nowrap;box-shadow:0 1px 2px rgba(26,8,4,.13)}
.gm-chip.on{background:var(--dark);color:var(--cream)}
/* pines */
.gm-pin{position:absolute;z-index:4;width:15px;height:15px;border-radius:50% 50% 50% 0;
 transform:translate(-50%,-100%) rotate(-45deg);background:#8C7268;
 box-shadow:0 2px 5px rgba(26,8,4,.3)}
.gm-pin::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#EFE8DC}
.gm-pin.me{background:var(--accent);width:20px;height:20px;z-index:5}
.gm-pin.me::after{inset:5.5px}
/* hoja inferior con los resultados */
.gm-sheet{position:relative;z-index:7;margin-top:auto;background:#fff;
 border-radius:15px 15px 0 0;padding:7px clamp(9px,1.15vw,14px) clamp(10px,1.2vw,14px);
 box-shadow:0 -3px 18px rgba(26,8,4,.16);display:flex;flex-direction:column;gap:3px}
.gm-grab{width:32px;height:3.5px;border-radius:100px;background:rgba(26,8,4,.16);margin:0 auto 3px}
.gm-card{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(26,8,4,.07)}
.lg-list .gm-card{padding:4px 0}
.lg-list .gm-card .thumb{width:clamp(24px,2.9vw,31px)}
.gm-card:last-child{border-bottom:0}
.gm-card .thumb{width:clamp(27px,3.3vw,35px);aspect-ratio:1;border-radius:8px;flex:none;
 background:#E4DACB;background-image:var(--dots);background-size:9px 9px}
.gm-i{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gm-nm{height:7px;border-radius:100px;background:rgba(26,8,4,.3);width:74%}
.gm-rt{display:flex;align-items:center;gap:4px;font-size:clamp(8px,.9vw,9.8px);color:var(--muted);font-weight:600}
.gm-st{color:#E0A020;letter-spacing:-.5px;font-size:9px}
.gm-sub{height:5px;border-radius:100px;background:rgba(26,8,4,.14);width:56%}
.gm-open{font-size:clamp(7.5px,.86vw,9.3px);font-weight:600;color:#2E7D4F}
.gm-call{flex:none;align-self:center;display:flex;align-items:center;gap:4px;
 font-size:clamp(7.5px,.86vw,9.3px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 padding:6px 10px;border-radius:100px;border:1px solid rgba(26,8,4,.16);color:var(--muted)}
/* la tarjeta del negocio del lector */
.gm-card.mine{background:rgba(199,42,8,.07);border-radius:9px;padding:7px 8px;border-bottom:0;
 box-shadow:inset 0 0 0 1.5px rgba(199,42,8,.4)}
.gm-card.mine .gm-nm{background:var(--accent);width:52%}
.gm-card.mine .gm-call{background:var(--accent);border-color:var(--accent);color:#fff}
.gm-card.gone{opacity:.4}
.gm-more{text-align:center;font-size:clamp(8px,.92vw,10px);font-weight:700;color:#1A6FD4;
 padding-top:4px;letter-spacing:.02em}
.gm-lab{font-size:clamp(7.5px,.86vw,9.5px);letter-spacing:.11em;text-transform:uppercase;
 font-weight:700;color:var(--muted);text-align:center;padding-top:5px}
/* pantalla de llamada */
.gm-callscr{position:absolute;inset:0;z-index:10;background:#12100F;display:flex;
 flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;padding:20px}
.gm-callscr .av{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.11)}
.gm-callscr b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.05em;
 text-transform:uppercase;color:rgba(255,255,255,.86)}
.gm-callscr small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.gm-callscr .grn{width:46px;height:46px;border-radius:50%;background:#2E9E4F;margin-top:6px}
/* pantalla web lenta */
.gm-slow{position:absolute;inset:0;z-index:10;background:#fff;display:flex;flex-direction:column;
 padding:clamp(38px,4.6vw,54px) clamp(13px,1.6vw,18px) 16px;gap:7px}
.gm-spin{width:24px;height:24px;border-radius:50%;margin:auto auto 12px;
 border:2.5px solid rgba(26,8,4,.1);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gm-slow i{display:block;height:6px;border-radius:100px;background:rgba(26,8,4,.11)}
.gm-slow i:nth-child(3n){width:72%}.gm-slow i:nth-child(4n){width:88%}
/* cadena final */
.gm-chain{position:absolute;inset:0;z-index:10;background:#100604;display:flex;flex-direction:column;
 justify-content:center;padding:clamp(38px,4.6vw,54px) clamp(13px,1.6vw,18px) 16px}
.gm-ch{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
 background:rgba(199,42,8,.16);border:1px solid rgba(240,121,79,.3);
 font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.08em;
 text-transform:uppercase;color:#F0794F}
.gm-ch::before{content:'';width:5px;height:5px;border-radius:50%;background:#F0794F;flex:none}
.gm-lk{width:1.5px;height:12px;background:rgba(240,121,79,.42);margin-left:22px}

.ph-reel{position:absolute;inset:0;display:flex;flex-direction:column;will-change:transform;z-index:1}
.ph{flex:0 0 100%;height:100%;position:relative;overflow:hidden;background:#EFE8DC}


/* ── Resultados organicos de Google (movil y escritorio) ──────────────────── */
.go{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.go-top{padding:clamp(38px,4.6vw,54px) clamp(11px,1.4vw,15px) 0;display:flex;flex-direction:column;gap:7px}
.go .gm-sb{box-shadow:none;border:1px solid rgba(26,8,4,.14)}
.go-nav{display:flex;gap:clamp(9px,1.2vw,15px);padding-bottom:5px;
 border-bottom:1px solid rgba(26,8,4,.09);font-size:clamp(7.5px,.86vw,9.5px);font-weight:600;color:var(--muted)}
.go-nav b{color:#1A6FD4;font-weight:700;position:relative}
.go-nav b::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#1A6FD4}
.go-list{flex:1;min-height:0;overflow:hidden;padding:clamp(8px,1vw,12px) clamp(11px,1.4vw,15px);
 display:flex;flex-direction:column;gap:clamp(8px,1vw,12px)}
.go-r{display:flex;flex-direction:column;gap:3px}
.go-u{display:flex;align-items:center;gap:5px;font-size:clamp(6.8px,.78vw,8.4px);color:var(--muted)}
.go-u span{width:12px;height:12px;border-radius:50%;background:rgba(26,8,4,.09);flex:none}
.go-u i{display:block;height:4px;border-radius:100px;background:rgba(26,8,4,.16);width:44%}
.go-t{height:7px;border-radius:100px;background:#1A6FD4;opacity:.72;width:78%}
.go-d{display:flex;flex-direction:column;gap:3px}
.go-d i{display:block;height:4px;border-radius:100px;background:rgba(26,8,4,.12)}
.go-d i:last-child{width:62%}
.go-r.you .go-t{background:var(--accent);opacity:1;width:58%}
.go-r.you .go-u i{background:var(--accent);opacity:.5}
.go-r.you{background:rgba(199,42,8,.07);border-radius:8px;padding:7px 8px;margin:0 -8px;
 box-shadow:inset 0 0 0 1.5px rgba(199,42,8,.35)}
.go-pg{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
 font-size:clamp(7.5px,.86vw,9.2px);font-weight:700;color:#1A6FD4;padding-top:6px;
 border-top:1px solid rgba(26,8,4,.08)}
.go-pg em{font-style:normal;color:var(--muted);font-weight:600}
.go-note{text-align:center;font-size:clamp(7px,.8vw,8.8px);font-weight:800;letter-spacing:.11em;
 text-transform:uppercase;color:var(--accent);padding-top:5px}

/* ── Respuesta de IA, version movil ───────────────────────────────────────── */
.gai{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;
 padding:clamp(38px,4.6vw,54px) clamp(11px,1.4vw,15px) clamp(12px,1.5vw,16px)}
.gai .gm-sb{box-shadow:none;border:1px solid rgba(26,8,4,.14);margin-bottom:7px}
.gai-b{flex:1;min-height:0;border-radius:11px;padding:clamp(9px,1.1vw,13px);
 background:linear-gradient(150deg,rgba(26,111,212,.08),rgba(199,42,8,.05));
 border:1px solid rgba(26,111,212,.15);display:flex;flex-direction:column;gap:5px}
.gai-h{display:flex;align-items:center;gap:5px;font-size:clamp(7.5px,.84vw,9.2px);font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:#1A6FD4}
.gai-h svg{width:9px;height:9px;flex:none}
.gai-b > i{display:block;height:5px;border-radius:100px;background:rgba(26,8,4,.15)}
.gai-b > i:nth-of-type(3){width:86%}
.gai-b > i:nth-of-type(5){width:71%}
.gai-b > i:nth-of-type(7){width:49%}
.gai-s{margin-top:auto;padding-top:8px;display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden}
.gai-c{display:flex;align-items:center;gap:4px;font-size:clamp(6.6px,.76vw,8.2px);font-weight:700;
 padding:4px 7px;border-radius:100px;background:#fff;color:var(--muted);white-space:nowrap;
 box-shadow:0 1px 3px rgba(26,8,4,.12)}
.gai-c b{width:10px;height:10px;border-radius:50%;background:rgba(26,8,4,.1);display:grid;
 place-items:center;font-size:6px;color:var(--dark)}
.gai-c.gone{opacity:.4}
.gai-x{margin-top:7px;text-align:center;font-size:clamp(7px,.8vw,8.8px);font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}


/* ── Buscador de escritorio con paginador — bloque de Local SEO ───────────── */
#s-local .svc-art{aspect-ratio:1/1.04;max-height:66vh}
.srp{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;
 padding:clamp(12px,1.5vw,18px) clamp(13px,1.6vw,19px) clamp(10px,1.3vw,14px)}
.srp .gm-sb{box-shadow:none;border:1px solid rgba(26,8,4,.14)}
.srp .gm-sb span{font-size:clamp(10.5px,1.1vw,13px)}
.srp-nav{display:flex;gap:clamp(11px,1.4vw,18px);margin-top:clamp(7px,.9vw,11px);padding-bottom:6px;
 border-bottom:1px solid rgba(26,8,4,.1);font-size:clamp(9px,1vw,11px);font-weight:600;color:var(--muted)}
.srp-nav b{color:#1A6FD4;font-weight:700;position:relative}
.srp-nav b::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#1A6FD4}
.srp-body{position:relative;flex:1;min-height:0}
.srp-pane{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;
 gap:clamp(6px,.8vw,10px);padding-top:clamp(7px,.9vw,11px)}
.srp-pane.on{display:flex}
.srp-r{display:flex;flex-direction:column;gap:3px}
.srp-u{display:flex;align-items:center;gap:6px}
.srp-u span{width:14px;height:14px;border-radius:50%;background:rgba(26,8,4,.09);flex:none}
.srp-u i{display:block;height:5px;border-radius:100px;background:rgba(26,8,4,.16);width:38%}
.srp-t{height:8px;border-radius:100px;background:#1A6FD4;opacity:.72;width:72%}
.srp-d{display:flex;flex-direction:column;gap:4px}
.srp-d i{display:block;height:4.5px;border-radius:100px;background:rgba(26,8,4,.12)}
.srp-d i:last-child{width:58%}
.srp-r.you{background:rgba(199,42,8,.08);border-radius:9px;padding:8px 9px;
 box-shadow:inset 0 0 0 1.5px rgba(199,42,8,.4)}
.srp-r.you .srp-t{background:var(--accent);opacity:1;width:54%}
.srp-r.you .srp-u i{background:var(--accent);opacity:.5}
.srp-r.you .srp-n{color:var(--accent)}
.srp-n{font-family:var(--display);font-weight:800;font-size:clamp(10px,1.05vw,12px);
 color:var(--muted);min-width:2ch;flex:none}
.srp-tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;
 font-size:clamp(8.5px,.92vw,10px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:var(--accent)}
.srp-dead{margin-top:auto;padding-top:5px;text-align:center;font-size:clamp(9px,.98vw,11px);font-weight:700;
 letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.srp-pager{display:flex;align-items:center;justify-content:center;gap:7px;
 padding-top:clamp(9px,1.15vw,13px);border-top:1px solid rgba(26,8,4,.09);margin-top:clamp(8px,1vw,12px)}
.srp-pg{width:clamp(22px,2.5vw,29px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
 font-size:clamp(10px,1.05vw,12px);font-weight:700;color:#1A6FD4;cursor:pointer;
 border:1px solid transparent;background:transparent;transition:.22s}
.srp-pg:hover{background:rgba(26,111,212,.1)}
.srp-pg[aria-selected="true"]{background:#1A6FD4;color:#fff}
.srp-pg-l{font-size:clamp(9px,1vw,11px);font-weight:700;color:var(--muted);padding:0 4px}

/* ── Bloques de servicio con interfaz de Maps ─────────────────────────────── */
#stack{position:relative;overflow-x:clip}
.svc{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden;
 padding-top:var(--navh);box-shadow:var(--lift);
 /* fondo explicito: una seccion pegajosa sin fondo deja ver la de debajo */
 background:var(--bg)}
.svc.dark{background:var(--dark)}
.svc > .wrap{width:100%}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,68px);align-items:center}
.svc-n{font-family:var(--display);font-weight:800;font-size:clamp(13px,1.4vw,16px);
 letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.svc h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.92;font-size:clamp(26px,min(4.1vw,5.6vh),58px);max-width:13ch}
.svc-p{margin-top:clamp(10px,1.6vh,17px);max-width:48ch;font-size:clamp(14px,1.48vw,16.5px);line-height:1.62;color:var(--muted)}
/* Subapartados dentro de una ficha de servicio. Solo los usa web design, que es
   el unico con suficiente materia como para necesitar sus propios titulos. */
.svc-sub{margin-top:clamp(22px,3.2vh,32px)}
.svc-sub h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.01em;font-size:clamp(16px,1.8vw,21px);margin-bottom:9px}
.svc-sub p{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.7;color:var(--muted);max-width:66ch}
.svc-l{list-style:none;margin-top:clamp(12px,2vh,22px);display:flex;flex-direction:column;gap:clamp(5px,1vh,10px)}
.svc-l li{position:relative;padding-left:22px;font-size:clamp(13.5px,1.45vw,15.5px);line-height:1.5}
.svc-l li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.svc-foot{margin-top:clamp(16px,2.8vh,30px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.svc-art{position:relative;aspect-ratio:1/.86;max-height:49vh;border-radius:16px;overflow:hidden;
 background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}
.svc.dark .svc-art{background:rgba(236,229,219,.05);border-color:rgba(236,229,219,.16)}
.svc.dark .svc-p{color:rgba(236,229,219,.66)}
.svc.dark .svc-n{color:#F0794F}
.svc.dark .svc-l li::before{background:#F0794F}


/* ── Widget de Maps para los bloques de servicio ──────────────────────────── */
.gmw{position:absolute;inset:0;display:flex;flex-direction:column;background:#EFE8DC;overflow:hidden}
.gmw-top{position:relative;z-index:6;padding:clamp(11px,1.4vw,16px) clamp(11px,1.4vw,16px) 0;
 display:flex;flex-direction:column;gap:8px}
.gmw .gm-sb span{font-size:clamp(11px,1.15vw,13.5px)}
.gmw-body{position:relative;flex:1;min-height:0}

/* C · rejilla de posiciones sobre el mapa */
.grid5{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);
 grid-template-rows:repeat(5,1fr);place-items:center;padding:clamp(5px,.8vw,10px)}
.gp{width:clamp(21px,2.55vw,30px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
 font-family:var(--display);font-weight:800;font-size:clamp(9px,1.05vw,12px);color:#fff;
 cursor:pointer;border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 6px rgba(26,8,4,.28);
 transition:transform .22s,box-shadow .22s}
.gp:hover,.gp:focus-visible,.gp.sel{transform:scale(1.22);box-shadow:0 5px 16px rgba(26,8,4,.4);z-index:2}
.gp.g1{background:#2E7D4F}.gp.g2{background:#C9962A}.gp.g3{background:#C72A08}
.gmw-read{position:relative;z-index:7;background:#fff;border-top:1px solid rgba(26,8,4,.1);
 padding:clamp(10px,1.3vw,15px) clamp(12px,1.5vw,17px);display:flex;align-items:center;gap:12px}
.gmw-read b{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,31px);
 line-height:1;color:var(--dark);min-width:2.2ch}
.gmw-read .rd{flex:1;min-width:0}
.gmw-read .rd i{display:block;font-style:normal;font-size:clamp(9.5px,1.02vw,11.5px);font-weight:700;
 letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gmw-read .rd em{display:block;font-style:normal;margin-top:3px;font-size:clamp(11.5px,1.2vw,14px);
 line-height:1.4;color:var(--dark)}
.gmw-hint{position:absolute;right:8px;top:8px;z-index:8;
 font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
 background:rgba(255,255,255,.9);padding:5px 12px;border-radius:100px;white-space:nowrap;
 box-shadow:0 2px 8px rgba(26,8,4,.14);transition:opacity .3s}
.gmw.touched .gmw-hint{opacity:0}

/* D · el mismo negocio en dos idiomas */
.lgw{position:absolute;inset:0;display:flex;flex-direction:column;background:#EFE8DC;overflow:hidden}
.lg-tabs{display:flex;gap:0;padding:clamp(9px,1.1vw,13px) clamp(9px,1.1vw,13px) 0}
.lg-tab{flex:1;text-align:center;padding:clamp(6px,.8vw,9px);font-family:var(--display);font-weight:800;
 font-size:clamp(11px,1.15vw,14px);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
 color:var(--muted);background:rgba(26,8,4,.05);border:1px solid rgba(26,8,4,.1);transition:.25s}
.lg-tab:first-child{border-radius:9px 0 0 9px}.lg-tab:last-child{border-radius:0 9px 9px 0;border-left:0}
.lg-tab[aria-selected="true"]{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.lg-panes{position:relative;flex:1;min-height:0}
.lg-pane{position:absolute;inset:0;display:none;flex-direction:column}
.lg-pane.on{display:flex}
.lg-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(8px,1vw,12px);gap:6px}
.lg-list{background:#fff;border-radius:12px;padding:2px clamp(9px,1.15vw,13px);
 box-shadow:0 2px 10px rgba(26,8,4,.1)}
.lg-miss{margin-top:auto;display:flex;align-items:center;gap:10px;padding:clamp(8px,1vw,12px);
 border-radius:11px;background:rgba(199,42,8,.1);border:1px solid rgba(199,42,8,.28)}
.lg-miss b{font-family:var(--display);font-weight:800;font-size:clamp(13px,1.35vw,16px);
 text-transform:uppercase;letter-spacing:.04em;color:var(--accent-dk)}
.lg-miss span{font-size:clamp(11px,1.15vw,13px);line-height:1.45;color:var(--dark)}
.lg-here{margin-top:auto;padding:clamp(8px,1vw,12px);border-radius:11px;
 background:rgba(46,125,79,.1);border:1px solid rgba(46,125,79,.3);
 font-size:clamp(11px,1.15vw,13px);line-height:1.45;color:var(--dark)}
.lg-here b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
 color:#2E7D4F;display:block;font-size:clamp(13px,1.35vw,16px);margin-bottom:2px}

/* E · MacBook con Google AI Mode y Perplexity ─────────────────────────────
   Se imita la GRAMATICA de cada interfaz (pill, pestanas, bloque de respuesta,
   fuentes numeradas), nunca sus logotipos. */
.mac{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
 background:#DCD3C4;padding:clamp(7px,.9vw,11px);overflow:hidden}
.mac-w{width:100%;border-radius:9px 9px 3px 3px;background:#241310;padding:7px 7px 0;
 box-shadow:0 16px 40px rgba(26,8,4,.28)}
.mac-scr{position:relative;aspect-ratio:16/11.4;border-radius:3px;overflow:hidden;background:#fff}
.mac-base{width:116%;margin-left:-8%;height:clamp(8px,1vw,12px);position:relative;
 background:linear-gradient(#CFC5B6,#A2978A);border-radius:0 0 7px 7px}
.mac-base::after{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
 width:15%;height:3.5px;background:rgba(26,8,4,.22);border-radius:0 0 4px 4px}
.mac-tabs{display:flex;gap:0;margin-bottom:clamp(6px,.75vw,9px)}
/* ── ZONA TACTIL DE LOS BOTONES DE LAS DEMOS ─────────────────────────────────
   .gp, .srp-pg, .mac-tab y .lg-tab son pastillas y circulos pequenos: medidos
   en un movil de 390 px dan entre 21 y 27 px de alto, la mitad de lo que hace
   falta para acertar con el pulgar. No se agrandan -reventarian el diseno de
   las maquetas-: se les cuelga un area invisible de 44 px centrada encima. El
   dibujo se queda igual y el toque acierta. */
@media(hover:none),(max-width:860px){
 .gp,.srp-pg,.mac-tab,.lg-tab{position:relative}
 .gp::after,.srp-pg::after,.mac-tab::after,.lg-tab::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
}
.mac-tab{flex:1;text-align:center;padding:clamp(5px,.65vw,7px);font-family:var(--display);font-weight:800;
 font-size:clamp(9px,1vw,11.5px);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
 color:var(--muted);background:rgba(26,8,4,.05);border:1px solid rgba(26,8,4,.1);transition:.25s}
.mac-tab:first-child{border-radius:8px 0 0 8px}
.mac-tab:last-child{border-radius:0 8px 8px 0;border-left:0}
.mac-tab[aria-selected="true"]{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.mac-pane{position:absolute;inset:0;display:none;flex-direction:column}
.mac-pane.on{display:flex}

/* Google, modo IA */
.ga{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;
 padding:clamp(8px,1vw,12px) clamp(10px,1.25vw,15px)}
.ga-sb{display:flex;align-items:center;gap:8px;border:1px solid rgba(26,8,4,.14);border-radius:100px;
 padding:clamp(5px,.65vw,8px) clamp(9px,1.1vw,13px);box-shadow:0 1px 4px rgba(26,8,4,.07)}
.ga-sb svg{width:11px;height:11px;stroke:var(--muted);fill:none;stroke-width:2.1;flex:none}
.ga-sb span{flex:1;font-size:clamp(8.5px,.96vw,10.5px);color:var(--dark);white-space:nowrap;overflow:hidden}
.ga-nav{display:flex;gap:clamp(8px,1.1vw,14px);margin-top:clamp(6px,.75vw,9px);
 padding-bottom:5px;border-bottom:1px solid rgba(26,8,4,.09);
 font-size:clamp(7.5px,.86vw,9.5px);font-weight:600;color:var(--muted)}
.ga-nav b{color:#1A6FD4;font-weight:700;position:relative;display:inline-flex;align-items:center;gap:4px}
.ga-nav b::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#1A6FD4}
.ga-spark{width:9px;height:9px;flex:none}
.ga-ans{margin-top:clamp(7px,.9vw,11px);flex:1;min-height:0;border-radius:9px;
 background:linear-gradient(150deg,rgba(26,111,212,.07),rgba(199,42,8,.05));
 border:1px solid rgba(26,111,212,.14);padding:clamp(8px,1vw,12px);display:flex;flex-direction:column;gap:5px}
.ga-h{display:flex;align-items:center;gap:5px;font-size:clamp(7.5px,.84vw,9.2px);font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:#1A6FD4}
.ga-ans i{display:block;height:5px;border-radius:100px;background:rgba(26,8,4,.14)}
.ga-ans i:nth-of-type(2){width:88%}
.ga-ans i:nth-of-type(3){width:61%}
.ga-src{margin-top:auto;padding-top:clamp(6px,.8vw,9px);display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden}
.ga-c{display:flex;align-items:center;gap:5px;font-size:clamp(7px,.8vw,8.8px);font-weight:700;
 padding:4px 8px;border-radius:100px;background:#fff;color:var(--muted);
 box-shadow:0 1px 3px rgba(26,8,4,.11);white-space:nowrap}
.ga-c b{width:11px;height:11px;border-radius:50%;background:rgba(26,8,4,.1);display:grid;
 place-items:center;font-size:6.5px;color:var(--dark)}
.ga-c.you{background:var(--accent);color:#fff}
.ga-c.you b{background:rgba(255,255,255,.28);color:#fff}
.ga-c.gone{opacity:.42}

/* Perplexity, tema oscuro */
.px{position:absolute;inset:0;background:#0F1416;display:flex;flex-direction:column;
 padding:clamp(9px,1.1vw,14px) clamp(10px,1.25vw,15px);color:#E6EDEE}
.px-q{font-size:clamp(9.5px,1.08vw,12px);font-weight:600;line-height:1.35;padding-bottom:clamp(6px,.8vw,10px);
 border-bottom:1px solid rgba(230,237,238,.12)}
.px-lb{margin-top:clamp(7px,.9vw,11px);font-size:clamp(7px,.8vw,8.8px);font-weight:800;letter-spacing:.13em;
 text-transform:uppercase;color:#3FB6B0}
.px-src{display:flex;gap:5px;margin-top:5px}
.px-s{flex:1;border-radius:6px;background:rgba(230,237,238,.06);padding:6px 7px;
 display:flex;flex-direction:column;gap:4px;border:1px solid transparent}
.px-s span{display:block;height:4px;border-radius:100px;background:rgba(230,237,238,.22)}
.px-s span:last-child{width:58%;background:rgba(230,237,238,.12)}
.px-s b{font-size:6.8px;font-weight:800;color:rgba(230,237,238,.42)}
.px-s.you{background:rgba(199,42,8,.2);border-color:rgba(240,121,79,.5)}
.px-s.you b{color:#F0794F}
.px-s.you span{background:rgba(240,121,79,.6)}
.px-a{margin-top:clamp(7px,.9vw,11px);flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.px-a i{display:block;height:5px;border-radius:100px;background:rgba(230,237,238,.22)}
.px-a i:nth-of-type(3){width:79%}
.px-a i:nth-of-type(4){width:54%}
.px-cite{display:inline-flex;gap:3px;margin-top:auto;padding-top:5px}
.px-cite em{font-style:normal;font-size:6.5px;font-weight:800;padding:2px 5px;border-radius:4px;
 background:rgba(230,237,238,.12);color:rgba(230,237,238,.55)}
.px-cite em.you{background:var(--accent);color:#fff}
.px-foot{padding-top:clamp(6px,.8vw,9px);font-size:clamp(7px,.8vw,8.8px);
 font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(230,237,238,.35)}

/* F · el navegador del bloque de diseno web */
.brw{position:absolute;inset:0;display:flex;flex-direction:column;background:#DCD3C4;
 padding:clamp(9px,1.2vw,14px);overflow:hidden}
.brw-w{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
 background:#fff;box-shadow:0 12px 34px rgba(26,8,4,.22)}
.brw-bar{flex:none;display:flex;align-items:center;gap:7px;padding:8px 11px;background:#EFE8DC;
 border-bottom:1px solid rgba(26,8,4,.09)}
.brw-bar .dot{width:8px;height:8px;border-radius:50%;background:rgba(26,8,4,.17)}
.brw-url{flex:1;height:16px;border-radius:100px;background:#fff;margin-left:5px;
 display:flex;align-items:center;padding:0 9px;font-size:8.5px;font-weight:600;color:var(--muted);
 letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(26,8,4,.07)}
.brw-pg{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;
 padding:clamp(10px,1.3vw,15px);gap:clamp(6px,.8vw,9px);background:var(--paper)}
/* el contenido ocupa dos tercios: el tercio derecho es el carril de las notas */
.brw-pg > :not(.brw-note){max-width:66%}
.brw-nav{display:flex;align-items:center;justify-content:flex-start;gap:10px}
.brw-lg{font-family:var(--display);font-weight:800;font-size:clamp(10px,1.1vw,13px);letter-spacing:.1em;
 text-transform:uppercase;color:var(--dark)}
.brw-tel{font-size:clamp(7.5px,.85vw,9.5px);font-weight:700;letter-spacing:.05em;padding:5px 10px;
 border-radius:100px;background:var(--accent);color:#fff;white-space:nowrap}
.brw-h{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.94;
 font-size:clamp(15px,1.75vw,21px);color:var(--dark);max-width:15ch;margin-top:2px}
.brw-sub{height:5px;border-radius:100px;background:rgba(26,8,4,.14);width:76%}
.brw-sub2{height:5px;border-radius:100px;background:rgba(26,8,4,.14);width:54%}
.brw-cta{margin-top:3px;display:flex;gap:6px}
.brw-cta i{height:20px;border-radius:100px;background:var(--accent);width:38%}
.brw-cta i:last-child{background:transparent;box-shadow:inset 0 0 0 1.2px rgba(26,8,4,.2);width:28%}
.brw-pf{margin-top:auto;display:flex;gap:6px;align-items:center;padding-top:7px;
 border-top:1px solid rgba(26,8,4,.09)}
.brw-pf i{height:12px;width:34px;border-radius:3px;background:rgba(26,8,4,.11)}
.brw-note{position:absolute;right:clamp(9px,1.2vw,14px);z-index:3;display:flex;align-items:center;gap:6px;
 font-size:clamp(7px,.8vw,8.8px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
 color:var(--accent-dk);white-space:nowrap;text-align:right}
.brw-note::before{content:'';width:clamp(10px,1.4vw,20px);height:1px;background:var(--accent);flex:none}
.brw-note.n1{top:9%}
.brw-note.n2{top:44%}
.brw-note.n3{bottom:9%}

/* G · planes — mismas tarjetas que la home, portadas tal cual */
#plans{--pu:clamp(10.4px,1.38vh,14px);background:var(--bg-alt);background-image:var(--dots);background-size:28px 28px;
 padding:clamp(20px,3vh,104px) 0 clamp(20px,3vh,112px)}
#plans .h2{font-size:clamp(24px,min(4.4vw,5.7vh),58px)}
#plans .lead{margin-top:clamp(8px,1.5vh,18px);font-size:clamp(13.5px,min(1.55vw,2.1vh),18px)}
.deck{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,54px);justify-content:center;align-items:stretch;max-width:1160px;margin:clamp(10px,1.7vh,48px) auto 0}
.pc{flex:1 1 300px;max-width:340px;min-height:clamp(326px,48vh,500px);perspective:1500px;
 transition:transform .45s cubic-bezier(.25,.46,.45,.94)}
.pc:nth-child(1){transform:rotate(-2.2deg)}
.pc:nth-child(2){transform:rotate(1.4deg)}
.pc:nth-child(3){transform:rotate(-1.1deg)}
.pc:hover,.pc:focus-within{transform:rotate(0) translateY(-10px);z-index:3}
@media(max-height:820px){.pc:nth-child(1){transform:rotate(-1.1deg)}
 .pc:nth-child(2){transform:rotate(.7deg)}.pc:nth-child(3){transform:rotate(-.6deg)}}
/* Las dos caras en la misma celda: la tarjeta mide lo que la más alta, y
   añadir una linea a un plan deja de cortarlo por abajo. */
.pc-in{display:grid;position:relative;width:100%;min-height:100%;
 transition:transform .7s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.pc:hover .pc-in,.pc:focus-within .pc-in{transform:rotateY(180deg)}
.pc-face{grid-area:1/1;position:relative;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 background:var(--paper);background-image:radial-gradient(circle,rgba(26,8,4,.055) 1px,transparent 1px);
 background-size:14px 14px;padding:calc(var(--pu)*2.1) calc(var(--pu)*1.7) calc(var(--pu)*1.5);
 display:flex;flex-direction:column;text-align:center;
 box-shadow:7px 8px 0 rgba(26,8,4,.20), 0 26px 52px rgba(26,8,4,.26)}
/* doble filete interior: el mismo recurso que el borde tejido de la banderola */
.pc-face::before{content:'';position:absolute;inset:6px;border:1px solid rgba(26,8,4,.16);
 pointer-events:none;z-index:0}
.pc-face > *{position:relative;z-index:1}
.pc:nth-child(1) .pc-face{border:7px solid var(--accent)}
.pc:nth-child(2) .pc-face{border:7px solid var(--dark)}
.pc:nth-child(3) .pc-face{border:7px solid var(--muted)}
.pc-back{transform:rotateY(180deg);text-align:left;
 padding:calc(var(--pu)*1.85) calc(var(--pu)*1.55) calc(var(--pu)*1.4)}
.pc-tag{position:absolute;top:12px;right:14px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;padding:5px 11px;border-radius:100px;background:var(--dark);color:var(--cream);
 box-shadow:2px 2px 0 rgba(199,42,8,.85)}
.pc-mk{position:absolute;top:12px;left:14px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.pc:nth-child(1) .pc-mk{color:var(--accent)}.pc:nth-child(2) .pc-mk{color:var(--dark)}.pc:nth-child(3) .pc-mk{color:var(--muted)}
.pc-front .pc-t{margin-top:auto}   /* con el .pc-flip de abajo, centra el bloque en la cara */
.pc-t{margin-top:calc(var(--pu)*1.85);font-family:var(--serif);font-weight:700;
 font-size:clamp(26px,min(3.2vw,4.3vh),42px);line-height:1.02}
.pc-s{margin-top:calc(var(--pu)*.72);font-family:var(--serif);font-style:italic;
 font-size:calc(var(--pu)*1.25);color:var(--muted)}
.pc-p{position:relative;margin-top:calc(var(--pu)*1.5);padding-top:calc(var(--pu)*1.1);
 font-family:var(--display);font-weight:800;font-size:clamp(28px,min(3.4vw,4.6vh),46px);line-height:1}
.pc-p::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
 width:46px;height:3px;border-radius:2px}
.pc:nth-child(1) .pc-p{color:var(--accent)}.pc:nth-child(1) .pc-p::before{background:var(--accent)}
.pc:nth-child(2) .pc-p{color:var(--dark)}  .pc:nth-child(2) .pc-p::before{background:var(--dark)}
.pc:nth-child(3) .pc-p{color:var(--muted)} .pc:nth-child(3) .pc-p::before{background:var(--muted)}
.pc-p-ask{font-size:clamp(22px,min(2.4vw,3.2vh),32px);letter-spacing:.01em}
.pc-p small{font-family:var(--body);font-size:calc(var(--pu)*.86);font-weight:400;color:var(--muted);margin-left:3px}
.pc-inc{list-style:none;margin:calc(var(--pu)*1.15) 0 0;padding-top:calc(var(--pu)*1.05);
 border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;
 gap:calc(var(--pu)*.42)}
.pc-inc li{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
 font-size:max(10.5px,calc(var(--pu)*.98));line-height:1;padding:calc(var(--pu)*.52) calc(var(--pu)*.8);
 border-radius:100px;background:rgba(26,8,4,.06);color:var(--dark)}
.pc:nth-child(1) .pc-inc li:first-child{background:var(--accent);color:#fff}
.pc:nth-child(2) .pc-inc li:first-child{background:var(--dark);color:var(--cream)}
.pc:nth-child(3) .pc-inc li:first-child{background:var(--muted);color:var(--paper)}
.pc-flip{margin-top:auto;padding-top:calc(var(--pu)*1.1);font-size:max(9.5px,calc(var(--pu)*.79));font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:var(--accent)}
.pc-bt{margin-top:calc(var(--pu)*1.5);font-family:var(--serif);font-weight:700;
 font-size:calc(var(--pu)*1.86);line-height:1.1}
.pc-bt span{display:block;font-family:var(--display);font-size:calc(var(--pu)*1.36);
 color:var(--muted);letter-spacing:.02em;margin-top:2px}
.pc-l{list-style:none;margin:calc(var(--pu)*.95) 0 0;padding-top:calc(var(--pu)*.82);
 border-top:1px solid var(--line);display:flex;flex-direction:column;gap:calc(var(--pu)*.42)}
.pc-l li{position:relative;padding-left:17px;font-size:max(10.8px,calc(var(--pu)*.9));line-height:1.4}
.pc-l li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pc-b{margin-top:auto;padding-top:calc(var(--pu)*1.1);text-align:center}
.pc-b a{display:inline-block;padding:calc(var(--pu)*.86) calc(var(--pu)*1.8);border-radius:100px;
 font-family:var(--serif);font-weight:700;font-size:max(12.5px,calc(var(--pu)*1.07));color:var(--paper);transition:filter .3s}
.pc:nth-child(1) .pc-b a{background:var(--accent)}.pc:nth-child(2) .pc-b a{background:var(--dark)}.pc:nth-child(3) .pc-b a{background:var(--muted)}
.pc-b a:hover{filter:brightness(1.1)}
/* No hover on touch: show the detail underneath instead of hiding it behind a flip. */
/* ── LA TARJETA NO GIRA: SE ABRE ───────────────────────────────────────────
   Estas tarjetas tienen dos caras y se voltean al pasar el raton. Donde no hay
   raton, la cara de atras —donde esta TODO lo que incluye el plan— no se puede
   ver nunca, y la propia tarjeta te pide en un telefono que "pases el raton por
   encima". Asi que en tactil, y tambien en ventana estrecha, se abren: cara
   delantera arriba y contenido debajo.

   Ya habia un bloque para esto y estaba a medias — de ahi las letras encima de
   otras que se veian en el movil:

   · position:static en la cara. La marca "Krelo" y la etiqueta "Most popular"
     van en absoluto DENTRO de cada cara; con la cara estatica se anclaban a la
     tarjeta entera, asi que las dos marcas caian en la misma esquina y la
     etiqueta se metia encima del titulo. Va relative, que fluye igual y vuelve
     a ser la referencia.
   · El filete de 7 px estaba en cada cara: apiladas, salian dos cajas. Pasa a
     la tarjeta.
   · El titulo de la cara delantera se centraba con margin-top:auto, que en una
     columna vale cero y lo subia hasta debajo de la etiqueta.

   Una sola condicion para los dos casos, en vez de dos bloques que se copian:
   sin raton (movil, tablet) o ventana estrecha. */
@media (hover:none), (max-width:860px){
 .pc,.pc-in{transform:none!important;height:auto;min-height:0;perspective:none}
 .pc{flex:1 1 100%;max-width:none}
 .pc-in{transform-style:flat;display:block}
 .pc-face{position:relative;backface-visibility:visible;-webkit-backface-visibility:visible;
  grid-area:auto;border:0}
 .pc-face::before{display:none}
 .pc:nth-child(1) .pc-in{border:6px solid var(--accent)}
 .pc:nth-child(2) .pc-in{border:6px solid var(--dark)}
 .pc:nth-child(3) .pc-in{border:6px solid var(--muted)}
 .pc-back{transform:none;margin-top:0;border-top:1px solid var(--line)}
 .pc-back .pc-mk,.pc-back .pc-tag{display:none}
 .pc-front .pc-t{margin-top:34px}
 .pc-flip{display:none}
 /* Con la tarjeta abierta, esta lista deja de ser un detalle escondido detras
    y pasa a ser LO QUE SE LEE del plan. A 10,8 px no se lee en un telefono. */
 .pc-l li{font-size:14px;line-height:1.5;padding-left:19px}
 .pc-l li::before{top:8px}
 .pc-inc li{font-size:11.5px}
 /* La cara de atras repetia nombre y precio. Girando hacia falta —no ves la de
    delante—, pero abierta queda el mismo dato dos veces seguidas. */
 .pc-bt{display:none}
 .pc-l{margin-top:0;padding-top:0;border-top:0}
}
/* ── Tabla comparativa de planes ─────────────────────────────────────────
   Tabla de verdad, no una rejilla de divs: es un dato tabulado y asi un lector
   de pantalla puede anunciar "Leads, Google Ads, no" en vez de leer simbolos
   sueltos. En movil se desplaza dentro de su caja — nunca la pagina entera. */
.cmp-h{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
 font-size:clamp(20px,2.4vw,30px);text-align:center;margin:clamp(40px,6vh,72px) 0 clamp(16px,2.4vh,26px)}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;
 border:1px solid var(--line);background:var(--paper);
 /* Sin esto el gesto horizontal se escapa: al llegar al final del recorrido la
    pagina encadena el desplazamiento y en iOS, cerca del borde, lo captura el
    gesto de "volver atras". El dedo arrastra y la tabla no se mueve — que es
    justo el "se bloquea". "contain" corta esa cadena: el gesto se queda dentro. */
 overscroll-behavior-x:contain;
 /* Que se pare en columna en vez de a medias entre dos. */
 scroll-snap-type:x proximity}
.cmp th,.cmp td{scroll-snap-align:start}

.cmp{width:100%;min-width:520px;border-collapse:collapse;font-size:clamp(13px,1.4vw,15px)}
.cmp th,.cmp td{padding:13px clamp(10px,1.4vw,18px);text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
 font-size:clamp(12px,1.3vw,14px);border-bottom:2px solid rgba(26,8,4,.2);vertical-align:bottom}
.cmp thead th span{display:block;font-family:var(--body);font-weight:500;font-size:11.5px;
 letter-spacing:0;text-transform:none;color:var(--muted);margin-top:3px}
.cmp tbody th{text-align:left;font-weight:500;color:var(--dark)}
.cmp td{color:var(--accent);font-weight:700}
.cmp .no{color:var(--muted);font-weight:400}
.cmp .on{background:rgba(199,42,8,.055)}
.cmp thead th.on{background:rgba(199,42,8,.1)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-n{max-width:56ch;margin:14px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}

@media(max-width:860px){
 /* A SANGRE, Y VA DESPUES DE LAS REGLAS .cmp A PROPOSITO: escrito antes perdia
    por orden contra .cmp{min-width:520px} y no se aplicaba nada.

    En un movil de 390 px la tabla vivia dentro del padding del wrap: 304 px
    utiles para 520 de contenido, o sea mas de la mitad escondida en una ranura
    estrecha. El calc(50% - 50vw) la lleva a los bordes de la ventana SEA CUAL
    SEA el padding del padre — restar a mano el valor del wrap fallaba en cuanto
    ese valor no era el que yo creia, que es lo que paso al primer intento. */
 .cmp-scroll{margin-inline:calc(50% - 50vw);border-radius:0;border-inline:0;
  /* Dice, sin escribirlo, que la tabla sigue a la derecha. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,rgba(0,0,0,.28) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 90%,rgba(0,0,0,.28) 100%)}
 .cmp{min-width:470px}
 .cmp th,.cmp td{padding-inline:11px}
 .cmp th:first-child,.cmp td:first-child{padding-left:clamp(16px,4vw,22px)}
 .cmp th:last-child,.cmp td:last-child{padding-right:clamp(16px,4vw,22px)}
}
.who{display:grid;grid-template-columns:230px 1fr;gap:clamp(24px,4vw,52px);align-items:center;max-width:none}
.who-f{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.who-f img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/5}
.who-r{margin-top:12px;font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:.09em;font-size:12px;color:var(--accent-dk)}
.who .lead{margin-top:14px}
@media(max-width:860px){
 .who{grid-template-columns:1fr;gap:22px}
 .who-f{width:150px}
}
/* ── Indice de la pagina ─────────────────────────────────────────────────
   Pegado justo debajo de la cabecera: top usa --navh, que el JS del chrome
   mantiene con el alto REAL del header (cambia al cargar las fuentes). Escrito
   a mano, el indice se solaparia con la cabecera el dia que cambie el tipo. */
/* Fondo solido, sin backdrop-filter. La cabecera ya lleva uno; apilar un segundo
   desenfoque de fondo a todo lo ancho, pegado, y sobre contenido que cambia en
   cada fotograma, es repintar dos capas caras en cada scroll. A ras de suelo no
   se nota la diferencia: el indice va pegado justo bajo una barra que ya
   difumina, asi que detras de el nunca hay nada que valga la pena ver. */
/* Que el ancla no quede debajo de la cabecera Y del indice al saltar. */
.svc,#plans,#svc-faq{scroll-margin-top:calc(var(--navh) + 58px)}
/* ── Preguntas ────────────────────────────────────────────────────────────
   <details> nativo: se abre y se cierra sin una linea de JavaScript, y el texto
   esta en el HTML aunque no se abra — que es lo que leen los rastreadores. */
.faqs{max-width:820px;margin:clamp(26px,4vh,44px) auto 0;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:clamp(17px,2.4vh,22px) 44px clamp(17px,2.4vh,22px) 0;
 position:relative;font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.01em;font-size:clamp(16px,1.9vw,21px);line-height:1.2;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-dk)}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
 border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
 transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq p{padding:0 0 clamp(18px,2.6vh,24px);font-size:clamp(14.5px,1.5vw,16.5px);
 line-height:1.7;color:var(--muted);max-width:70ch}

/* ── Confianza, quien lo hace y zonas ─────────────────────────────────────── */
.tru{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(24px,4vh,40px)}
.tru-c{background:var(--paper);padding:clamp(20px,2.8vw,28px)}
.tru-c b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.01em;font-size:clamp(20px,2.4vw,28px);color:var(--accent);margin-bottom:9px}
.tru-c span{font-size:14px;line-height:1.6;color:var(--muted)}
.zon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(24px,4vh,40px)}
.zon-c h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
 font-size:13px;color:var(--accent-dk);padding-bottom:10px;border-bottom:1px solid var(--line)}
.zon-c ul{list-style:none;margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.zon-c li{font-size:13.5px;padding:7px 13px;border-radius:100px;background:var(--paper);
 border:1px solid var(--line);color:var(--muted)}
@media(max-width:860px){
 .tru{grid-template-columns:1fr 1fr}
 .zon{grid-template-columns:1fr;gap:26px}
}
.terms{max-width:760px;margin:clamp(14px,2.2vh,60px) auto 0;text-align:center;font-size:clamp(12px,1.85vh,14px);color:var(--muted);
 display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:center}



/* ── H1 del hero ──────────────────────────────────────────────────────────
   display:block en CSS y no solo por JS: sin JS las dos lineas se pegaban. */
.xh1-l{display:block}
.xh1-acc{color:var(--accent)}

/* ═══════════ LA VOZ — interrupciones del lector ═══════════
   Cinco veces la pagina se para y dice en voz alta lo que el lector esta
   pensando en ese punto exacto, y contesta. */
.talk{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 background:var(--paper);padding:clamp(44px,6vw,80px) 0;position:relative;overflow:hidden}
.talk.tk-d{background:var(--dark);color:var(--cream);border-color:rgba(236,229,219,.14)}
.talk-in{max-width:880px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;
 gap:clamp(16px,2.8vw,34px);align-items:start}
.talk-m{flex:none;width:clamp(30px,4vw,52px);padding-top:clamp(2px,.6vw,8px);
 font-family:var(--serif);font-weight:700;font-size:clamp(42px,6vw,86px);line-height:.72;
 color:var(--accent);user-select:none}
.talk.tk-d .talk-m{color:#F0794F}
.talk-q{font-family:var(--serif);font-style:italic;font-weight:600;
 font-size:clamp(19px,2.7vw,34px);line-height:1.26;letter-spacing:-.005em}
.talk-a{margin-top:clamp(13px,2vh,22px);font-size:clamp(14.5px,1.5vw,17px);
 line-height:1.72;color:var(--muted);max-width:62ch}
.talk.tk-d .talk-a{color:rgba(236,229,219,.68)}
.talk-a b{color:var(--dark);font-weight:600}
.talk.tk-d .talk-a b{color:var(--cream)}
.talk-a a{color:var(--accent-dk);font-weight:600;box-shadow:inset 0 -1px 0 rgba(199,42,8,.4)}
.talk.tk-d .talk-a a{color:#F0794F;box-shadow:inset 0 -1px 0 rgba(240,121,79,.4)}

/* El aviso de idioma: demuestra el servicio en vez de describirlo. */
.hail{background:var(--bg-alt);border-bottom:1px solid var(--line);
 padding:clamp(13px,1.8vh,19px) 0;font-size:clamp(13px,1.35vw,15px)}
.hail-in{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,52px);
 display:flex;flex-wrap:wrap;align-items:center;gap:9px 15px;justify-content:center;text-align:center}
.hail b{font-weight:600}
.hail a{color:var(--accent-dk);font-weight:600;display:inline-flex;align-items:center;gap:6px;
 box-shadow:inset 0 -1px 0 rgba(199,42,8,.45);transition:gap .25s}
.hail a:hover{gap:11px}

/* El reloj de Miami: dato verificable, no adorno. */
.clock{display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:9px;
 font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
 color:rgba(236,229,219,.55);padding:8px 16px;border-radius:100px;
 border:1px solid rgba(236,229,219,.16);margin-bottom:18px;text-align:center}
.clock i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;
 box-shadow:0 0 0 0 rgba(199,42,8,.6);animation:beat 2.4s ease-out infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(199,42,8,.55)}70%{box-shadow:0 0 0 13px rgba(199,42,8,0)}100%{box-shadow:0 0 0 0 rgba(199,42,8,0)}}

/* 06 · la curva de gasto del bloque de anuncios */
.art-spend{width:80%}
.art-spend svg{display:block;width:100%;height:auto;overflow:visible}
.as-fill{fill:rgba(199,42,8,.14)}
.as-line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.as-line2{fill:none;stroke:var(--dark);stroke-width:2.4;stroke-linecap:round}
.svc.dark .as-line2{stroke:var(--cream)}
.svc.dark .as-fill{fill:rgba(199,42,8,.2)}
.as-lb{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.art-key{display:flex;gap:18px;justify-content:center;margin-top:16px;font-size:11.5px;
 letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.svc.dark .art-key{color:rgba(236,229,219,.55)}
.art-key i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ═══════════ 5. LO QUE VENDE UNA AGENCIA vs LO QUE VENDE KRELO ═══════════ */
#svc-vs{background:var(--bg);padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.vs{margin-top:clamp(30px,5vh,54px);display:grid;grid-template-columns:1fr 1fr;
 border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}
.vs-col{padding:clamp(24px,3.6vw,44px)}
.vs-col:first-child{background:var(--paper)}
.vs-col:last-child{background:var(--dark);color:var(--cream)}
.vs-h{font-family:var(--display);font-weight:800;font-size:clamp(17px,2vw,25px);text-transform:uppercase;
 letter-spacing:.04em;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.vs-col:last-child .vs-h{border-color:rgba(236,229,219,.16);color:#F0794F}
.vs-l{list-style:none;display:flex;flex-direction:column;gap:13px}
.vs-l li{position:relative;padding-left:28px;font-size:clamp(14px,1.45vw,15.8px);line-height:1.55}
.vs-l li::before{position:absolute;left:0;top:0;font-family:var(--display);font-weight:800;font-size:17px}
.vs-col:first-child .vs-l li{color:var(--muted)}
.vs-col:first-child .vs-l li::before{content:'×';color:var(--muted)}
.vs-col:last-child .vs-l li::before{content:'✓';color:#F0794F}
.vs-note{margin-top:clamp(22px,3.4vh,36px);text-align:center;font-size:13.5px;color:var(--muted);max-width:62ch;
 margin-inline:auto}

/* ═══════════ 6. PARA QUIEN NO ES ═══════════ */
#svc-fit{background:var(--bg-alt);background-image:var(--dots);background-size:28px 28px;
 padding:clamp(64px,8vw,110px) 0}
.fit2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(24px,4vh,42px)}
.fitc{border-radius:14px;padding:clamp(20px,2.6vw,30px);background:var(--paper);border:1px solid var(--line)}
.fitc:last-child{background:var(--accent);border-color:var(--accent);color:#fff}
.fitc h3{font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.04em}
.fitc ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.fitc li{font-size:14.5px;padding:10px 15px;border-radius:9px;background:rgba(26,8,4,.05);line-height:1.5}
.fitc:last-child li{background:rgba(255,255,255,.16)}

/* ═══════════ 7. CTA — ANILLO CINETICO ═══════════ */
#svc-cta{position:relative;isolation:isolate;background:var(--dark);color:var(--cream);text-align:center;
 padding:clamp(80px,11vw,150px) 0;overflow:hidden}
#svc-cta::before{content:'';position:absolute;inset:0;z-index:0;background-image:var(--dots-d);background-size:30px 30px;opacity:.6}
.ring{position:absolute;left:50%;top:50%;width:min(150vw,1420px);aspect-ratio:1/1;
 transform:translate(-50%,-50%);z-index:0;pointer-events:none;opacity:.17}
.ring svg{width:100%;height:100%;display:block}
.ring text{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.34em;
 text-transform:uppercase;fill:rgba(236,229,219,.4)}
.ring2{width:min(122vw,1150px);opacity:.12}
.ring2 text{fill:rgba(240,121,79,.5);font-size:18px}
#svc-cta > .wrap{position:relative;z-index:2}
#svc-cta .h2{margin:0 auto;max-width:none}
#svc-cta .lead{margin:20px auto 0}
.cta-b{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}
.mins{list-style:none;max-width:640px;margin:clamp(22px,3.4vh,34px) auto 0;text-align:left;
 border:1px solid rgba(236,229,219,.18);border-radius:14px;overflow:hidden}
.mins li{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:baseline;
 padding:13px clamp(14px,2vw,20px);border-bottom:1px solid rgba(236,229,219,.13)}
.mins li:last-child{border-bottom:0}
.mins b{font-family:var(--display);font-weight:800;font-size:15px;color:#F0794F;letter-spacing:.04em}
.mins span{font-size:14.5px;line-height:1.55;color:rgba(236,229,219,.8)}
.cta-l{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
 margin:clamp(20px,3vh,30px) auto 0;max-width:64ch}
.cta-l li{position:relative;padding-left:24px;font-size:14.5px;color:rgba(236,229,219,.82)}
.cta-l li::before{content:'';position:absolute;left:2px;top:5px;width:11px;height:6px;
 border-left:2px solid #F0794F;border-bottom:2px solid #F0794F;transform:rotate(-45deg)}
.cta-n{margin-top:20px;font-size:13px;color:rgba(236,229,219,.5)}

/* ─────────────────────────────────────────────────────────────────────────────
   ESTADOS ANIMADOS — todos bajo .sfx.
   Sin esa clase (movil, CDN caido, reduced-motion) todo se ve en su estado final.
   Es la inversion de logica que ya nos costo una seccion invisible en la home.
   ───────────────────────────────────────────────────────────────────────────── */
.sfx .xplate{opacity:0}
.sfx .xh1 .xl{opacity:0}
.sfx .xh-sub,.sfx .xh-cta{opacity:0}
.sfx .krow{opacity:0}
.sfx .gp{opacity:0}
.sfx .ga-c,.sfx .px-s{opacity:0}
.sfx .as-line,.sfx .as-line2{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.sfx .as-fill{opacity:0}
.sfx .vs-col > *{opacity:0}
.sfx .talk-q,.sfx .talk-a,.sfx .talk-m{opacity:0}
/* los pasos que no son el activo se van muy atras, pero nunca se ocultan */
.sfx .jr-step{opacity:.16}
.sfx .jr-step.is-on{opacity:1}

@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:860px){
 /* Las reglas de la cabecera en movil NO van aqui: viven en partials/chrome.css
    y las sirve el tema en su propia hoja. Estaban duplicadas, y como la hoja de
    la pagina carga DESPUES que la del chrome, esta copia vieja ganaba: en estas
    tres paginas el menu movil seguia siendo el de antes por mas que se cambiara
    el partial. Un duplicado que nadie sincroniza acaba siendo el que manda. */
 .xh-grid{grid-template-columns:1fr;gap:34px}
 .xstage{height:clamp(240px,42vh,340px);order:-1}
 .svc{position:static;min-height:0;padding:64px 0;box-shadow:none}
 .svc-grid{grid-template-columns:1fr;gap:30px}
 .svc-art{max-height:none;aspect-ratio:1/.9}
 .krow{grid-template-columns:auto 1fr;gap:14px}
 .k-go{display:none}
 .vs,.fit2{grid-template-columns:1fr}
 .pkr{grid-template-columns:1fr;gap:9px}
 .jr-grid{grid-template-columns:1fr}
 .jr-stick{display:none}
 .jr-steps{padding:0}
 .jr-step{min-height:0;padding:34px 0;border-bottom:1px solid rgba(236,229,219,.12)}
 .vs-col:first-child{border-bottom:1px solid var(--line)}
 .fgrid{grid-template-columns:1fr 1fr}
 .ring{width:150vw}

 /* ── RECORTE ───────────────────────────────────────────────────────────
    Abrir las tarjetas alarga la pagina, asi que se devuelve por otro lado —
    quitando aire y tamano a lo decorativo, nunca contenido. La ilustracion de
    cada servicio era casi cuadrada: seis veces media pantalla de dibujo entre
    un servicio y el siguiente. */
 .svc{padding:44px 0}
 .svc-art{aspect-ratio:1/.6}
 .svc-grid{gap:22px}
 .jr-step{padding:26px 0}
 #pick{padding:44px 0}

 /* ── LOS SEIS SERVICIOS, ANTES ─────────────────────────────────────────
    El bloque de definicion son 418 px —mas de media pantalla— metidos entre el
    titular y la lista. Esta escrito a proposito soso, para que lo pueda citar
    una IA, no para que lo lea alguien de pie en la calle. En movil se queda,
    pero pesando lo que le toca: la lista de seis sube casi una pantalla. */
 .def{margin:18px 0 16px;padding:16px 18px}
 .def p{font-size:14px;line-height:1.6}
 .def p + p{margin-top:10px}

 /* Filas mas compactas y con la flecha puesta: sin ella no se leen como algo
    en lo que se pueda tocar. */
 .krow{grid-template-columns:auto 1fr auto;gap:12px;padding:18px 0}
 .k-go{display:flex;width:34px;height:34px}
 .k-go svg{width:13px;height:13px}
 .k-name{font-size:20px}
 .k-out{margin-top:5px;font-size:13.5px;line-height:1.5}
 #svc-idx{padding:48px 0 32px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .svc{position:static;min-height:0;padding:70px 0}
 .clock i,.gm-spin{animation:none}
 .ring{animation:none!important}
}