/* Páginas de servicio. Usa las variables y las piezas de site.css (títulos, botones, tarjetas, línea de proceso). */

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--niebla)}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--blanco)}
.crumbs span[aria-current]{color:var(--blanco)}
.crumbs i{font-style:normal;color:var(--naranja)}

.svc-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:56px 88px}
.svc-txt{position:relative;z-index:3;display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.svc-txt h1.display{font-size:clamp(2.2rem,5vw,4.1rem);line-height:.98}
.svc-fig{margin:0;aspect-ratio:16/11;max-width:100%;border-radius:20px;overflow:hidden;border:1px solid var(--linea-o);background:var(--negro);box-shadow:0 40px 90px rgba(0,0,0,.6);transform:perspective(1400px) rotateY(-8deg) rotateX(2deg);transition:transform .9s var(--ease)}
.svc-fig:hover{transform:perspective(1400px) rotateY(0deg) rotateX(0deg)}
.svc-fig img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:36px 56px}
  .svc-fig{transform:none}
}

.probs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.prob{display:flex;flex-direction:column;gap:10px;min-width:0;padding:30px;border-radius:12px;background:var(--blanco);border:1px solid var(--linea)}
.prob h3{font:800 1.34rem/1.15 var(--display);letter-spacing:-.03em}
.prob p{color:var(--gris)}

.incl{border-top:2px solid var(--negro)}
.incl li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:17px 0;border-bottom:1px solid var(--linea);font-size:1.06rem;max-width:none}
.incl svg{width:20px;height:20px;margin-top:4px;color:var(--verde-prof)}

.track.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.track.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

.faq{max-width:880px;border-top:2px solid var(--negro)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font:700 1.2rem/1.3 var(--display);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.7rem/1 var(--body);color:var(--francia);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--gris);max-width:62ch}


/* Enlaces de las listas de áreas en la portada */
.area li a{display:contents}

/* Formulario de consultas, contacto y confirmación */
form{position:relative}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field .err{font-size:.84rem;color:#FF9A8F}
[aria-invalid="true"]{border-color:#FF7A6B}
form .status,form .legal{grid-column:1/-1}
form .legal{font-size:.82rem;color:var(--niebla)}
form .btn[disabled]{opacity:.6;cursor:progress}
.page-head{position:relative;z-index:1;display:flex;flex-direction:column;gap:26px;align-items:flex-start;padding-block:56px 72px}
.page-head h1.display{font-size:clamp(2.2rem,5vw,4.1rem);line-height:.98}
.page-head .fine{margin-top:0;color:var(--niebla)}
.page-head .tel{font-family:var(--mono);color:var(--blanco);user-select:all}
.thanks{min-height:56vh;justify-content:center}
.next{margin:0;padding-left:1.4em;list-style:decimal;display:flex;flex-direction:column;gap:10px;color:var(--niebla)}
.next li::marker{color:var(--naranja);font-family:var(--mono)}
#contacto{scroll-margin-top:72px}
.sec.after-head{padding-top:8px}

/* Productos propios */
.brandchip{display:inline-flex;align-items:center;gap:10px;height:60px;padding:10px 18px;border-radius:12px;background:var(--blanco);border:1px solid var(--linea);align-self:flex-start}
.brandchip img{display:block;height:36px;width:auto;max-width:210px}
.brandchip img.icon{height:38px;border-radius:9px}
.wordmark{font:800 1.5rem/1 var(--display);letter-spacing:-.04em;color:#0B1A3A}
.wordmark b{color:var(--naranja);font-weight:800}
.wordmark i{font-style:normal;color:var(--naranja)}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:820px){.products{grid-template-columns:minmax(0,1fr)}}
.product h2{font:800 1.9rem/1.1 var(--display);letter-spacing:-.035em}
.product .eyebrow{color:var(--gris)}
.owner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 56px;align-items:end}
.owner>div{display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-width:0}
.owner p:not(.eyebrow){color:var(--niebla);font-size:1.08rem;max-width:34em}
@media (max-width:820px){.owner{grid-template-columns:minmax(0,1fr)}}
.aside .plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--niebla)}
.aside .plain a{color:var(--blanco);text-decoration:underline;text-underline-offset:3px}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.posts{grid-template-columns:minmax(0,1fr)}}
.post-card{gap:12px}
.post-card figure{margin:-30px -30px 6px;aspect-ratio:16/9;overflow:hidden;border-radius:12px 12px 0 0;background:var(--papel)}
.post-card figure img{display:block;width:100%;height:100%;object-fit:cover}
.post-card h2,.post-card h3{font:800 1.3rem/1.15 var(--display);letter-spacing:-.03em}
.post-card .link{margin-top:auto}
.meta{font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.hero .meta{color:var(--niebla)}
.page-no{font-size:.42em;letter-spacing:-.01em;color:var(--niebla);font-weight:600;white-space:nowrap}
.post-head{max-width:960px;margin-inline:auto}
.post-head h1.display{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.02}
.post-body{padding-top:clamp(32px,5vw,56px)}
.post-cover{margin:0 auto clamp(32px,5vw,56px);max-width:960px;border-radius:16px;overflow:hidden;background:var(--papel)}
.post-cover img{display:block;width:100%;height:auto}
.prose{max-width:720px;margin-inline:auto;font-size:1.1rem;line-height:1.72;color:#1C2128}
.prose>*+*{margin-top:1.1em}
.prose h2{font:800 clamp(1.55rem,2.6vw,2rem)/1.15 var(--display);letter-spacing:-.03em;margin-top:1.9em;color:var(--negro)}
.prose h3{font:800 1.35rem/1.2 var(--display);letter-spacing:-.025em;margin-top:1.6em;color:var(--negro)}
.prose h4{font:700 1.1rem/1.3 var(--display);margin-top:1.4em;color:var(--negro)}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--naranja)}
.prose a{color:var(--francia);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:700;color:var(--negro)}
.prose blockquote{border-left:3px solid var(--naranja);padding-left:1.1em;color:var(--gris)}
.prose img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:10px}
.pager{display:flex;justify-content:center;gap:12px;margin-top:40px;flex-wrap:wrap}
.btn.ghost-dark{border-color:var(--linea);color:var(--negro);background:var(--blanco)}
.btn.ghost-dark:hover{border-color:var(--gris)}
.all-posts{margin-top:28px}
.empty{color:var(--gris)}

/* Ilustraciones en tarjetas de servicios */
.cards-scene .card{padding:14px 14px 26px}
.cards-scene .card>:not(.scene){margin-inline:14px}
.scene.is-thumb{border-radius:10px;margin-bottom:6px}
.cards-scene .card:hover .scene.is-thumb{box-shadow:inset 0 0 0 1px rgba(255,106,0,.45)}

/* Lo que venimos a resolver */
.solve{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;align-items:start}
.solve-visual{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.solve-visual .scene{margin-top:10px;box-shadow:0 30px 70px rgba(10,11,13,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.solve-list{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.solve-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start;padding:26px 24px;border-radius:14px;background:var(--blanco);border:1px solid var(--linea);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.solve-item:hover{border-color:rgba(255,106,0,.45);box-shadow:0 18px 40px rgba(10,11,13,.08);transform:translateY(-2px)}
.solve-num{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--negro);color:var(--naranja);font:600 .82rem var(--mono)}
.solve-item h3{font:800 1.28rem/1.15 var(--display);letter-spacing:-.025em}
.solve-item p{margin-top:8px;color:var(--gris)}
.solve-mark{width:22px;height:22px;color:var(--verde-prof);opacity:.25;transition:opacity .3s}
.solve-item:hover .solve-mark{opacity:1}
.solve-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;padding:18px 24px;border-radius:14px;background:var(--negro);color:var(--blanco);font-weight:600}
.solve-cta .link{color:var(--blanco)}
@media (max-width:900px){.solve{grid-template-columns:minmax(0,1fr)}.solve-visual{position:static}}

/* Paso a paso con entregables */
.track.rich{padding-top:0;gap:14px}
.track.rich::before,.track.rich::after{display:none}
.track.rich.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.track.rich.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{gap:10px;padding:22px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .4s,background .4s}
.track.rich li.on{box-shadow:inset 0 0 0 1px rgba(23,201,100,.35),0 0 40px rgba(23,201,100,.06)}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.step-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(31,91,255,.14);color:var(--azul-claro)}
.track.rich li.on .step-ico{background:rgba(23,201,100,.14);color:var(--verde)}
.step-ico svg{width:22px;height:22px}
.step-meta{display:grid;gap:8px;margin:10px 0 0;padding-top:14px;border-top:1px dashed rgba(255,255,255,.12)}
.step-meta div{display:grid;gap:2px}
.step-meta dt{font:500 .64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.step-meta dd{margin:0;color:var(--blanco);font-size:.9rem;line-height:1.35}
@media (max-width:1080px){.track.rich.six,.track.rich.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.track.rich.six,.track.rich.four{grid-template-columns:minmax(0,1fr)}}

/* Cómo empezamos */
.onboard{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.onboard::before{content:"";position:absolute;left:6%;right:6%;top:46px;height:2px;background:repeating-linear-gradient(90deg,var(--linea) 0 8px,transparent 8px 14px);z-index:0}
.onboard-item{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:14px;background:var(--blanco);border:1px solid var(--linea)}
.onboard-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--negro);color:var(--blanco);box-shadow:0 0 0 6px var(--papel)}
.onboard-ico svg{width:22px;height:22px}
.onboard-num{position:absolute;top:24px;right:24px;font:600 .74rem var(--mono);color:var(--naranja)}
.onboard-item h3{font:800 1.18rem/1.2 var(--display);letter-spacing:-.02em}
.onboard-item p{color:var(--gris);font-size:.95rem}
.onboard-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.btn.wa{background:#0F7A3A;color:var(--blanco)}
.btn.wa:hover{background:#12924A;transform:translateY(-2px)}
.btn.wa svg{width:20px;height:20px}
@media (max-width:980px){.onboard{grid-template-columns:repeat(2,minmax(0,1fr))}.onboard::before{display:none}}
@media (max-width:560px){.onboard{grid-template-columns:minmax(0,1fr)}}

/* Casos del portafolio */
.case-logo{width:min(300px,80%);height:auto}
.case-text{font-size:1.18rem;line-height:1.6;color:var(--negro);max-width:36em}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--linea-o);border:1px solid var(--linea-o);border-radius:14px;overflow:hidden}
.metrics>div{display:flex;flex-direction:column;gap:8px;padding:26px 24px;background:var(--carbon)}
.metrics dt{font:800 clamp(2rem,3.6vw,2.8rem)/1 var(--display);letter-spacing:-.03em;color:var(--blanco)}
.metrics dd{margin:0;color:var(--niebla);font-size:.98rem}
.metrics.compact{grid-template-columns:repeat(3,minmax(0,1fr));margin-block:4px 8px}
.metrics.compact>div{padding:16px}
.metrics.compact dt{font-size:1.6rem}
.metrics.compact dd{font-size:.84rem}
.insights{margin-top:28px;display:grid;gap:12px}
.insights li{position:relative;padding-left:22px;color:var(--niebla);font-size:1.04rem;max-width:58em}
.insights li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--verde)}
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;counter-reset:none}
.arch li{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:12px;border:1px solid var(--linea-o);background:var(--carbon)}
.arch-n{font:500 .74rem var(--mono);letter-spacing:.1em;color:var(--naranja)}
.arch h3{font:800 1.3rem/1.15 var(--display);letter-spacing:-.03em;color:var(--blanco)}
.arch p{color:var(--niebla)}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.stack li{font:500 .8rem var(--mono);padding:8px 12px;border-radius:999px;border:1px solid var(--linea-o);color:var(--niebla)}
.cases h2{font:800 1.5rem/1.1 var(--display);letter-spacing:-.03em}
@media (max-width:900px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.metrics,.metrics.compact{grid-template-columns:minmax(0,1fr)}}
a.lamina{display:block}