/* Estilos generales */

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

@font-face {
    font-family: 'AMSIPRO';
    src: url('../fonts/Types/AmsiProCond-Black.woff2') format('woff2'),
         url('../fonts/Types/AmsiProCond-Black.woff') format('woff'),
         url('../fonts/Types/AmsiProCond-Black.ttf') format('truetype');
    font-weight: normal; /* Ajusta el peso según sea necesario */
    font-style: normal;  /* Ajusta el estilo según sea necesario */
}



body {
    margin: 0;
    padding: 0;
    font-family: 'AMSIPRO', sans-serif; /* Usar AMSIPRO en lugar de Figtree */
    font-size:  1.2rem;
    line-height: 1.2rem;
    background-image: linear-gradient(45deg, #ffffff, #e0e0e0);
    min-height: 100vh;
    position: relative; /* Para el posicionamiento del pseudo-elemento */
}


body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/imgf.png');
    background-repeat: repeat;
    /*background-size: cover; Asegúrate de que la imagen cubra todo el fondo */
    z-index: -1;
    /* Asegúrate de que esté detrás de otros elementos */
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(236, 236, 236, 0.85);
    /* Color rojo con 50% de opacidad */
    filter: blur(10px);
    /* Ajusta el valor de blur según lo necesites */
    z-index: -1;
    /* Asegúrate de que esté por encima de la imagen de fondo */
}


/* Estilos del header */
header {
    position: relative; /* Permite que los elementos hijos se posicionen respecto a él */
    width: 100%;
    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
}

/* Estilos del menú */
nav {
    width: 100%;
    height: 50px; /* Ajusta según tus necesidades */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #54A5DB; /* Color de fondo del menú */
    z-index: 1002; /* Asegura que esté encima de la imagen */
    position: relative; /* Permite el posicionamiento absoluto de elementos internos */
}

.nav-list a.active {
    color: #b5b5b5; /* o cualquier color que quieras para destacar */
    font-weight: bold;
    border-bottom: 2px solid #b5b5b5; /* opcional, como subrayado */
}


/* Estilo de la lista de navegación */
.nav-list {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0; /* Elimina padding */
    margin: 0; /* Elimina margin */
}

/* Estilos de los enlaces de navegación */
.nav-list li a {
    text-decoration: none;
    color: #ffffff;
    margin: 0 70px; /* Espaciado entre secciones */
    font-size: 25px; /* Ajusta el tamaño */
    font-weight: bold;
    transition: background 0.3s ease, transform 0.3s ease; /* Mejorar la transición */
}

/* Estilo al pasar el ratón sobre los enlaces */
.nav-list li a:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* 

.menu-toggle {
    display: none; 
    flex-direction: column;
    cursor: pointer;
    position: absolute; 
    right: 20px; 
    transform: translateY(-50%); 
    z-index: 1003; 
}

*/


.bar {
    height: 4px;
    width: 25px;
    background-color: white;
    margin: 3px 0;
}


/*logo*/
/* Contenedor principal */
.container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Contenedor de la imagen */
.enc-container {
    position: relative;
    width: 100%;
    height: 180px;
}

/* Imagen de encabezado */
.enc {
    width: 100%;
    height: 100%;
    display: block;
}

/* Filtro blanco con opacidad sobre la imagen */
.enc-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Filtro blanco con opacidad */
    z-index: 1; /* Asegura que el filtro esté encima de la imagen, pero debajo del logo */
}

/* Contenedor y posicionamiento del logo */
.logohd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Asegura que el logo esté encima de la imagen y el filtro */
}

/* Ajuste del tamaño del logo */
.logo {
    width: 170px;
    height: auto;
}


/* Estilo para las imágenes de redes sociales */
.container-redes {
    max-width: 1200px;
    /* Ancho máximo de 1200px */
    margin: 0 auto;
    /* Centra horizontalmente el contenedor */
    display: flex;
    /* Usar flexbox para centrar el contenido */
    justify-content: center;
    /* Centra horizontalmente el contenido dentro del contenedor */
    align-items: center;
    /* Centra verticalmente el contenido dentro del contenedor */
    padding-bottom: 15px;
}

.red {
    display: flex;
    flex-direction: column;
    /* Mantiene el contenedor vertical */
    align-items: center;
    /* Centra el contenido del red */
    text-align: center;
    /* Centra el texto en el contenedor */
}

.header {
    display: flex;
    /* Alinea el texto y los íconos en la misma línea */
    align-items: center;
    /* Centra verticalmente el texto y los íconos */
}

.red p {
    margin-right: 20px;
    /* Espacio a la derecha del texto */
    margin-bottom: 0;
    /* Elimina el margen inferior del párrafo */
    font-size: 15px;
}

.redes-container {
    display: flex;
    /* Alinea horizontalmente los enlaces de redes sociales */
    gap: 15px;
    /* Espacio entre los enlaces */
}

.red a {
    display: flex;
    /* Alinea horizontalmente el ícono y el texto */
    align-items: center;
    /* Centra verticalmente el ícono y el texto */
    text-decoration: none;
    /* Elimina el subrayado del enlace */
    color: inherit;
    /* Hereda el color del texto del elemento padre */
}

.redes {
    width: 60px;
    /* Ancho deseado para las imágenes de redes sociales */
    height: auto;
    /* Permite que la altura se ajuste automáticamente para mantener la proporción */
}

.red span {
    font-size: 18px;
    /* Ajusta el tamaño de la fuente según tus necesidades */
    line-height: 1;
}

/* Carousel general */
.carousel-container {
    max-width: 800px; 
    margin: 1px auto;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.carousel {
    transition: transform 0.3s ease;
    white-space: nowrap;
    font-size: 0;
}

.news-item {
    display: inline-block;
    width: 100%;

    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.5s ease-out;
}

.news-content {
    color: #333;
    text-align: center;
    left: 0;
    right: 0;
    font-size: 18px; 
    padding: 18px;
    background-color: rgba(255, 255, 255, 1);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2rem;
    font-weight: 500;
}

.news-content::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px; /* Hacemos la barra más delgada */
    height: 100%;
    background-color: #54a5db;
}

.news-content h2 {
    font-size: 18px; /* Fuente más pequeña */
    line-height: 1.4; /* Espaciado ajustado */
    color: #54a5db;
    margin: 0;
    text-align: justify;
     display: -webkit-box;
    -webkit-line-clamp: 3; /* Número de líneas antes de cortar */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-item img {
    margin-top:5px;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color:rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.carousel-button:hover {
    background-color: #54A5DB;
    
}

.caption-container {
    text-align: center;
    background: rgba(255, 255, 255, 1); /* Fondo blanco con transparencia */
    padding: 8px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10; /* Asegura que esté sobre otros elementos */
}

.news-item {
    position: relative; /* Necesario para que bottom: 0; en caption-container funcione */
}

.news-caption {
    text-align: left;
    font-size: 18px;
    color: #333;
    font-style: italic;
    margin: 3px;

    /* Asegura el salto de línea */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* Indicadores (puntos) debajo del carrusel */
.carousel-indicators {
    display: none;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-top: 0px; /* Asegúrate de que haya suficiente espacio */
}

.carousel-indicators .indicator {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-indicators .indicator.active {
    background-color: #fff; /* Color de los puntos activos */
}


/*Busqueda*/
.busq {
    display: flex;
    justify-content: flex-end;
    padding: 10px;

}

#searchForm {
    display: flex;
    justify-content: space-between;
    /* Espaciado uniforme entre elementos */
    align-items: center;
}

#searchInput {
    flex: 1;
    padding: 12px;
    border-radius: 5px;
    border: 2px solid #c0bfbf;
    background-color: #ffffff;
    color: black;
    margin-right: 5px;
}

#searchButton {
    padding: 12px;
    border-radius: 5px;
    border: none;
    background-color: #54A5DB;
    color: white;
    cursor: pointer;
}

#searchButton:hover {
    background-color: #1a7ec2;
    /* Cambia de color al pasar el cursor */
}


/*Notas*/

.barra-titulo {
    background-color: #54a5db;
    /* Color de fondo azul */
    color: white;
    /* Color del texto en blanco */
    height: 50px;
    /* Altura de la barra */
    display: flex;
    /* Usamos flexbox para centrar el texto */
    align-items: center;
    /* Centra verticalmente el contenido */
    width: 100%;
    /* Ocupa todo el ancho de la ventana */
}

.barra-titulo h1 {

    color: white;
    /* Cambia el color del texto a blanco */
    text-decoration: none;
    /* Quita el subrayado */
    max-width: 900px;
    /* Ancho máximo del título */
    width: 100%;
    /* Asegura que ocupe todo el ancho permitido */
    margin: 0;
    /* Elimina márgenes por defecto del <h1> */
    font-size: 2rem;
    /* Tamaño del texto */
    font-weight: bold;
    /* Texto en negrita */
    margin-left: 60px;
}

.contenido {
    display: flex;
    max-width: 80%;
    margin: 10px auto;
    gap: 10px;
    align-items: normal;
}

.contenido .izquierda {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: normal;
    text-align: left;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 0px;
}


.contenido .derecha {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px; /* Espaciado entre las notas */
}

.nota {
    flex-grow: 1; /* Todas las notas ocupan el mismo espacio */
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 0px;
    overflow: hidden; /* Evita que elementos desborden */
}

.contenido img, .nota img {
    width: 100%;
    height: auto;
    padding-top: 15px;
    object-fit: cover;
}

.contenido h2, .nota h3 {
    font-size: 19px;
    text-align: left;
    left: 0;
    right: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5rem;
    font-weight: 200;
}

.contenido p, .nota p {
    margin: 0;
    padding-top:10px;
    padding-bottom:7px;
    font-size: 16px;
    line-height: 1;
    color: #333;
}

.izquierda p.caption {
    margin: 0;
    text-align: left;
    margin-bottom: 5px;
    line-height: 1.3;
}

.nota p.caption {
     font-size: 1rem;
     text-align: left;
    margin-bottom: 5px;
    line-height: 1.3;
}


.desca {
    margin-top: 10px; /* Espacio entre la imagen y la descripción */
    font-size: 14px; /* Tamaño de fuente de la descripción */
    color: #333; /* Color de texto */
    line-height: 1.5; /* Altura de línea para mejorar la legibilidad */
    text-align: justify; /* Justificar el texto para mayor alineación */
    clear: both; /* Asegura que el texto no se quede flotando junto a la imagen */
    padding: 10px; /* Añade un pequeño espacio interno alrededor del texto */
    background-color: #fff; /* Fondo blanco para la descripción (opcional) */
    z-index: 1; /* Asegura que la descripción esté por encima si hay otros elementos flotantes */
}

.materiales-wrap { padding: 0 12px 40px; }
.page-title { text-align: center; margin: 18px 0 10px; font-size: 2.2rem; }

.materials-subnav {
  display: flex; justify-content: center; gap: 10px; 
  padding: 10px 12px; margin: 0 auto 18px; 
}
.materials-subnav .pill {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: saturate(140%) blur(4px);
  font-weight: 600; font-size: .95rem; color: #0a3d66;
  transition: transform .08s ease, box-shadow .2s ease;
}
.materials-subnav .pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.materials-subnav .pill.is-active { background: #0a7ad1; color: #fff; border-color: transparent; }

.alert-error { color:#b00; text-align:center; }
.empty { text-align:center; opacity:.8; }

.material-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; 
  align-items: start;
}

/* Tarjeta con contraste sobre fondo */
.material-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 14px;
}

/* Preview con CTA flotante */
.thumb-link { position: relative; display:block; overflow:hidden; border-radius:12px; }
.thumb { width:100%; height:auto; display:block; border-radius:12px; }
.thumb-cta {
  position:absolute; bottom:10px; right:10px; 
  background: rgba(10,122,209,.95); color:#fff; 
  padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700;
  opacity:0; transform: translateY(6px); transition:.2s ease-in-out;
}
.thumb-link:hover .thumb-cta { opacity:1; transform:translateY(0); }

.card-title { margin: 12px 0 6px; font-size: 1.25rem; }
.card-desc { margin: 0 0 12px; line-height: 1.45; }

.btns { display:flex; flex-wrap:wrap; gap:8px; }
.btn {
  display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none;
  background:#0a7ad1; color:#fff; font-weight:700; font-size:.95rem;
  box-shadow: 0 6px 16px rgba(10,122,209,.2);
}
.btn:hover { filter: brightness(1.05); }
.btn-zip { background:#0a3d66; }

/* Layout general */
.downloads { padding: 16px 24px 40px; }
.downloads-title { font-size: 44px; line-height: 1.1; margin: 8px 0 8px; }

/* Tabs subrayadas */
.downloads-tabs { display:flex; gap:18px; margin: 6px 0 26px; }
.downloads-tabs a {
  position: relative; text-decoration: none; color: #222; opacity:.85; font-weight:600;
  padding-bottom: 6px;
}
.downloads-tabs a:hover { opacity: 1; }
.downloads-tabs a.is-active::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:#7c3aed; /* violeta suave como en el ejemplo */
  border-radius:2px;
}

/* Título de grupo (Afiches, etc.) */
.group-title { color:#7c3aed; font-size: 18px; font-weight:700; margin: 14px 0; }

/* Grid de tarjetas */
.downloads-list { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 28px 40px; }

/* Card */
.download-card {
  background: rgba(255,255,255,.95); /* deja ver levemente el fondo */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 14px;
  transition: transform .08s ease, box-shadow .2s ease;
}
.download-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.09); }

/* Thumb cuadrada */
.thumb-wrap { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #f3f4f6; }
.thumb-wrap img { width:100%; height:100%; object-fit: cover; display:block; }

/* Título */
.card-title { font-size: 20px; font-weight: 700; margin: 12px 0 6px; }

/* Botón fantasma gris */
.card-actions { margin-top: 8px; display:flex; gap:10px; flex-wrap: wrap; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 10px;
  background: #f3f4f6; color:#111; text-decoration:none; font-weight:600;
  border: 1px solid #e5e7eb;
}
.btn-ghost:hover { background: #eaecef; }
.btn-ghost .ico { width:18px; height:18px; }







/*Footer - pie de pagina*/
.container-footer {
    width: 100%;
    background-color: rgba(128, 128, 128, 0.1); /* Gris translúcido */;
    /* Aquí el último valor (0.7) controla la opacidad */
}

.container-footer footer {
    max-width: 900px;
    margin: auto;
}

.search-container {
    width:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 170px;
}

.search-input {
    width: 100px;
    height: 25px;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.search-button {
    padding: 3px 8px;
    background-color: #fff;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

.search-button:hover {
    background-color: #ddd;
}

.container-footer footer .logo-footer {
    text-align: center;
}

.container-footer footer .logo-footer img {
    width: 75px;
    padding: 0px;
}
/* animation: move-vector 2s linear infinite;
@keyframes move-vector {
    0%{
        transform: translateY(15px);
    }50%{
        transform: translateY(0px);
    }100%{
        transform: translateY(15px);    
    }  

    AL SACAR LAS BARRAS DE COMENTARIO EL LOGO FINAL SE MUEVE  */


.container-footer footer .redes-footer {
    display: flex;
    justify-content: center;
}

.container-footer footer .redes-footer .icon-redes-footer {
    font-size: 16px;
    margin: 10px;
    background: #d9d9d9;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: #535353;
}

footer .redes-footer .fa-facebook-f:hover {
    background: #41579A;
    color: #fff;
}

footer .redes-footer .fa-twitter:hover {
    background: #00acee;
    color: #fff;
}

footer .redes-footer .fa-instagram:hover {
    background: linear-gradient(to top right, #FCDE30, #E9712A, #D2313B, #AE4198, #7540A1, #5443A8);
    color: #fff;
}

footer .redes-footer .fa-whatsapp:hover {
    background: #25d366;
    color: #fff;
}

/* YouTube */
footer .redes-footer .fa-youtube:hover {
    background: linear-gradient(to top right, #FF0000, #FF3C00, #FF0000); /* Rojo característico de YouTube */
    color: #fff;
}

/* Flickr */
footer .redes-footer .fa-flickr:hover {
    background: linear-gradient(to top right, #FF0084, #A30789, #FF0084); /* Rojo y morado de Flickr */
    color: #fff;
}

.container-footer footer hr {
    border: none;
    height: 2px;
    background: #8b8b8b;
}

.container-footer h4 {
    font-family: 'Overpass', sans-serif;
    text-align: center;
    color: #333;
    padding:2px;
    font-weight: 200;
    font-size: 0.6rem;
}

#wrapper-admin .logo {

    width: 45%;
    /* cambiar el ancho */
    height: auto;
    /* Mantener la proporción */
    border: 2px solid #000;
    /* Agregar un borde */
    /* También puedes cambiar la imagen de fondo, si es necesario */
    background-image: url('images/news.png');
    background-size: cover;
    /* Ajustar el tamaño */
}

#footer .container span {
    font-size: 15px;
}

.ocultar {
    display: none;
    /* Oculta el elemento */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'AMSIPRO', sans-serif;
    font-weight: normal; /* Puedes ajustar el peso de la fuente aquí si es necesario */
}

p, .news-content p, .contenidos p {
    font-family: 'AMSIPRO', sans-serif;
    font-weight: normal;
    font-size: 1rem; /* Ajusta el tamaño del texto de los párrafos */
}

.redes-footer{
    display: flex;
    justify-content: center;
}

/* Estilo para el botón de la flecha en el footer */
.scroll-to-top {
    position: absolute;
    bottom: 20px; /* Asegura que esté al fondo del footer */
    right: 20px; /* Asegura que esté alineada a la derecha */
    background-color: #007bff; /* Color de fondo moderno */
    color: #fff; /* Color del ícono */
    padding: 10px;
    border-radius: 50%; /* Flecha redondeada */
    font-size: 24px; /* Tamaño del ícono */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    display: none; /* Inicialmente oculto */
    z-index: 1000; /* Asegura que esté encima de otros elementos */
    transition: all 0.3s ease; /* Transición suave para el hover */
}

.scroll-to-top:hover {
    background-color: #0056b3; /* Cambio de color al pasar el mouse */
    transform: translateY(-5px); /* Animación de subida */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Sombra más fuerte */
    cursor: pointer;
}

.scroll-to-top i {
    font-size: 24px; /* Tamaño del ícono */
    transition: transform 0.2s ease; /* Efecto de rotación suave */
}

/* Efecto de rotación del ícono al pasar el ratón */
.scroll-to-top:hover i {
    transform: rotate(0deg); /* Gira el ícono al pasar el ratón */
}




/* RESPONSIVE  */

/* Para pantallas de resolución nativa 1920x1080 */
@media (min-width: 1920px) and (min-height: 1080px) {

    .news-content {
        font-size: 22px;
        line-height: 1.8;
        padding: 15px;
    }

    .news-content p {
        font-size: 20px;
        line-height: 1.8;
    }

    .barra-titulo {
        height: 80px;
    }

    .barra-titulo h1 {
        font-size: 2.8rem;
        margin-left: 80px;
    }

    .contenido {
        max-width: 90%;
        gap: 20px;
    }

    .contenido .izquierda {
        padding: 20px;
        font-size: 18px;
    }

    .contenido p {
        font-size: 18px;
        line-height: 1;
    }

    .nota {
        padding: 20px;
        font-size: 17px;
    }

    .nota p {
        font-size: 16px;
        line-height: 1.7;
    }
}


/* Para pantallas de hasta 1440x900 (16 pulgadas o resoluciones HD+) */
@media (max-width: 1440px) and (min-height: 800px) {

    .news-content {
        font-size: 16px;
    }

    .news-content p {
        font-size: 15px;
        line-height: 1.5;
    }

    .barra-titulo {
        height: 50px;
    }

    .barra-titulo h1 {
        font-size: 2rem;
        margin-left: 50px;
    }
}

/* Para pantallas de hasta 1600x900 (17 pulgadas o más grandes, resolución HD+) */
@media (max-width: 1600px) and (min-height: 900px) {

    .news-content {
        font-size: 18px;
    }

    .news-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .barra-titulo {
        height: 60px;
    }

    .barra-titulo h1 {
        font-size: 2.2rem;
        margin-left: 60px;
    }
}

/* Para pantallas mayores a 1600px (Full HD o más grandes) */
@media (min-width: 1601px) {
 


    .news-content {
        font-size: 20px;
    }

    .news-content p {
        font-size: 18px;
        line-height: 1.8;
    }

    .barra-titulo {
        height: 70px;
    }

    .barra-titulo h1 {
        font-size: 2.5rem;
        margin-left: 70px;
    }
}


/* Para pantallas de hasta 1366x768 (15 pulgadas típicas) */
@media (max-width: 1366px) and (min-height: 600px) {

    .news-content {
        font-size: 22px;
    }

    .news-content p {
        font-size: 13px;
        line-height: 1.4;
    }

    .barra-titulo {
        height: 40px;
    }

    .barra-titulo h1 {
        font-size: 1.5rem;
        margin-left: 40px;
    }
}

/* Para pantallas de hasta 1280x720 (resolución común en notebooks de 14 pulgadas) */
@media (max-width: 1280px) and (min-height: 600px) {


    .news-content {
        font-size: 13px;
    }

    .news-content p {
        font-size: 12px;
        line-height: 1.3;
    }

    .barra-titulo {
        height: 35px;
    }

    .barra-titulo h1 {
        font-size: 1.4rem;
        margin-left: 30px;
    }
}

/* Para pantallas de hasta 1024x768 (13 pulgadas típicas o notebooks compactas) */
@media (max-width: 1024px) and (min-height: 600px) {

    .news-content {
        font-size: 12px;
        height: 70px;
    }

    .news-content p {
        font-size: 11px;
        line-height: 1.2;
    }

    .barra-titulo {
        height: 30px;
    }

    .barra-titulo h1 {
        font-size: 1.2rem;
        margin-left: 20px;
    }

    .nav-list li a {
        margin: 0 10px;
    }

    articles {
        gap: 0px;
    }

    articles-left {
        gap:10px;
    }

    article p {
        font-size: 12px;
    }
}





@media screen and (max-width: 960px) {
    article {
        container: card/inline-size;
    }
}


@media (max-width: 768px) {

    .redes-container {
        display: flow-root;
    }

    .search-input {
    width: 67px;
    height: 19px;
    }

    .search-button {
    padding: 3px 0px;
    }

    .news-content {
        font-size: 14px;
        bottom: 10px;
        /* Tamaño de fuente reducido para pantallas pequeñas */
    }

    .news-item {
        height: auto;
    }


/*

    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: absolute;
        left: 10px;
        transform: translateY(10%);
        z-index: 1003;
        width: 10px;
    }

*/

    .nav-list.active {
        display: flex; /* Muestra el menú al hacer clic */
    }

    .nav-list li {
        margin: 10px 0; /* Espaciado vertical entre los elementos */
    }

    .nav-list li a {
        font-size: 17px; /* Ajusta el tamaño del texto en móvil */
    }

    .logohd {
        max-width: 60%; /* Ajusta el tamaño máximo del logo en móviles */
    }

    .search-container {
        padding-left: 20px;
    }

}

@media (max-width: 500px) {

    .redes-container {
        display: block;
    }

.carousel-button.next {
    right: 10px;
}
.carousel-button {
    top: 55%;
    width: 30px;
    height: 30px;
}

    .red p {
        font-size: 15px;
        margin-right: 0px;
    }

    .news-content {
    padding: 1px;
}

    .contenido {
        max-width: 100%;
        margin: 0px;
        padding: 10px;
        display: flow-root;
        gap: 70px;
    }

    .carousel-container {
        max-width: 100%; 
        margin: 1px auto;
        margin-top: 0px;
    }
}

@media (max-width: 480px) {
    .news-content {
        font-size: 12px;
        line-height: 1.5rem;
        height: 80px;
    }

    .redes-container {
        display: flow;
    }
}

@container card (min-width: 380px) {
    .article-wrapper {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 16px;
    }

    .news-content {
        font-size: 12px;
    }


    .article-body {
        padding-left: 0;
    }

    figure {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    figure img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .red span {
        font-size: 15px;
        line-height: 1;
    }

}