/* ============================================================
   CTG ORIENTATION GUARD — estilos del aviso de "gira tu teléfono"
   ============================================================ */

.ctg-rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(160deg, #0a0415 0%, #07020f 50%, #130825 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}
.ctg-rotate-overlay.ctg-rotate-show { display: flex; }

.ctg-rotate-icon {
    font-size: 56px;
    margin-bottom: 22px;
    color: #c639b8;
    animation: ctgRotatePhone 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(198, 57, 184, .5));
}

@keyframes ctgRotatePhone {
    0%, 100% { transform: rotate(0deg); }
    45%      { transform: rotate(-90deg); }
    55%      { transform: rotate(-90deg); }
}

.ctg-rotate-title {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #e94560, #c639b8, #6a1fa8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctg-rotate-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    max-width: 280px;
    line-height: 1.5;
}

/* En pantallas ya horizontales (tablet/escritorio en cualquier postura)
   esto nunca debería mostrarse, pero por seguridad se oculta también si
   el ancho es claramente de escritorio, sin importar el media query de
   orientación (algunas ventanas de escritorio angostas pueden disparar
   "portrait" por error). */
@media (min-width: 900px) {
    .ctg-rotate-overlay.ctg-rotate-show { display: none; }
}