/* Variables */
:root {
    --primary-color: #00f0ff;
    --secondary-color: #c0f8ff;
    --text-color: white;
    --background-color: rgba(0, 0, 0, 0.8);
    --overlay-color: rgba(0, 0, 0, 1);
    --glass-background: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.3);
    --border-radius: 10px; /* Standard border-radius */
    /* Font Families */
    --font-family-title: 'Michroma', sans-serif;
    --font-family-text: 'Montserrat', sans-serif;
}

/* Resets y globales */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    height: 100%; 
    font-size: 15px; 
    font-family: var(--font-family-text); 
    color: var(--text-color); 
    overflow-x: hidden; }
body {
    background-image: url('_imagenes/background_image.jpg');
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a {
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Optional: Add a hover effect */
}
a:any-link {
    background-color: rgba(255, 255, 255, 0.2); /* Optional: Add a hover effect */
}

/* Tipografías */
h1 { font-size: 2.5rem; font-family: var(--font-family-title);}
h2 { font-size: 2rem; font-family: var(--font-family-title);}
h3 { font-size: 1.5rem; font-family: var(--font-family-title);}
p { font-size: 1.3rem; font-family: var(--font-family-text);}

.font_gigante { font-size: 5rem; }
.font_grande { font-size: 2.5rem; }
.font_mediana { font-size: 2rem; }
.font_normal { font-size: 1.5rem; }
.font_pequena { font-size: 1rem; }
.font_titulos { font-family: var(--font-family-title); }
.font_contenidos { font-family: var(--font-family-text); }
.font_brillante {
    color: var(--text-color);
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

.justify {
    text-align: justify;
}
.center_text {
    text-align: center;
}

/* Grid system */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

[class^="col_"] {
    padding: 15px;
}

.col_1 { width: 8.33%; }
.col_2 { width: 16.66%; }
.col_3 { width: 25%; }
.col_4 { width: 33.33%; }
.col_5 { width: 41.66%; }
.col_6 { width: 50%; }
.col_7 { width: 58.33%; }
.col_8 { width: 66.66%; }
.col_9 { width: 75%; }
.col_10 { width: 83.33%; }
.col_11 { width: 91.66%; }
.col_12 { width: 100%; }

/* Responsive */
@media screen and (max-width: 992px) {
    [class^="col_"] {
        width: 100%;
    }
}

/*  ESTILOS REUTILIZABLES  */

/* Clase para el estilo de fondo negro con borde verde */
.counter_box {
    background: var(--background-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}
.counter_box_ais a {
    border-radius: var(--border-radius);    
    width: 75%;
    padding: 10px;
}
.counter_box_ais a:hover {
    background: var(--glass-background);
}

/* Clase para el estilo "Liquid Glass" de Apple */
.glass_box {
    background: var(--glass-background);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}.black_box {
    background-color: black;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 5px 5px;
    text-align: center;
    margin: 0;
}
/* Comunes a ambos */
.counter_box, .glass_box {
    border-radius: var(--border-radius);
    padding: 5px 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
/* OBLIGATORIO por el java */
.counter_number {
    font-family: var(--font-family-title);
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
    text-shadow: 0 0 20px var(--primary-color);
}

/* OBLIGATORIO por el java */
.menu_button {
    cursor: pointer;
    text-decoration: none;
}
.menu_button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Optional: Add a hover effect */
}



.luz_pasando {
  overflow: hidden;
  color: var(--text-color);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Degradado en el background */
  background-size: 200% 100%; /* El doble del ancho para el movimiento */
  background-position: -100% 0; /* Inicialmente fuera del botón */
  transition: background-position 0.8s linear, color 0.3s ease;
}

.luz_pasando:hover {
  background-position: 100% 0; /* Mueve el background al hacer hover */
}




/* Menu Navigation */
nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
}

li {
    list-style: none;
    display: flex;
    flex-direction: column;
}

nav ul li {
    margin: 5px 0;
}

/* Content Section (Modal) Styles */
.contenido_seccion {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background-color: var(--background-color);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
    z-index: 1001;
    overflow: auto;
}

.contenido_seccion.activo {
    display: block;
}



/* una clase propia para el menu para poder centrar verticalmente y que no afecte a los otros, tambien se agrega al java */
.contenido_seccion_menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    /* height: 90%;  Remove this */
    min-height: 50vh; /* Adjust this value as needed */
    background-color: var(--background-color);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
    z-index: 1001;
    overflow: auto;
    display: none; /* Add this */
    flex-direction: column; /* Add this */
    justify-content: center; /* Add this */
    align-items: center;
}
.contenido_seccion_menu.activo {
    display: block;
}
/* Media Query para pantallas más pequeñas */
@media (max-width: 992px) { /* Ajusta el valor de max-width según tus necesidades */
    .contenido_seccion_menu {
        width: 90%; /* Ancho en pantallas pequeñas */
    }
}



.cerrar_contenido {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 5em;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1002;
}

.cerrar_contenido:hover {
    color: var(--text-color);
}

/* Overlay Styles */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    z-index: 1000;
}

.overlay.activo {
    display: block;
}

.visibility_hidden {
    visibility: hidden;
}
.display_none {
    display: none;
}

.center_content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.width_100 {
    width: 100%;
}
.width_75 {
    width: 75%;
}
.height_libros {
    height: 400px;
    max-width: 100%
}
.padding_10 {
    padding: 10px;
}
.padding_20 {
    padding: 20px;
}
.margin_top_20 {
    margin-top: 20px;
}



.responsive_video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.responsive_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* FORMS */
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
    background-color: var(--background-color); /* Fondo negro */
    border: 1px solid var(--primary-color); /* Borde azul/cian */
    border-radius: var(--border-radius); /* Bordes redondeados */
    color: var(--text-color); /* Texto blanco */
    padding: 10px; /* Espacio interno */
    margin-bottom: 10px; /* Margen inferior */
    width: 100%; /* Ancho completo */
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho */
    font-family: var(--font-family-text); /* Usa la fuente del sitio */
    font-size: 1em; /* Tamaño de fuente */
    transition: border-color 0.3s ease; /* Transición suave para el hover */
}

input[type="submit"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: var(--secondary-color); /* Borde más brillante al enfocar */
    outline: none; /* Elimina el borde predeterminado al enfocar */
}

.link_titulo {
    display: block; /* Hace que el enlace ocupe todo el espacio disponible */
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Hereda el color del texto del padre */
    height: 100%;
}

.link_titulo:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Agrega un efecto hover sutil */
}

.border {border: solid red 1px}

.letra_verde{
    color: #39FF14;
}