/* /estudio: landing de pauta "todo en un solo estudio".
   Se apoya en /landing.css (mismos tokens, botones, tipografia y hero de /call).
   Aqui solo vive lo que /call no tiene: la pagina hace scroll y suma secciones. */

body.es{overflow-x:clip}

/* ---- hero: el mismo /call, pero como seccion de una pantalla dentro de una pagina larga ---- */
.es-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.es-hero .pg-bg{position:absolute}
.es-hero .call-main{padding-bottom:clamp(28px,6svh,64px)}
.es-hero .call-main .lp-h1{max-width:12.5em}
.es-scroll{position:relative;z-index:1;align-self:center;margin:0 0 clamp(14px,2.4svh,24px);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(224,225,221,.55);display:flex;flex-direction:column;align-items:center;gap:8px}
.es-scroll i{width:1px;height:28px;background:linear-gradient(var(--lp-green),transparent)}

/* ---- contenedor de seccion ---- */
.es-sec{position:relative;padding:clamp(60px,8vw,104px) clamp(18px,5vw,56px)}
.es-in{max-width:1080px;margin:0 auto}
.es-sec .lp-h2{max-width:14em;margin:0 0 22px}
.es-sec .lp-p{max-width:600px}

/* ---- 2 · franja de disciplinas (marquesina) ---- */
.es-franja{border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);overflow:hidden;padding:22px 0;background:#121412}
.es-franja-pista{display:flex;gap:56px;width:max-content;animation:esMarq 38s linear infinite}
.es-franja span{display:inline-flex;align-items:center;gap:56px;font-family:var(--lp-display);font-weight:300;font-size:clamp(20px,2.6vw,34px);text-transform:uppercase;white-space:nowrap;color:rgba(224,225,221,.85)}
.es-franja span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--lp-green);box-shadow:0 0 12px rgba(50,209,126,.8)}
@keyframes esMarq{to{transform:translateX(-50%)}}

/* ---- 3 · lo que hacemos: titular a la izquierda, lista numerada a la derecha ---- */
.es-hacemos .es-in{display:grid;gap:clamp(32px,5vw,72px)}
.es-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--lp-line)}
.es-lista li{display:grid;grid-template-columns:44px 1fr;gap:6px 16px;padding:22px 0;border-bottom:1px solid var(--lp-line)}
.es-lista .n{font-size:12px;letter-spacing:.18em;color:var(--lp-green);padding-top:6px}
.es-lista h3{margin:0;font-family:var(--lp-display);font-weight:300;font-size:clamp(20px,2.2vw,28px);line-height:1.1;text-transform:uppercase}
.es-lista p{grid-column:2;margin:0;font-size:15px;line-height:1.6;color:rgba(224,225,221,.68)}
@media (min-width:900px){.es-hacemos .es-in{grid-template-columns:5fr 6fr;align-items:start}.es-hacemos .es-cab{position:sticky;top:110px}}

/* ---- 4 · plancha verde ---- */
.es-verde{background:var(--lp-green);color:var(--lp-ink)}
.es-verde .lp-eyebrow{color:var(--lp-ink);opacity:.7}
.es-verde .lp-h2{color:var(--lp-ink);max-width:16em}
.es-verde .lp-p{color:rgba(28,30,28,.82);font-size:18px}
.es-cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(28,30,28,.18);border:1px solid rgba(28,30,28,.18);border-radius:22px;overflow:hidden;margin-top:clamp(32px,4vw,48px)}
.es-cifras div{background:var(--lp-green);padding:clamp(20px,3vw,32px)}
.es-cifras b{display:block;font-family:var(--lp-display);font-weight:300;font-size:clamp(40px,5.4vw,72px);line-height:1}
.es-cifras span{display:block;margin-top:10px;font-size:14px;line-height:1.45;max-width:16em}
@media (min-width:900px){.es-cifras{grid-template-columns:repeat(4,1fr)}}

/* ---- 5 · proyecto a sangre ---- */
.es-proyecto{padding:0;min-height:min(72vh,640px);display:flex;align-items:flex-end;background:center 45%/cover no-repeat url(/assets/projects/bonita-avenue-1.webp)}
.es-proyecto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,14,.05) 30%,rgba(14,16,14,.92) 100%)}
.es-ficha{position:relative;margin:0 clamp(18px,5vw,56px) clamp(28px,5vw,56px);max-width:520px;background:rgba(18,20,18,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(224,225,221,.14);border-radius:26px;padding:clamp(22px,3vw,32px)}
.es-ficha h2{margin:0 0 6px;font-family:var(--lp-display);font-weight:300;font-size:clamp(26px,3.4vw,42px);line-height:1;text-transform:uppercase}
.es-ficha .meta{margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(224,225,221,.6)}
.es-ficha p{margin:0;font-size:15px;line-height:1.6;color:rgba(224,225,221,.8)}
.es-sello{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 12px;border-radius:999px;background:var(--lp-green);color:var(--lp-ink);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ---- 6 · como funciona: linea de tiempo ---- */
.es-pasos{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;gap:0;counter-reset:p}
.es-pasos li{position:relative;padding:0 0 34px 44px}
.es-pasos li::before{counter-increment:p;content:counter(p,decimal-leading-zero);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--lp-ink);background:var(--lp-green)}
.es-pasos li::after{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;width:1px;background:rgba(50,209,126,.35)}
.es-pasos li:last-child::after{display:none}
.es-pasos h3{margin:2px 0 6px;font-family:var(--lp-display);font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.05;text-transform:uppercase}
.es-pasos p{margin:0;font-size:15px;line-height:1.6;color:rgba(224,225,221,.68);max-width:22em}
@media (min-width:900px){
  .es-pasos{grid-template-columns:repeat(4,1fr);gap:28px}
  .es-pasos li{padding:48px 0 0}
  .es-pasos li::before{top:0}
  .es-pasos li::after{left:38px;right:-28px;top:14.5px;bottom:auto;width:auto;height:1px}
}

/* ---- 7 · para quien: chips sobre teal ---- */
.es-quien{background:radial-gradient(120% 140% at 0% 0%,rgba(23,94,84,.55),transparent 60%),#121412}
.es-chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.es-chips span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgba(224,225,221,.2);background:rgba(224,225,221,.04);font-size:15px}
.es-chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lp-green)}
.es-nota{margin:26px 0 0;font-size:14px;line-height:1.6;color:rgba(224,225,221,.6);max-width:36em}

/* ---- 8 · socios ---- */
.es-socios{display:grid;gap:18px;margin-top:clamp(32px,4vw,48px)}
.es-socio{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:18px;border:1px solid var(--lp-line);border-radius:22px;background:rgba(224,225,221,.03)}
.es-socio img{width:96px;height:96px;border-radius:18px;object-fit:cover;object-position:center 18%;filter:grayscale(1)}
.es-socio h3{margin:0;font-family:var(--lp-display);font-weight:300;font-size:22px;text-transform:uppercase}
.es-socio .rol{margin:2px 0 8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lp-green)}
.es-socio p{margin:0;font-size:14px;line-height:1.55;color:rgba(224,225,221,.7)}
@media (min-width:760px){.es-socios{grid-template-columns:1fr 1fr}}

/* ---- 9 · cierre ---- */
.es-cierre{text-align:center;border-top:1px solid var(--lp-line);background:radial-gradient(60% 80% at 50% 100%,rgba(50,209,126,.14),transparent 70%)}
.es-cierre .lp-h2{margin:0 auto 26px;max-width:13em}
.es-cierre .lp-estado{margin:0 0 22px}
.es-cierre .lp-tel{margin:0 0 26px}
.es-cierre .call-sec{margin:0 auto;max-width:520px}

.es-foot{text-align:center;font-size:12px;color:rgba(224,225,221,.5);letter-spacing:.04em;padding:26px 16px calc(96px + env(safe-area-inset-bottom))}
.es-foot a{color:rgba(224,225,221,.72);text-decoration:underline;text-underline-offset:3px}

/* ---- barra fija de llamada (aparece al dejar atras el hero) ---- */
.es-barra{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;justify-content:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(14,16,14,.92) 35%);transform:translateY(110%);transition:transform .35s var(--lp-ease)}
.es-barra.on{transform:none}
.es-barra .lp-btn{width:100%;max-width:520px;min-height:56px;font-size:17px;font-weight:700}
.es-barra .sep{opacity:.55;font-weight:400}

/* ---- aparicion suave al hacer scroll ---- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--lp-ease),transform .8s var(--lp-ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.es-franja-pista{animation:none}}

/* cierre con los socios y el filtro (reemplaza las secciones "para quien" y "socios") */
.es-trust-cierre{justify-content:center;margin:0 0 22px}
.es-cierre .es-nota{margin:24px auto 0;text-align:center}

/* ---- 2 · slider de proyectos: cada diapositiva es la seccion "a sangre" de Bonita ---- */
.es-slider{position:relative;background:#0E100E}
.es-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.es-slides::-webkit-scrollbar{display:none}
.es-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.es-slide .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.es-slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,16,14,.05) 30%,rgba(14,16,14,.9) 100%)}
.es-slide .es-ficha{z-index:2}
.es-ficha .al{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.es-ficha .al span{font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid rgba(224,225,221,.2);color:rgba(224,225,221,.85)}
.es-sello.alt{background:rgba(224,225,221,.1);color:var(--lp-text);border:1px solid rgba(224,225,221,.22)}
.es-tag-render{position:absolute;z-index:2;right:clamp(18px,5vw,56px);top:clamp(80px,12vh,110px);padding:5px 11px;border-radius:999px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:rgba(14,16,14,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(224,225,221,.85)}
.es-sl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(18px,5vw,56px);border-bottom:1px solid var(--lp-line)}
.es-sl-num{font-size:12px;letter-spacing:.2em;color:rgba(224,225,221,.65);min-width:64px}
.es-sl-dots{display:flex;gap:8px}
.es-sl-dots button{all:unset;cursor:pointer;width:8px;height:8px;border-radius:999px;background:rgba(224,225,221,.3);transition:width .35s var(--lp-ease),background .35s}
.es-sl-dots button[aria-current="true"]{width:28px;background:var(--lp-green)}
.es-sl-arr{display:flex;gap:8px}
.es-sl-arr button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(224,225,221,.25);font-size:18px}
.es-sl-arr button:hover,.es-sl-arr button:focus-visible,.es-sl-dots button:focus-visible{border-color:var(--lp-green);color:var(--lp-green)}
@media (max-width:620px){.es-slide{min-height:640px}.es-slide .es-ficha{margin-left:14px;margin-right:14px}.es-tag-render{top:20px}}