/* assets/css/servicio.css — service pages + 404 (loads after base.css).
   Same language as the home: dark ground, condensed Archivo caps, Geist tracked labels,
   film grain, hairline column grid. All classes are prefixed sv-. */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sv-skip{position:absolute;left:12px;top:-60px;z-index:300;padding:12px 18px;background:#fff;color:#000;font-weight:600;border-radius:var(--radius)}
.sv-skip:focus{top:12px}
.foot-col .foot-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);margin:0 0 14px}

.sv{position:relative;background:var(--black)}

/* ── Hero ───────────────────────────────────────────────────────── */
.sv-hero{position:relative;display:flex;min-height:100vh;min-height:100svh;overflow:clip;isolation:isolate;background:#000}
.sv-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.sv-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.85) contrast(1.05)}
.sv-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.5) 100%)}
.sv-hero-in{position:relative;z-index:3;width:100%;max-width:1700px;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--hh) + 14px) var(--gx) calc(20px + var(--cb-h,0px))}
.sv-crumbs ol{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sv-crumbs li{display:flex;align-items:center}
.sv-crumbs li+li::before{content:"\203A";margin-right:6px;opacity:.5}
.sv-crumbs a,.sv-crumbs span{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.sv-crumbs a{transition:color .3s var(--ease)}
.sv-crumbs a:hover,.sv-crumbs a:focus-visible{color:#fff}
.sv-crumbs [aria-current]{color:#fff}
.sv-hero-main{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:24px}
.sv-hero-main .kicker{margin:0;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.sv-h1{font-size:clamp(2.5rem,calc((100vw - 40px)/6.4),4.8rem);line-height:.9;color:#fff;max-width:14ch}
.sv-h1 .ln{display:block}
.sv-answer{font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.88);max-width:54ch}
.sv-ctas{display:flex;flex-direction:column;gap:12px;align-self:stretch}
.sv-ctas .btn{width:100%}
.sv-points{list-style:none;margin:28px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.8)}
.sv-points li{position:relative;padding-left:12px}
.sv-points li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--blue)}
@media (min-width:600px){
  .sv-ctas{flex-direction:row;align-self:flex-start}
  .sv-ctas .btn{width:auto}
}
@media (min-width:900px){
  .sv-hero{min-height:min(100vh,860px);min-height:min(100svh,860px)}
  .sv-hero-bg{left:auto;width:54%}
  .sv-hero-bg::after{background:linear-gradient(to right,#000 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.1) 100%),linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 40%)}
  .sv-hero-main{max-width:min(62%,880px);padding-top:56px}
  .sv-h1{font-size:clamp(4.2rem,7.6vw,9rem);max-width:none}
  .sv-answer{font-size:1.15rem;line-height:1.55}
  .sv-crumbs ol{font-size:.72rem;letter-spacing:.14em}
  .sv-points{grid-template-columns:repeat(4,auto);justify-content:space-between;font-size:.7rem;margin-top:36px}
}

/* hero entrance (class toggled by servicio.js; 4 s CSS failsafe like the home) */
.js .sv-hero .ln-i{transform:translateY(105%);transition:transform 1.1s var(--ease)}
.js.sv-ready .sv-hero .ln-i{transform:none}
.js.sv-ready .sv-hero .ln:nth-child(2) .ln-i{transition-delay:.09s}
.js .sv-fade{opacity:0;translate:0 24px;transition:opacity 1s var(--ease) .45s,translate 1s var(--ease) .45s}
.js.sv-ready .sv-fade{opacity:1;translate:0 0}
.js:not(.sv-ready) .sv-hero .ln-i,.js:not(.sv-ready) .sv-fade{animation:svSafe .01s 4s forwards}
@keyframes svSafe{to{transform:none;translate:0 0;opacity:1}}
.sv-ready .sv-hero .ln-i,.sv-ready .sv-fade{transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .js .sv-hero .ln-i{transform:none;transition:none}
  .js .sv-fade{opacity:1;translate:0 0;transition:none}
  .grain::after{animation:none}
}

/* ── Body: hairline column grid + sections ──────────────────────── */
.sv-body{position:relative}
.sv-body::before{content:"";position:absolute;top:0;bottom:0;left:max(0px,calc((100% - 1600px)/2));width:min(100%,1600px);pointer-events:none;z-index:6;
  background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px);background-size:25% 100%}
.sv-sec{position:relative;max-width:1600px;margin:0 auto;padding:64px var(--gx);border-top:1px solid var(--line)}
.sv-sec:first-child{border-top:0}
.sv .sv-sec h2,.sv-cta h2{font-size:clamp(2.2rem,10.4vw,3.4rem);line-height:.94}
.sv-hdr{max-width:900px;margin-bottom:36px}
.sv-hdr h2{margin-bottom:20px}
.sv-lead{font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.82);max-width:62ch}
.sv h3{font-size:clamp(1.6rem,6.6vw,2.1rem);line-height:.96}
@media (min-width:900px){
  .sv-sec{padding:clamp(80px,9vw,140px) var(--gx)}
  .sv .sv-sec h2,.sv-cta h2{font-size:clamp(3rem,5.4vw,5.4rem)}
  .sv-hdr{margin-bottom:56px}
  .sv-lead{font-size:1.2rem}
  .sv h3{font-size:clamp(1.6rem,2.2vw,2.2rem)}
}

/* problems: hairline cards (no shadow) */
.sv-cards{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:none}
.sv-card{display:flex;flex-direction:column;gap:12px;min-height:220px;padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.sv-card p{color:rgba(255,255,255,.75);line-height:1.5;margin-top:auto}
.sv-n{font-size:.72rem;letter-spacing:.14em;font-weight:600;color:#8FB4FF}
@media (min-width:700px){ .sv-cards{grid-template-columns:1fr 1fr} }
@media (min-width:1200px){ .sv-cards{grid-template-columns:repeat(4,1fr)} }

/* steps */
.sv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.sv-step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n t" "n p";gap:6px 20px;padding:24px 0;border-bottom:1px solid var(--line)}
.sv-step-n{grid-area:n;font-family:var(--disp);font-weight:800;font-stretch:68%;font-size:3.4rem;line-height:.85;color:var(--blue)}
.sv-step h3{grid-area:t}
.sv-step p{grid-area:p;color:rgba(255,255,255,.75);line-height:1.5}
@media (min-width:900px){
  .sv-steps{grid-template-columns:repeat(4,1fr);border-top:0;gap:0 28px}
  .sv-step{display:flex;flex-direction:column;gap:14px;padding:28px 0 0;border-bottom:0;border-top:1px solid var(--line)}
  .sv-step-n{font-size:clamp(4.4rem,7vw,7rem)}
}

/* include / ideal */
.sv-two{display:grid;grid-template-columns:1fr;gap:56px}
.sv-two h2{margin-bottom:28px}
.sv-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sv-list li{position:relative;padding:16px 0 16px 28px;border-bottom:1px solid var(--line);color:rgba(255,255,255,.88);line-height:1.45}
.sv-list li::before{content:"";position:absolute;left:0;top:1.45em;width:12px;height:2px;background:var(--blue)}
@media (min-width:900px){ .sv-two{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px)} .sv-list li{font-size:1.1rem} }

/* comparison table */
.sv-table{width:100%;border-collapse:collapse}
.sv-table th,.sv-table td{text-align:left;vertical-align:top;padding:20px 24px 20px 0;border-top:1px solid var(--line)}
.sv-table thead th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55)}
.sv-table thead th:last-child{color:#fff;padding-left:24px;border-left:2px solid var(--blue)}
.sv-table tbody th{font-size:1rem;font-weight:600;color:#fff;width:24%}
.sv-table td{font-size:clamp(1rem,1.4vw,1.2rem);color:rgba(255,255,255,.6)}
.sv-table td:last-child{color:#fff;font-weight:500;padding-left:24px;border-left:2px solid var(--blue)}
.sv-table tbody tr:last-child>*{border-bottom:1px solid var(--line)}
@media (max-width:699px){
  .sv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sv-table,.sv-table tbody,.sv-table tr{display:block}
  .sv-table tr{padding:18px 0;border-top:1px solid var(--line)}
  .sv-table tbody tr:last-child{border-bottom:1px solid var(--line)}
  .sv-table th,.sv-table td,.sv-table td:last-child{display:block;width:auto;border:0;padding:5px 0}
  .sv-table tbody tr:last-child>*{border-bottom:0}
  .sv-table tbody th{font-family:var(--disp);font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:6px}
  .sv-table td::before{content:attr(data-label);display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:3px}
  .sv-table td:last-child{padding-left:14px;border-left:2px solid var(--blue);margin-top:8px}
  .sv-table td:last-child::before{color:#8FB4FF}
}

/* related services */
.sv-rel{border-top:1px solid var(--line)}
.sv-rel-a{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;min-height:96px;padding:16px 0;border-bottom:1px solid var(--line)}
.sv-rel-a::before{content:"";position:absolute;inset:0 calc(var(--gx)*-1);background:rgba(37,99,235,.1);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.sv-rel-a img{width:64px;height:84px;object-fit:cover;border-radius:2px;position:relative;filter:saturate(.85)}
.sv-rel-home{grid-template-columns:1fr auto}
.sv-rel-t{position:relative;display:flex;flex-direction:column;gap:6px}
.sv-rel-t strong{font-family:var(--disp);font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(1.7rem,7vw,2.6rem);line-height:.95;transition:transform .6s var(--ease)}
.sv-rel-t small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6)}
.sv-rel-arrow{position:relative;font-size:1.4rem;color:var(--blue)}
@media (min-width:900px){ .sv-rel-a{grid-template-columns:96px 1fr auto;gap:32px;min-height:128px;padding:20px 0} .sv-rel-a img{width:96px;height:124px} .sv-rel-home{grid-template-columns:1fr auto} .sv-rel-t strong{font-size:clamp(2.2rem,3.4vw,3.4rem)} }
@media (hover:hover){
  .sv-rel-a:hover::before,.sv-rel-a:focus-visible::before{opacity:1}
  .sv-rel-a:hover .sv-rel-t strong{transform:translateX(14px)}
}
.sv-rel-a:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* FAQ accordion */
.sv-faq{display:grid;gap:0}
.sv-faq-item{border-bottom:1px solid rgba(255,255,255,.12);padding:16px 0}
.sv-faq-item:first-child{border-top:1px solid rgba(255,255,255,.12)}
.sv-faq-item summary{cursor:pointer;list-style:none;font-weight:600;font-size:1rem;line-height:1.35;display:flex;gap:14px;align-items:baseline;min-height:44px}
.sv-faq-item summary::-webkit-details-marker{display:none}
.sv-faq-item summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
.sv-faq-n{color:var(--blue);font-weight:600;font-size:.72rem;letter-spacing:.14em;flex:none}
.sv-faq-item p{margin-top:10px;color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.55;padding-left:34px}
@media (min-width:860px){ .sv-faq{grid-template-columns:1fr 1fr;gap:0 56px;align-items:start} .sv-faq-item:nth-child(2){border-top:1px solid rgba(255,255,255,.12)} }

/* final CTA */
.sv-cta{position:relative;overflow:hidden;background:var(--navy);border-top:1px solid var(--line);padding:72px var(--gx) calc(56px + var(--cb-h,0px))}
.sv-cta-in{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.sv-cta h2{font-size:clamp(2.8rem,14vw,4.2rem)}
.sv-cta-in>p{color:rgba(255,255,255,.88);max-width:54ch;line-height:1.55}
.sv-cta .zone-line{font-size:.82rem;color:rgba(255,255,255,.7)}
@media (min-width:900px){ .sv-cta{padding:clamp(96px,10vw,160px) var(--gx)} .sv-cta h2{font-size:clamp(4rem,8vw,8rem)} .sv-cta-in{margin:0 auto;max-width:1600px} }
.btn-lg{min-height:56px}

/* 404 */
.sv-hero-404{min-height:100vh;min-height:100svh;background:radial-gradient(120% 80% at 80% 0%,rgba(37,99,235,.28),#000 60%)}
.sv-404-links{display:grid;grid-template-columns:1fr;gap:28px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.sv-404-links ul{list-style:none;margin:0;padding:0}
.sv-404-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;color:rgba(255,255,255,.88)}
.sv-404-links a:hover{color:#8FB4FF}
@media (min-width:700px){ .sv-404-links{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .sv-hero-404 .sv-hero-main{max-width:none} }

/* ── Short hero (guides, projects) ───────────────────────────────── */
.sv-hero-short{min-height:auto}
.sv-hero-short .sv-hero-in{padding-bottom:48px}
.sv-hero-short .sv-hero-main{margin-top:12vh}
.sv-hero-short .sv-h1{font-size:clamp(2.1rem,calc((100vw - 40px)/9),3.6rem);max-width:18ch}
.gd-meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.62);margin:0}
@media (min-width:900px){
  .sv-hero-short{min-height:min(78vh,720px);min-height:min(78svh,720px)}
  .sv-hero-short .sv-h1{font-size:clamp(3rem,4.6vw,5.4rem);max-width:20ch}
}

/* ── Guide article ──────────────────────────────────────────────── */
.gd{max-width:880px;margin-left:max(0px,calc((100% - 1600px)/2));display:flex;flex-direction:column;gap:48px}
.sv .gd h2{font-size:clamp(1.9rem,7vw,2.8rem);line-height:.98;margin-bottom:18px}
.gd p{font-size:1.06rem;line-height:1.7;color:rgba(255,255,255,.84);margin:0 0 16px;max-width:68ch}
.gd-claves{padding:24px;border:1px solid rgba(37,99,235,.45);border-radius:20px;background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(255,255,255,.03))}
.sv .gd .gd-claves h2{font-family:var(--ui);font-stretch:normal;text-transform:uppercase;font-size:.75rem;letter-spacing:.14em;color:#8FB4FF;margin-bottom:12px}
.gd-claves ul,.gd-list{list-style:none;margin:0;padding:0}
.gd-claves li,.gd-list li{position:relative;padding:8px 0 8px 24px;line-height:1.5;color:rgba(255,255,255,.88)}
.gd-claves li::before,.gd-list li::before{content:"";position:absolute;left:0;top:1.2em;width:12px;height:2px;background:var(--blue)}
.gd-list{margin:4px 0 18px;border-top:1px solid var(--line)}
.gd-list li{border-bottom:1px solid var(--line);padding:12px 0 12px 24px}
.gd .gd-see{font-size:.95rem;color:rgba(255,255,255,.7)}
.gd-see a{color:#8FB4FF;text-decoration:underline;text-underline-offset:4px;font-weight:600}
.gd-see a:hover{color:#fff}
@media (min-width:900px){
  .gd{gap:64px}
  .gd-claves{padding:32px}
  .sv .gd h2{font-size:clamp(2.4rem,3.4vw,3.4rem)}
  .gd p{font-size:1.12rem}
  .gd .gd-see{font-size:.98rem}
}

/* guide cards (index) */
.gd-cards{display:grid;gap:14px}
.gd-card{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.04);transition:border-color .3s var(--ease),background .3s var(--ease)}
.gd-card:hover,.gd-card:focus-visible{border-color:var(--blue);background:rgba(37,99,235,.08)}
.gd-card-k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#8FB4FF}
.gd-card strong{font-family:var(--disp);font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(1.7rem,6vw,2.3rem);line-height:.96}
.gd-card-p{color:rgba(255,255,255,.75);line-height:1.55}
.gd-card-go{margin-top:auto;font-weight:600;color:#fff}
@media (min-width:900px){ .gd-cards{grid-template-columns:repeat(3,1fr)} }

/* ── Projects ───────────────────────────────────────────────────── */
.pj-grid{display:grid;gap:14px}
.pj-card{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.04)}
.pj-city{margin:0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#8FB4FF}
.sv .pj-name{font-size:clamp(2.2rem,9vw,3.4rem);line-height:.9}
.pj-type{margin:0;font-weight:600;color:#fff}
.pj-text{margin:0;color:rgba(255,255,255,.75);line-height:1.55}
.pj-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0;padding:0}
.pj-tags li{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.85)}
.pj-links{margin:auto 0 0;padding-top:12px;display:flex;flex-wrap:wrap;gap:4px 18px}
.pj-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;font-weight:600;color:#8FB4FF;text-decoration:underline;text-underline-offset:4px}
.pj-links a:hover{color:#fff}
.pj-zonas{margin:0;display:grid;border-top:1px solid var(--line)}
.pj-zonas div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.pj-zonas dt{font-family:var(--disp);font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:1.6rem;line-height:1}
.pj-zonas dd{margin:0;color:rgba(255,255,255,.75);line-height:1.5}
/* featured project: live-site screenshots in a browser + phone frame */
.pj-shots{position:relative;margin:0 0 18px;padding:0 0 8% 0}
.pj-pc{width:88%;border:1px solid rgba(255,255,255,.18);border-radius:12px;overflow:hidden;background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.pj-bar{display:flex;gap:6px;padding:9px 12px;background:#1b1b1d;border-bottom:1px solid rgba(255,255,255,.08)}
.pj-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.pj-pc img{display:block;width:100%;height:auto}
.pj-phone{position:absolute;right:0;bottom:0;width:27%;padding:5px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:#0b0b0c;box-shadow:0 24px 50px -18px rgba(0,0,0,.95)}
.pj-phone img{display:block;width:100%;height:auto;border-radius:17px}
.pj-info{display:flex;flex-direction:column;gap:10px}
/* phones and tablets: one project at a time, horizontal swipe */
.pj-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.pj-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:width .3s var(--ease),background .3s}
.pj-dots span.on{width:22px;border-radius:4px;background:var(--blue)}
@media (max-width:899px){
  .pj-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--gx) * -1);padding:4px var(--gx) 6px;scroll-padding-left:var(--gx)}
  .pj-grid::-webkit-scrollbar{display:none}
  .pj-card{flex:0 0 min(86%,520px);scroll-snap-align:start}
}
@media (max-width:599px){
  .pj-card{padding:20px;gap:8px}
  .pj-shots{margin-bottom:10px}
  .sv .pj-name{font-size:2rem}
  .pj-text{font-size:.92rem;line-height:1.5}
  .pj-tags li{font-size:.62rem;padding:5px 9px}
  .pj-links{padding-top:4px}
  .pj-links a:nth-child(n+2){display:none}
}
@media (min-width:900px){ .pj-dots{display:none} }
@media (min-width:900px){
  .pj-grid{grid-template-columns:1fr 1fr;gap:18px}
  .pj-feat{grid-column:1 / -1;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
  .pj-feat .pj-shots{margin:0}
  .pj-feat:nth-child(even){grid-template-columns:1fr 1.35fr}
  .pj-feat:nth-child(even) .pj-shots{order:2}
  .pj-phone{border-radius:28px;padding:6px}
  .pj-phone img{border-radius:22px}
  .pj-card{padding:34px}
  .pj-zonas div{grid-template-columns:minmax(220px,1fr) 2fr;align-items:baseline;gap:24px}
  .pj-zonas dt{font-size:2.2rem}
}