/* Veredicto · landing. Base = versión estática (plan B). html.dyn = modo cinematográfico. */
:root{
  --tinta:#111418; --papel:#F5F2EC; --piedra:#5F646B; --senal:#FF5A1F; --fondo:#0b0d10;
  --suave:rgba(245,242,236,.74); --linea:rgba(245,242,236,.16);
  --titulo:'Archivo','Helvetica Neue',Arial,sans-serif;
  --texto:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--fondo);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--papel);font:400 clamp(16px,.9vw + 12px,19px)/1.55 var(--texto);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--titulo);font-weight:500;margin:0;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}
p{margin:0}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--senal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--papel);color:var(--tinta);padding:10px 14px;border-radius:6px;text-decoration:none}
.skip:focus{top:12px}

/* Cabecera con el logo fijo */
.hdr{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(18px,3vw,40px) 12px;pointer-events:none;opacity:1;transition:opacity .35s ease}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;pointer-events:auto;font:500 18px/1 var(--titulo);letter-spacing:-.01em}
.brand svg{display:block}
.dyn .hdr{opacity:0}
.dyn.brand-on .hdr{opacity:1}

/* Lienzo de fotogramas */
#stage{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:0}
.dyn #stage{display:block}
main{position:relative;z-index:1}

/* Luz volumétrica CSS (fondo de secciones sin vídeo) */
.beam{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.beam::before{content:"";position:absolute;top:-30%;right:-18%;width:62%;height:150%;
  background:linear-gradient(180deg,rgba(255,122,52,.50),rgba(255,90,31,.14) 55%,transparent 80%);
  transform:rotate(19deg);filter:blur(34px);opacity:.9}
.beam::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 88% -8%,rgba(255,128,60,.30),transparent 62%)}

/* Estructura: sección alta + escenario fijo */
.pin{position:relative}
.dyn .tall{height:var(--h,300vh)}
.dyn #hero{--h:360vh} .dyn #quienes{--h:280vh} .dyn #que{--h:700vh} .dyn #final{--h:440vh}
.dyn .pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}

/* 1 · Apertura */
.hero-pin{position:relative;min-height:100svh;text-align:center}
.hero-v{position:absolute;left:50%;top:42%;width:min(52vw,300px);height:auto;transform:translate(-50%,-50%);display:block}
#hero h1{position:absolute;left:50%;bottom:clamp(64px,14vh,170px);transform:translateX(-50%);width:min(92vw,16ch);font-size:clamp(36px,7.4vw,112px);text-shadow:0 2px 40px rgba(0,0,0,.65)}
.hint{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));text-align:center;font-size:14px;color:var(--suave);letter-spacing:.02em}
.hint::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(var(--suave),transparent)}
html:not(.dyn) .hint{display:none}
.dyn .hero-v{position:fixed;left:0;top:0;width:auto;height:auto;transform:none;z-index:6;opacity:0;visibility:hidden;transform-origin:0 0;will-change:transform,opacity;pointer-events:none}
.dyn #hero h1{position:absolute;left:50%;bottom:clamp(64px,14vh,170px);transform:translateX(-50%);width:min(92vw,16ch);max-width:none;text-shadow:0 2px 40px rgba(0,0,0,.65);will-change:opacity}

/* 2 · Quiénes somos */
#quienes{position:relative}
.q-pin{min-height:100svh;display:grid;align-content:center;gap:clamp(20px,5vh,44px);padding:clamp(90px,14vh,160px) clamp(22px,8vw,140px);background:var(--fondo)}
.dyn .q-pin{background:transparent;display:block;padding:0}
.phrases{position:relative;display:grid;gap:clamp(14px,3vh,30px);z-index:1}
.phrase{font:500 clamp(34px,6.4vw,104px)/1.02 var(--titulo);letter-spacing:-.025em;max-width:15ch;text-wrap:balance}
.dyn .phrases{position:absolute;inset:0;display:block}
.dyn .phrase{position:absolute;left:clamp(24px,8vw,140px);right:clamp(24px,6vw,100px);top:50%;transform:translateY(-50%);opacity:0;will-change:opacity,transform,filter}
.dyn .q-pin .beam{opacity:var(--beam,1)}

/* 3 · Qué hacemos */
.w-pin{min-height:100svh;padding:clamp(90px,14vh,150px) clamp(22px,6vw,100px) 80px;background:var(--fondo)}
.dyn .w-pin{background:transparent;padding:0}
.w-title{font-size:clamp(30px,4.2vw,60px);margin-bottom:clamp(24px,5vh,56px)}
.dyn .w-title::after{content:"";display:block;width:2.7em;height:4px;margin-top:.4em;background:var(--senal);border-radius:2px}
.dyn .w-title{position:absolute;left:clamp(24px,6vw,100px);top:calc(86px + env(safe-area-inset-top,0px));margin:0;font-size:clamp(28px,2.9vw,52px);opacity:0;will-change:opacity;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.panes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.pane{padding:clamp(18px,1.8vw,28px);border-radius:12px;border:1px solid rgba(245,242,236,.26);
  background:linear-gradient(145deg,rgba(17,20,24,.55),rgba(17,20,24,.32));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(245,242,236,.18)}
.pane h3{font-size:clamp(26px,2.6vw,44px)}
.pane p{text-wrap:balance;margin-top:.5em;color:var(--suave);font-size:clamp(15px,1.05vw,17px);max-width:24ch}
.dyn .panes{display:block}
/* Escritorio: texto blanco directamente sobre el cristal (sin caja), con icono naranja encima de cada título */
.pane .ico{display:block;width:38px;height:38px;margin-bottom:12px;color:var(--senal);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dyn .pane{position:absolute;left:0;top:0;width:calc(var(--s,1)*var(--pw,200)*1px);padding:0;border:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--papel);text-shadow:0 1px 16px rgba(0,0,0,.38);
  transform-origin:0 0;transform:skewY(var(--sk,0deg));translate:0 10px;opacity:0;
  transition:opacity .55s ease,translate .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.dyn .pane.on{opacity:1;translate:none}
.dyn .pane .ico{width:max(34px,calc(var(--s,1)*50px));height:max(34px,calc(var(--s,1)*50px));margin-bottom:max(10px,calc(var(--s,1)*15px));filter:drop-shadow(0 0 10px rgba(255,90,31,.28))}
.dyn .pane h3{font-size:max(22px,calc(var(--s,1)*30px))}
.dyn .pane p{color:rgba(245,242,236,.92);font-size:max(13.5px,calc(var(--s,1)*15px));max-width:none;line-height:1.35;margin-top:.45em;text-wrap:balance}
/* Móvil vertical: los textos van en tarjetas oscuras abajo (el cristal es demasiado pequeño) */
.dyn.stack .panes{position:absolute;left:clamp(16px,5vw,40px);right:clamp(16px,5vw,40px);bottom:calc(5vh + env(safe-area-inset-bottom,0px));display:grid;gap:10px}
.dyn.stack .pane{position:relative;left:auto;top:auto;width:auto;transform:none;translate:0 12px;padding:12px 16px;border:1px solid rgba(245,242,236,.26);border-radius:12px;
  background:linear-gradient(145deg,rgba(17,20,24,.6),rgba(17,20,24,.38));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  color:var(--papel);text-shadow:none}
.dyn.stack .pane.on{translate:none}
.dyn.stack .pane .ico{display:none}
.dyn.stack .pane h3{font-size:22px}
.dyn.stack .pane p{font-size:14px;color:var(--suave);max-width:none;margin-top:2px}
.dyn.stack .w-title{top:calc(78px + env(safe-area-inset-top,0px));font-size:30px}

/* 4 · Preguntas frecuentes */
.faq{position:relative;background:var(--fondo);overflow:hidden;padding:clamp(90px,16vh,180px) clamp(20px,6vw,100px)}
.beam-faq{opacity:.55}
.faq-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,100px);max-width:1280px;margin:0 auto}
.faq h2{font-size:clamp(34px,4.6vw,68px)}
.faq-list{border-bottom:1px solid var(--linea)}
details{border-top:1px solid var(--linea)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  font:500 clamp(19px,1.9vw,27px)/1.2 var(--titulo);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--senal);border-bottom:2px solid var(--senal);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease}
details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details p{padding:0 0 24px;color:var(--suave);max-width:56ch}
details a{color:var(--papel);text-decoration-color:var(--senal);text-underline-offset:3px}

/* 5 · Final */
.f-pin{min-height:90svh;display:grid;place-items:center;padding:80px 20px;background:var(--fondo)}
.dyn .f-pin{background:transparent;padding:0;display:block}
.cd{container-type:inline-size;width:min(560px,100%);display:grid;gap:max(10px,3cqw);justify-items:center;text-align:center}
html:not(.dyn) .cd{padding:clamp(22px,4vw,44px);border:1px solid var(--senal);border-radius:10px;background:#0f1216;box-shadow:0 0 70px rgba(255,90,31,.22)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:max(8px,2.2cqw);width:100%}
.tile{display:grid;justify-items:center;gap:.4em;padding:max(8px,2.6cqw) 4px;border-radius:9px;border:1px solid rgba(245,242,236,.24);
  background:linear-gradient(150deg,rgba(245,242,236,.14),rgba(245,242,236,.04));
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(245,242,236,.22)}
.tile b{font:500 max(24px,8.6cqw)/1 var(--titulo);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile span{font-size:max(10px,2.4cqw);color:var(--suave)}
.when{font-size:max(13px,2.9cqw);color:var(--suave)}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-block;text-decoration:none;font:500 max(13px,2.9cqw)/1 var(--texto);padding:max(10px,2.3cqw) max(18px,4cqw);border-radius:999px;
  background:var(--papel);color:var(--tinta);transition:background .2s ease,transform .2s ease}
.btn:hover{background:#fff;transform:translateY(-1px)}
.btn-go{background:var(--senal);color:#fff}
.btn-go:hover{background:#ff7340}
.dyn .cd{position:fixed;left:0;top:0;width:min(560px,100%);opacity:0;translate:0 12px;transform-origin:0 0;will-change:transform,opacity;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.dyn .cd.on{opacity:1;translate:none;pointer-events:auto}

.foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px clamp(20px,6vw,100px) calc(28px + env(safe-area-inset-bottom,0px));
  background:var(--fondo);border-top:1px solid var(--linea);font-size:14px;color:var(--suave)}
.foot a{text-underline-offset:3px}

@media (max-width:820px){
  .faq-grid{grid-template-columns:1fr}
  .panes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}