/* Astillas del Vacío · orientación y portadas táctiles.
   El arte de escritorio, la imagen de la ciudad, los SVG y el audio no se modifican. */
.portrait-rotation-screen{display:none}

/* Móvil o tablet física en vertical: una sola imagen original completa, sin rótulos duplicados. */
@media (orientation: portrait) and (max-width:1200px) and (pointer:coarse){
  html,body{width:100%;height:100%;margin:0;overflow:hidden!important;overscroll-behavior:none}
  .portrait-rotation-screen{
    display:block;position:fixed;inset:0;z-index:9999;background:#090719;
    width:100vw;height:100vh;height:100dvh;overflow:hidden;
    pointer-events:auto;
  }
  .portrait-rotation-screen img{
    display:block;width:100%;height:100%;object-fit:cover;
    object-position:50% 50%;filter:none;transform:none;
    image-rendering:auto;user-select:none;-webkit-user-drag:none;
  }
  /* No gastar recursos animando el escenario mientras la pantalla vertical lo tapa. */
  .portal-body .portal-scene,.portal-body .portal-shell,.portal-body .intro-gate{
    visibility:hidden!important;
  }
}

/* Tablet y móvil en HORIZONTAL: usar el alto REAL disponible, no la
   altura mínima de escritorio (que escondía el título y desplazaba la página). */
@media (orientation: landscape) and (pointer:coarse) and (max-width:1200px){
  html,body.portal-body{width:100%;height:100%;max-width:100vw;margin:0;overflow:hidden!important;overscroll-behavior:none}
  .portal-body .portal-shell{width:100%;height:100vh;height:100dvh;min-height:0!important;max-height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  .portal-body .portal-scene{position:fixed;inset:0;overflow:hidden;transform:none!important}
  .portal-body .portal-artwork{transition:none!important}
  .portal-header{flex:0 0 auto;min-height:42px;padding:7px clamp(14px,3vw,38px)!important;gap:10px}
  .portal-brand{font-size:clamp(10px,1.4vw,14px);letter-spacing:.09em;gap:7px}
  .portal-brand-symbol{font-size:20px}
  .portal-header-side{gap:16px}
  .portal-author{font-size:9px;letter-spacing:.11em}
  .portal-sound-toggle{min-height:32px;padding:4px 0;white-space:nowrap}
  .portal-content{
    position:relative!important;flex:1 1 auto;min-height:0!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
    padding:5px clamp(16px,3.5vw,44px)!important;gap:0!important;
  }
  .portal-copy{
    display:block!important;width:min(54%,560px)!important;max-width:56%!important;
    flex:none!important;align-self:center!important;margin:0!important;min-width:0;
  }
  .portal-kicker{margin:0 0 clamp(7px,1.4vh,16px);font-size:clamp(8px,1vw,11px);letter-spacing:.12em}
  .portal-title{font-size:clamp(43px,7.4vw,100px);line-height:.83;max-width:100%;letter-spacing:-.045em}
  .portal-title-second{font-size:.78em;margin-top:.14em}
  .portal-title-rule{margin:clamp(8px,1.8vh,18px) 0 clamp(5px,1.4vh,13px);width:min(340px,88%)}
  .portal-quote{font-size:clamp(19px,2.9vw,34px);line-height:1.08;margin:0 0 clamp(6px,1.3vh,12px)}
  .portal-description{font-size:clamp(11px,1.5vw,14px);line-height:1.45;max-width:100%}
  .portal-description br{display:block}
  .portal-chronometer{display:none!important}
  .portal-mobile-chrono{display:flex!important;align-items:center;gap:9px;flex-wrap:wrap;margin:clamp(7px,1.4vh,14px) 0 0;font-size:9px;letter-spacing:.11em}
  .portal-mobile-chrono strong{font:400 22px/1 Georgia,serif}
  .portal-mobile-chrono small{font:700 9px/1 Arial,sans-serif}
  .portal-navigation{
    position:absolute!important;left:auto!important;top:auto!important;
    right:clamp(14px,2.9vw,38px)!important;bottom:clamp(4px,1vh,12px)!important;
    width:min(38vw,400px)!important;max-width:none!important;
    transform:none!important;inset-block-start:auto!important;
    align-self:auto!important;margin:0!important;padding:0!important;overflow:visible!important;
    filter:none;
  }
  .astillas-orbit{--near:clamp(74px,10vw,114px);--far:200px;width:100%;height:150px!important;overflow:visible!important;touch-action:none!important}
  .orbit-item{top:1px!important;width:124px;height:148px}
  .orbit-image{width:111px;height:111px}
  .orbit-item.is-center{--scale:1}
  .orbit-item.is-left,.orbit-item.is-right{--scale:.70;--opacity:.90}
  .orbit-label{margin-top:7px;min-width:170px}
  .orbit-label strong{font-size:11px;letter-spacing:.11em}
  .orbit-mobile-pips{display:none}
  .portal-footer{flex:0 0 auto;min-height:27px;padding:6px 22px!important;line-height:1.2}
  .portal-footer-left{font-size:8px;letter-spacing:.08em}
  .portal-footer-middle{display:none}
  /* La puerta de entrada también cabe en horizontal, sin scroll oculto de contenido. */
  .intro-gate .intro-content{width:min(92vw,760px);max-height:calc(100dvh - 12px);padding:5px 12px}
  .intro-gate .intro-sigil{width:min(14vh,88px);height:min(14vh,88px);margin-bottom:3px}
  .intro-gate .intro-heading{font-size:clamp(31px,min(7vw,11vh),75px)}
  .intro-gate .intro-eyebrow{font-size:8px;margin-bottom:5px}
  .intro-gate .intro-divider{margin:5px auto}
  .intro-gate .intro-lead{font-size:clamp(13px,2.1vh,18px);margin-bottom:7px}
  .intro-gate .intro-enter{min-height:38px;width:min(480px,86vw);padding:8px 14px;font-size:10px}
  .intro-gate .intro-footnote{margin-top:7px}
}

/* Teléfonos horizontales: la altura útil puede ser de 300–450 px. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:540px) and (max-width:1200px){
  .portal-header{min-height:33px;padding:3px clamp(12px,2vw,20px)!important}
  .portal-brand{font-size:clamp(9px,1.4vw,12px);gap:5px}
  .portal-brand-symbol{font-size:17px}
  .portal-author{display:none!important}
  .portal-sound-toggle{min-height:29px;padding:2px 0}
  .portal-content{padding:1px clamp(13px,2.2vw,25px) 4px!important}
  .portal-copy{width:54%!important;max-width:54%!important}
  .portal-kicker{margin-bottom:5px;font-size:8px;letter-spacing:.08em}
  .portal-title{font-size:clamp(33px,6.4vw,60px);line-height:.83}
  .portal-title-second{font-size:.79em;margin-top:.12em}
  .portal-title-rule{width:min(250px,90%);margin:6px 0 5px}
  .portal-quote{font-size:clamp(14px,2.25vw,22px);line-height:1.05;margin-bottom:5px}
  .portal-description{font-size:clamp(9px,1.34vw,12px);line-height:1.26}
  .portal-mobile-chrono{margin-top:6px;font-size:8px;gap:7px}
  .portal-mobile-chrono strong{font-size:18px}
  .portal-mobile-chrono small{font-size:8px}
  .portal-navigation{right:clamp(10px,2vw,22px)!important;bottom:2px!important;width:40vw!important}
  .astillas-orbit{--near:clamp(55px,9.3vw,90px);height:116px!important}
  .orbit-item{top:0!important;width:95px;height:115px}
  .orbit-image{width:84px;height:84px}
  .orbit-item.is-center{--scale:1}
  .orbit-item.is-left,.orbit-item.is-right{--scale:.70}
  .orbit-label{margin-top:4px;min-width:120px}
  .orbit-label strong{font-size:9px;letter-spacing:.09em}
  .astillas-orbit::before,.astillas-orbit::after{display:none}
  .portal-footer{display:none!important}
  .intro-gate .intro-sigil{display:none}
  .intro-gate .intro-eyebrow{margin-bottom:3px}
  .intro-gate .intro-heading{font-size:clamp(30px,min(8.5vh,7vw),53px)}
  .intro-gate .intro-heading small{margin:2px auto;font-size:11px}
  .intro-gate .intro-divider{margin:4px auto}
  .intro-gate .intro-lead{margin-bottom:5px}
  .intro-gate .intro-footnote{display:none}
}

/* Alturas especialmente cortas (p. ej. 667 × 320 con la barra del navegador). */
@media (orientation:landscape) and (pointer:coarse) and (max-height:360px) and (max-width:1200px){
  .portal-kicker{margin-bottom:3px}
  .portal-title{font-size:clamp(31px,5.7vw,45px)}
  .portal-title-rule{margin:4px 0}
  .portal-quote{font-size:clamp(13px,2vw,17px)}
  .portal-description{font-size:9px}
  .portal-mobile-chrono{margin-top:3px}
  .astillas-orbit{height:105px!important}
  .orbit-image{width:74px;height:74px}
  .orbit-item{width:86px;height:106px}
}

/* El carrusel es un control gestual, no una zona para mover o ampliar el documento.
   Únicamente afecta a equipos táctiles: escritorio conserva la rueda con cursor. */
@media (pointer:coarse){
  .portal-body .astillas-orbit,
  .portal-body .astillas-orbit .orbit-item,
  .portal-body .astillas-orbit .orbit-image{
    touch-action:none!important;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    overscroll-behavior:contain;
  }
}
/* Mantener estable la ilustración mientras se desliza el carrusel de la tablet.
   svh no cambia al aparecer/desaparecer la barra del navegador móvil. */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1200px){
  .portal-body .portal-scene{height:100svh!important;bottom:auto!important;max-height:100svh;}
  .portal-body .portal-artwork{animation:none!important;transition:none!important;}
}

/* CORRECCIÓN TABLET: bloquear pan/zoom del lienzo completo SOLO en portada
   horizontal táctil. El área gestual del carrusel sigue capturando el dedo.
   No afecta ni al contenido de las páginas interiores ni al escritorio. */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1200px){
  html:has(body.portal-body),
  body.portal-body,
  body.portal-body .portal-shell,
  body.portal-body .portal-content{
    touch-action:none!important;
    overscroll-behavior:none!important;
  }
  html:has(body.portal-body),body.portal-body{
    position:relative;
    width:100%;height:100%;
    overflow:hidden!important;
  }
  body.portal-body .portal-shell{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    overflow:hidden!important;
  }
  body.portal-body .portal-scene{
    position:fixed!important;
    inset:0!important;
    height:100svh!important;
    max-height:100svh!important;
    overflow:hidden!important;
  }
}


/* ESTABILIDAD DE CARGA: tablet/móvil horizontal.
   No repetir entradas escalonadas con blur ni levantar el carrusel a destiempo.
   Mantener las animaciones ambientales del SVG, que son parte de la escena. */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1200px){
  .portal-body .entrance,
  .portal-body .orbit-enter{
    animation:none!important;
    opacity:1!important;
    transform:none;
    filter:none;
  }
  /* La bienvenida se muestra estable, sin seis apariciones independientes. */
  .portal-body:not(.intro-opening) .intro-eyebrow,
  .portal-body:not(.intro-opening) .intro-heading,
  .portal-body:not(.intro-opening) .intro-divider,
  .portal-body:not(.intro-opening) .intro-lead,
  .portal-body:not(.intro-opening) .intro-enter,
  .portal-body:not(.intro-opening) .intro-footnote{
    animation:none!important;
    opacity:1;
    translate:none;
    filter:none;
  }
  /* Un único fundido al pulsar ENTRAR. Sin zoom ni desenfoque del escenario. */
  .portal-body.intro-opening .intro-opening-light,
  .portal-body.intro-opening .intro-content,
  .portal-body.intro-opening .intro-sky{
    animation:none!important;
  }
  .portal-body.intro-opening .intro-gate{
    animation:astillasStableReveal .85s ease-out both!important;
  }
  .portal-body.intro-opening .portal-shell{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}
/* Al regresar por el enlace VOLVER, la portada ya está revelada: nada debe
   entrar por segunda vez, ni siquiera en escritorio. */
html.return-to-portada .portal-body .entrance,
html.return-to-portada .portal-body .orbit-enter{
  animation:none!important;
  opacity:1!important;
  filter:none!important;
}
@keyframes astillasStableReveal{
  from{opacity:1;visibility:visible}
  to{opacity:0;visibility:hidden}
}