/* Innova Gestión · capa cinematográfica 2026.
   Va DESPUÉS del <style> de la página. Sin JS o con "reducir movimiento" no se activa html.mod:
   la página queda completa, ordenada y estática. */

/* ---------- compactación (vale con y sin JS) ---------- */
.pad{padding-block:clamp(44px,5.2vw,74px)}
.h2{font-size:clamp(28px,3.3vw,46px)}
.about-pics{max-width:360px;margin-inline:auto}
.exp-stage{max-width:370px}
.gauge .holo{max-width:118px}
.gauge{padding:14px 10px}
.acc summary{padding:13px 16px}
.acc{gap:10px}
.final-vis{max-width:360px}
.cta-card{margin-top:24px;padding:22px 24px 18px}
.rows a{padding:11px 0}
.about p.txt{margin-top:16px}
.orbit{margin-top:24px}
.exp ul{margin-top:22px;gap:10px}
.exp li{padding:12px 16px}
.pg-head .h2{font-size:clamp(26px,3vw,40px)}
.pg-cta{padding:20px 24px}
.head{margin-bottom:clamp(26px,4vw,44px)}
.eyebrow{margin-bottom:16px}
.sub{margin-top:16px}
.cta-row{margin-top:26px}

/* ---------- marquesinas ---------- */
.mq{overflow:hidden;white-space:nowrap}
.mq-t{display:flex;flex-wrap:wrap;justify-content:center;width:auto}
.mq-g{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;flex:0 1 auto;max-width:100%}
.mq-g>span{flex:none;display:inline-flex;align-items:center;padding-inline:1.2em}
.mq-g>span::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;margin-left:2.4em}
.mq-g>span:last-child::after{display:none}
.hero-mq{position:relative;z-index:3;border-top:1px solid rgba(230,205,154,.22);background:rgba(18,34,48,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:600 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);padding-block:19px}
.hero-mq>.mq-t{white-space:normal}
.band{background:linear-gradient(100deg,#A68548,#C9A25E 45%,#A68548)}
.band-mq{position:relative;padding-block:22px;font:600 clamp(18px,2.2vw,28px)/1.1 var(--display);letter-spacing:-.01em;color:#16263A}
.band-mq>.mq-t{white-space:normal}
.band-mq .mq-g>span::after{margin-left:1.6em}
.logos.mq{display:block;white-space:normal}
.logos .mq-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%}
.logos .mq-g>span{padding:0}
@media (max-width:520px){.logos .mq-g{grid-template-columns:1fr}}

/* ---------- hero ---------- */
.hero{overflow:clip;background:none}
.hero-pin{position:relative;overflow:clip;display:flex;flex-direction:column;
  background:radial-gradient(1000px 700px at 55% 60%,#33506B 0%,rgba(26,46,64,0) 68%),linear-gradient(180deg,#1A2E40,#142636)}
.hero-in{flex:1;padding-top:clamp(36px,4vw,60px);padding-bottom:clamp(24px,3vw,40px);width:100%}
.hero-text{min-height:0}
.hero h1{margin-top:20px}
.counters{margin-top:28px}
@media (max-width:1060px){
  .hero-pin{display:flex;flex-direction:column}
  .hero-in{display:contents}
  .hero-mq{order:3}
}

/* ---------- servicios (en pila sin JS) ---------- */
.hs-bar{display:none}
.svc .viz{height:132px}
.svc article{padding:20px 20px 22px}

/* ---------- panel ---------- */
.pg-head{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:none;align-items:end}
.pg-head .sub{margin-top:0}
.pg{margin-top:26px}
.pg-live{margin-top:14px}
.pg-live .inbox{margin:0;max-width:none;width:100%;order:0;align-self:auto}
.pg-live .inbox>.holo-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:1060px){.pg-head{grid-template-columns:1fr;gap:6px}.pg-live .inbox>.holo-in{grid-template-columns:1fr}}

/* ---------- por qué elegirnos ---------- */
.why{align-items:center}
.clients{margin-top:clamp(36px,5vw,56px)}

/* ---------- auditoría ---------- */
.audit .acc summary{grid-template-columns:minmax(0,1fr) auto}
.audit .acc .ans{padding:0 20px 18px}
.cotice{margin-top:26px;padding:22px 24px 24px}
.cotice .c1{font-size:16px;color:var(--fg);margin-top:2px}
.cotice .c2{font-size:14.5px;color:var(--mute);margin-top:10px}
.cotice .btn{margin-top:20px}
.audit .h2{font-size:clamp(30px,3.6vw,50px)}

/* ---------- método ---------- */
.steps{margin-top:6px}
#metodo .head{margin-bottom:clamp(22px,3vw,36px)}
.sc-cnt{display:none}

/* ---------- preguntas / contacto ---------- */
.final h2{font-size:clamp(38px,4.6vw,66px)}
.final-grid{align-items:center}
#contacto footer{margin-top:clamp(40px,5vw,64px)}

/* ---------- riel y cursor (solo con JS) ---------- */
.rail,.cur{display:none}

/* ======================================================================
   MODO CINEMATOGRÁFICO
   ====================================================================== */
html.mod{scroll-behavior:auto}
html.mod .rv,html.mod .js .rv:not(.in){transition:none}

/* marquesinas en movimiento */
html.mod .mq-t{flex-wrap:nowrap;justify-content:flex-start;width:max-content;will-change:transform}
html.mod .mq-g{flex-wrap:nowrap;justify-content:flex-start;flex:none;max-width:none}
html.mod .logos .mq-g{display:flex;width:auto;gap:0}
html.mod .logos .logo-t{width:clamp(210px,19vw,270px);margin-right:16px;flex:none}
html.mod .hero-mq>.mq-t,html.mod .band-mq>.mq-t{white-space:nowrap}

/* palabra por palabra */
html.mod .kin .kw{transition:opacity .12s linear}

/* revelado inclinado al entrar */
html.mod [data-rise]{opacity:calc(.2 + .8 * var(--rp,1));transform:perspective(1200px) translate3d(0,calc((1 - var(--rp,1)) * 56px),0) rotateX(calc((1 - var(--rp,1)) * 9deg));transform-origin:50% 100%}
html.mod [data-cl]{clip-path:inset(calc((1 - var(--cp,1)) * 20%) calc((1 - var(--cp,1)) * 14%) calc((1 - var(--cp,1)) * 20%) calc((1 - var(--cp,1)) * 14%) round 18px)}

/* riel de capítulos */
html.mod .rail{display:flex;position:fixed;right:16px;top:50%;z-index:55;flex-direction:column;gap:4px;transform:translateY(-50%);
  opacity:0;pointer-events:none;transition:opacity .4s}
html.mod .rail.show{opacity:1;pointer-events:auto}
html.mod .rail button{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;padding:0 4px;border:0;background:none;cursor:pointer;color:#E6CD9A}
html.mod .rail.light button{color:#1A2E40}
html.mod .rail button i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;transition:transform .3s,opacity .3s,height .3s,border-radius .3s}
html.mod .rail button.on i{opacity:1;height:20px;border-radius:4px;background:#C9A25E}
html.mod .rail button span{position:absolute;right:22px;white-space:nowrap;font:600 10px var(--display);letter-spacing:.18em;text-transform:uppercase;padding:5px 9px;border-radius:6px;
  background:#1A2E40;color:#E6CD9A;border:1px solid rgba(230,205,154,.35);opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;pointer-events:none}
html.mod .rail button:hover span,html.mod .rail button:focus-visible span{opacity:1;transform:none}
@media (max-width:1100px){html.mod .rail{display:none}}

/* cursor */
html.mod .cur{display:block;position:fixed;left:0;top:0;z-index:200;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .3s}
html.mod .cur.on{opacity:1}
html.mod .cur::after{content:"";position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(230,205,154,.85);
  transition:transform .3s,background .3s;mix-blend-mode:difference}
html.mod .cur.big::after{transform:scale(1.7);background:rgba(230,205,154,.22)}
@media (hover:none){html.mod .cur{display:none}}

/* ---------- ESCRITORIO: escenas fijadas ---------- */
@media (min-width:1061px){
  /* hero: se queda fijo y "se zambulle" */
  html.mod .hero[data-dive]{height:calc(100svh - var(--navh,64px) + 24svh)}
  html.mod .hero-pin{position:sticky;top:var(--navh,64px);height:calc(100svh - var(--navh,64px));display:block}
  html.mod .hero-in{position:relative;height:calc(100% - 54px);padding-block:0;display:grid;align-items:center;z-index:2}
  html.mod .hero-mq{position:absolute;left:0;right:0;bottom:0;padding-block:20px;opacity:calc(1 - var(--dp,0) * 2)}
  html.mod .hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  html.mod .hero h1{font-size:clamp(36px,4vw,60px);margin-top:14px}
  html.mod .hero .cta-row{gap:12px}
  html.mod .hero .cta-row .btn-lg{padding:15px 22px 14px;font-size:15px;white-space:nowrap}
  html.mod .hero .lead{margin-top:14px}
  html.mod .hero .cta-row{margin-top:22px}
  html.mod .counters{margin-top:22px}
  html.mod .counter{padding:12px 14px 11px}
  html.mod .counter strong{font-size:clamp(24px,2.2vw,32px)}
  html.mod .counter>span{margin-top:6px;font-size:12.5px}
  html.mod .hero .stage3d{transform:scale(calc(1 + var(--dp,0) * .6));transform-origin:68% 52%;will-change:transform}
  html.mod .hero-text{opacity:calc(1 - var(--dp,0) * 1.7);transform:translate3d(0,calc(var(--dp,0) * -80px),0) scale(calc(1 - var(--dp,0) * .08));transform-origin:0 50%}
  html.mod .hero-pin::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:#1A2E40;opacity:calc(var(--dp,0) * var(--dp,0) * .95)}

  /* servicios: carrusel horizontal gobernado por el scroll */
  html.mod #servicios .hs-pin{position:sticky;top:var(--navh,64px);height:calc(100svh - var(--navh,64px));display:flex;flex-direction:column;justify-content:center;overflow:clip}
  html.mod #servicios .head{margin-bottom:clamp(20px,3vh,34px)}
  html.mod .hs-track{display:flex;gap:16px;width:max-content;padding-inline:max(var(--gut),calc((100vw - var(--maxw)) / 2 + var(--gut)));will-change:transform}
  html.mod .hs-track article{flex:0 0 clamp(236px,17.5vw,262px);transition:transform .4s,border-color .4s}
  html.mod .hs-bar{display:block;position:absolute;left:var(--gut);right:var(--gut);bottom:20px;height:2px;background:rgba(244,240,230,.14);border-radius:2px;overflow:hidden}
  html.mod .hs-bar i{display:block;height:100%;background:linear-gradient(90deg,#C9A25E,#E6CD9A);transform-origin:0 50%;transform:scaleX(var(--p,0))}

  /* método: línea de tiempo fijada */
  html.mod #metodo{height:calc(100svh - var(--navh,64px) + 36svh)}
  html.mod #metodo .sc-pin{position:sticky;top:var(--navh,64px);height:calc(100svh - var(--navh,64px));display:flex;align-items:center}
  html.mod #metodo .sc-pin>.wrap{width:100%}
  html.mod #metodo .sc-cnt{display:inline;margin-left:auto;color:var(--gold-2);font-variant-numeric:tabular-nums}
  html.mod #metodo .eyebrow{width:100%}
  html.mod #metodo .step{opacity:calc(.22 + .78 * var(--sp,0));transform:translate3d(0,calc((1 - var(--sp,0)) * 46px),0);transition:border-color .4s,box-shadow .4s}
  html.mod #metodo .step.on{border-color:rgba(201,162,94,.9);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px rgba(201,162,94,.45),0 34px 56px -30px rgba(166,133,72,.7)}
  html.mod #metodo .route i{animation:none;left:calc(var(--p,0) * (100% - 12px));opacity:1}
  html.mod #metodo .route::before{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--p,0) * 100%);background:#C9A25E;box-shadow:0 0 12px rgba(201,162,94,.8)}
}

/* ---------- MÓVIL / TABLET ---------- */
@media (max-width:1060px){
  html.mod .hero-text{padding-top:10px}
  /* en pantallas táctiles el carrusel de servicios se desliza con el dedo */
  html.mod #servicios .head{margin-bottom:18px}
  html.mod .hs-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 14px;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html.mod .hs-track::-webkit-scrollbar{display:none}
  html.mod .hs-track article{flex:0 0 min(76vw,320px);scroll-snap-align:start}
  html.mod .hs-bar{display:none}
  html.mod .hero-mq{font-size:11px;padding-block:15px}
  html.mod .pg-live .inbox{max-width:620px;margin-inline:auto}
}
@media (max-width:900px){
  .steps{gap:14px}
  .step{padding:20px 18px 22px}
  .step .n{width:62px;height:62px;font-size:25px;border-radius:18px}
  .step h3{margin-top:16px}
}
@media (max-width:560px){
  .pad{padding-block:52px}
  .final h2{font-size:clamp(36px,11vw,48px)}
}

/* móvil: el panel desliza sus gráficos de lado; nada se quita, solo se acorta la página */
@media (max-width:760px){
  .pg-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * clamp(14px,2vw,22px));padding:2px clamp(14px,2vw,22px) 12px;scrollbar-width:none}
  .pg-grid::-webkit-scrollbar{display:none}
  .pg-grid>.pg-card{flex:0 0 88%;scroll-snap-align:center;grid-column:auto}
  .pg-grid::after{content:"";flex:0 0 1px}
  .about-pics{max-width:290px}
  .final-vis{max-width:290px}
  .exp-stage{max-width:340px}
  #expertos,#nosotros{overflow-x:clip}
}
@media (max-width:1060px){#servicios .hs-pin{display:block}}

@media (min-width:1061px){
  .audit .acc summary{padding-block:11px}
  .cotice{padding:18px 22px 20px;margin-top:20px}
  .cotice .btn{margin-top:14px;padding:16px 26px 15px}
  .why .gauges{gap:12px}
  .final-grid .sub{margin-top:12px}
  .exp li{padding:10px 14px}
}

html{overflow-x:clip}

.adm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.adm-grid .tile{padding:22px}
.adm-grid h3{margin:10px 0 8px;font-size:1.08rem}
.adm-grid p{font-size:.92rem;line-height:1.5;opacity:.85}
#administradores .cta-row{margin-top:28px}
@media (max-width:980px){.adm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.adm-grid{grid-template-columns:1fr}}