/* Overlay global para forzar orientación en móvil */
:root{
    --ori-backdrop: rgba(30, 41, 59, .55);  /* gris azul translúcido */
  }
  
  #orientationOverlay[hidden]{ display:none !important; }
  
  #orientationOverlay{
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    /* degradado gris translúcido */
    background:
      radial-gradient(800px 600px at 20% 10%, rgba(255,255,255,.25), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)),
      var(--ori-backdrop);
    backdrop-filter: blur(2px) saturate(110%);
  }
  
  /* Tarjeta centrada */
  .ori-card{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,34,50,.08);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    width: min(92vw, 520px);
    padding: 22px 20px;
    text-align: center;
  }
  
  /* Logo con animación de “balanceo” */  
  .ori-logo{
    width: 120px; height: auto; display: block; margin: 0 auto 10px auto;
    animation: ori-tilt 2.6s ease-in-out infinite;
    transform-origin: 50% 80%;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.15));
  }
  @keyframes ori-tilt{
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(7deg); }
    50%      { transform: rotate(0deg); }
    75%      { transform: rotate(-7deg); }
  }
  
  /* Texto */
  .ori-text{
    margin: 6px 0 0 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--ink, #0f2232);
    font-weight: 600;
  }
  .ori-text .hl{ color: var(--primary, #1f6aa5); }
  
  /* Solo se mostrará en pantallas pequeñas; en desktop lo ocultamos por si acaso */
  @media (min-width: 1025px){
    #orientationOverlay{ display: none !important; }
  }

  /* Bloqueo simple del scroll de fondo si el overlay está activo */
html:has(#orientationOverlay:not([hidden])) body{
    overflow: hidden;
  }