/* Waves v10 ronda F: escala, ritmo y transiciones de Qué creamos, El estudio, Cómo trabajamos, FAQ, Contacto y footer. */
:root{--rf-r:clamp(28px,4.2vw,64px)}
/* transiciones: cada sección entra como una hoja con esquinas grandes sobre la anterior (cambio de fondo del reel10) */
.qhs,.prod,.estudio,.faq,.contacto{position:relative;border-radius:var(--rf-r) var(--rf-r) 0 0;margin-top:calc(-1*var(--rf-r))}
.how{position:relative;border-radius:var(--rf-r) var(--rf-r) 0 0;margin-top:calc(-1*var(--rf-r))}
.qhs,.estudio,.faq{overflow-x:clip}
.qhs{padding-top:calc(var(--rf-r) + clamp(64px,8vw,130px))}
.prod{padding-top:calc(var(--rf-r) + 40px)}
.estudio{padding-top:calc(var(--rf-r) + clamp(64px,8vw,120px))}
.faq{padding-top:calc(var(--rf-r) + clamp(64px,8vw,120px))}
.contacto{padding-top:calc(var(--rf-r) + clamp(64px,8vw,120px))}
.how-sticky{padding-top:var(--rf-r)}

/* Qué creamos: bloque de tinta, titular a toda escala, foto a sangre */
.qhs{background:#1B1738;color:#fff}
.qhs .kick{color:#A3EFF4}
.qhs .sec-h h2{color:#fff;font-size:clamp(42px,8vw,140px);line-height:.94;letter-spacing:-.055em;max-width:none}
.qhs .qc-intro{color:rgba(255,255,255,.74);font-size:clamp(17px,1.6vw,23px);max-width:620px;margin-top:clamp(24px,3vw,44px)}
@media(min-width:900px){.qhs .qc-intro{margin-left:auto;margin-right:0}}
.qc-g{margin-top:clamp(36px,5vw,80px)}
.qc-fig{margin-inline:calc(50% - 50vw);border-radius:0;aspect-ratio:2.3/1;max-height:84vh;box-shadow:none;background:#1B1738}
.qc-fig img{object-position:50% 55%;transform-origin:50% 60%}
.qc-g .qm-list{margin-top:clamp(36px,4.5vw,72px);gap:clamp(24px,3vw,48px)}
.qc-g .qm{border-top:1px solid rgba(255,255,255,.28);padding-top:22px}
.qc-g .qm::before{font-size:clamp(40px,4.2vw,68px);letter-spacing:-.05em;line-height:1;font-weight:700;color:#C3AEFA;margin-bottom:clamp(14px,1.6vw,24px)}
.qc-g .qm h3{color:#fff;font-size:clamp(20px,1.8vw,28px)}
.qc-g .qm p{color:rgba(255,255,255,.7);font-size:clamp(15px,1.1vw,17px)}

/* El estudio: foto a sangre con titular enorme y un párrafo protagonista */
.estudio{background:#ECE8FB}
.est-ed .est-fig{margin-inline:calc(50% - 50vw);border-radius:0;aspect-ratio:2.1/1;max-height:88vh;box-shadow:none}
.est-ed .est-fig img{transform-origin:60% 50%}
.est-ed .est-h{max-width:78%;padding:clamp(28px,5vw,88px) 0 0;align-self:start}
.est-ed .est-h h2{font-size:clamp(44px,8.2vw,148px);line-height:.94;letter-spacing:-.055em;max-width:none}
.est-ed .est-g{grid-template-columns:1.7fr 1fr 1fr;gap:clamp(24px,4vw,72px);margin-top:clamp(40px,5vw,84px)}
.est-ed .est-b{border-top-color:#1B1738}
.est-ed .est-b:first-child p{font-size:clamp(22px,2.3vw,36px);line-height:1.22;letter-spacing:-.03em;font-weight:600;color:#1B1738}
.est-ed .est-b p{font-size:clamp(15px,1.2vw,18px)}
@media(max-width:900px){.est-ed .est-h{max-width:none;padding:28px 20px 0}.est-ed .est-h h2{font-size:clamp(40px,12.5vw,64px)}.est-ed .est-g{grid-template-columns:minmax(0,1fr)}}

/* Cómo trabajamos: titular más grande */
.how h2{font-size:clamp(38px,5.4vw,88px);letter-spacing:-.05em;line-height:.98}

/* FAQ: lista a todo el ancho, preguntas grandes */
.faq{background:#fff}
.faq-g{grid-template-columns:minmax(0,1fr)!important;gap:clamp(20px,3vw,40px)}
.faq-h{position:static}
.faq-h .kick{margin:0;color:#6A5FD0}
.faq summary{font-size:clamp(22px,3.3vw,52px);letter-spacing:-.045em;line-height:1.08;padding:clamp(24px,2.6vw,40px) 0 clamp(24px,2.6vw,40px) clamp(52px,7vw,120px);font-weight:700}
.faq summary::before{top:50%;transform:translateY(-50%);font-size:clamp(14px,1.4vw,20px);color:#8D9EEF;letter-spacing:.12em}
.faq summary::after{font-size:clamp(28px,3vw,44px);color:#1B1738}
.faq details p{padding:0 clamp(16px,6vw,120px) clamp(28px,3vw,44px) clamp(52px,7vw,120px);font-size:clamp(17px,1.4vw,21px);max-width:none}
.faq-l{border-top:1.5px solid #1B1738}
.faq details{border-bottom-color:rgba(27,23,56,.18)}
@media(max-width:900px){.faq summary{padding-left:44px}.faq details p{padding:0 8px 24px 44px}}

/* Contacto: titular enorme y cinta de cristal de fondo */
.contacto{overflow:hidden;isolation:isolate}
.contacto::before{content:"";position:absolute;z-index:-1;left:-12%;bottom:-24%;width:74%;aspect-ratio:16/9;background:url(../a/est-cinta.webp) center/cover;mix-blend-mode:screen;opacity:.5;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent);pointer-events:none}
.contacto .cg{position:relative}
.contacto h2{font-size:clamp(46px,7.4vw,128px);line-height:.94;letter-spacing:-.055em}
.contacto .lead2{font-size:clamp(17px,1.5vw,22px);max-width:520px;margin-top:clamp(22px,2.6vw,36px)}

/* footer: logotipo gigante recortado por el borde */
.foot-big{width:min(1500px,104%);margin:clamp(32px,4.5vw,72px) auto calc(-1*clamp(12px,3vw,48px))}

/* revelados sutiles con el scroll (solo donde el navegador los soporta; sin ellos queda todo estático) */
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
@keyframes rf-up{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes rf-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes rf-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.qc-g .qm,.est-ed .est-b,.faq details{animation:rf-up linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
.qc-fig img,.est-fig img{animation:rf-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
.foot-big{animation:rf-wipe linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
}}