/* ============================================================================
   paginas.css — compartido por las seis páginas interiores (metodo, soluciones,
   demos, areas, sectores, nosotros). NO se usa en index.html. No toca styles.css:
   reutiliza sus tokens (--bg,--ink,--mid,--dim,--line,--acento…) y sus componentes
   ya construidos (.cta-cierre/.cc-t, .con-video/.media-video, .fundido, .pie,
   .barra .btn.ambar.dos). Aquí solo lo que falta: el giro (hero) de cada página,
   el fondo con movimiento cuando no hay vídeo, y unos pocos remiendos anti-IA.
   ========================================================================== */

/* ---- giro (hero) de cada página interior: título + apoyo + CTA sobre un fondo
   con movimiento sutil (el propio .media-video, con una deriva lenta tipo
   "Ken Burns" cuando no hay <source> de vídeo). Sin caja: el texto flota sobre
   el degradado de legibilidad que ya trae .media-video::after. ---- */
.giro{position:relative}
.giro .wrap{position:relative;z-index:1;padding-block:clamp(88px,13vw,168px) clamp(64px,9vw,116px);max-width:1280px}
.giro h1{font-size:clamp(2.15rem,4.3vw,3.85rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:15em;text-wrap:balance;color:#f5f3ee}
.giro .lead{font-size:var(--t-lead);color:#dad6cb;max-width:34em;margin-top:20px;line-height:1.4}
.giro .cta-diag{margin-top:clamp(26px,3.4vw,36px)}
.giro .media-video{min-height:100%}
/* deriva lenta del fondo: solo mientras el giro está a la vista (paginas.js añade/quita .mov) */
@keyframes orbDeriva{0%{transform:scale(1.035) translate3d(0,0,0)}50%{transform:scale(1.09) translate3d(-1.4%,-1%,0)}100%{transform:scale(1.035) translate3d(0,0,0)}}
.giro .media-video video{animation:orbDeriva 28s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.giro .media-video.mov video{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.giro .media-video video{animation:none}}
@media (max-width:760px){.giro .wrap{padding-block:clamp(64px,17vw,110px) 56px}}

/* ---- kicker de sección: sustituye al rótulo en mayúsculas sobre el título (patrón IA).
   Texto normal, sin versalitas ni mono, pegado al H2 como una línea de contexto. ---- */
.sec-kicker{display:block;font-family:var(--sans);font-weight:600;font-size:clamp(15px,1.1vw,17px);
  color:var(--dim);letter-spacing:0;text-transform:none;margin-bottom:10px}

/* ---- flecha de "explore": ya no va pegada al texto como carácter suelto; es una pieza
   aparte que se separa al pasar el ratón. ---- */
.explore .fl{display:inline-block;margin-left:2px;transition:transform .2s ease}
.explore:hover .fl{transform:translateX(5px)}

/* ---- CTA de cierre, variante grande para el final de las preguntas frecuentes:
   mismo componente que .cta-cierre pero centrado y con más aire, para que quede
   claro que es la última palabra de la página. ---- */
.cta-cierre.grande{grid-template-columns:1fr;justify-items:start;text-align:left;margin-top:clamp(64px,8vw,104px)}
.cta-cierre.grande .cc-t{font-size:clamp(1.9rem,3.4vw,3rem);max-width:20em}
.cta-cierre.grande .cc-acc{justify-items:start}
@media (min-width:761px){.cta-cierre.grande .cc-acc .btn{width:auto}}

/* ---- preguntas frecuentes: mismas reglas visuales que el resto de <details> del sitio
   (0 caja, 0 hairline: los separa el espacio). El acordeón en sí ya lo anima site.js. ---- */
.faq{margin-top:clamp(28px,3.6vw,44px)}
.faq details{border:0}

/* ---- 29-sep · giro animado (giro.js): titular palabra a palabra, lienzo de flujo sobre el vídeo, paralaje ---- */
.giro{overflow:clip}
.giro-flujo{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;will-change:transform}
.giro .wrap{will-change:transform}
.giro h1 .gw{display:inline-block;opacity:0;transform:translateY(.45em);animation:giroW .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(120ms + var(--i,0)*75ms)}
@keyframes giroW{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.giro h1 .gw{animation:none;opacity:1;transform:none}}

/* ---- 30-sep · giro en 3D (misma escena que la portada): lienzo WebGL sobre el fondo, velo para leer ---- */
.giro3d-cv{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .45s ease;will-change:transform}
.giro.g3d .giro3d-cv{opacity:1}
.giro.g3d .giro-flujo{display:none}
.giro-velo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,5,.84) 0,rgba(6,6,5,.56) 38%,rgba(6,6,5,.12) 66%,rgba(6,6,5,0) 100%),
             linear-gradient(180deg,rgba(6,6,5,.5) 0,rgba(6,6,5,0) 28%,rgba(6,6,5,0) 76%,rgba(6,6,5,.3) 100%)}
@media (max-width:760px){.giro-velo{background:linear-gradient(180deg,rgba(6,6,5,.9) 0,rgba(6,6,5,.6) 46%,rgba(6,6,5,.18) 78%,rgba(6,6,5,.3) 100%)}}
@media (max-width:760px){.giro.g3d .giro3d-cv{opacity:.6}}
/* 5-oct · mientras carga el 3D no se pinta ni la portada del vídeo ni el lienzo 2D: el hero entra limpio (giro.js quita la clase si no hay 3D) */
html.g3d-pre .giro .media-video video,html.g3d-pre .giro .giro-flujo{visibility:hidden}