/*
AVATAR
Sandra Moya del Amo
*/

/* -----------------------------
	 FUENTE  PERSONALIZADA
	 ----------------------------- */
@font-face {
	font-family: 'TorukscRegular-z8MA1';
	src: url('torukscregular-z8ma1.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* -----------------------------
	 VARIABLES GLOBALES
	 ----------------------------- */
:root {
	--primary: #0a6ebd;
	--secondary: #003049;
	--accent: #00bcd4;
	--bg-main: #0f2027;
	--bg-soft: #f4f6f8;
	--white: #ffffff;
	--text-main: #22223b;
	--text-muted: #6c757d;
	--radius-lg: 24px;
	--radius-md: 16px;
	--radius-sm: 8px;
	--shadow-soft: 0 6px 20px rgba(0,0,0,0.08);
	--shadow-strong: 0 10px 30px rgba(0,0,0,0.15);
	--font-main: 'DM Sans', Arial, sans-serif;
}

/* -----------------------------
	 RESET BÁSICO
	 ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
	margin: 0;
	font-family: var(--font-main);
	background: url('pandora-montanas-flotantes.jpg') center center / cover no-repeat fixed;
	color: var(--text-main);
	min-height: 100vh;
	overflow-x: hidden;
}

/* -----------------------------
	 UTILIDADES GENERALES
	 ----------------------------- */
.shadow-soft { box-shadow: var(--shadow-soft); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.bg-primary { background: var(--primary); color: var(--white); }
.bg-accent { background: var(--accent); color: var(--white); }
.text-muted { color: var(--text-muted); }
.font-toruk { font-family: 'TorukscRegular-z8MA1', var(--font-main) !important; }

/* -----------------------------
	 TÍTULOS Y SECCIONES
	 ----------------------------- */
#titulo h1 {
	font-size: 3rem;
	text-align: center;
	margin: 2rem 0 0 0;
	letter-spacing: -1px;
	font-family: 'TorukscRegular-z8MA1', var(--font-main);
	color: #00bfff;
	text-shadow: 0 0 12px #0074cc, 0 2px 12px #222, 0 0 32px #0074cc;
}
#titulo h2 {
	font-size: 1.4rem;
	text-align: center;
	color: #00bfff;
	text-shadow: 0 0 12px #00bfff, 0 2px 12px #222, 0 0 32px #00bfff;
	margin-top: 0.5rem;
	background: rgba(10,16,40,0.55);
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: 0.4rem 1.2rem;
	border-radius: 12px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	font-style: italic;
	font-family: 'TorukscRegular-z8MA1', var(--font-main) !important;
}

/* Títulos de sección y enlaces */
.section-title, 
#apartados h3, 
#enlacesintra h3, 
#enlaces h3, 
#enlacesversiones h3, 
#objetivos > h3, 
#profesores > h3, 
#bibliografia > h3, 
#contenidos > h3 {
	color: var(--primary);
	margin-bottom: 1rem;
	font-size: 1.5rem;
	background: rgba(0,188,212,0.12);
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	letter-spacing: 1px;
	font-weight: 700;
	font-family: 'TorukscRegular-z8MA1', var(--font-main) !important;
}

/* -----------------------------
	 CONTENEDORES Y CAJAS
	 ----------------------------- */

.box-section {
	background: #e3f0fa;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	padding: 1.5rem;
	margin: 2.5rem 0;
}

/* -----------------------------
	 APARTADOS
	 ----------------------------- */
#apartados > div {
	margin: 2.5rem auto;
	padding: 2rem;
	background: #e3f0fa;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	position: relative;
	max-width: 1000px;
}
#apartados > div::before {
	content: "";
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	width: 100px;
	height: 100px;
	background: url('pandoraplanta.webp') no-repeat center/contain;
	opacity: 0.85;
	z-index: 1;
	pointer-events: none;
}
#apartados > div:nth-child(2)::before { background-image: url('pandoraplanta2.webp'); }
#apartados > div:nth-child(3)::before { background-image: url('pandoraplanta3.webp'); }
#apartados > div:nth-child(4)::before { background-image: url('pandoraplanta4.webp'); }
#apartados p, #apartados li, #apartados dt, #apartados dd {
	color: var(--text-muted);
	font-size: 1.05rem;
}
#apartados ul { margin-left: 1.5rem; }
#apartados dt { font-weight: 700; color: var(--secondary); }
#apartados dd { margin-bottom: 0.7rem; }

/* -----------------------------
	 ENLACES Y BLOQUES RELACIONADOS
	 ----------------------------- */
#enlacesintra, #enlaces, #enlacesversiones {
	margin: 2.5rem auto;
	padding: 1.5rem;
	background: #e3f0fa;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	position: relative;
	max-width: 1000px;
}
#enlacesintra::before, #enlaces::before, #enlacesversiones::before {
	content: "";
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	width: 140px;
	height: 140px;
	opacity: 0.85;
	z-index: 1;
	pointer-events: none;
	background: none;
}
#enlacesintra::before { background: url('toruk.webp') no-repeat center/contain; }
#enlaces::before {
	background: url('ikran.webp') no-repeat center/contain;
	top: 5%;
	transform: translateY(0);
	width: 300px;
	height: 300px;
}
#enlacesversiones::before { background: url('toruk.webp') no-repeat center/contain; }

#enlacesintra ul, #enlaces ul, #enlacesversiones ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.8rem 1.5rem;
}

#lselecciona ul {
	display: flex;
	flex-direction: column !important;
	gap: 0.8rem 0 !important;
}
#enlacesintra a, #enlaces a, #enlacesversiones a {
	color: #005a9e;
	text-decoration: none;
	font-weight: 600;
	padding: 0.3rem 0.8rem;
	border-radius: var(--radius-sm);
	transition: background 0.2s, color 0.2s;
}
#enlacesintra a:hover, #enlaces a:hover, #enlacesversiones a:hover {
	background: var(--accent);
	color: var(--white);
}
#enlacesintra ul.ul1 a { font-family: 'TorukscRegular-z8MA1', var(--font-main) !important; }

/* -----------------------------
	 RESUMEN / COMENTARIO
	 ----------------------------- */
#resumen, #comentario {
	margin: 2rem auto 0 auto;
	max-width: 900px;
	padding: 1.2rem 1.5rem;
	background: rgba(255,255,255,0.82);
	border-radius: var(--radius-md);
	color: #1a1a1a;
	font-size: 1.13rem;
	text-shadow: none;
}

/* -----------------------------
	 IMÁGENES Y EXTRAS
	 ----------------------------- */
img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 2rem auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
#extraDiv1 { background-image: url('pandoraplanta.webp'); }
#extraDiv2 { background-image: url('pandoraplanta2.webp'); }
#extraDiv3 { background-image: url('pandoraplanta3.webp'); }
#extraDiv4 { background-image: url('pandoraplanta4.webp'); }

/* -----------------------------
	 HISTÓRICO Y RECURSOS
	 ----------------------------- */
#lhistorico {
	margin-bottom: 2rem;
	border-bottom: 2px solid var(--primary);
	padding-bottom: 1.2rem;
}
#lrecursos { margin-bottom: 0; }

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 900px) {
   #enlacesintra ul,
   #enlaces ul,
   #enlacesversiones ul {
	   list-style: none;
	   padding: 0;
	   margin: 0;
	   display: flex;
	   flex-wrap: wrap;
	   gap: 0.8rem 1.5rem;
	   color: #1565c0;
   }

   #apartados > div {
	   margin: 1.5rem 0.5rem;
	   padding: 1.2rem 0.7rem;
   }

   #enlaces::before {
	   width: 160px;
	   height: 160px;
	   top: 5.5rem;
	   bottom: auto;
	   right: 0.7rem;
	   left: auto;
	   transform: none;
   }
}

@media (max-width: 600px) {
   #contenedor {
	   margin: 0.5rem;
	   border-radius: var(--radius-md);
   }

   #intro {
	   padding: 1.2rem 0.5rem;
   }

   #titulo h1 {
	   font-size: 1.2rem;
   }

   #titulo h2 {
	   font-size: 1rem;
	   padding: 0.2rem 0.5rem;
   }

   #apartados > div {
	   margin: 1rem 0.2rem;
	   padding: 0.7rem 0.3rem;
	}
    
	#resumen,
	#comentario,
	#objetivos p,
	#contenidos p,
	#profesores p,
	#bibliografia p,
	#apartados p,
	#apartados li,
	#apartados dt,
	#apartados dd {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
   }

   #enlacesintra ul,
   #enlaces ul,
   #enlacesversiones ul {
	   flex-direction: column;
	   gap: 0.4rem;
   }

   #enlaces::before {
	   top: auto;
	   bottom: 0.7rem;
	   right: 0.7rem;
	   left: auto;
	   width: 90px;
	   height: 90px;
	   transform: none;
	   display: block;
   }

   #enlacesversiones::before {
	   top: 70%;
	   bottom: auto;
	   right: 0.7rem;
	   left: auto;
	   width: 90px;
	   height: 90px;
	   transform: translateY(-50%);
	   display: block;
   }
}