/* =====================================================================================================
   AVAI Labs — páginas de servicio y blog (29-oct-2026; inmersivas y bilingües desde el 30-oct-2026)
   Se carga DESPUÉS de main.css. Las páginas generadas por tools/construir.js reutilizan las secciones de la
   portada (hero, área, proceso, casos, contacto) con su escena 3D; aquí solo va lo propio: migas, preguntas
   frecuentes, panel de lectura del blog, selector y aviso de idioma.
   ===================================================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Migas (dentro del hero) ---------- */
.pg-migas{margin-bottom:26px}
.pg-migas ol{display:flex;flex-wrap:wrap;gap:8px;font:400 .78rem/1.4 var(--mono);color:var(--dim)}
.pg-migas li+li::before{content:"/";margin-right:8px;color:var(--dim)}
.pg-migas a{color:var(--muted);transition:color .25s}
.pg-migas a:hover{color:var(--cyan)}
.pg-migas [aria-current]{color:var(--ink-2)}

/* Los H1 de servicio son más largos que el de la portada */
.pg-hero-title{max-width:16ch;font-size:clamp(2.4rem,5vw,5rem)}

/* Servicios del área: h3 en vez de h4 (jerarquía de la página), mismo aspecto */
.svc-list h3{font-size:1.07rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.svc-list h3 a{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-list h3 a::after{content:" →";color:var(--cyan)}

/* El proceso fijo es algo más corto que en la portada: 4 fases cortas */
.gsap-ok .pg .process{height:300vh}

/* ---------- Preguntas frecuentes (escena de calma) ---------- */
.pg-faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5vw;align-items:start}
.pg-faq-head{position:relative}
.pg-faq-head::before{content:"";position:absolute;z-index:-1;inset:-30% -20%;background:radial-gradient(closest-side,rgba(5,9,20,.88),rgba(5,9,20,0));pointer-events:none}
.pg-faq-list{padding:8px clamp(18px,2.6vw,32px);border-radius:22px;background:rgba(7,12,26,.78);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-faq-list details+details{border-top:1px solid var(--line)}
.pg-faq-list summary{position:relative;list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:600 1.02rem/1.4 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pg-faq-list summary::-webkit-details-marker{display:none}
.pg-faq-list summary::after{content:"+";position:absolute;right:4px;top:18px;font:400 1.5rem/1 var(--body);color:var(--cyan);transition:transform .3s var(--ease)}
.pg-faq-list details[open] summary::after{transform:rotate(45deg)}
.pg-faq-list details p{padding:0 40px 22px 0;color:var(--muted);font-size:.97rem}

/* ---------- Llamada final y enlaces relacionados ---------- */
.pg-final{padding-bottom:8vh}
.pg-rel{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:12vh;padding-top:28px;border-top:1px solid var(--line)}
.pg-rel span{font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pg-rel a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:500;transition:color .25s}
.pg-rel a:hover{color:var(--cyan)}
.pg-rel .ic-arrow{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.pg-rel a:hover .ic-arrow{transform:translateX(4px)}

/* ---------- Blog: la escena sigue viva detrás; el texto va sobre un panel para leerse bien ---------- */
.pg-hero-art,.pg-hero-blog{min-height:86vh;min-height:86svh}
.pg-h1-art{max-width:22ch;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.04}
.pg-resumen{margin-top:34px;max-width:40rem;padding:20px 22px;border-radius:16px;background:rgba(7,12,26,.8);box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-resumen h2,.pg-fuentes h2{font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.pg-resumen li{position:relative;padding-left:18px;color:var(--ink-2)}
.pg-resumen li+li{margin-top:8px}
.pg-resumen li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}

.pg-lectura{padding:8vh 0 14vh}
.pg-panel{max-width:48rem;padding:clamp(24px,4vw,52px);border-radius:24px;background:rgba(5,9,20,.86);box-shadow:inset 0 0 0 1px var(--line),0 60px 120px -60px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pg-cuerpo{color:var(--ink-2);font-size:1.06rem;line-height:1.75}
.pg-cuerpo>*+*{margin-top:1.1em}
.pg-cuerpo h2{margin-top:1.8em;font-size:1.45rem;color:var(--ink)}
.pg-cuerpo ul{padding-left:1.2em;list-style:disc}
.pg-cuerpo a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.pg-fuentes{margin-top:44px!important;padding-top:24px;border-top:1px solid var(--line)}
.pg-fuentes ul{list-style:none;padding:0}
.pg-fuentes li+li{margin-top:6px}
.pg-fuentes a{font-size:.9rem;color:var(--muted);word-break:break-word}
.pg-fuentes a:hover{color:var(--cyan)}

.pg-lista li{border-top:1px solid var(--line)}
.pg-lista li:last-child{border-bottom:1px solid var(--line)}
.pg-lista a{display:block;padding:28px 0;transition:padding .35s var(--ease)}
.pg-lista a:hover{padding-left:10px}
.pg-lista time{font:400 .8rem/1.4 var(--mono);color:var(--dim)}
.pg-lista h3{margin-top:10px;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em;color:var(--ink);transition:color .25s}
.pg-lista a:hover h3{color:var(--cyan)}
.pg-lista p{margin-top:8px;color:var(--muted);font-size:.96rem}
.pg-leer{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.pg-leer .ic-arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .pg-faq-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .pg-panel{border-radius:18px}
}