/* ==========================================================================
   Izan's Portfolio — main.css
   Solo las reglas que index y yeison usan

   ORDEN DEL FICHERO: sigue el orden real en que aparecen los elementos
   en la página (barra superior → portada/carrusel → galería)
   y, al final, los bloques "transversales" que no pertenecen a una sola
   sección (lightbox propio, librería Alertify, utilidades de vídeo).

   RESPONSIVE: cada sección lleva su propio @media (max-width: 736px)
   justo debajo de sus reglas de escritorio, en vez de un único bloque
   móvil al final. Así, al tocar una sección, tienes delante tanto la
   versión de escritorio como su variante móvil.
   ========================================================================== */

/* Fuentes: icono de Font Awesome (autoalojado) y tipografía Google Fonts */
@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");

/* --------------------------------------------------------------------------
   1. RESET BÁSICO
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, p, ul { 
	margin: 0; 
	padding: 0; 
}

ul { list-style: none; }

a { 
	color: inherit; 
	text-decoration: none; 
}


/* 
	Por defecto img y video son elementos de tipo in-line esto significa
	que el navegador los trata visualmente como si fueran letras de un texto
*/
img, video { 
   /* 
		Esto le dice al navegador: "Esta imagen/vídeo puede medir lo que quiera, 
		pero nunca podrá ser más ancho que la caja contenedora en la que está metido". 
   */
	max-width: 100%;
/*
	Al cambiar display de inline (por defecto) a block se obtienen 3 cosas:
		1.- Elimina un espacio en blanco fantasma inferior (usado para escribir la letras p, j o g)
		2.- Fuerza el salto de línea, asegura que el elemento ocupe todo el ancho disponible por sí mismo.
		3.- Permite aplicar márgenes perfectos
*/
	display: block; 
}

/* Tipografía de todos los títulos: fina, espaciada, en mayúsculas */
h1, h2, h3 {
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA Y BASE DEL BODY
   -------------------------------------------------------------------------- */
body {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 15pt;
    font-weight: 300;
    letter-spacing: 0.025em;
    line-height: 1.65;
    color: #a0a0a1;
    background: #242629;
    padding-top: 4.5em;      /* hueco para la barra fija; yeison.js lo recalcula si hace falta */
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;       /* nunca menos que la pantalla completa... */
    /* 
		en navegadores modernos, usa la altura visible real (sin barra de direcciones) 
		para centra verticalmente su contenido dentro de toda la pantalla
	*/
	min-height: 100dvh;      
    justify-content: center; /* hace el hueco de arriba y abajo repartiendolo arriba y abajo por igual */
}

/* EN MÓVILES: Quita el centrado vertical para que el padding no deje tanto aire */
@media screen and (max-width: 736px) {
    /* 
		Decirle al body que ignore en móviles el justify-content: center declarado arriba del css y lo
		ponga como justify-content: flex-start; 
		Esto deja que el propio padding del bloque no deje tanto aire
	*/
    body { justify-content: flex-start !important; }
}

/* --------------------------------------------------------------------------
   3. BARRA SUPERIOR FIJA (nombre + botón "PROYECTOS")
   -------------------------------------------------------------------------- */
.barra-fija-superior {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 4.5em;
    background: #1f2224;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em;
    z-index: 98;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.barra-superior-escritorio {
    position: relative;              /* referencia para centrar el título de categoría */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.barra-superior-escritorio h1 {
    color: #a0a0a1;
    display: inline-block;
    font-size: 1em;
    line-height: 1;
}
.barra-superior-escritorio h1 a { 
	border: 0; 
	color: inherit; 
}
.barra-superior-escritorio h1 a:hover { color: inherit; }

.contenedor-menu { position: relative; }

.btn-menu-minimal {
    background: transparent;
    border: 1px solid #36383c;
    color: #ffffff;
    padding: 0.5em 1.5em;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.btn-menu-minimal:hover { 
	border-color: #34a58e; 
	color: #34a58e; 
}
.btn-menu-minimal i { 
	margin-left: 0.6em; 
	font-size: 0.85em; 
	line-height: 1; 
}

/* EN MÓVILES: La barra puede pasar a ocupar 2 líneas (nombre(izda) + botón(dcha) y debajo la categoría) */
@media screen and (max-width: 736px) {
    .barra-fija-superior {
        padding: 0 1em;
        height: auto;
        min-height: 4em;
        padding-top: 0.6em;
        padding-bottom: 0.6em;
    }

    /* 
		Nombre(izda) y botón(dcha) deben caber siempre juntos en la primera línea;
		solo la categoría (que se muestra debajo) tiene permiso para bajar de línea. 
	*/
    .barra-superior-escritorio h1 { font-size: 0.85em; }
	
    .btn-menu-minimal { 
		font-size: 0.75em; 
		padding: 0.4em 1em; 
	}

    /* 
		La barra puede pasar a ocupar 2 líneas (nombre(izda) + botón(dcha) y debajo la
		categoría. El padding-top del body ya no es un valor fijo, aquí lo calcula yeison.js 
		según la altura real de la barra en cada momento (ver ajustarEspacioBarra()). 
	*/
    .barra-superior-escritorio { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   4. MENÚ DESPLEGABLE
   -------------------------------------------------------------------------- */
ul.menu-lista-oculta {
    position: absolute;
    top: 3em; right: 0;
    background: #1f2224;
    border: 1px solid #36383c;
    border-radius: 4px;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 97;
}
ul.menu-lista-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
ul.menu-lista-oculta li { width: 100%; }

ul.menu-lista-oculta li .btn-filtro,
ul.menu-lista-oculta li a {
    display: block;
    width: 100%;
    padding: 1.2em 1.5em;
    color: #a0a0a1;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
ul.menu-lista-oculta li .btn-filtro:hover,
ul.menu-lista-oculta li .btn-filtro.active,
ul.menu-lista-oculta li a:hover {
    background: #2a2d32;
    color: #34a58e;
}
ul.menu-lista-oculta li a.opcion-contacto { border-top: 1px solid #36383c; }

/* 	
	EN MÓVILES: Esta sección 4 (MENÚ DESPLEGABLE) No tiene variante móvil propia.
	El menú desplegable se comporta igual en todos los tamaños de pantalla. 
*/

/* --------------------------------------------------------------------------
   5. TÍTULO DE LA CATEGORÍA ACTUAL (dentro de la barra superior)
   -------------------------------------------------------------------------- */
/* 
	Escritorio: queda centrado, entre Izan d[...] y PROYECTOS, sin importar sus anchos.
	@media screen: Significa la regla se aplica solo a pantallas (monitores, tablets y móviles) 
		nunca a impresoras u otros formatos.
	min-width: 737px: Significa "ancho mínimo". Los estilos dentro de esta regla funcionan desde 
		los 737 píxeles en adelante.
	El rango de 737 píxeles en adelante abarca desde móviles grandes en horizontal, tablets, laptops, hasta pantallas de PC. 
	  de gran tamaño.
	Esto le dice al navegador: Aplica estos estilos solo cuando el usuario no esté en un móvil vertical, 
		es decir, cuando se use una tablet, un PC o un móvil de en formato apaisado.
*/
@media screen and (min-width: 737px) {
    .titulo-categoria-nav {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        font-weight: 300;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #a0a0a1;
        font-size: 0.95em;
        pointer-events: none;
    }
}

/* 
	La zona de categoría:XXXX en PC o Móvil está vacía al inicio, en realidad esta oculta, no se muestra, 
	no muestra nada y no ocupa sitio en cualquier tamaño de pantalla 
*/
.titulo-categoria-nav:empty { display: none; }

/* EN MÓVILES: La categoría no cabe entre el nombre(izda) y "PROYECTOS"(dcha), así que pasa a a tener su propia línea */
@media screen and (max-width: 736px) {
    /* 
		La línea de categoría:XXXXX su propia línea a todo el ancho del DOM. 
		flex-basis:100% (no solo width) es lo que obliga de verdad a saltar de línea en un flex container. 
	*/
    .titulo-categoria-nav {
        position: static;
        transform: none;
        flex-basis: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        text-align: center;
        order: 3;
        margin-top: 0.4em;
        font-size: 0.75em;
    }
}

/* --------------------------------------------------------------------------
   6. PORTADA (bienvenida + fondo)
	  PANTALLA DE BIENVENIDA CON EL CARRUSEL
   -------------------------------------------------------------------------- */

/* 
	Bloquea el scroll vertical y horizontal SOLO mientras se ve la pantalla de
	bienvenida. yeison.js añade/quita esta clase en el mismo punto donde ya
	muestra/oculta #portada-presentacion (sección "Home" del menú), así que
	el resto de pantallas (de las galerías) nunca se ven afectadas por esta regla.
*/
body.sin-scroll-portada { overflow: hidden !important; }

/*
	Esta regla de CSS se aplica exclusivamente a un elemento HTML que tenga el 
	identificador id="portada-presentacion". Su objetivo principal es estructurar 
	un contenedor flexible (Flexbox) que ocupa casi todo el ancho y alto de la pantalla, 
	centrándolo en la página y asegurando que nada se desborde, además de prepararlo 
	para una animación suave de opacidad.
*/

#portada-presentacion {
	/* 
		Hace que el contenedor ocupe el 95% del ancho disponible de su elemento padre. 
	*/
    width: 95%;
	/* 
		Define una altura fija equivalente al 89% del alto de la pantalla 
		(la unidad vh significa viewport height). 
		El comentario indica que antes medía el 82% de la pantalla.
	*/
    height: 89vh;      			/* cambiado era 82  */
	/*
		Centra el elemento horizontalmente. Añade un espacio arriba y abajo (de 1.5em) y calcula automáticamente 
		los márgenes izquierdo y derecho (auto) para centrarlo en la página.
	*/
    margin: 1.5em auto;
	/*
		Activa el modelo de caja fuerte de Flexbox. Esto te permite alinear y distribuir fácilmente los elementos 
		que estén dentro de este contenedor.
	*/
    display: flex;
	/*
		Ordena los elementos hijos de forma vertical (uno debajo del otro), en lugar de la fila horizontal que 
		viene por defecto en Flexbox.
	*/
    flex-direction: column;
	/*
		Recorta cualquier contenido que se salga de los límites físicos de este contenedor, ocultando las barras 
		de desplazamiento (scrollbars).
	*/
    overflow: hidden;
	/*
		Prepara el contenedor para que, si cambia su opacidad este cambio no sea brusco, sino una animación suave 
		que dura 0.4 segundos con un inicio y final relajados. 
		Esto se hacepor ejemplo al aparecer, desaparecer o pasar el cursor por encima el famoso :hover.
	*/
    transition: opacity 0.4s ease-in-out;
	/* 
		ESTA LÍNEA ajusta los 25px a tu gusto para dar más o menos espacio 
	*/
	padding-bottom: 25px;
}

#portada-presentacion.oculto-forzado { display: none; }

.imagen-fondo {
    width: 100%;
    flex-grow: 1;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 4px;
}
.imagen-fondo::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 17, 19, 0.55);
    border-radius: 4px;
}
.contenido-portada {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
}
.contenido-portada h2 {
    font-size: 2.2em;
    margin-bottom: 0.4em;
}

/* EN MÓVILES: Altura de contenido, no un % de pantalla (los vh/dvh son poco fiables entre navegadores móviles) */
@media screen and (max-width: 736px) {
	/* ----------------------------------------------------- */
	/* Tamaño en altura del contenedor de BIENVENIDO A [...] */
	/* ----------------------------------------------------- */
    #portada-presentacion {
		/* 
			Como es para pantallas pequeñas (móviles) se usa el 100% de la pantalla no el 95% como
			está definido anteriormente (más arriba) para pantallas de tablets, PCs y móviles con pantallón.
		*/
        width: 100%;
		/*
			En pantallas "normales" está definido en 89vh (ver más arriba).
			Para pantallas "pequeñas" se reduce el valor a 76vh. Esto reduce la altura al 76% del alto de la pantalla. 
			El !important fuerza al navegador a usar esta altura obligatoriamente, ignorando cualquier otra regla 
			que intente cambiarla.
		*/
        height: 76vh !important;
		/* GAP entre la barra superior Izan[...] - PROYECTOS y el marco superior de la zona de Bienvenida */
		/* 
			En pantallas "normales" está definido en 1.5em (ver más arriba).  
			Para pantallas "pequeñas" se reduce el valor a 0.7em. Esto reduce el espacio libre arriba y abajo 
			a casi la mitad (0.7em), manteniendo el contenedor centrado horizontalmente (auto). 
			También incluye !important para asegurar que se aplique este nuevo margen.
		*/
		margin: 0.7em auto!important;
		/*
			Activa el modelo de caja fuerte de Flexbox. 
			Esto te permite alinear y distribuir fácilmente los elementos que estén dentro de este contenedor.
		*/
		display: flex;
		/*
			Ordena los elementos hijos de forma vertical (uno debajo del otro), en lugar de la fila horizontal que 
			viene por defecto en Flexbox.
			Queda igual que para pantallas grandes.
		*/
		flex-direction: column;
		/*
			Recorta cualquier contenido que se salga de los límites físicos de este contenedor, ocultando las barras 
			de desplazamiento (scrollbars).
			Queda igual que para pantallas grandes.
		*/		
		overflow: hidden;
		/*
			Prepara el contenedor para que, si cambia su opacidad este cambio no sea brusco, sino una animación suave 
			que dura 0.4 segundos con un inicio y final relajados. 
			Esto se hacepor ejemplo al aparecer, desaparecer o pasar el cursor por encima el famoso :hover.
			Queda igual que para pantallas grandes.
		*/		
		transition: opacity 0.4s ease-in-out;
		/* 
			ESTA LÍNEA ajusta los 25px a tu gusto para dar más o menos espacio 
		*/
		padding-bottom: 25px;
		/* CONTROL: border-bottom: 1px solid yellow !important; */
    }

    .imagen-fondo {
        border-radius: 0 !important;
        flex-grow: 1 !important;        /* rellenará el recuadro */
        width: 100%;
        height: 100%;                   /* Ocupa todo el alto disponible del contenedor */
        display: flex;                  /* Activa el contenedor Flex */
        align-items: center;            /* Centra verticalmente lo que haya dentro */
        justify-content: center;        /* Centra horizontalmente lo que haya dentro */
        /* CONTROL:
		border-top: 1px solid cyan !important;
        border-left: 1px solid red !important;
        border-right: 1px solid red !important;
        border-bottom: 1px solid red !important;
		*/
        padding: 1.5em !important;      /* Padding limpio y simétrico en todos los lados */
    }

    /* Convierte el contenedor del texto en un bloque centrado */
    .contenido-portada {
        display: flex;
        flex-direction: column;         /* Alinea el h2 arriba y el p abajo */
        justify-content: center;        /* Centra verticalmente el bloque de texto */
        align-items: center;            /* Centra horizontalmente el bloque de texto */
        text-align: center;             /* Asegura el centrado de las letras */
        width: 100%;
    }

    .contenido-portada h2 { 
        font-size: 1.5em;
        margin-bottom: 0.5em;           /* Separa un poco el título del párrafo */
    }
	
    .contenido-portada p { 
        font-size: 1.0em;
        margin: 0;
    }
}

/* --------------------------------------------------------------------------
   7. CARRUSEL INFINITO
   -------------------------------------------------------------------------- */
.carrusel-contenedor {
	/* El contenedor se estira para ocupar todo el ancho disponible de su elemento padre. */
    width: 100%;
	/* 
		Define una altura fija y delgada de 110 píxeles, ideal para una fila de logotipos o tarjetas pequeñas. 
		Tamaño de la zona del carrusel de imagenes en pantallas grandes.
	*/
    height: 110px; 
	/*
		Añade un espacio de separación de 15 píxeles arriba, despegándolo del elemento que tenga justo encima.
	*/
    margin-top: 15px;
	/*
		Pinta el fondo con un tono gris muy oscuro, casi negro (un color típico en temas oscuros o dark modes).
	*/
    background: #1c1e21;
	/*
		Oculta cualquier elemento o parte de las imágenes que intente salirse de los 110px de alto o del ancho 
		del contenedor. 
		Esto es vital en los carruseles para que las imágenes que vienen "en fila" por los lados NO se vean hasta 
		que entren en la caja.
	*/
    overflow: hidden;
	/* Activa Flexbox para controlar de forma masiva los elementos que ponen dentro. */
    display: flex;
	/*
		Al usar Flexbox, esto centra verticalmente todos los elementos internos. 
		Así, sin importar la altura de las imágenes del carrusel, quedarán perfectamente 
		alineadas en el medio de los 110px definidos en el height.
	*/
    align-items: center;
	/*
		Añade un borde muy sutil de 1 píxel. El color es blanco (255, 255, 255) pero con una 
		opacidad del 3% (0.03), lo que genera un destello o relieve casi imperceptible que queda 
		muy elegante sobre fondos oscuros.
	*/
    border: 1px solid rgba(255, 255, 255, 0.03);
	/* Redondea las cuatro esquinas de la barra con un radio suave de 4 píxeles. */
    border-radius: 4px;
	
	/* ESTO ajusta los píxeles al aire que quieras dejar abajo 
    margin-bottom: 70px; */
}

.carrusel-cinta {
    display: flex;
    width: max-content;
    animation: deDerechaAIzquierda 60s linear infinite;
}
@keyframes deDerechaAIzquierda {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 
	Ancho y Alto de las miniaturas del carrusel. 
	Esta regla define el diseño de las tarjetas individuales (los ítems) que van colocados dentro 
	del carrusel que vimos justo antes (.carrusel-contenedor). 
	Se aplica a cualquier elemento, que en el index, tenga la clase class="mini-proyecto" .
*/
.mini-proyecto {
    height: 85px;
    width: 130px;
    margin: 0 12px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    opacity: 0.75;
    filter: grayscale(10%);
}

/* EN MÓVILES: Tamaño de la zona del carrusel y de sus miniaturas en pantallas pequeñas */
@media screen and (max-width: 736px) {
	/* Tamaño de la zona del carrusel de imagenes en pantallas pequeñas */
    .carrusel-contenedor { 
		height: 110px;
		margin-top: 12px; /* MODIFICADO: antes era "margin-top: 25px;" */
	}
	
	/* Ancho y Alto de las miniaturas del carrusel */
    .mini-proyecto { 
		/* 
			Con el valor de height: 75px y aspect-ratio: 16 / 9; hará que el width se 
		    calcule solo en una relación de 16:9. 
			El width quedaría como si pusiera se pusiera un width: 116px; 
			Si cambia ese valor del height: 75px y se mantiene aspect-ratio: 16 / 9 
			el tamaño del width también cambiará.
		*/
		height: 75px;
		aspect-ratio: 16 / 9;
		margin: 0 6px; 
	}
}

/* --------------------------------------------------------------------------
   8. GALERÍA (#wrapper / #main)
   -------------------------------------------------------------------------- */
#wrapper, #main {
    width: 95%;
    margin: 0 auto;
}

#main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

/* Establece que cada thumb del proyecto medirá 260px de ancho (width: 260px;). */
#main .thumb {
    position: relative;
    width: 260px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

/* 
	El contenedor del enlace #main .thumb > .image hereda el ancho del #main .thumb (width: 100% = 260px) 
	y fija su altura en 220px. Esto crea una "caja contenedora" rígida de 260x220px con background-color: #1f2224; 
*/
#main .thumb > .image {
    display: block;
    width: 100%;
    height: 220px;
    background-color: #1f2224; /* pinta el color de fondo de las franjas vacías que deja "contain" */
}

#main .thumb > .image img {
	/*
		La etiqueta #main .thumb > .image img se estira al máximo de esa caja (width: 100%; height: 100%;). 
		Pero gracias a object-fit: contain la imagen original se encoge de forma proporcional hasta encajar. 
		perfectamente dentro de ese límite de 260x220px, sin llegar a deformarse nunca.
		El espacio vacío que sobre a los lados o arriba se rellenará con el "background-color: #1f2224"  
		que definí para la caja #main .thumb > .image justo arriba width: 100% height:220x.
	*/
    width: 100%;
    height: 100%;
	/* 
		Esta propiedad le dice al navegador: "Escala la imagen para que quepa entera dentro del contenedor de 260x220px 
		pero mantén siempre su proporción original. Si la ilustración es muy alargada o vertical, no se va a aplastar 
		ni a estirar, se encogerá de manera uniforme hasta que quepa completamente en 260x220. El espacio vacío que 
		sobre a los lados o arriba se rellenará con el "background-color: #1f2224" que definí para la caja.
	*/
    object-fit: contain;
    display: block;
}

#main .thumb > h2 {
    margin: 0.5em 0 0.2em 0;
    font-size: 0.85em;
	display: flex;
    justify-content: center;  /* Centrado horizontal del texto */
    align-items: center;      /* Centrado vertical del texto */
    text-align: center;       /* Fuerza el centrado si el texto ocupa más de una línea */
}

#main .thumb > p {
    margin: 0 0 0.5em 0;
    font-size: 0.75em;
	display: flex;
    justify-content: center;  /* Centrado horizontal */
    align-items: center;      /* Centrado vertical */
    text-align: center;       /* Fuerza el centrado si el texto ocupa más de una línea */
    white-space: pre-line;    /* Permite los saltos de línea del JSON */
}

/* EN MÓVILES: Los títulos/descripciones de cada thumb necesitan una altura mínima fija para centrarse bien en 2 líneas */
@media screen and (max-width: 736px) {
	#main .thumb > h2 {
		margin: 0.5em 0 0.2em 0;
		font-size: 0.85em;
		min-height: 2.2em;        /* Altura mínima fija para que actúe el centrado vertical */
		display: flex;
		justify-content: center;  /* Centrado horizontal */
		align-items: center;      /* Centrado vertical real */
		text-align: center;       /* Asegura el centrado si el título ocupa 2 líneas */
	}
	
	#main .thumb > p {
		margin: 0 0 0.5em 0;
		font-size: 0.75em;
		min-height: 2.2em;        /* Altura mínima fija para que actúe el centrado vertical */
		display: flex;
		justify-content: center;  /* Centrado horizontal */
		align-items: center;      /* Centrado vertical real */
		text-align: center;       /* Asegura el centrado si el título ocupa 2 líneas */
		white-space: pre-line; 	  /* Esto hace que el \n del JSON funcione como salto de línea en pantalla */
	}
}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
/* 
	footer sin definir
   .contenido-footer { }
*/

/* --------------------------------------------------------------------------
   10. LIGHTBOX PERSONALIZADO (overlay generado por yeison.js al hacer
       clic en una miniatura de la galería)
   -------------------------------------------------------------------------- */

/* 
	Botón "volver a la galería: <-", "volver al home: X"siguiente elemento de la galería: ->"  en el lightbox.
	El lightbox es la imagen/video seleccionado, el elemento seleccionado que se quiere ver.
*/
.btn-lightbox-volver {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	width: 2.75em;
	height: 2.75em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	cursor: pointer;
	padding: 0; /* ESTA LÍNEA evita desvíos fantasmas de los iconos */
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.btn-lightbox-volver:hover {
	border-color: #34a58e;
	color: #34a58e;
	transform: translateY(-2px);
}
.btn-lightbox-volver:active {
	transform: translateY(0);
}

/* 
	Bloquea por completo el scroll de fondo de la página mientras el lightbox está abierto. 
	El lightbox es la imagen/video seleccionado, el elemento seleccionado que se quiere ver.
*/
.bloquear-scroll {overflow: hidden !important;}

/* 
	Envoltorio de un vídeo LOCAL (.mp4): sin esto, la barra de progreso discreta que se ve debajo 
	de cada video no tendría un elemento "position:relative" del tamaño exacto del vídeo, que se muestra, 
	al que que pegarse (esta barra sale en el borde inferior de cada video). 
	NOTA: Los vídeos de YouTube ya usan su propia máscara para esto. 
*/
.contenedor-media-video {
	position: relative;
	display: block;
}

/* 
	MÁSCARA/CONTENEDOR del vídeo de YouTube.
	El ancho es el MENOR de estos tres valores:
		- 90vw  (para que en móvil nunca toque los bordes de la pantalla)
		- 860px (tamaño máximo ya afinado a ojo para que se vea bien en PC)
		- calc(60vh * 16 / 9) → el ancho que le correspondería a una altura
		  de 60vh manteniendo la proporción real 16:9.
	Al fijar el ancho así y la proporción con aspect-ratio, el alto se
		calcula solo y SIEMPRE mantiene la misma forma, entre por donde entre
		(90vw, 860px o 60vh). 
		Antes, el alto se calculaba con "vw" pero el ancho se topaba con un 
		límite en "px" (max-width), así que en pantallas grandes ambos dejaban 
		de ir a la par y la caja se descuadraba, por eso el vídeo de YouTube 
		no llegaba a rellenar su propio contenedor y la	barra de progreso, 
		pegada al borde real de la caja que contenía al video y no al borde 
		inferior del video, por eso se veía "flotando" por debajo de la imagen 
		del vídeo. En pantallas grandes era más evidente que en pantallas pequeñas.
	IMPORTANTE: la proporción tiene que ser 16:9 EXACTA (la real de un vídeo de 
		YouTube), no una aproximación como 16:9.4. Porque si no, el iframe de
		dentro se "sobredimensiona" al 140% de alto y se sube un 20% (ver
		yeison.js) para recortar los controles/título de YouTube — pero como
		YouTube respeta la proporción real del vídeo (16:9) y añade barras
		negras si el iframe tiene otra proporción, cualquier valor distinto
		de 16:9 deja un resto de esa barra negra sin recortar del todo, justo 
		el "gap" que se veía entre el vídeo y la barra de progreso. 
 */
.mascara-video-youtube {
	width: min(90vw, 860px, calc(60vh * 16 / 9));
	aspect-ratio: 16 / 9;
	display: block;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
	background: #000;
	overflow: hidden;
	position: relative;
	border-radius: 4px;
}

/* 
	Capa transparente que se pone ENCIMA del iframe de YouTube para que ni el
	ratón ni el dedo lleguen a tocarlo, así YouTube nunca saca sus propios
	controles (título, canal, "Ver en YouTube", en pantallas grandes) ni se 
	puede abrir su menú de clic derecho, cosa que el bloqueo global de la web 
	no puede hacer porque el iframe es de otro dominio (youtube.com) , así que con esto ponemos 
	una "capa" transparente encima del video y este no se puede tocar.
*/
.capa-bloqueo-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: transparent;
	cursor: default;
}

/* Barra de progreso muy fina pegada al borde inferior de cada vídeo (sea local o YouTube) */
.barra-progreso-video {
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 3px;
	z-index: 3; 			/* por encima de la capa de bloqueo del vídeo de YouTube */
	background: rgba(255, 255, 255, 0.15);
	overflow: hidden;
	pointer-events: none; 	/* es solo informativa, no se puede arrastrar para buscar */
}
.barra-progreso-video-relleno {
	height: 100%;
	width: 0%;
	background: #34a58e; 	/* color de la barra de progreso, con el mismo verde de acento que el resto del sitio */
	transition: width 0.2s linear;
}

/* --------------------------------------------------------------------------
   11. ALERTIFY (avisos de error al cargar los JSON)
   -------------------------------------------------------------------------- */
/* Centrar las notificaciones de Alertify (alertify-notifier) */
.alertify-notifier {
  top: 50% !important;  
  left: 50% !important;	/* junto con top:50% mueven el contenedor al centro exacto de la pantalla. */
  /* 
		Este transform compensa el ancho y alto del propio 
		cuadro de alerta para que el centro de la alerta 
		coincida con el centro de la pantalla. 
  */
  transform: translate(-50%, -50%) !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 99 !important;
}

/* Cambiar la dirección para que las nuevas alertas no empujen hacia arriba */
.alertify-notifier .ajs-message {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* Tipografía de las alertas */
.alertify {font-family: "Source Sans Pro", Helvetica, sans-serif;}

/* Cambiar el color del título y su fondo (en la cabecera de la alerta) */
.alertify .ajs-header {
  background-color: #1f2224 !important; /* Color del alertify */
  color: #a0a0a1 !important;            /* Color del texto del título */
  font-weight: bold;
  border-bottom: none !important;       /* añadido !important para quitar la línea divisoria */
}

/* Cambiar el fondo del cuerpo del mensaje */
.alertify .ajs-body {
  background-color: #37383b !important; /* color de fondo del mensaje */
  color: #ffffff !important;            /* color del texto del mensaje */
}

/* Cambiar el pie de página (área donde están los botones) */
.alertify .ajs-footer {
  background-color: #1f2224 !important;
  border-top: none !important;          /* quitamos la línea blanca divisoria que desentona en modo oscuro */
}

/* Cambiar el borde, marco y sombra de la ventana de de alerta */
.alertify .ajs-dialog {
  /* Le damos el mismo fondo mas claro al contenedor base para eliminar los laterales blancos */
  background-color: #37383b !important; 
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;            
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;  /* sombra oscura (más natural para modo noche) */
  overflow: hidden;                          
}

/* 
	Aplicamos el estilo a CUALQUIER botón dentro del footer de Alertify 
*/
.alertify .ajs-footer .ajs-buttons .ajs-button {
  background-color: #4e5156 !important; /* Un gris un poco más claro que el fondo para que resalten */ 
  color: #FFFFFF !important;            
  border-radius: 4px !important;                  
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease;
  cursor: pointer;
}

/* Efecto Hover para todos los botones */
.alertify .ajs-footer .ajs-buttons button.ajs-button:hover {
  background-color: #34a58e !important; /* Se vuelven verdes (tu color de acento) al pasar el cursor */
  color: #FFFFFF !important;
}

/* Fuerza bruta total para que los textos de TODOS los botones sean blancos */
.alertify .ajs-footer .ajs-buttons button.ajs-button,
.alertify .ajs-footer .ajs-buttons .ajs-button * {
  color: #FFFFFF !important; 
}

/* --------------------------------------------------------------------------
   12. VÍDEO: BLOQUEO DE DESCARGA Y SELECCIÓN EN VIDEOS LOCALES (Chrome, Safari, Edge)
   -------------------------------------------------------------------------- */
/* 
	Oculta los 3 puntos y el botón de descarga en reproductores de vídeo para videos locales. 
	Para los vídeos de Youtube ya se definió más arriba una "capa" invisuble por encima de los 
	videos para ni poder tocarlos.
*/
video::-internal-media-controls-download-button {display: none !important;}
video::-webkit-media-controls-enclosure {overflow: hidden !important;}
video::-webkit-media-controls-panel {width: calc(100% + 35px) !important;} /* desplaza el botón de descarga fuera del área visible */

/* Bloquear selección, arrastre y menús en TODOS los navegadores */
video {
	-webkit-touch-callout: none !important; /* iOS Safari */
    -webkit-user-select: none !important;   /* Safari */
    -khtml-user-select: none !important;    /* Navegadores antiguos */
    -moz-user-select: none !important;      /* Firefox */
    -ms-user-select: none !important;       /* IE / Edge antiguo */
    user-select: none !important;           /* Estándar moderno */
    
    /* Evita que el usuario pueda arrastrar el video con el ratón */
    -webkit-user-drag: none !important;
    
    /* Desactiva los toques largos que abren menús en móviles */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}