/* --- Global Styles --- */

/* Font Import (OCRAStd) */
@font-face {
  font-family: 'OCRAStd';
  src: url('assets/fonts/OCRAStd.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Base Body & HTML Styles (Defaults for all pages, overwritten by specific classes) */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scroll on full-screen pages */
    font-family: 'OCRAStd', monospace; /* Apply global font */
    color: white; /* Default text color */
    background-color: #0c0b0b; /* Default background: absolute black */
}

/* Flexbox centering for main content (used by index.html by default) */
body {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;   /* Centrado vertical */
}

/* --- Index.html specific styles --- */
/* Aseguramos que el body de index.html ocupe toda la altura para que el centrado funcione */
body.index-body { /* Aplicamos esto solo a la página index.html */
    height: 100vh; /* Asegura que el body ocupe el 100% de la altura del viewport */
    /* Las propiedades de display: flex, justify-content, align-items ya están en el body global */
}

.container {
  display: flex;
  flex-direction: row; /* Números en horizontal */
  gap: 4vw; /* Espacio entre los números por defecto (desktop) */
  flex-wrap: wrap; /* Permite que los elementos salten de línea en pantallas pequeñas */
}

/* Styles for the number links on index.html */
a.sacred-number {
  text-decoration: none;
  font-size: 1.5vw; /* Ajuste para que sea PEQUEÑO en DESKTOP, similar a 7.3 */
  color: #da0008; /* Cult Order Red */
  transition: 0.3s ease;
}

a.sacred-number:hover {
  opacity: 0.5;
  cursor: crosshair;
}

/* Media query for mobile (index.html) - Ajusta el gap para separar los números */
@media (max-width: 768px) {
  a.sacred-number {
    font-size: 5vw; /* Mantiene el tamaño grande para MÓVIL en index.html, que ya funciona */
  }
  .container {
    gap: 8vw; /* <-- AJUSTADO AQUÍ: Mayor espacio entre los números en móvil. Prueba con 8vw, 10vw, etc. */
  }
}

/* --- Sacred Pages Specific Styles --- */

/* sacred001.html (Redirection page - text hidden/minimal) */
body.sacred001-body {
    background-color: #0c0b0b; /* Ensure black background */
    color: transparent; /* Makes text invisible, but still present for screen readers */
}

/* sacred30.html (Red background, logo/isotipo interaction) */
body.sacred30-body {
    background-color: #da0008; /* Full screen Cult Order Red */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide scrollbars */
}

/* SVG image sizing for sacred30.html - Ajustado para ser más pequeño */
#logo-svg, #isotipo-svg {
    cursor: pointer;
    max-width: 50vw; /* Máximo 50% del ancho del viewport en desktop */
    max-height: 50vh; /* Máximo 50% de la altura del viewport en desktop */
    width: auto; /* Mantener relación de aspecto */
    height: auto; /* Mantener relación de aspecto */
    display: block;
    margin: auto;
}

/* Media query for smaller screens (e.g., mobile) for logo/isotipo */
@media (max-width: 768px) {
    #logo-svg, #isotipo-svg {
        max-width: 80vw; /* Un poco más grande en móvil, pero aún controlado */
        max-height: 80vh;
    }
}


/* sacred77-7.html (Video embed page) */
body.sacred77-7-body {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100vw; /* Ocupar todo el ancho de la ventana */
    height: 100vh; /* Ocupar toda la altura de la ventana */
    overflow: hidden;
    display: flex; /* Para centrar el video dentro del contenedor */
    justify-content: center;
    align-items: center;
}

.video-container video { /* Cambiado de iframe a video */
    min-width: 100%; /* Asegura que cubra el ancho mínimo */
    min-height: 100%; /* Asegura que cubra el alto mínimo */
    width: auto;
    height: auto;
    position: absolute; /* Para que se posicione y cubra */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrar el video */
    object-fit: cover; /* Recortar el video para que cubra todo el espacio sin distorsión */
    border: 0;
}


/* sacred7-3.html (Hidden message page) */
body.sacred7-3-body {
    background-color: #0c0b0b; /* Absolute black as requested */
    display: flex; /* For centering the text */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hidden-message {
    cursor: pointer;
    font-size: clamp(0.7em, 1.5vw, 1.2em); /* ESTE SE MANTIENE PEQUEÑO para sacred7-3.html */
    color: #da0008; /* Texto en rojo Cult Order */
    text-align: center;
    padding: 20px;
    user-select: none;
}
/* Media query for smaller screens (e.g., mobile) for hidden-message */
@media (max-width: 768px) {
    .hidden-message {
        font-size: clamp(0.8em, 4vw, 2em); /* ESTE SE MANTIENE PEQUEÑO para móvil en sacred7-3.html */
    }
}