/* =========================================================================
   WIZAY - ESTADOS (Próximamente, Mantenimiento, Error 404)
   Ubicación: /css/estados.css
   ========================================================================= */

.estado-pantalla-fondo {
    background-color: var(--color-oscuro, #121212) !important;
    background-image: radial-gradient(rgba(230,213,195,0.08) 1.5px, transparent 1.5px) !important;
    background-size: 4px 4px !important;
    color: var(--color-beige, #e6d5c3) !important;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
}

.tarjeta-estado-contenedor {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    border: 2px dashed var(--color-naranja-trazo, #b84a28);
    border-radius: 8px;
    padding: clamp(35px, 6vw, 65px) clamp(20px, 4.5vw, 42px);
    background: rgba(18, 18, 18, 0.88);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.8);
}

.tarjeta-estado-contenedor .hero-nombre {
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif) !important;
    font-size: clamp(2.4rem, 8.5vw, 4.8rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    color: var(--color-burdeos, #6b0f1a) !important;
    -webkit-text-stroke: clamp(1px, 0.3vw, 2px) var(--color-burdeos, #6b0f1a) !important;
}

.tarjeta-estado-contenedor .hero-subtitulo {
    font-family: var(--fuente-textos, 'Montserrat', sans-serif) !important;
    font-size: clamp(0.9rem, 2.4vw, 1.2rem) !important;
    letter-spacing: clamp(6px, 1.8vw, 14px) !important;
    margin-left: clamp(6px, 1.8vw, 14px) !important;
    margin-bottom: clamp(20px, 4vw, 35px) !important;
    color: var(--color-beige, #e6d5c3) !important;
    font-weight: 400 !important;
}

.tarjeta-estado-contenedor .hero-frase {
    font-family: var(--fuente-textos, 'Montserrat', sans-serif) !important;
    font-size: clamp(1.02rem, 2.3vw, 1.45rem) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    margin-bottom: clamp(25px, 5vw, 42px) !important;
    color: #f0e6dc !important;
    text-wrap: balance !important;
}

.insignia-estado {
    display: inline-block;
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: 1.35rem;
    color: var(--color-naranja-trazo, #b84a28);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

/* ERROR 404 / 403 / 500 */


/* ESTRUCTURA Y CONTENEDOR DE ERROR */
.error-seccion {
    background-color: var(--color-oscuro, #121212);
    background-image: radial-gradient(rgba(230,213,195,0.08) 1.5px, transparent 1.5px);
    background-size: 4px 4px;
    color: var(--color-beige, #e6d5c3);
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.error-contenedor-tarjeta {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    border: 2px dashed var(--color-naranja-trazo, #b84a28);
    border-radius: 8px;
    padding: clamp(40px, 6vw, 65px) clamp(20px, 4.5vw, 40px);
    background: rgba(18, 18, 18, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 10;
}

.error-numero { 
    font-family: var(--fuente-titulos); 
    font-size: clamp(5.5rem, 14vw, 8.5rem); 
    font-weight: 800; 
    line-height: 0.9; 
    color: transparent; 
    -webkit-text-stroke: 2px var(--color-burdeos); 
    margin-bottom: 10px; 
    animation: pulso-burdeos 2.5s infinite alternate ease-in-out; 
}
@keyframes pulso-burdeos { 
    0% { text-shadow: 0 0 10px rgba(107, 15, 26, 0.3); } 
    100% { text-shadow: 0 0 25px rgba(107, 15, 26, 0.8), 0 0 10px rgba(184, 74, 40, 0.4); } 
}
.error-subtitulo-texto { 
    font-family: var(--fuente-titulos); 
    font-size: clamp(1.2rem, 3vw, 1.8rem); 
    letter-spacing: 5px; 
    margin-top: 15px; 
    margin-bottom: 25px; 
    color: var(--color-naranja-trazo); 
    text-transform: uppercase; 
    font-weight: 700; 
}
.error-descripcion-texto { 
    font-family: var(--fuente-textos); 
    font-size: 1.05rem; 
    font-weight: 300; 
    color: #d8c8b8; 
    margin-bottom: 40px; 
    line-height: 1.6; 
    text-wrap: balance; 
}
.btn-volver-escenario { 
    display: inline-block; 
    padding: 14px 36px; 
    font-family: var(--fuente-titulos); 
    font-size: 1.15rem; 
    font-weight: 700; 
    color: var(--color-beige); 
    background-color: transparent; 
    text-decoration: none; 
    letter-spacing: 2px; 
    border-radius: 40px; 
    border: 1px solid var(--color-naranja-trazo); 
    transition: all 0.3s ease; 
}
.btn-volver-escenario:hover { 
    background-color: var(--color-burdeos); 
    border-color: var(--color-burdeos); 
    color: #ffffff; 
    box-shadow: 0 10px 25px rgba(107, 15, 26, 0.6); 
    transform: translateY(-2px); 
}

/* =========================================================================
   PÁGINAS LEGALES (Aviso Legal, Privacidad, Cookies) - OPCIÓN A
   ========================================================================= */

.legal-pantalla-fondo {
    background-color: var(--color-oscuro, #121212);
    background-image: radial-gradient(rgba(230,213,195,0.08) 1.5px, transparent 1.5px);
    background-size: 4px 4px;
    color: var(--color-beige, #e6d5c3);
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Cabecera Editorial Limpia */
.legal-nav-cabecera {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    padding: 35px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(230,213,195,0.15);
}

.legal-logo-link {
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-burdeos, #6b0f1a);
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-text-stroke: 1px var(--color-burdeos, #6b0f1a);
    transition: all 0.3s ease;
}

.legal-logo-link:hover {
    color: var(--color-naranja-trazo, #b84a28);
    -webkit-text-stroke: 1px var(--color-naranja-trazo, #b84a28);
}

.legal-btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 40px;
    border: 1px solid var(--color-naranja-trazo, #b84a28);
    color: var(--color-beige, #e6d5c3);
    text-decoration: none;
    font-family: var(--fuente-textos, 'Montserrat', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    background: transparent;
    transition: all 0.3s ease;
}

.legal-btn-volver:hover {
    background-color: var(--color-naranja-trazo, #b84a28);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(184, 74, 40, 0.4);
}

/* Tarjeta y Textos del Documento */
.legal-cuerpo-contenedor {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 35px 20px 60px;
    width: 100%;
}

.legal-tarjeta-documento {
    width: 100%;
    max-width: 950px;
    border: 2px dashed var(--color-naranja-trazo, #b84a28);
    border-radius: 8px;
    padding: clamp(35px, 5vw, 60px) clamp(20px, 4.5vw, 45px);
    background: rgba(18, 18, 18, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
    text-align: left;
}

.legal-titulo-h1 {
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--color-burdeos, #6b0f1a);
    margin-bottom: 25px;
    border-bottom: 2px dashed var(--color-naranja-trazo, #b84a28);
    padding-bottom: 12px;
    line-height: 1.1;
}

.legal-cuerpo-texto {
    font-family: var(--fuente-textos, 'Montserrat', sans-serif);
    line-height: 1.8;
    color: #d8c8b8;
    font-size: 0.95rem;
}

.legal-cuerpo-texto p {
    margin-bottom: 22px;
}

.legal-cuerpo-texto strong {
    color: var(--color-beige, #e6d5c3);
    font-weight: 600;
}

/* Integración y Tabla de CookieYes */
.cky-audit-table-element {
    margin-top: 25px;
    overflow-x: auto;
}
.cky-audit-table-element table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #d8c8b8;
}
.cky-audit-table-element th, .cky-audit-table-element td {
    border: 1px solid rgba(230, 213, 195, 0.2);
    padding: 10px;
    text-align: left;
}
.cky-audit-table-element th {
    background: rgba(107, 15, 26, 0.3);
    color: var(--color-beige, #e6d5c3);
}

/* =========================================================================
   MÓVIL (≤ 480 px): botones «Volver», cabecera legal y pantalla de error más finos
   Solo cambian tamaños y espacios; en pantallas más anchas todo queda como estaba.
   ========================================================================= */
@media (max-width: 480px) {

    /* Botón «Volver…» (error 404 y final de las páginas legales): más ligero y, si el texto es largo, en dos líneas parejas */
    .btn-volver-escenario {
        max-width: 100%;
        padding: 9px clamp(12px, 4.5vw, 20px);
        font-size: clamp(0.66rem, 3.55vw, 0.88rem);      /* se encoge con la pantalla para seguir en UNA línea hasta 320 */
        letter-spacing: clamp(0.2px, 0.15vw, 0.6px);
        line-height: 1.35;
        border-radius: 26px;
        white-space: nowrap;
    }
    .error-contenedor-tarjeta .btn-volver-escenario {
        white-space: nowrap;
        font-size: 0.92rem;
        letter-spacing: 1px;
        padding: 10px 24px;
    }

    /* Pantalla de error */
    .error-seccion { padding: 28px 16px; }
    .error-contenedor-tarjeta { padding: 34px 20px 30px; }
    .error-numero {
        font-size: clamp(4.2rem, 21vw, 5.6rem);
        -webkit-text-stroke-width: 1.5px;
    }
    .error-subtitulo-texto {
        font-size: 1.05rem;
        letter-spacing: 3.5px;
        margin: 8px 0 16px;
    }
    .error-descripcion-texto {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 26px;
    }

    /* Páginas legales: cabecera en dos filas centradas (logotipo, botón) y el texto gana ancho */
    .legal-nav-cabecera {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
        padding: 22px 16px 16px;
    }
    .legal-logo-link {
        font-size: 1.7rem;
        letter-spacing: 1.5px;
    }
    .legal-btn-volver {
        padding: 7px clamp(11px, 4vw, 16px);
        font-size: clamp(0.62rem, 3.3vw, 0.76rem);       /* una sola línea hasta 320 (también «Ajustar preferencias de cookies») */
        letter-spacing: clamp(0.2px, 0.1vw, 0.5px);
        gap: 6px;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
        max-width: 100%;
    }
    .legal-cuerpo-contenedor { padding: 22px 14px 44px; }
    .legal-tarjeta-documento { padding: 30px 18px 34px; }
    .legal-titulo-h1 {
        font-size: 1.85rem;
        margin-bottom: 20px;
    }
    .legal-cuerpo-texto { line-height: 1.7; }
}