/* Página /eclipse — fondo único de página (sin imagen aleatoria del header) */

body#eclipse {
    background-color: #0a0e1c;
    /* position: relative para anclar el pseudo-elemento ::before */
    position: relative;
}

/* Franja translúcida que cubre la zona superior del header (desde el borde de la
   página hasta donde empieza .transpagris) con la misma opacidad que ésta, para
   que todo el header se perciba como una única banda uniforme sobre la imagen. */
body#eclipse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 190px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
}

@media screen and (max-width: 980px) {
    body#eclipse::before {
        height: 82px;
    }
}

/* Anular el fondo del .menu_bar para que se vea la imagen de la página detrás
   (el script imagen_hora.js ya se salta esta página). */
body#eclipse .menu_bar {
    background-image: none;
    background-color: transparent;
}

/* Quitar solo el azul del nav principal en escritorio. Hover de items y dropdown
   de hijos se dejan con su azul original. */
@media screen and (min-width: 981px) {
    body#eclipse header nav {
        background: transparent;
    }
}

/* Devolver el footer al flujo natural para que se sitúe justo después de la imagen
   sin huecos por arrastre del cálculo. El #piepagina global es position:absolute. */
body#eclipse #piepagina {
    position: static;
}

/* Ocultar el botón de "ir arriba" — en una página de imagen única no es necesario
   y resulta visualmente molesto al flotar sobre la esquina inferior derecha. */
body#eclipse .ir-arriba {
    display: none !important;
}

/* Hero: contiene cabecera + título con la imagen del eclipse como fondo.
   - El <header> se mueve dentro del hero (vía override del bloque 'header' en
     eclipse.tpl) para que el flujo coloque el wrapper en y=0 sin huecos.
   - aspect-ratio garantiza que la altura coincida con la imagen mostrada (basado en
     el ancho real del body, no del viewport — sin desfase por la barra de scroll).
   - margin-top negativo + padding-top compensatorio extienden el wrapper hasta el
     borde superior del body, dejando el header en su posición habitual interior. */
.eclipse-hero {
    width: 100%;
    aspect-ratio: 1023 / 1104;
    background-image: url('/images/eclipse/eclipse_background.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    margin-top: -171px;
    padding-top: 171px;
}

@media screen and (max-width: 980px) {
    .eclipse-hero {
        margin-top: -120px;
        padding-top: 120px;
        background-image: url('/images/eclipse/eclipse_background_last.png');
        /* En móvil, el hero ocupa exactamente el alto de la pantalla menos el alto
           del footer. Junto con background-size: cover, la imagen llena toda la
           pantalla sin huecos. Algunos píxeles laterales se recortan (la imagen es
           más apaisada que un iPhone), pero el eclipse y la veleta están centrados
           horizontalmente, así que se conservan. */
        aspect-ratio: auto;
        height: calc(100vh + 8px);
        height: calc(100dvh + 8px);
    }
}

/* Título: blanco, 1 px más pequeño que .Estilo8 (13 px), bajado 40 px para alinear
   visualmente con el título del resto de páginas. Sombra para legibilidad. */
body#eclipse .eclipse-titulo {
    color: #fff;
    font-size: 13px;
    margin: 40px 0 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Bloque de datos del eclipse (horas de contactos y máximo).
   display:table centra el bloque como unidad y alinea las columnas
   al contenido más ancho sin necesidad de anchos fijos. */
.eclipse-datos {
    margin-top: 37px;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.eclipse-datos__fila {
    display: table-row;
}

.eclipse-datos__etiqueta,
.eclipse-datos__hora {
    display: table-cell;
    color: #ccc;
    font-weight: normal;
    font-family: Verdana, Geneva, sans-serif;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    padding-bottom: 8px;
    vertical-align: middle;
}

.eclipse-datos__etiqueta {
    text-align: left;
    font-size: 13px;
    padding-right: 32px;
}

.eclipse-datos__hora {
    text-align: right;
    font-size: 13px;
    letter-spacing: 0.03em;
}