/* ============================================================
   NAMI SAKE - ESTILOS DE LA SECCIÓN DE EVENTOS
   ------------------------------------------------------------
   Archivo exclusivo para las páginas de eventos.
   Se carga DESPUÉS de base.css y solo desde las páginas de evento,
   por lo que no afecta al resto del sitio.

   IMÁGENES: deben colocarse en  es-MX/img/
   Nombres esperados (ver cada bloque). Formato recomendado: .jpg
   Mientras no existan las imágenes se verá el fondo negro por defecto.
   ============================================================ */


/* --- Contenedores de las páginas de evento --- */

section.historia.taco {
	margin: 50px 0 50px 0;
	justify-content: center;
}

section.historia-quote.evento {
	background-color: #4BD3C9;
}

.flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;
}

p.text-historia.text-historia.max-w-2xl.text-xl.md\:text-2xl {
	max-width: 50%;
	margin: 0 auto;
}


/* --- 1. La Licor Masterclass --- */

.historia .evento-la-licor {
	background: url(../img/evento-la-licor.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-la-licor-2 {
	background: url(../img/evento-la-licor-2.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-la-licor-3 {
	background: url(../img/evento-la-licor-3.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}


/* --- 2. Mariela Pairing Dinner --- */

.historia .evento-mariela {
	background: url(../img/evento-mariela.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-mariela-2 {
	background: url(../img/evento-mariela-2.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-mariela-3 {
	background: url(../img/evento-mariela-3.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}


/* --- 3. Ositos Tap Masterclass & Happy Hour --- */

.historia .evento-ositos {
	background: url(../img/evento-ositos.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-ositos-2 {
	background: url(../img/evento-ositos-2.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-ositos-3 {
	background: url(../img/evento-ositos-3.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}


/* --- Video embebido (Vimeo) ---
   Contenedor responsive 16:9. El iframe se posiciona en absoluto
   para respetar la proporción en cualquier ancho de pantalla. */

.video-evento-section {
	display: flex;
	justify-content: center;
	padding: 0 1.5rem;
	margin: 50px 0 50px 0;
}

/* Espacio inferior de la pagina del evento (solo paginas con video) */
main:has(.video-evento-section) > .contenido-evento:last-child {
	margin-bottom: 50px;
}

.video-evento {
	position: relative;
	width: 50%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	background-color: #000;
	overflow: hidden;
}

.video-evento iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Texto guía visible mientras no se coloca el iframe.
   Se puede eliminar sin problema al insertar el video. */
.video-evento .video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 1rem;
	letter-spacing: 1px;
	text-align: center;
	padding: 1rem;
}

@media (max-width: 847px) {
	.video-evento {
		width: 100%;
	}
}

/* Variante para video vertical (portrait 9:16) */
.video-evento--vertical {
	width: 100%;
	max-width: 400px;
	aspect-ratio: 9 / 16;
}

/* Portada del evento (imagen principal): ancho completo en pantallas pequenas */
@media (max-width: 53em) {
	.historia .foto-historia {
		width: 100%;
		min-height: 0;
	}
}

/* La imagen principal se muestra COMPLETA (sin recorte), respetando su proporcion. */
section.historia.taco {
	height: auto;
}
.historia .foto-historia {
	min-height: 0;
}
.historia .evento-la-licor { aspect-ratio: 729 / 467; }
.historia .evento-mariela { aspect-ratio: 726 / 801; }
.historia .evento-ositos  { aspect-ratio: 721 / 503; }