/* Custom fonts for the blog */


/* merriweather */
/*@font-face {
    font-family: 'merriweather';
    src: url('../../fonts/blog/Merriweather/Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/

/* inter — cargado vía Google Fonts en blogWeb.css */

/* caveat */
/*@font-face {
    font-family: 'caveat';
    src: url('../../fonts/blog/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/

.container-fondo {
    background-color: rgb(250, 250, 250) !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container-fondo h1,
h2,
h3,
h4,
h5,
p,
time {
    font-family: 'Raleway', sans-serif !important;
}

.container-fondo  h1, h2, h3{
    font-weight: bold !important;
}

/* Contenedor principal de la noticia */
.noticia-container {
    background-color: #ffffff;
    border-radius: 25px !important;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.1);
    /* 0 4 10 */
    text-align: center;
    margin: 50px 0px;
    padding-bottom: 30px;

}

/* Título centrado */
.noticia-titulo-container {
    display: flex;
    /* activa flexbox */
    align-items: center;
    /* centra verticalmente */
    justify-content: center;
    /* centra horizontalmente */

    min-height: 60px;
    /* opcional: altura mínima para centrar bien */
    text-align: left;
    /* asegura que varias líneas también queden centradas */

    gap: 30px;

}

.noticia-titulo {
    font-weight: 800;
    font-size: 50px;
    color: #1d1d1d;
    padding: 60px 0px 0px 0px;
    margin: 0px 20px;
    width: min(100%, 800px);
    /* Ancho máximo para que se vea bien centrado */

}

/* Imagen */
.noticia-imagen-container {
    padding: 20px 30px 0px;
    margin: 0px 100px;
}

/* Contenido HTML */
.noticia-contenido {
    font-size: 2.3rem;
    line-height: 1.5;
    color: #333;
    margin-top: 0;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding: 30px 20px;
}

/* Base para imágenes inline en el artículo. SIN !important para que las clases
   específicas .m-img--landscape / .m-img--portrait (definidas abajo) y los
   estilos inline puedan sobrescribir. */
.noticia-contenido img {
    display: block;
    margin: 16px auto;
    max-width: 100%;
    width: auto;
    height: auto;
    padding: 0;
    box-sizing: border-box;
}

/* Imágenes dentro de links o figures en el contenido */
.noticia-contenido figure {
    display: block;
    max-width: 100%;
    overflow: visible;
    margin: 16px auto;
    text-align: center;            /* centra el pie de foto y la imagen si es width auto */
}

.noticia-contenido figure figcaption {
    font-size: 18px;
    padding-top: 10px !important;  /* !important para sobrescribir el padding de Bootstrap */
    color: #666;
    text-align: center;
    margin-top: 6px;
    font-style: italic;
}

.noticia-contenido a img,
.noticia-contenido figure img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    padding: 0;
    margin-left: auto;             /* centra dentro de su contenedor */
    margin-right: auto;
}

/* ===========================================================================
   Clases de orientación de imagen — las asigna Claude (o el editor a mano) al
   reescribir el HTML según el aspecto real de la foto. Mayor especificidad que
   .noticia-contenido img, así que ganan sin necesidad de !important.
   =========================================================================== */

/* Imagen más ancha que alta (paisaje, gráfico horizontal, banner, captura
   desktop): ocupa todo el ancho del contenedor. Centrada por margen auto. */
.noticia-contenido img.m-img--landscape {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Imagen más alta que ancha (retrato, infografía vertical, captura móvil):
   limitada en altura para no romper el flujo de lectura, ancho automático
   para mantener aspect-ratio. Centrada horizontalmente. */
.noticia-contenido img.m-img--portrait {
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* iframes responsivos (YouTube, Spotify, etc.) */
.noticia-contenido iframe {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablas responsivas */
.noticia-contenido table {
    display: block;
    overflow-x: auto;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cualquier elemento con ancho fijo dentro del contenido */
.noticia-contenido * {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 990px) {
    .noticia-imagen-container {
        padding: 20px 16px 0;
        margin: 0;
    }

    .noticia-titulo {
        font-size: 30px;
    }

    .noticia-contenido {
        font-size: 1.1rem;
        padding: 16px 20px;
    }

    .nueva-noticia-container {
        font-size: 1.1rem;
        margin: 16px;
        padding: 16px 20px;
    }
}

@media (max-width: 600px) {
    .noticia-container {
        margin: 16px 0;
        padding: 16px !important;
    }

    .noticia-titulo {
        font-size: 22px;
        padding: 16px 0 0 0;
        margin: 0;
    }

    .noticia-titulo-container {
        gap: 12px;
        flex-wrap: wrap;
    }

    .noticia-contenido {
        font-size: 1rem;
        text-align: left;
        padding: 16px 12px;
    }

    .noticia-contenido img {
        margin: 8px auto;
        padding: 0;
    }
}

.noticia-imagen {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}

.mi_clase_css {
    width: 50%;
    /* ancho de la línea */
    margin: 5px auto;
    /* 5px arriba y abajo, centrado horizontal */
    border: none;
    /* elimina el estilo por defecto */
    border-top: 2px solid #000;
    /* línea personalizada */
}

.wp-block-image {
    padding: 10px 0px;
}

/* Sección de comentarios */
.comentarios-container {
    background-color: #333;
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.comentarios-container h4 {
    margin-bottom: 15px;
}

.comentarios-container .form-control {
    border-radius: 5px;
}


.nueva-noticia-container {
    font-size: 2.3rem;
    line-height: 1.5;
    color: #333;
    margin: 30px;
    text-align: justify;
    /* Justifica el texto */
    margin-left: auto;
    /* Centra el bloque */
    margin-right: auto;
    /* Centra el bloque */
    max-width: 850px;
    /* Ancho máximo para que se vea bien centrado */
    padding: 30px 0px;
}

.label-nueva-noticia-item {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin: 15px 0px;
}

.nueva-noticia-item {
    margin: 20px 20px;
}

.nueva-noticia-contenido-container {
    margin: 30px 50px;
}

.nueva-noticia-contenido {
    min-height: 900px;
}
/* ── Artículos relacionados ─────────────────────────────── */
.relacionadas-titulo {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}

.relacionadas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

@media (max-width: 900px) {
    .relacionadas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .relacionadas-grid { grid-template-columns: 1fr; }
}

.relacionada-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s;
}
.relacionada-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    text-decoration: none;
    color: inherit;
}

.relacionada-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.relacionada-body {
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.relacionada-tiempo {
    font-family: 'Raleway', sans-serif;
    font-size: .8rem;
    color: #888;
    margin: 0 0 4px 0;
}

.relacionada-titulo-card {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.relacionada-excerpt {
    font-family: 'Raleway', sans-serif;
    font-size: .85rem;
    color: #555;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.relacionada-fecha {
    font-family: 'Raleway', sans-serif;
    font-size: .8rem;
    color: #aaa;
    margin-top: auto;
}

/* Metadatos del artículo (autor, fecha, tiempo de lectura) */
.noticia-meta {
    font-family: 'Raleway', sans-serif;
    color: #888;
}