@charset "utf-8";

* {
    box-sizing: border-box;
}

* {
    list-style: none;
}
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}

body {
font-family: "Merriweather";
font-weight: 300;
font-style: normal;
background-color:#9D3C51;
margin: 0%;
}
header {
    background-color:#ffcbcb;
    display: flex;
    flex-wrap: wrap;
    left: 0%;
    top: 0%;
    justify-content: flex-end;
    padding: 1rem;
    justify-content: space-between;
    width:100%;
}

.menu-btn {
    background:#9D3C51;
    border-radius: 50%;
    box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
    padding: .75rem;
    width: 3rem;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease-out; 
    position: relative;
     z-index: 9000;
  }
  
 
  .menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: hsl(0, 53%, 90%);
    transition: all 0.3s ease-out;
  }
  
  .menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
  }
 
  .menuVisible .menu-btn .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
  }
  .menuVisible .menu-btn .btn-linea:nth-child(2) {
    opacity: 0;
  }
  .menuVisible .menu-btn .btn-linea:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -6px);
  }
  
  nav ul {
    background-color: #9D3C51;
    display: grid;
    place-items: center;
    place-content: center;
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    transition: all .6s ease; 
  }
  .menuVisible ul{
    background-color: #9D3C51;
    transition: all .3s ease;
    translate:0;
  }
  nav ul li a {
    border-bottom: solid .2rem#ecdd85; ;
    color: #ecdd85;
    display: block;
    font-size: 1rem;
    margin-block-end: .5rem;
    width: min(70vw, 15rem);
    text-align: center;
    padding: .5rem;
    text-decoration: none;
    text-transform: uppercase;
  }
 
  nav ul li a:hover {
    border-bottom: solid .4rem #ecdd85;
    transition: all .3s;
  }

.logo {
    height: 4em;
}

@media(min-width:40em){
    header nav {
      position: unset;
    }
    .menu-btn {
      display:none;
    }
    header nav ul,
    header .menuVisible ul {
      display: flex;
      flex-wrap: wrap;
      gap: .10em;
      position: unset;
      translate: unset;
      background-color:#9D3C51;
     }
    }
   
  /* Ocultar la opción extra en pantallas grandes */
@media (min-width: 669px) {
  .extra-option {
    display: none;  /* Oculta la opción extra en pantallas grandes */
  }
}

/* Mostrar la opción extra solo en el menú hamburguesa (pantallas pequeñas) */
@media (max-width: 668px) {
  nav ul {
    display: none;  /* El menú está oculto por defecto en pantallas pequeñas */
    flex-direction: column;
    background-color: #9D3C51;
    padding: 1rem 0;
    inset: 0;
  }

  .menuVisible ul {
    display: flex;  /* El menú se muestra cuando el botón hamburguesa está activado */
  }

  .extra-option {
    display: block;  /* La opción extra será visible solo en el menú hamburguesa */
  }

  .menu-btn {
    display: block;  /* Mostrar el botón hamburguesa en pantallas pequeñas */
  }
}
footer {
  background-color: #ffcbcb;
  padding: 1rem;
  margin: auto;
  display: flex;
  flex-wrap:wrap ;
  justify-content: space-around;
}
footer p {
  color: #000000;
  font-size: small; 
}
.iconos {
  width: 1rem;
  display: inline-block;
 }
  main {
    margin:0;
  }
  
 
  /* Inicio  */
  .titulopantallafondo {
    display: block;
    text-transform: unset;
    position: relative;
    padding-inline-start: 1rem;
    color: #ecdd85;
  }
  
  .titulosi {
    text-transform: uppercase;
    font-weight: 7em;
    font-size: 0, 5rem;
    background-color: #ecdd85;
    text-align: center;
    padding: 1em;
    margin-top: 1em;
    }
    .contenidoinicio {
      background-color: #ffcbcb;
      font-size: .8rem;
      color: #000000;
      padding: .6rem;
      text-align: left; 
     
  }
  .homenajes {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
  }
  
  .homenaje {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: 1rem;
  }
  
  .bloque-1 {
    background-color: #9D3C51;
  }
  
  /* Estilos del slider */
  .slider {
    position: relative;
    width: 100%;
    height: auto; /* Asegura que el contenedor se ajuste al contenido */
    overflow: hidden;
  }
  
  .imagenes {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
  }
  
  .slide {
    flex: 0 0 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20rem; 
  }
  
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta la imagen dentro del contenedor sin recortarla */
    border-radius: 0.3rem; 
  }
  
  /* Media Queries para pantallas medianas (600px) */
  @media (min-width: 37.5rem) { /* 600px en rem */
    .imagenes {
        min-height: 30rem; /* Ajusta la altura en pantallas medianas (en rem) */
    }
  
    .slide {
        min-height: 32rem; /* Aumenta la altura de las imágenes para pantallas medianas (en rem) */
    }
  }
  
  /* Media Queries para pantallas grandes (1024px) */
  @media (min-width: 64rem) { /* 1024px en rem */
    .imagenes {
        min-height: 40rem; /* Ajusta la altura en pantallas grandes (en rem) */
    }
  
    .slide {
        min-height: 45rem; /* Aumenta la altura de las imágenes en pantallas grandes (en rem) */
    }
  }
 
  
  /* Indicadores (puntos) */
  .indicadores {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
  }
  
  .indicadores label {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid #333;
    cursor: pointer;
  }
  
  .indicadores label:hover {
    background-color: #333;
  }
  
  /* Ocultamos los radios, pues los controlan los labels */
  input[type="radio"] {
    display: none;
  }
  
  /* Cada radio mueve el slider de acuerdo a su posición */
  input#slide1:checked ~ .imagenes {
    transform: translateX(0);
  }
  
  input#slide2:checked ~ .imagenes {
    transform: translateX(-100%);
  }
  
  input#slide3:checked ~ .imagenes {
    transform: translateX(-200%);
  }
  
  .descripcion {
    background-color: #ecdd85;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    color: #000000;
  }
  .imagenmadres {
    width: 100%;
    height: 100%;
  
  }
  .tituloshome{
    display: block;
    text-transform: unset;
    text-align: center;
 
    font-size: 1.4rem;
    margin: .8rem .6rem;
    color: #ecdd85;
  }
  
  
  /* MEDIA QUERIES */
  
  /* Pantallas grandes (tabletas y escritorios) */
  @media (min-width: 600px) {
  
    .titulopantalla {
        font-size: 2.5rem; 
    }

   .tituloshome {
      font-size:2rem;
      margin:2rem; 
    }
    .imagenes {
        height: 15rem; 
    }
  
    .descripcion {
        font-size: 1.2rem; /
    }
  }
  
  @media (min-width: 1024px) {
  
    .titulopantalla {
        font-size: 3rem; 
    }
  
    .imagenes {
        height: 18rem; 
    }
  
  
    .descripcion {
        font-size: 1.5rem; 
    }
  }
  
  .adelanto {
    display: flex;
    justify-content: space-between;  /* Espacio entre las fechas */
    align-items: center;
    background-color: #530263;
    gap: 1rem; /* Espacio entre las fechas */
    border-top: .2rem solid #ecdd85; /* Línea horizontal de 2px */
    padding-top: .8rem; /* Espacio arriba */
    margin-top: 1rem; /* Espacio en la parte superior */
    padding-left: 1rem; /* Espacio a la izquierda */
    padding-right: 1rem; /* Espacio a la derecha */
    overflow-x: auto; /* Permite desplazamiento horizontal */
}

.numero {
    font-size: 1rem; /* Tamaño de fuente 1rem = 16px */
    color: #ecdd85;
    text-align: center;
    white-space: nowrap; /* Evita que las fechas se dividan en varias líneas */
    flex-grow: 1; /* Hace que cada fecha crezca proporcionalmente */
    text-align: center;  /* Centra el texto en cada bloque */
}

/* Estilo para el enlace "Ver las fechas" */
.ver-fechas {
    background-color:#ff5177; ;
    color: #ecdd85;
    font-size: 1rem;
    padding: .2em .3em;
    text-align: center;
    white-space: nowrap;
}

/* Diseño para pantallas grandes */
@media (min-width: 768px) {
    .adelanto {
        justify-content: space-between;  /* Las fechas se distribuyen proporcionalmente */
    }

    .numero {
        font-size: 1.25rem; /* 1.25rem = 20px */
        flex-grow: 1;  /* Hace que las fechas se estiren proporcionalmente */
    }

    /* Aseguramos que el enlace también se estire si es necesario */
    .ver-fechas {
        align-self: center;  /* Asegura que el enlace esté alineado verticalmente */
        font-size: 1.25rem;
    }
}


.titulopantalla{
    display: block;
    text-transform: uppercase;
    position: relative;
    padding-top: 1em;
    padding-bottom: .6rem;
    font-size: 2rem;
    margin-bottom: .5em;
    margin-top: 1em;
    color: #ecdd85;
}

.titulopantalla::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0; 
    bottom: 0.3em; 
    height: 0.2em; 
    background-color:#ecdd85;
}
 /* Linea de tiempo  */
 .maincontenido {
  margin: 0 .6rem
  }
.timeline {
    position: relative;
    max-width: 100%; 
    margin: 0 auto;
    padding-left: 1rem; 
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width:0.4rem;
    background-color:#ecdd85;
    border: 0.2rem double #ff5177;
    transform: translateX(-50%);
}

.hechos {
position: relative;
margin:1rem 
   
}
.fechas {
    position: relative;
    left: 0;
    background-color:#530263;
    color:#ffffff ;
    padding: 0.25rem 0.5rem;
    border-radius: 10rem;
    font-weight: bold;
    font-size: 1.2 rem;
    margin-bottom: 0.5rem; 
    width: auto;
    display: inline-block;
}

.contenidolt {
    position: relative;
    padding: 1rem; 
    background-color:#ecdd85;
    border:.2rem double #ff5177;
    border-radius: 0.3125rem; 
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); 
    width: 100%;
}

.hechos .contenidolt h3 {
    margin-bottom: 0.625rem;
    font-size: 1rem; 
    color: #000000;
}
.hechos .contenidolt h3 {
    margin-bottom: 0.625rem;
    font-size: 1rem;
    color: #333;
    display: flex; 
    align-items: center; 
}

.hechos .contenidolt h3 .icon {
    width: 2rem;
    height: 2rem; 
    margin-right: 0.5rem; 
    vertical-align: middle;
}

.hechos .content p {
    color: #000000;
    font-size: 0.7em; 
}

.hechos::after {
    content: '';
    position: absolute;
    top: 1rem;
    left:-0.4375rem;
    width: 0.875rem; 
    height: 0.875rem; 
    background-color: #ff5177;
    border-radius: 50%;
    border: 0.125rem solid #fff; 
}
a.link {
    color:#530263;; 
    font-weight: bold; 
    text-decoration: none; 
    background-color:hsl(0, 53%, 90%);
    padding: 0.1rem 0.25rem; 
    border-radius: 0.25rem; 
}
@media (min-width: 600px) {
.maincontenido {
   margin: 0 8rem
  }
  .hechos .contenidolt h3 .icon {
    width: 4rem;
    height: 4rem; 
    margin-right: 0.5rem; 
    vertical-align: middle;
}
}
 
   /* Articulos y Noticias  */
.fondo {
  background-color: #ecdd85;
 }
 .titulosnoti {
   font-size: 1.4rem; /* 22.4px */
   color: #333;
   margin-bottom: 0.625rem; /* 10px */
 }
 
 .botonvermas {
   display: inline-block;
   text-decoration: none;
   color: #9D3C51;
   background-color: #ffcbcb;
   padding: 0.5rem 1rem; /* Espaciado dentro del botón */
   border-radius: 0.25rem; /* Bordes redondeados */
   font-weight: bold;
   font-size: 1rem; /* 16px */
   transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .botonvermas:hover {
   background-color: #fdafaf;
   transform: scale(1.05); /* Efecto de ampliación al pasar el ratón */
 }
 
 /* Contenedor principal de noticias */
 .contenedor {
   display: flex;
   flex-direction: column;
   gap: 1rem; 
   padding: 0;
   margin: 0 1rem
  }
 
 /* Estilo de cada sección de noticia */
 .secciones {
   display: flex;
   flex-direction: row;
   background-color: #9D3C51;
   border-radius: 0.5rem;
   box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
   padding: 0.25rem; /* Reducido el padding para acercar más los elementos */
   margin-bottom: 0.5rem; /* Reducido margen inferior */
   transition: transform 0.3s ease;
   width: 100%;
   box-sizing: border-box;
 }
 .secciones:hover {
   transform: scale(1.05);
 }
 
 .noticias-figure {
   display: inline-block;
   margin-right: 1rem; /* Aumentado el margen para que la imagen se separe un poco del texto */
   flex-shrink: 0;
   background-color: #9D3C51;
   max-width: 40%; /* Ajustado el tamaño de la imagen */
 }
 
 .imagenesnoti {
   width: 100%;
   max-width: 10rem;
   height: auto;
   border-radius: 0.5rem;
   object-fit: cover;
 }
 
 /* Estilo para el texto */
 .textoart {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: calc(100% - 160px); /* Ajustado el ancho para que ocupe más espacio, menos espacio para la imagen */
   padding-top: 0.25rem; /* Reducido padding superior */
   box-sizing: border-box;
 }
 
 .titulosnoti {
   display: inline-block;
   text-decoration: none;
   color: #ecdd85;
   font-weight: bold;
   font-size: 1.5rem;
 }
 
 .descripción {
   font-size: .9rem;
   color: #ffffff;
   line-height: 1.3;
   margin-bottom: 0.75rem; /* Menor margen inferior */
 }
 
 .botonvermas {
   display: inline-block;
   text-decoration: none;
   color: #9D3C51;
   background-color: #ffcbcb;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
   font-weight: bold;
   font-size: 1rem;
   transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .botonvermas:hover {
   background-color: #ffffff;
   transform: scale(1.05);
 }
 
 /* Título principal */
 .titulofondo {
   display: block;
   text-transform: uppercase;
   position: relative;
   padding-top: 1em;
   padding-bottom: 0.6rem;
   font-size: 2rem;
   margin-bottom: 0.5em;
   margin-top: .8em;
   color: #9D3C51;
 }
 .titulofondo::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0.3em;
   height: 0.2em;
   background-color: #9D3C51;
   margin-top: 2rem;
 }
 .epigrafe{
 font-size: .7rem;
 color: #ecdd85;
 }
 
 
 /* Adaptación para pantallas más grandes */
@media (min-width: 37rem) {
  .secciones {
    flex-direction: row;
    gap: 1.25rem;
  }
  .contenedor {
   margin: 0 4rem
   }
  .imagenesnoti {
    width: 12rem;
    height: 12rem;
  }
  .botonvermas {
    width: 40%;
    
  }
  .textoart {
    width: calc(100% - 16rem);
  }
}
 /* Libros  */
 
 .conteiner {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

.bloque {
  background-color: #9D3C51;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
  border-top: 0.5rem solid #f8446b;
  border-bottom: .5rem solid  #f8446b;
}

.tituloslibros {
  font-size: 1.5rem; 
  color: #000000;
  margin-bottom: 1rem;
  background-color: #ffcbcb;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.portada-container {
  margin-bottom: 1rem; 
  position: relative;
  width: 100%;
}

.portada {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
}

.epigrafe {
  font-size: .7rem;
  color: rgb(0, 0, 0);
  text-align: center;
  margin-top: 0.5rem;
  background-color: #ecdd85;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.refe-bloque {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.refe {
  font-size: 1rem; 
  color: #9D3C51; 
  background-color: #f7f7f7; 
  padding: 1rem;
  border-radius: 0.5rem;
}

.fichatecnica {
  background-color:#ffcbcb;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
}

.fichatecnica h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.fichatecnica ul {
  list-style-type: none;
  padding: 0;
}

.fichatecnica li {
  margin-bottom: 0.5rem;
}

.informacion-bloque {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.contenido-bloque {
  display: block;
  margin-bottom: 1rem;
}

.contenido-bloque .portada-container {
  width: 100%;
}

.contenido-bloque .informacion-bloque {
  width: 100%;
}

/* Diseño para pantallas medianas (tabletas y dispositivos más grandes) */
@media (min-width: 37rem) {
  .contenedor {
    margin: 0 2rem
    }
  .tituloslibros {
      font-size: 1.8rem; 
  }

  .contenido-bloque {
      display: flex;
      justify-content: space-between;
      gap: 1.5rem;
  }

  .contenido-bloque .portada-container {
      flex: 1;
  }

  .contenido-bloque .informacion-bloque {
      flex: 1;
  }

  .refe {
      font-size: 1.15rem;
  }
}

/* Diseño para pantallas grandes (escritorios) */
@media (min-width: 64rem) {
  .contenedor {
    margin: 0 4rem
    }
  .conteiner {
      max-width: 75%;
  }

  .tituloslibros {
      font-size: 2.25rem; 
  }
  .portada {
    width: 80%;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
  }

  .contenido-bloque {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
  }

  /* Imagen en la primera columna */
  .contenido-bloque .portada-container {
      flex: 1;
      max-width: 45%; /* Imagen ocupa el 45% */
  }

  /* Ficha técnica en la segunda columna, junto a la imagen */
  .contenido-bloque .informacion-bloque {
      flex: 1;
      max-width: 45%; /* Ficha técnica ocupa el 45% */
      display: flex;
      flex-direction: column;
  }

  /* La ficha técnica está encima del texto, que va debajo */
  .contenido-bloque .informacion-bloque .fichatecnica {
      order: 1; /* Ficha técnica arriba */
  }

  .contenido-bloque .informacion-bloque .refe-bloque {
      order: 2; /* El texto va debajo de la ficha técnica */
      margin-top: 1rem; /* Separación para el texto */
  }

  .refe {
      font-size: 1.25rem;
  }
}

/* Acciones  */
.homenaje {
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 1rem;
}

.bloque-1 {
  background-color: #9D3C51;
}

.bloque-2 {
  background-color: #9D3C51;
}

.bloque-3 {
  background-color: #9D3C51;
}

/* Indicadores (puntos) */
.indicadores {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.indicadores label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #333;
  cursor: pointer;
}

.indicadores label:hover {
  background-color: #333;
}

/* Ocultamos los radios, pues los controlan los labels */
input[type="radio"] {
  display: none;
}

/* Cada radio mueve el slider de acuerdo a su posición */
input#slide1:checked ~ .imagenes {
  transform: translateX(0);
}

input#slide2:checked ~ .imagenes {
  transform: translateX(-100%);
}

input#slide3:checked ~ .imagenes {
  transform: translateX(-200%);
}

input#slide4:checked ~ .imagenes {
  transform: translateX(0);
}

input#slide5:checked ~ .imagenes {
  transform: translateX(-100%);
}

input#slide6:checked ~ .imagenes {
  transform: translateX(-200%);
}

input#slide7:checked ~ .imagenes {
  transform: translateX(0);
}

input#slide8:checked ~ .imagenes {
  transform: translateX(-100%);
}

input#slide9:checked ~ .imagenes {
  transform: translateX(-200%);
}

.descripcion {
  background-color: #ecdd85;
  text-align: left;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  color: #000000;
}

.ficha {
background-color: #f0f0f0;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
margin-top: 1rem;
text-align: left;
}

.ficha h3 {
font-size: 1.2rem;
color: #000000;
margin-bottom: 0.5rem;
}

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

.ficha ul li {
font-size: 1rem;
color: #000000;
margin-bottom: 0.3rem;
}

/* Media Queries para la ficha técnica */
@media (min-width: 600px) {
.ficha {
    padding: 1.5rem;
}

.ficha h3 {
    font-size: 1.5rem;
}

.ficha ul li {
    font-size: 1.1rem;
}
}

@media (min-width: 1024px) {
.ficha {
    padding: 2rem;
}



.ficha {
    font-size: 1rem;
}
}

/* MEDIA QUERIES */

/* Pantallas grandes (tabletas y escritorios) */
@media (min-width: 600px) {

  .titulopantalla {
      font-size: 1.5rem; 
  }
  .contenedor {
    margin: 0 4rem
   }
  .imagenes {
      height: 15rem; 
  }
 .descripcion {
      font-size: .8rem; /
  }
}

@media (min-width: 1024px) {

  .titulopantalla {
      font-size: 2rem; 
  }
  .contenedor {
    margin: 0 4rem
   }

  .imagenes {
      height: 18rem; 
  }

  .descripcion {
      font-size: 1rem; 
  }
}
/* Noticias actuales  */
.noticontainer {
  width: 100%;
  padding: 0.6rem;
}

.notitem {
  background-color: #f9f0f0; /* Fondo suave para cada noticia */
  margin-bottom: 1.5rem; /* Separación entre noticias */
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.notitem img {
  width: 100%; /* En móviles, la imagen ocupa todo el contenedor */
  height: auto;
  object-fit: cover; /* Mantener proporciones */
  border-radius: 0.5rem;
}

/* Título de la noticia */
.titulosactuales {
  font-size: 1.4rem;
  font-weight: bold;
  color: #f8446b;
  margin-bottom: 0.8rem;
}

/* Texto de la noticia */
.textoactuales {
  font-size: 1rem;
  line-height: 1.6;
  color: #9D3C51;
  margin-bottom: 0.8rem;
}

/* Estilo para el epígrafe */
figcaption {
  font-size: 0.9rem;
  color: #9D3C51;
  text-align: center;
  margin-top: 0.5rem;
}

/* Estilo para la fecha */
.mes {
  font-size: 1rem;
  color: #000000;
  text-align:left;
  margin-top: 1rem;
}

/* Estilos para pantallas de tabletas y pantallas grandes (más de 1024px) */
@media (min-width: 64rem) {
  .notitem {
      display: flex; /* Las noticias se muestran en una sola columna */
      flex-direction: column; /* Los elementos van uno debajo del otro */
      align-items: flex-start;
  }

  .notitem figure {
      width: 100%; /* La imagen ocupa todo el contenedor en pantallas grandes */
      margin-bottom: 1rem; /* Separación entre imagen y el resto del contenido */
  }

  .titulosactuales {
      font-size: 2rem;
      margin-bottom: 1rem;
  }

  .textoactuales {
      font-size: 1.2rem;
      margin-bottom: 1rem;
  }

  .mes {
      font-size: 1.2rem;
      margin-top: 1rem;
  }
}

/* protagonistas */
.contenidoprota {
  text-align:left;
  padding: 1em;
  margin: 1em;
  font-size: 0.9rem;
  align-items: center;
}
.subtitulosprota {
  color: #ffcbcb;
  display: flex;
  flex-wrap: wrap;
  height: 1em;
  margin: auto;

}

.titulosprota {
  color: #ecdd85;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto;
}

.protagonista {
  display: flex;
  flex-wrap: wrap;
}

.seccionesprota {
  display: flex;
  flex-direction: row;
  background-color: #ecdd85;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
  padding: 0.25rem; /* Reducido el padding para acercar más los elementos */
  margin-bottom: 0.5rem; /* Reducido margen inferior */
  transition: transform 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.seccionesprota:hover {
  transform: scale(1.05);
}

.protafigure {
  display: inline-block;
  margin-right: 1rem; /* Aumentado el margen para que la imagen se separe un poco del texto */
  flex-shrink: 0;
  
  max-width: 40%; /* Ajustado el tamaño de la imagen */
}
.foto {
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  border: 0.4em solid #ecdd85;
}

.imagenesver {
  width: 100%;
  max-width: 10rem;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

.textoprota {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 160px); 
  padding-top: 0.25rem; 
  box-sizing: border-box;
}

.miembros {
  display: inline-block;
  text-decoration: none;
  color: #9D3C51;
  font-weight: bold;
  font-size: 1.5rem;
}

.descripciónprota {
  font-size: .9rem;
  color: #000000;
  line-height: 1.3;
  margin-bottom: 0.75rem; /* Menor margen inferior */
}
@media (min-width: 37rem) {

  .contenedor {
      margin: 0 4rem
     }
    }
@media (min-width: 64rem) {

.contenedor {
    margin: 0 4rem
   }
  }

/* protagonistas actuales */
  .contenidopa {
    text-align: left;
    padding: 1em;
    margin: 1em;
    font-size: 1rem;
    align-items: center;
  }
  .subtitulospa {
    color: #ffcbcb;
    display: flex;
    flex-wrap: wrap;
    height: 1em;
    margin: auto;
  }
   .titulospa {
    color: #ecdd85;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
  }
  .protagonistapa {
    display: flex;
    flex-wrap: wrap;
  }
 
  @media (min-width: 37rem) {
  .contenedor 
 { margin: 0 4rem
  }
  .contenidopa {
    font-size: 1.2rem;
   }
   .subtitulospa {
    font-size: 1.2rem;
    margin: .2em.4em;
   }
}
@media (min-width: 64rem) {

  .contenedor {
   margin: 0 5rem
  }
  .contenidopa {
    font-size: 1.4rem;
   }
   .subtitulospa {
    font-size: 1.4rem;
    margin: .4em.6em;
   }
}
 
/* Estilo para el texto del video */
.titulovideo {
  color:#ecdd85;
  font-size: 1em;
}
.textovideo
    {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
      }

/* Estilo para el video */

.video {
    width: 20rem ; 
    height: 20rem;
    max-width: 100%;

}
@media (min-width: 37rem) {

  .contenedor {
   margin: 0 4rem
  }
 
.titulovideo {
  color:#ecdd85;
  font-size: 1.2em;
}
}
@media (min-width: 64rem) {

  .contenedor {
   margin: 0 4rem
  }
  .video {
    
    max-width: 100%
  }
.titulovideo {
  color:#ecdd85;
  font-size: 1.5em;
}
}

@media (min-width: 1200rem) {

  .contenedor {
    margin: 0 4rem
   }
   .video {
     
     max-width: 100%
   }
 .titulovideo {
   color:#ecdd85;
   font-size: 1.5em;
 }
}


/* protagonistas actuales */

.fotos-simbolo {
  margin: 1em;
  object-fit: cover;
  overflow: hidden;
  width: 7em;
  border: solid #ecdd85.2rem;
}
.info {
  color:#ecdd85;
  text-align:left;
  padding: 1em;
  margin: 1em;
  font-size: 0.9rem;
  align-items: center;
}
.bajada{
  color: #ffcbcb;
  display: flex;
  flex-wrap: wrap;
  height: 1em;
  margin: auto;

}

.tsimbolos {
  color: #ecdd85;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto;

}

.tsimbolos {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 37rem) {
  .contenedor 
 { margin: 0 4rem
  }
  .info {
    font-size: 1.1rem;
    
  }
 
} 

@media (min-width: 64rempx) {
  .contenedor 
 { margin: 0 4rem
  } 
}