/* 02-01-25 11:10  */ 

h1 {
  font-size: 40px;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  text-align: center;}

h2 {
  margin: 0px 0px 100px 0px; 
  font-size: 23px;
  font-family: serif;
  text-decoration: none;
  font-weight: normal;
  text-align: center;}

h3 {
  font-weight: normal;
  font-size: 23px;}

p {
  font-size: 23px;
  margin-bottom: 0px;}

.tab0 { margin : 0px 0px 0px 0px;}
.tab50 { margin : 0px 0px 0px 50px;}
.tab100 { margin : 0px 0px 0px 100px;}
.tab150 { margin : 0px 0px 0px 150px;}
.tab200 { margin : 0px 0px 0px 200px;}
.tab-35C { margin : 0px 0px 0px -35px; text-align: center;}
.tab50C { margin : 0px 0px 0px 50px; text-align: center;} 
.tab100C { margin : 0px 0px 0px 100px; text-align: center;} 
.tab250 { margin : 0px 0px 0px 250px;}
.tab300 { margin : 0px 0px 0px 300px;}
.tab350 { margin : 0px 0px 0px 350px;}
.tab400 { margin : 0px 0px 0px 400px;}
.tab450 { margin : 0px 0px 0px 450px;}

.abajo { position: absolute; bottom: 100px;}
.centrado { text-align: center;}
.derecha { text-align: right;}

.top0 {margin-top: 0px;}
.top50 { margin-top: 50px;}
.top100 { margin-top: 100px;}
.top150 { margin-top: 150px;}
.top200 { margin-top: 200px;}
.top300 { margin-top: 300px;}
.top400 { margin-top: 400px;}
.top500 { margin-top: 500px;}
.top600 { margin-top: 600px;}
.top650 { margin-top: 650px;}
.top800 { margin-top: 800px;}

.bot0 { margin-bottom: 0px;}
.bot50 { margin-bottom: 50px;}

p.medio { margin: 0px 0px  0px 25%; 
  text-indent: 0em;
  font-family: serif;
  font-size: 23px; 
  font-weight: normal;}

/* ________________________span ___________________________*/

.nuevaLinea { clear: both;}
.veintidos { font-size: 22px;}
.cursiva { font-style: italic;}
.negrita { font-weight: bold;}

/* ________________________________________________________*/

a:link { 
  text-decoration: none; 
  color: black;}

li { 
  font-family: serif; 
  font-size: x-large;
  list-style: none}


label {                      /* para el VER - OCULTAR el indice*/
  display: block;
  font-size: 23px;
  font-weight: normal;
  text-align:center; 
  cursor:pointer;}

/* ________________________ Los body ___________________________*/

body {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 40px; 
  font-family: 'Source Sans Pro', sans-serif;}

.index { background: #908090;}
.index .presentacion { box-shadow: 2px 4px 20px 0px #908090;}


.nocturnos { background: #304575;}
.nocturnos .encabezadoD img { box-shadow: 2px 4px 20px 0px #304575;}
.nocturnos .portada img { box-shadow: 2px 4px 20px 0px #304575;}
.nocturnos .poema {
  width: 725px;
  padding: 50px 5px 100px 75px;
  background: #d5d5d5; 
  box-shadow: 2px 4px 20px 0px #304575;}
.nocturnos h1 { 
  font-size: 50px;
  font-family: Arial Black; 
  font-weight: bold;
  color: #fff; 
  text-shadow: 0px 0px 10px #304575}
.nocturnos h2   { font-family: Courier New, Courier, monospace;}
.nocturnos h3   { font-family: Courier New, Courier, monospace;}
.nocturnos p   { font-family: Courier New, Courier, monospace;}
.nocturnos .texto-agradecimiento { box-shadow: 1px 1px 8px 0px #304575;}


.geografia { background: #629856;}
.geografia .encabezadoD img { box-shadow: 2px 4px 20px 0px #629856;}
.geografia .portada img { box-shadow: 2px 4px 20px 0px #629856;}
.geografia .poema {
  width: 725px;
  padding: 50px 5px 100px 75px;
  background: #e0e0e0; 
  box-shadow: 2px 4px 20px 0px #629856;}
.geografia h1 { 
  font-family: math;
  text-shadow: 0px 0px 9px #629856;}
.geografia h2 { font-family: serif; font-size: 23px;} 
.geografia h3 { font-family: serif; font-size: 23px;} 
.geografia p  { font-family: serif; font-size: 23px;} 
.geografia .texto-agradecimiento { box-shadow: 1px 1px 8px 0px #629856;}


.bailarina { background: #B85A21;}
.bailarina .encabezadoD img { box-shadow: 2px 4px 20px 0px #B85A21;}
.bailarina .portada img { box-shadow: 2px 4px 20px 0px #B85A21;}
.bailarina .poema { 
  width: 725px;
  padding: 50px 5px 100px 75px;
  background:#e5e5d5;
  box-shadow: 2px 4px 20px 0px #B85A21;}
.bailarina h1 { 
  font-family: serif;
  text-shadow: 0px 0px 9px #B85A21;}
.bailarina h2 { font-family: serif; margin-bottom: 50px;}
.bailarina h3 { font-family: serif; margin-bottom: 50px;}
.bailarina p { font-family: serif;}


.nostalgia { background: #AE3535;}
.nostalgia .encabezadoD img { box-shadow: 2px 4px 20px 0px #AE3535;}
.nostalgia .portada img { box-shadow: 2px 4px 20px 0px #AE3535;}
.nostalgia .poema { 
  width: 725px;
  padding: 50px 5px 100px 75px;
  background: #e5e5e5;
  box-shadow: 2px 4px 20px 0px #AE3535;}
.nostalgia  h1 { 
  font-family: serif;
  text-shadow: 0px 0px 9px #AE3535;}
.nostalgia  h2 { font-family: serif; margin-bottom: 50px;}
.nostalgia  h3 { font-family: serif; margin-bottom: 50px;}
.nostalgia  p { font-family: serif;}
.nostalgia img { width: 100%;}


.invierno { background: #344BBD;}
.invierno .encabezadoD img { box-shadow: 2px 4px 20px 0px #344BBD;}
.invierno .portada img { box-shadow: 2px 4px 20px 0px #344BBD;}
.invierno .poema { 
  width: 725px;
  padding: 50px 5px 100px 75px;
  background: #e5e5f0; 
  box-shadow: 2px 4px 20px 0px #344BBD;}
.invierno h1 { 
  font-family: cursive;
  text-shadow: 0px 0px 9px #344BBD;}
.invierno h2 { margin-bottom: 50px; font-family: Courier New, Courier, monospace; font-size: 17px; font-weight: bold;}
.invierno h3 { margin-bottom: 50px; font-family: Courier New, Courier, monospace;}
.invierno  p { font-family: Courier New, Courier, monospace; font-size: 18px;}


/* ________________________ Contenedor ___________________________*/

.contenedor {
  padding: 50px 20% 75px 10%;
  background: #FFFFFF; 
  border-radius:20px;}

/* ________________________ Portadas ___________________________*/

.portadas {
  display: flex;
  text-align: center;
  margin-bottom: 50px;}

.portadas div {
  margin: auto;
  text-align: center;}

.portadas img {
  width: 65%;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-delay: 0.05s;
  opacity: 1;
  margin: 0;
  position: relative;
  z-index: 1;
  box-shadow: 2px 4px 20px 0px #908090;}

.portadas p {
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;}

.portadas img.enlaces:hover{
  -webkit-transform:scale(1.8) translate(0px,25px);
  box-shadow: 0px 0px 25px gray;
  opacity:1;
  z-index: 10;}

/* ________________________ Encabezado ___________________________*/

.encabezado { margin: 0px auto 150px auto;}
.encabezadoI { float: left;}
.encabezadoD { display: flex;  float: right;}
.encabezadoD img {margin: 0px 5px 0px 5px; width: 75px}


/* ________________________ Presentacion ___________________________*/

.presentacion {
  margin: 20px auto 0px auto;
  padding: 50px 125px 50px 125px;
  background: #e0e0e0;
  border-radius: 5px;
  line-height: 1.7;
  width: auto;}

.presentacion h2 { margin-left: 150px;}

.presentacion p {
  font-family: serif;
  margin-bottom: 25px;
  text-indent: 3em;
  text-align: justify}

/* ________________________ Introduccion ___________________________*/

.introduccion {
  margin: 20px auto 0px auto;
  padding: 50px 100px 50px 100px;
  background: #e0e0e0;
  border-radius: 5px;
  box-shadow: 2px 4px 20px 0px #5468DD;
  line-height: 1.7;
  width: auto;}

.introduccion p {
  font-family: serif;
  font-size: 23px;
  margin-bottom: 25px;
  text-indent: 3em;
  text-align: justify}

/* ________________________ Titulo y portada ___________________________*/

.tituloYPortada { 
  display: flex; 
  align-items: center;}

.portada { 
  float: left; }

.titulo { 
  float: right; 
  width: 60%;
  padding: 0px 50px 0px 50px;}

.titulo p { font-family:'Source Sans Pro', sans-serif;}

#ver{ display:none;}
#ocultar{ display:none;}
div#indice { display:none;}

p#indice{ font-family: 'Source Sans Pro', sans-serif;}

input#ver:checked ~ div#indice{ display:block;}
input#ocultar:checked ~ div#indice{ display:none;}

/* ________________________ Poema ___________________________*/

.poema {
  margin: 40px auto 0px auto;
  border-radius: 5px;
  line-height: 1.7;
  min-height: 900px;

  position: relative;}

/*---------------------------------------------------------------*/
.agradecimiento { position: relative;}

.texto-agradecimiento {
  visibility: hidden;
  width: 150px;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%; /*125%*/
  left:25%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.3s;}
   
.agradecimiento:hover .texto-agradecimiento { visibility: visible; opacity: 1;}

/*---------------------PIE-----------------------------------------*/

.pie {text-align:center;}
.pieI {float: left; padding: 50px;}
.pieC {display: inline-block; padding: 50px}
.pieD {float: right; padding: 50px;}