/* pg-resto: interaccion real en Que creamos, El estudio y la IA, FAQ y Contacto. Paleta: tinta, blanco, cian. */
:root{--pg-e:cubic-bezier(.2,.7,.2,1);--pg-c:#A3EFF4;--pg-i:#0A0B10}
/* ---------- fondo con paralaje (lo mueve el scroll, no el layout) ---------- */
.pg-glow{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.pg-glow::before{content:"";position:absolute;left:-10%;right:-10%;top:-20%;height:70%;background:radial-gradient(50% 60% at 70% 40%,rgba(163,239,244,.2),transparent 70%);transform:translate3d(0,calc(var(--pg-p,0)*70px),0)}
.pg-glow::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-25%;height:60%;background:radial-gradient(45% 55% at 20% 60%,rgba(163,239,244,.12),transparent 70%);transform:translate3d(0,calc(var(--pg-p,0)*-50px),0)}
.estudio .pg-glow::before,.faq .pg-glow::before{background:radial-gradient(50% 60% at 70% 40%,rgba(163,239,244,.3),transparent 70%)}
.estudio .pg-glow::after,.faq .pg-glow::after{background:radial-gradient(45% 55% at 20% 60%,rgba(163,239,244,.22),transparent 70%)}
.pg-glow~*{position:relative;z-index:1}
/* ---------- Que creamos: tarjetas de cristal ---------- */
.qc-g .qm-list{align-items:start}
.qc-g .qm{border-top:0;padding-top:0}
.qc-g .qm::after{display:none}
.qc-g .qm::before{margin-bottom:12px}
.pg-t{position:relative;padding:20px 20px 16px;border-radius:20px;border:1px solid rgba(163,239,244,.16);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 30px 60px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);transform:perspective(900px) rotateX(var(--pg-rx,0deg)) rotateY(var(--pg-ry,0deg));transition:transform .45s var(--pg-e),border-color .4s,box-shadow .4s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-t::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(240px circle at var(--pg-x,50%) var(--pg-y,0%),rgba(163,239,244,.24),transparent 65%)}
.pg-t.hov{transition:transform .12s linear,border-color .4s,box-shadow .4s;border-color:rgba(163,239,244,.45);box-shadow:0 40px 70px -36px rgba(0,0,0,.9),0 0 0 1px rgba(163,239,244,.12),inset 0 1px 0 rgba(255,255,255,.14)}
.pg-t.hov::before,.pg-t.open::before{opacity:1}
.pg-t.open{border-color:rgba(163,239,244,.55)}
.pg-t>*{position:relative}
.pg-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;min-height:40px;border-radius:99px;border:1px solid rgba(163,239,244,.4);background:transparent;color:var(--pg-c);font:600 13px/1 Manrope,system-ui,sans-serif;cursor:pointer;transition:background .3s,color .3s}
.pg-more:hover{background:rgba(163,239,244,.12)}
.pg-more:focus-visible,.pg-chip:focus-visible,.pg-cta:focus-visible{outline:2px solid var(--pg-c);outline-offset:3px}
.pg-more i{display:inline-block;font-style:normal;font-size:16px;line-height:1;transition:transform .4s var(--pg-e)}
.pg-t.open .pg-more i{transform:rotate(45deg)}
.pg-ex{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--pg-e)}
.pg-t.open .pg-ex{grid-template-rows:1fr}
.pg-ex>div{overflow:hidden;min-height:0;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--pg-e)}
.pg-t.open .pg-ex>div{opacity:1;transform:none;transition-delay:.12s}
.pg-mock{margin-top:16px;padding:14px;border-radius:14px;background:rgba(10,11,16,.6);border:1px solid rgba(255,255,255,.1);cursor:default}
.pg-mock h4{margin:0 0 10px;font:700 12px/1.3 Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pg-c)}
.pg-row{display:flex;flex-wrap:wrap;gap:8px}
.pg-chip{min-height:38px;padding:8px 13px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;font:500 13.5px/1.2 Manrope,system-ui,sans-serif;cursor:pointer;text-align:left;transition:background .25s,border-color .25s,color .25s,transform .25s var(--pg-e)}
.pg-chip:hover{border-color:var(--pg-c);transform:translateY(-1px)}
.pg-chip[aria-pressed=true]{background:var(--pg-c);color:var(--pg-i);border-color:var(--pg-c)}
.pg-out{margin:12px 0 0;min-height:2.9em;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.pg-bar{height:6px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:12px}
.pg-bar i{display:block;height:100%;width:var(--w,0%);background:var(--pg-c);border-radius:inherit;transition:width .5s var(--pg-e)}
.pg-rows{display:grid;gap:6px;margin-top:12px}
.pg-rows li{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.06);font-size:13px;color:#fff;transition:opacity .3s,transform .4s var(--pg-e)}
.pg-rows li em{font-style:normal;color:var(--pg-c)}
.pg-rows li[hidden]{display:none}
.pg-note{margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.55)}
/* ---------- FAQ ---------- */
.faq summary{transition:color .3s,padding-left .25s}
.faq summary:hover{color:#0E7C86}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary::after{transition:transform .5s var(--pg-e)}
.faq details.pg-run{overflow:hidden}
.pg-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 20px;min-height:44px;border-radius:99px;background:var(--pg-i);color:#fff!important;font:600 14.5px/1 Manrope,system-ui,sans-serif;text-decoration:none;transition:box-shadow .35s,transform .35s var(--pg-e)}
.pg-cta:hover{box-shadow:0 0 0 4px rgba(163,239,244,.5);transform:translateY(-2px)}
.pg-cta span{transition:transform .35s var(--pg-e)}.pg-cta:hover span{transform:translateX(4px)}
/* ---------- Contacto: campos vivos ---------- */
.pg-fl{position:relative}
.pg-fl label{position:absolute;left:17px;top:17px;margin:0;z-index:2;font-size:16px;font-weight:500;color:#6B6A66;pointer-events:none;transform-origin:left top;transition:transform .3s var(--pg-e),color .3s}
.pg-fl input,.pg-fl textarea{padding-top:25px!important;padding-bottom:8px!important}
.pg-fl:focus-within label,.pg-fl.on label{transform:translateY(-10px) scale(.76);color:#0E7C86}
.pg-fl::after{content:"";position:absolute;right:15px;top:17px;width:20px;height:20px;border-radius:50%;pointer-events:none;background:var(--pg-c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0B10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;transform:scale(0);opacity:0;transition:transform .4s var(--pg-e),opacity .3s}
.pg-fl.good::after{transform:scale(1);opacity:1}
.pg-fl.good input,.pg-fl.good textarea{border-color:var(--pg-c)!important}
.pg-fl.bad label{color:#8f1d15}
.contacto .sub{overflow:hidden;transition:background .3s,box-shadow .35s,transform .35s var(--pg-e)}
.contacto .sub:not([disabled]):hover{transform:translateY(-2px)}
.contacto .sub.pg-ready{box-shadow:0 0 0 4px rgba(163,239,244,.45)}
.contacto .sub.pg-ready .sub-t::after{content:"  \2192"}
.contacto .sub[disabled]{opacity:1;background:#143845}
.ok.pg-in{animation:pg-ok .7s var(--pg-e) both}
.ok.pg-in i svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:pg-ck .6s .35s var(--pg-e) forwards}
@keyframes pg-ok{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pg-ck{to{stroke-dashoffset:0}}
/* ---------- movimiento reducido: todo visible y quieto ---------- */
@media(prefers-reduced-motion:reduce){
 .pg-t,.pg-t.hov,.pg-ex,.pg-ex>div,.pg-bar i,.pg-fl label,.pg-fl::after,.pg-more i,.faq summary::after,.pg-chip,.ok.pg-in,.ok.pg-in i svg path{transition:none!important;animation:none!important}
 .pg-t{transform:none!important}.pg-glow::before,.pg-glow::after{transform:none!important}
 .ok.pg-in i svg path{stroke-dashoffset:0}
}
.ok i svg{stroke:var(--pg-i)}

/* nivel: dos momentos display, eyebrows en mono, saltos oscuro a claro con linea de agua */
.kick{font-family:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace!important;font-size:12px!important;letter-spacing:.12em}
@media(min-width:900px){
.prod-head h2{font-size:clamp(96px,8.6vw,140px);line-height:.98;letter-spacing:-.04em;max-width:11ch}
}
@media(max-width:899px){.prod-head h2{letter-spacing:-.04em}}
.prod::before,.faq::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,#A3EFF4 30%,#A3EFF4 70%,transparent);opacity:.85;box-shadow:0 0 18px rgba(163,239,244,.7)}
.prod::after,.faq::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(60px,9vw,140px);z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,16,.18),transparent)}

/* ---------- CABECERAS UNIFICADAS (13-nov, tg 62065/62067): un solo sistema, todo a la izquierda, misma columna ---------- */
body .qm-wrap,body .how .wrap.how-grid{max-width:1440px;margin-left:auto;margin-right:auto}
body :is(.sec-h,.prod-head,.faq-h,.how-copy,.contacto .cg>div:first-child){text-align:center;margin-left:auto;margin-right:auto;max-width:none;justify-items:center;align-items:center}
body :is(.sec-h,.prod-head,.faq-h,.how-copy,.contacto .cg>div:first-child) :is(.kick,h2,.lead2,.qc-intro){text-align:center;margin-left:auto;margin-right:auto;justify-self:center;align-self:center}
body :is(.sec-h,.prod-head,.faq-h,.how-copy,.contacto .cg>div:first-child) h2{font-size:clamp(28px,3.5vw,56px);font-weight:700;line-height:1.04;letter-spacing:-.045em;max-width:18em;width:auto}
body :is(.sec-h,.prod-head,.contacto .cg>div:first-child) :is(.lead2,.qc-intro){font-size:clamp(16px,1.3vw,18px)!important;line-height:1.55;text-wrap:pretty;max-width:60ch;width:auto;margin-top:clamp(16px,1.6vw,22px)}
body :is(.sec-h,.prod-head,.faq-h,.how-copy,.contacto .cg>div:first-child) .kick{font-weight:700}
body .faq-h .kick{margin-bottom:12px}
@media(max-width:860px){body section.how.pc .how-grid{align-items:stretch}body section.how.pc .how-grid>:is(.kick,h2){align-self:flex-start;width:auto;margin-left:0}}

/* ---------- Contacto: chips siempre visibles (13-nov, tg 62096). Un .chip suelto de las demos (opacity:0) los ocultaba ---------- */
#contacto fieldset.chips{display:flex;flex-wrap:wrap;gap:0;opacity:1}
#contacto .chips .chip{opacity:1!important;animation:none!important;background:none;padding:0;margin:0 8px 8px 0;font-size:14px;color:inherit;transform:none}
#contacto .chips .chip span{opacity:1;color:rgba(255,255,255,.92)}
#contacto .chips .chip input:checked+span{color:var(--cz-i,#0A0B10)}

/* ---------- Carla 13-nov 23:17-23:20 (tg 62168-62179): TODO centrado ---------- */
body .kick.line::before,body .kick.line::after{margin-inline:auto}
/* Contacto: cabecera arriba, formulario debajo, centrado, ancho y bajo */
body .contacto .cg{display:block;max-width:980px;margin-inline:auto}
body #contacto .form{margin:clamp(28px,3vw,44px) auto 0;max-width:980px;width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 18px;padding:clamp(20px,2.4vw,32px)}
body #contacto .form>*{grid-column:1/-1}
body #contacto .form>.fld:nth-of-type(-n+3){grid-column:span 2}
body #contacto .form>.chips{grid-column:span 3}
body #contacto .form>.fld:nth-of-type(5){grid-column:span 4}
body #contacto .form>.sub{grid-column:span 2;justify-self:stretch;align-self:end;min-width:0}
body #contacto .form>.resp24,body #contacto .form>.priv,body #contacto .form>.fmsg{text-align:center;margin:0}
body #contacto .form textarea{min-height:72px;height:72px}
@media(max-width:760px){body #contacto .form{grid-template-columns:1fr}body #contacto .form>*,body #contacto .form>.fld:nth-of-type(-n+3),body #contacto .form>.chips,body #contacto .form>.fld:nth-of-type(5),body #contacto .form>.sub{grid-column:1/-1}}
/* El estudio: tres bloques en una fila */
@media(min-width:900px){html body .estudio .est-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;width:100%;gap:0}
html body .estudio .est-b{border:0;border-left:1px solid rgba(10,11,16,.12);padding:0 clamp(16px,2vw,32px);font-weight:400}
html body .estudio .est-b:first-child{border-left:0}
html body .estudio .est-b p{max-width:none;font-size:inherit;font-weight:inherit}}
@media(min-width:761px){body #contacto .chips .chip{margin:0 5px 6px 0}body #contacto .chips .chip span{padding-inline:11px!important;font-size:13px}}

/* ---------- A LA IZQUIERDA (14-nov, Carla lo pidio 2 veces): Que creamos, Como trabajamos y Preguntas frecuentes. El resto de cabeceras sigue centrado ---------- */
body #que-creamos .sec-h,body .how-head,body .faq-h{text-align:left!important;margin-left:0!important;margin-right:0!important;justify-items:start!important;align-items:flex-start!important}
body #que-creamos .sec-h :is(.kick,h2,.qc-intro),body .how-head :is(.kick,h2),body .faq-h :is(.kick,h2){text-align:left!important;margin-left:0!important;margin-right:0!important;justify-self:start!important;align-self:flex-start!important}
body #que-creamos .sec-h .kick.line{justify-content:flex-start}
body .how-head{margin-left:auto!important;margin-right:auto!important;width:100%;max-width:1440px!important}