@font-face {
    font-family: 'Monarcha SemiBold Italic';
    src: url('../fonts/Monarcha SemiBold Italic.ttf');
}
@font-face {
    font-family: 'Celestia Antiqua MVB Adornado';
    src: url('../fonts/Celestia Antiqua MVB Adornado.ttf');
}
@font-face {
    font-family: 'Prince Valiant';
    src: url('../fonts/Roboto/Prince Valiant.ttf');
}

:root {
	/* COLORES PRINCIPALES */
	--color-amarillo-1: #FFDE00;
	--color-naranja-1: #F9B233;
	--color-naranja-2: #E77511;
	--color-rojo-1: #BF3117;
	--color-rojo-2: #A71A01;
	--color-rojo-3: #510C00;

	/* COLORES OSCUROS */
	--color-gris-1: #AAAAAA;	
	--color-gris-2: #444444;	
	--color-negro: #000000; 
  
	/* COLORES CLAROS */
	--color-blanco: #FFFFFF;
	--color-arena-1: #FFF6D8;
	--color-arena-2: #F7E2A9;
	--color-pergamino-1: #F6D676;
	--color-pergamino-2: #CBB267;
	
	/* TEXTOS */
	--font-family: 'Open Sans';
	--font-family-m: 'Monarcha SemiBold Italic';
	--font-family-h: 'Celestia Antiqua MVB Adornado';
	--font-family-s: 'Prince Valiant';

	/* ESCALA TIPOGRÁFICA (base 16px = 1rem) */
	--font-size-48: 3rem;        /* 48px */
	--font-size-42: 2.625rem;    /* 42px */
	--font-size-40: 2.5rem;      /* 40px */
	--font-size-36: 2.25rem;     /* 36px */
	--font-size-32: 2rem;        /* 32px */
	--font-size-28: 1.75rem;     /* 28px */
	--font-size-26: 1.625rem;    /* 26px */
	--font-size-24: 1.5rem;      /* 24px */
	--font-size-22: 1.375rem;    /* 22px */
	--font-size-20: 1.25rem;     /* 20px */
	--font-size-18: 1.125rem;    /* 18px */
	--font-size-16: 1rem;        /* 16px */
	--font-size-14: 0.875rem;    /* 14px */
	--font-size-12: 0.75rem;     /* 12px */
	--font-size-10: 0.625rem;    /* 10px */
	
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-regular: 400;
}
/* GENERAL */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-family-m);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
	min-width: 320px;
	margin: 0 2%;
}

/* ENCABEZADOS */
.H1, h1 {
	font-family: var(--font-family-h);
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-bold);
}

.H2, h2 {
	font-family: var(--font-family-h);
    font-size: var(--font-size-42);
    font-weight: var(--font-weight-bold);
}
.H3, h3 {
	font-family: var(--font-family-h);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-bold);
}
.H4, h4 {
	font-family: var(--font-family-h);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-bold);
}
.H5, h5 {
	font-family: var(--font-family-h);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-bold);
}
.H6, h6 {
	font-family: var(--font-family-h);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
}

/* TITULOS */
.T1 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-semibold);
}
.T2 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-semibold);
}
.T3 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-semibold);
}
.T4 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-semibold);
}
.T5 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-26);
    font-weight: var(--font-weight-semibold);
}
.T6 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-semibold);
}

/* CUERPO */
.G1 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-regular);
}
.G2 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-regular);
}
.G3 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
}

.N1 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
}
.N2 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
}
.N3 {
	font-family: var(--font-family-m);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
}

/* ESPECIALES */
.SP1 {
	font-family: var(--font-family-s);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-regular);
}
.SP2 {
	font-family: var(--font-family-s);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-regular);
}
.SP3 {
	font-family: var(--font-family-s);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
}
/*
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: underline;
    font-style: italic;
*/	


/* ---------- MOBILE FIRST ---------- */

a {
   	color: var(--color-amarillo-1);
    text-decoration: none;	
}
a:hover {
    font-weight: var(--font-weight-bold);
}
a:active {
    color: var(--color-naranja-1);
}

.oculto { 
	display:none; 
}
/* BODY */

body {
    background-color: var(--color-negro);
}

/* PARTE FIJA */
header {
    position: fixed;
	height: 60px;
    width: 94%;
    background-color: var(--color-negro);
    display: flex;
    align-items: center;
    z-index: 1000;
}

header .div-logotipo {
	height: 90%;
    display: flex;
    align-items: center;
    flex: 0 0 auto;          /* no crece */
}

.logotipo-img {
	max-height: 100%;
    width: auto;
}

/* Botón menú tipo hamburguesa*/
header .div-menu-toggle {
	height: 90%;
    display: flex;
    align-items: center;
	justify-content: center; /* centra el botón dentro */
	margin-left: auto;       /* empuja este bloque al borde derecho */
	padding-right: 2%;
}

.menu-toggle {
	display: block;
	height: 90%;
    aspect-ratio: 1 / 1;   /* ancho siempre igual a la altura */
	background-color: var(--color-amarillo-1);
	border-right: 2px solid var(--color-gris-2);
	border-bottom: 2px solid var(--color-gris-2);
	border-top: 1px solid var(--color-gris-1);
	border-left: 1px solid var(--color-gris-1);
	border-radius: 10px;
	color: var(--color-negro);
	font-size: 1.25rem;
	cursor: pointer;
	text-align: center;
	z-index: 2000;
}
.menu-toggle:hover {
	background-color: var(--color-naranja-1);
	border-right: 3px solid var(--color-negro);
	border-bottom: 3px solid var(--color-negro);
	border-top: none;
	border-left: none;
}
.menu-toggle:active {
	background-color: var(--color-gris-2);
	border-right: 1px solid var(--color-blanco);
	border-bottom: 1px solid var(--color-blanco);
	border-top: 2px solid var(--color-negro);
	border-left: 2px solid var(--color-negro);
	color: var(--color-amarillo-1);
}

.menu-toggle.active {
	background-color: var(--color-gris-2);
	border-right: 1px solid var(--color-blanco);
	border-bottom: 1px solid var(--color-blanco);
	border-top: 2px solid var(--color-negro);
	border-left: 2px solid var(--color-negro);
	color: var(--color-amarillo-1);
}

.menu-toggle.active:hover {
	background-color: var(--color-gris-1);
	border-right: none;
	border-bottom: none;
	border-top: 3px solid var(--color-negro);
	border-left: 3px solid var(--color-negro);
	color: var(--color-amarillo-1);
}

/* Menú */
nav {
	flex: 0 0 auto; 
	width: auto; 
    display: flex;
    justify-content: flex-end;
}

.menu {
	display: none;
	position: absolute;
	top: 60px;
	background: none;
	margin: 0;
	padding: 6px;
    justify-content: center;
}
.menu.active {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width:100%;
}
.menu li {
	width: 100%;
}
	
.a-boton {
	display: block;
	padding: 8px 0px;
	background-color: var(--color-amarillo-1);
	border-right: 2px solid var(--color-naranja-1);
	border-bottom: 2px solid var(--color-naranja-1);
	border-top: 2px solid var(--color-negro);
	border-left: 2px solid var(--color-negro);
    border-radius: 10px;
    text-align: center;    
    color: var(--color-negro);
	font-family: var(--font-family-h);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;	
}

.a-boton:hover {
	background-color: var(--color-naranja-1);
	border-right: 3px solid var(--color-negro);
	border-bottom: 3px solid var(--color-negro);
	border-top: 1px solid var(--color-gris-1);
	border-left: 1px solid var(--color-gris-1);	 
    color: var(--color-negro); 
}

.a-boton:active {
	background-color: var(--color-gris-2);
	border-right: 1px solid var(--color-negro);
	border-bottom: 1px solid var(--color-negro);
	border-top: 3px solid var(--color-gris-1);
	border-left: 3px solid var(--color-gris-1);	
    color: var(--color-amarillo-1);    
}

.a-boton.active {
	background-color: var(--color-gris-2);
	border-right: 2px solid var(--color-negro);
	border-bottom: 2px solid var(--color-negro);
	border-top: 2px solid var(--color-gris-1);
	border-left: 2px solid var(--color-gris-1);	
    color: var(--color-amarillo-1);    
}

.migas-pan {
    width: 100%;
    padding: 1rem;
    color: var(--color-amarillo-1);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
}


/* FIN PARTE FIJA */

/* CUERPO */
.container {
    padding-top: 60px; /* Se deja espacio para la parte fija */
    display: grid;
    grid-template-columns: 1fr; /* móvil: una columna */
    gap: 1.5rem;
}

.container > section {
  grid-row: auto; /* cada sección en su fila */
}

.migas-pan {	
  	grid-column: span 1; /* Ocupa todo el ancho */
}

section.full-width {	
	grid-column: span 1; /* Ocupa todo el ancho */
}

/* Secciones*/
section {
  	grid-column: span 1; /* por defecto ocupa una columna */
    width: 100%;
    justify-content: center;
    border-radius: 10px;
}

section.doble {	
  	grid-column: span 1; /* Ocupa dos columnas cuando hay 3 o más */
 	grid-row: auto;      /* fuerza fila propia */
}

/* Titulo sección*/
	
.titulo {
	height: 38px;
}
.div-titulo {
    justify-content: center;
    background-color: var(--color-arena-2);
    height: 2rem;
    width: 100%;    
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.seccion-titulo {
    padding: 2px;
	text-align: center;
    text-transform: uppercase;
    color: var(--color-rojo-1);
	font-size: 1.2rem;
}

/* Contenido sección*/
.div-contenido {
	display: flex;
  	flex-direction: column; /* mejor para apilar texto */
    height: auto;
    background-color: var(--color-negro);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Secciones Organizadores y Colaboradores */
.organizadores, .colaboradores {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
    background-color: var(--color-negro);
}

/* Filas internas */
.fila {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* reparte espacio entre elementos */
  align-items: center;
  gap: 0.5rem;
}

/* Logotipos */
.logoOrg {
  flex: 1;                /* cada logo ocupa el mismo espacio */
  max-height: 60px;       /* altura uniforme */
  object-fit: contain;    /* adapta ancho manteniendo proporción */
}
.logoCol {
  flex: 1;                /* cada logo ocupa el mismo espacio */
  max-height: 40px;       /* altura uniforme */
  object-fit: contain;    /* adapta ancho manteniendo proporción */
}

.fila-contacto {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}
/* Cada línea de contacto es un flex container */
.contacto-linea {
  display: flex;
  align-items: center;   /* alinea iconos con el texto */
  gap: 0.5rem;           /* espacio entre iconos y texto */
}

/* Iconos de contacto */
.icono {
  height: 1.2rem;           /* igual a la altura de una mayúscula */
  width: auto;           /* mantiene proporción */
  vertical-align: middle;
}


/* Imágenes de los contenidos*/
.contenido-imagen {
	display: flex;
    height: auto;
    width: 100%;
}
.imagen-semitransparente {
    opacity: 0.3;
}

/* Textos de los contenidos*/
.contenido-texto {
    position: static;
    overflow: hidden;
	width: 100%;
    padding: 2%;
    background-color: var(--color-negro);
}

.texto-cuerpo {
    color: var(--color-amarillo-1);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
}

/* SECCIÓN CARRUSEL */
.carrusel {
    height: 200px;
	width: 100%;
    overflow: hidden;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.carrusel-secuencia {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

.carrusel-imagen {
    flex: 0 0 100%;
    box-sizing: border-box;
}

.carrusel-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* recorta proporcionalmente sin deformar */
    display: block;
}

/* Botones del carrusel */
.carrusel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: var(--color-blanco);
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1.5rem;
  z-index: 500;
}

.carrusel-btn.prev { left: 10px; }
.carrusel-btn.next { right: 10px; }

.carrusel-btn:hover {
  background-color: var(--color-naranja-1);
}

/* SECCIÓN MAPA */

/* El contenedor y el svg escalan y mantienen proporciones */
.div-mapa {
  background-color: var(--color-negro);
  overflow: hidden;
}
.div-mapa svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Zonas interactivas: por defecto invisibles */
.div-mapa .zona {
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* al pasar por el grupo (zona o número) */
.zona-grupo:hover .zona {
  opacity: 0.4;
  fill: var(--color-naranja-1);
}

/* números también interactivos */
.div-mapa .cls-3 {
  pointer-events: auto;
  cursor: pointer;
}

/* Activa: visible y destacada */
.div-mapa .zona.zona-activa {
  opacity: 0.75; /* hay que superar la base */
  stroke: var(--color-amarillo-1);
  stroke-width: 2px; /* visible en formas con borde */
  fill: var(--color-rojo-1);
  filter: drop-shadow(0 0 2px var(--color-naranja-1));
}

/* Texto de la zona activa (número) */
.div-mapa text.zona-activa {
  fill: var(--color-rojo-1);
  font-weight: bold;
  font-size: 1.2em;
}

/* SECCIÓN PUNTOS DE INTERÉS */
.puntos-interes {
  display: flex;
  flex-wrap: wrap;          /* permite varias filas */
  gap: 1rem;                /* separación entre grupos */
  justify-content: space-evenly; /* reparte uniformemente los grupos en la fila */
  padding: 0.5rem;
}

.puntos-grupo {
  display: flex;
  flex-direction: column;   /* cada grupo en vertical */
  gap: 0.5rem;
  flex: 0 0 auto;           /* no se estiran, se colocan uno al lado del otro */
}

.punto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.punto-id {
  color: var(--color-amarillo-1);
  font-weight: bold;
}

.punto-nombre {
  color: var(--color-blanco);
}

/* Punto activo */
.punto-activo .punto-id,
.punto-activo .punto-nombre {
  color: var(--color-naranja-1);   /* texto en naranja */
  /*font-size: 1.1rem;                +0.1rem respecto a base */
  font-weight: bold;
}

/* SECCIÓN PROGRAMA */
/* Carrusel vertical de fichas*/
.carrusel-vertical {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 500px;       /* altura del carrusel */
	overflow-y: auto;        /* scroll vertical */
	scroll-snap-type: y mandatory;
  	position: relative; /* clave: ahora es el contexto */
    scroll-padding-top: 2.5rem; /* espacio reservado para sticky */
  	scrollbar-width: none;
}

.carrusel-vertical::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.dia-bloque {
	margin: 1rem 0rem;
}

.programa-dia {
	position: sticky;
	top: 0; /* se pega arriba del carrusel */
	background: var(--color-pergamino-1);
	padding: 0.5rem;
	font-size: 1.2rem;
	color: var(--color-rojo-1);
	z-index: 10;
	border-bottom: 2px solid #ccc;
	text-transform: capitalize;
}

/* Ficha normal */
.programa-ficha {
  background: var(--color-arena-1);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Hover: efecto medieval */
.programa-ficha:hover {
  background: var(--color-arena-2);
  transform: scale(1.02);
  cursor: pointer;
}

/* Ficha activa: marcada con borde rojo */
.programa-ficha.ficha-activa {
  border: 2px solid var(--color-rojo-1);
  background: var(--color-pergamino-1);
}

.programa-hora {
	font-weight: bold;
	margin-bottom: 0.5rem;
	color: var(--color-gris-2);
}

.programa-descripcion {
	font-size: 0.95rem;
}


/* FIN BODY */

/* PIE */
footer {
	width: 100%;
	background-color: var(--color-negro);
	color: var(--color-amarillo-1);
	text-align: center;
	padding: 20px 10px;
	margin-top: 2rem;
}

.footer-contenido {
	max-width: 1200px; /* opcional, para centrar */
	margin: 0 auto;
}

/* FIN PIE */


/* ---------- RESPONSIVE DESIGN ---------- */
/* ---------- LARGE MOBILE ---------- */
@media (max-width: 500px) {
  	html { 
		font-size: 17px;  /* valor de 1rem */
	} 

	/* Logotipos */
	.logoOrg {
		max-height: 60px;       /* altura uniforme */
	}
}

/* ---------- TABLET ---------- */
@media (min-width: 800px) {		
	
  	html { 
		font-size: 18px; /* valor de 1rem */
	} 

	header {
		height: 75px;
	}
	
	.a-boton {
		padding: 10px 0px;
	}

	#mapa { order: 1; } 
	#programa { order: 2; } 
	#puntos { order: 3; }

	.container {
		padding-top: 80px; /* Espacio para la parte fija */
        grid-template-columns: 1fr 1fr;
	}

	.migas-pan {	
		grid-column: span 2; /* Ocupa todo el ancho */
	}
	
	section.full-width {	
		grid-column: span 2; /* Ocupa todo el ancho */
	}
	
	.carrusel {
		height: 300px;
	}

	.logoCol {
		max-height: 45px;       /* altura uniforme */
	}
}


/* ---------- DESKTOP ---------- */


@media (min-width: 1024px) {

  	html { 
		font-size: 19px; /* valor de 1rem */
	} 

	body {
		margin: 0 2%;
	}	

	header {
		height: 85px;
	}

	/* Menú principal*/
	
	/* Menú hamburguesa oculto en versiones de escritorio

	header .div-menu-toggle {
		position: absolute;
		top: 10px;
		right: 20px;
	}
	*/
	.menu-toggle { 
		display: none;
	}

	nav {
		width: auto;
	}
		
	.menu {
		list-style: none;
		display: flex;
		justify-content: center;
		padding: 0px 20px;
        top: 5px;
	}
	
	.a-boton {
		display: flex;
		padding: 10px 15px;
		background-color: var(--color-amarillo-1);
		border-right: 3px solid var(--color-naranja-1);
		border-bottom: 3px solid var(--color-naranja-1);
		border-top: 3px solid var(--color-negro);
		border-left: 3px solid var(--color-negro);
		border-radius: 10px;
		text-align: center;    
		color: var(--color-negro);
		text-decoration: none;	
	}

	.a-boton:hover {
		background-color: var(--color-naranja-1);
		border-right: 5px solid var(--color-negro);
		border-bottom: 5px solid var(--color-negro);
		border-top: 1px solid var(--color-gris-1);
		border-left: 1px solid var(--color-gris-1);	 
		color: var(--color-negro); 
	}

	.a-boton:active {
		background-color: var(--color-gris-2);
		border-right: 2px solid var(--color-negro);
		border-bottom: 2px solid var(--color-negro);
		border-top: 4px solid var(--color-gris-1);
		border-left: 4px solid var(--color-gris-1);	
		color: var(--color-amarillo-1);    
	}

	.container {
		padding-top: 90px; /* Espacio para la parte fija */
	}
	
	.carrusel {
		height: 300px;
	}
	
	/* Logotipos */
	.logoOrg {
		max-height: 70px;       /* altura uniforme */
	}
	.logoCol {
		max-height: 60px;       /* altura uniforme */
	}
}

/* ---------- MEDIUM DESKTOP ---------- */
@media (min-width: 1280px) {	

  	html { 
		font-size: 20px; 
	} /* ahora 1rem = 24px */

	header {
		height: 100px;
	}
	
	.a-boton {
		padding: 18px;
	}

	.container {
		padding-top: 110px; /* Espacio para la parte fija */
        grid-template-columns: 1fr 1fr 1fr;
	}
	

	.migas-pan {	
		grid-column: span 3; /* Ocupa todo el ancho */
	}

	section.full-width {	
		grid-column: span 3; /* Ocupa todo el ancho */
	}

	section.doble {	
		grid-column: span 2; /* Ocupa dos columnas cuando hay 3 o más */
	}
	
	.titulo {
		height: 50px;
	}
	
	/* Logotipos */
	.logoCol {
		max-height: 65px;       /* altura uniforme */
	}
}

/* ---------- LARGE DESKTOP ---------- */
@media (min-width: 1440px) {	

  	html { 
		font-size: 22px; 
	} /* ahora 1rem = 26px */

	header {
		height: 100px;
	}
	
	.a-boton {
		padding: 20px;
	}

	.container {
		padding-top: 120px; /* Espacio para la parte fija */
	}
	
	.titulo {
		height: 50px;
	}
	
	/* Logotipos */
	.logoOrg {
		max-height: 80px;       /* altura uniforme */
	}
	.logoCol {
		max-height: 70px;       /* altura uniforme */
	}
}