/* BIM Ingeza — Portada integrada (propuesta de Claude Design, oct 2026): cielo corto arriba, corredor 3D protagonista.
   Se carga después de portada-nebulosa.css y via-3d.css. Se activa con class="pn-integrada" en #portada-nebulosa.
   La marca ya no va dentro de la portada: vive en la cabecera, a la derecha (.logo-derecha, la arma js/portada-integracion.js). */
:root{--solape-3d:clamp(120px,17vh,190px);--bruma:clamp(56px,8vh,96px)}

/* Título solo para lectores de pantalla y buscadores: la portada no muestra texto */
.solo-lector{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* La portada mide el cielo + la bruma + el solape del visor (ya no ocupa toda la pantalla) */
.pn.pn-integrada{min-height:0;justify-content:flex-start}
.pn-integrada .pi-zona{position:relative;z-index:5;height:clamp(44px,6vh,76px);margin-bottom:var(--bruma)}
.pn-integrada .pn-titulo{display:none}
/* Al bajar, el cielo se apaga (--cielo lo pone js/portada-integracion.js según el scroll) */
.pn-integrada .pn-canvas{opacity:var(--cielo,1);transition:opacity .2s linear}

/* Horizonte: el cielo se funde en una bruma blanca y, ya casi blanco, empieza el terreno del visor */
.pn-integrada.con-solape::after{height:calc(var(--solape-3d) + var(--bruma));
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) calc(var(--bruma) * .3),rgba(255,255,255,.55) calc(var(--bruma) * .62),rgba(255,255,255,.9) calc(var(--bruma) * .86),#fff var(--bruma),#fff 100%)}

/* Visor a todo el ancho y sin tarjeta: el terreno sale de la bruma en vez de ser un cuadro pegado encima */
#corredor-3d .contenedor{width:100%}
#corredor-3d .v3d{border:0;border-radius:0;box-shadow:none;background:transparent}
/* El visor cabe entero en la pantalla (con el panel de sección abajo): alto de la ventana menos cabecera y cielo */
#corredor-3d .v3d-escena,#corredor-3d .v3d-panel{height:clamp(420px,calc(100svh - 215px),860px)}
#corredor-3d .v3d-escena::before{-webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 54%,#000 20%,transparent 76%);mask-image:radial-gradient(ellipse 60% 64% at 50% 54%,#000 20%,transparent 76%)}
#corredor-3d .v3d-vineta{background:linear-gradient(90deg,#fff 0,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 86%,#fff 100%)}
#corredor-3d .v3d-marco{display:none}
/* Rótulos y paneles alineados con la cabecera (.contenedor: 1200 px con 20 px de margen) */
#corredor-3d .v3d-cabecera{left:max(20px,calc((100% - 1200px) / 2))}
#corredor-3d .v3d-controles{right:max(20px,calc((100% - 1200px) / 2))}
#corredor-3d .v3d-leyenda{left:max(20px,calc((100% - 1200px) / 2));right:calc(max(20px,calc((100% - 1200px) / 2)) + 330px)}
#corredor-3d .v3d-sin-seccion .v3d-leyenda{right:max(20px,calc((100% - 1200px) / 2))}
#corredor-3d .v3d-seccion{right:max(20px,calc((100% - 1200px) / 2))}
#corredor-3d .v3d[data-vista="seccion"] .v3d-seccion{left:max(20px,calc((100% - 1200px) / 2));right:max(20px,calc((100% - 1200px) / 2))}
#corredor-3d .corredor-pie{width:min(1200px,100% - 40px)}
@container v3d (max-width:720px){#corredor-3d .v3d-escena{height:min(66vh,480px)}#corredor-3d .v3d-panel{height:auto}}
@media (prefers-reduced-motion:reduce){.pn-integrada .pn-canvas{transition:none}}

/* ---------- Logo de la cabecera a la derecha: se forma con tres rayos que caen sobre la pirámide ---------- */
.cabecera .logo.logo-derecha{order:99;flex-direction:row-reverse;gap:12px;position:relative;margin-left:8px}
.logo-derecha .logo-icono{opacity:0;transform:scale(.6);filter:blur(4px)}
.logo-derecha .logo-texto{opacity:0;transform:translateX(10px)}
.logo-derecha .lr-rayos{position:absolute;right:0;top:50%;width:38px;height:38px;transform:translateY(-50%);overflow:visible;pointer-events:none}
.logo-derecha .lr-rayos polyline{fill:none;stroke:#FFDF5C;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;opacity:0;filter:drop-shadow(0 0 3px #E9B700)}
.logo-derecha .lr-rayos circle{fill:#fff;opacity:0}
.logo-derecha.forma .lr-rayos polyline{animation:lr-rayo .75s cubic-bezier(.23,1,.32,1) forwards}
.logo-derecha.forma .lr-rayos polyline:nth-child(2){animation-delay:.12s}
.logo-derecha.forma .lr-rayos polyline:nth-child(3){animation-delay:.24s}
.logo-derecha.forma .lr-rayos circle{animation:lr-chispa .5s ease-out forwards}
.logo-derecha.forma .lr-rayos circle:nth-of-type(1){animation-delay:.45s}
.logo-derecha.forma .lr-rayos circle:nth-of-type(2){animation-delay:.57s}
.logo-derecha.forma .lr-rayos circle:nth-of-type(3){animation-delay:.69s}
.logo-derecha.forma .logo-icono{animation:lr-icono .7s cubic-bezier(.23,1,.32,1) .55s forwards}
.logo-derecha.forma .logo-texto{animation:lr-texto .6s cubic-bezier(.23,1,.32,1) .95s forwards}
@keyframes lr-rayo{0%{stroke-dashoffset:160;opacity:1}55%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lr-chispa{0%{opacity:1;r:1}100%{opacity:0;r:9}}
@keyframes lr-icono{0%{opacity:0;transform:scale(.6);filter:blur(4px)}60%{opacity:1;transform:scale(1.08);filter:blur(0) drop-shadow(0 0 10px #E9B700)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes lr-texto{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.logo-derecha .logo-icono,.logo-derecha .logo-texto{opacity:1;transform:none;filter:none;animation:none!important}.logo-derecha .lr-rayos{display:none}}

/* Logo vivo: chispa que recorre el contorno, brillo que respira, giro 3D hacia el mouse y destello lento en INGEZA */
.logo-derecha .logo-icono{transform-style:preserve-3d;will-change:transform}
@media (prefers-reduced-motion:no-preference){
.logo-derecha.vivo .logo-icono{opacity:1;filter:none;animation:none;transform:perspective(220px) rotateX(var(--lx,0deg)) rotateY(var(--ly,0deg));transition:transform .35s cubic-bezier(.23,1,.32,1)}
.logo-derecha.vivo .logo-texto{opacity:1;transform:none;animation:none}
.logo-derecha.vivo .lg-contorno{opacity:1;stroke-dasharray:.14 .86;animation:lv-orbita 3.6s linear infinite}
.logo-derecha.vivo .lg-caras{animation:lv-respira 3.6s ease-in-out infinite}
.logo-derecha.vivo .logo-marca{animation:logo-brillo 7s cubic-bezier(.23,1,.32,1) infinite}
.logo-derecha.vivo:hover .lg-contorno{animation-duration:1.1s}
.logo-derecha.vivo:hover .lg-caras{filter:brightness(1.18) drop-shadow(0 0 9px rgba(233, 183, 0,.85))}
.logo-derecha.chispazo .lr-rayos polyline:nth-child(1){animation:lr-rayo .5s cubic-bezier(.23,1,.32,1) forwards}
.logo-derecha.chispazo .lr-rayos circle:nth-of-type(1){animation:lr-chispa .45s ease-out .25s forwards}
}
@keyframes lv-orbita{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lv-respira{0%,100%{filter:drop-shadow(0 0 2px rgba(233, 183, 0,.35))}50%{filter:brightness(1.1) drop-shadow(0 0 8px rgba(233, 183, 0,.75))}}