/* ===================================================
   sobre.css
   Estilos específicos para la página Sobre mí
   =================================================== */


/* ==============================
   1. SECCIÓN: BIOGRAFÍA
   ============================== */
.carrera {
  text-align: center;
  margin: 3rem auto 2rem;
  max-width: 800px;
  padding: 1rem;
}

.carrera h2 {
  font-size: 2.2em;
  color: #2b1f7a;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  position: relative;
}

.carrera h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: #ffce00;
  margin: 1rem auto 0;
  border-radius: 2px;
}

.biografia {
	background-color: #ffffff;
	padding: 3rem 2rem;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	border: 1px solid #ececec;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.biografia:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.biografia h2 {
	font-size: 2.5em;
	color: #5c3dc4;
	margin-bottom: 1.2rem;
}

.biografia p {
	font-size: 1.2em;
	color: #333;
	margin-bottom: 2rem;
	line-height: 1.7;
}

.biografia h3 {
	font-size: 2em;
	color: #5c3dc4;
	margin-bottom: 1.2rem;
}

.biografia ul {
	text-align: left;
	max-width: 700px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.biografia ul li {
	margin: 0.8rem 0;
	font-size: 1.1em;
	color: #333;
	position: relative;
	padding-left: 1.5rem;
}

.biografia ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #5c3dc4;
	font-weight: bold;
}

.biografia ul li strong {
	color: #5c3dc4; /* Lila */
}

/* ==============================
   2. SECCIÓN: PELÍCULAS
   ============================== */

.peliculas {
	background-color: #e9f7ec; 
	padding: 60px 20px;
	text-align: center;
	border-radius: 16px;
    max-width: 900px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin: 0 auto 3rem;
}

.peliculas h3 {
	font-size: 2em;
	color: #2b7a4b; 
	margin-bottom: 40px;
}

.obra-pelicula {
	display: flex;
	align-items: center;
	gap: 25px;
	background-color: #ffffff; 
	border: 2px solid #c9e7d3;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	margin-bottom: 40px;
	max-width: 950px;
	margin-inline: auto;
	flex-wrap: wrap;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.obra-pelicula:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.texto-pelicula {
	flex: 1;
	text-align: center;
}

.texto-pelicula dt {
	font-weight: bold;
	font-size: 1.2em;
	color: #2b7a4b;
	margin-bottom: 8px;
}

.texto-pelicula dd {
	margin: 0;
	font-size: 1em;
	color: #333;
	line-height: 1.6;
	text-align: left;
}

.texto-pelicula em {
	display: block;
	font-style: italic;
	color: #555;
	margin: 10px 0;
}


/* ==============================
   3 SECCIÓN: TEATRO
   ============================== */
.teatro {
	background-color: #fffbe6; 
	padding: 60px 20px;
	text-align: center;
    border-radius: 16px;
    max-width: 900px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin: 0 auto 3rem;
}
.teatro h3 {
	font-size: 2em;
	color: #a37400;
	margin-bottom: 40px;
}

.obra-teatro {
	display: flex;
	align-items: center;
	gap: 25px;
	background-color: #ffffff;
	border: 2px solid #ffe79e; 
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	margin-bottom: 40px;
	max-width: 950px;
	margin-inline: auto;
	flex-wrap: wrap;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.obra-teatro:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.texto-teatro {
	flex: 1;
	text-align: center;
}

.texto-teatro dt a {
	font-weight: bold;
	font-size: 1.2em;
	color: #a37400; 
	margin-bottom: 8px;
}

.texto-teatro dt a:hover {
	text-decoration: underline;
}

.texto-teatro dd {
	margin: 0;
	font-size: 1em;
	color: #333;
	line-height: 1.6;
	text-align: left;
}

/* ==============================
   4. SECCIÓN: LITERATURA 
   ============================== */
.literatura {
	background-color: #fdfbff;
	padding: 60px 20px;
	text-align: center;
	border-radius: 16px;
    max-width: 900px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin: 0 auto 3rem;
}

.obra-literaria {
	display: flex;
	align-items: center;
	gap: 25px;
	background-color: #f9f6ff;
	border: 2px solid #e5e0f7;
	border-radius: 12px;
	padding: 20px 25px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
	margin-bottom: 40px;
	flex-wrap: wrap;
	max-width: 950px;
	margin-inline: auto;
	transition: transform 0.2s ease;
}

.obra-literaria:hover {
	transform: scale(1.05);
}

.texto-literario {
	flex: 1;
    text-align: left;
}

.texto-literario dt {
	font-size: 1.1em;
	color: #3d1fb1;
	margin-bottom: 8px;
        text-align: center;

}

.texto-literario dd {
	margin: 0;
	font-size: 1em;
	color: #333;
}

.texto-literario em {
	display: block;
	font-style: italic;
	color: #444;
	margin: 8px 0;
}

/* ==============================
   5. SECCIÓN: NOVELA
   ============================== */

.novela-inedita {
	background-color: #fdfbff;
	padding: 60px 20px;
}

.carta-proyecto {
	background-color: #ffffff; /* Blanco puro para resaltar */
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease; /* Transición suave para hover */
}
.carta-proyecto:hover {
	transform: scale(1.03); 
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
}

.cta-editorial a {
	color: #5c3dc4;
	text-decoration: underline;
}


/* ==============================
   6. SECCIÓN: ACADEMIA (TFM)
   ============================== */

.academia {
	padding: 60px 20px;
	text-align: center;
	background-color: #fff0f0;
    border-radius: 16px;
    max-width: 900px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin: 0 auto 3rem;
}

.academia h3 {
	font-size: 2em;
	color: #cc3344; 
	margin-bottom: 40px;
}

.obra-academica {
	display: flex;
	align-items: center;
	gap: 25px;
	background-color: #ffe5e5; 
	border: 2px solid #f5cccc;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	margin-bottom: 40px;
	max-width: 950px;
	margin-inline: auto;
	flex-wrap: wrap;
	transition: transform 0.2s ease;
}

.obra-academica:hover {
	transform: scale(1.05);
}

.texto-academico {
	flex: 1;
	text-align: left;
}

.texto-academico dt {
	font-size: 1.2em;
	color: #b91d2c; 
	margin-bottom: 10px;
}

.texto-academico dd {
	margin: 0;
	font-size: 1em;
	color: #333;
	line-height: 1.5;
}

.texto-academico em {
	display: block;
	font-style: italic;
	color: #555;
	margin: 10px 0;
}

.ficha-seccion {
  background-color: #ffffff;
  padding: 3rem 2rem;
  margin: 2rem auto;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  max-width: 900px;
  transition: transform 0.3s ease;
  text-align: center;
}

.ficha-seccion:hover {
  transform: scale(1.015);
}

.titulo-ficha {
  font-size: 2em;
  color: #2b1f7a;
  margin-bottom: 1.5rem;
}

.ficha-seccion p,
.ficha-seccion ul {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

.ficha-seccion ul {
  list-style: none;
  padding: 0;
}

.ficha-seccion ul li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.ficha-seccion ul li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: #5c3dc4;
  font-weight: bold;
}
/* ==============================
   7. PEDAGOGÍA
   ============================== */

.bloque-pedagogia {
  background-color: #f0ecff;
}

/* ==============================
   6. SECCIÓN: FORMACIÓN
   ============================== */

.bloque-formacion {
  background-color: #e9f7ec;
}

/* ==============================
   6. SECCIÓN: VALORES
   ============================== */

.bloque-valores {
  background-color: #fff8e6;
}