/* ==========================================================
   NOTICIAS - Listado de noticias (template-noticias.php)
   Implementa el marco "Noticias" de Figma (nodo 210:1074, 1920 x 5250).
   Medidas tomadas con get_metadata + medición de la tinta sobre
   get_screenshot por nodo, no estimadas: ver sección 15 de CLAUDE.md.
   Escala del archivo (todo Lato): H1 80/700, H2 55/700, H3 48/700,
   H5 32/500, H6 24/400/1.26.
   ========================================================== */

.not-page-template {
    --not-cyan: #53AEC3;
    --not-cyan-dark: #326B78;
    --not-cyan-soft: #BADFE7;
    --not-cyan-bg: #EAF6F9;
    --not-ink: #141414;
    --not-white: #FFFFFF;
    --not-container: 1556px;
    --not-font: "Lato", Arial, Helvetica, sans-serif;

    width: 100%;
    font-family: var(--not-font);
}

.not-page-template *,
.not-page-template *::before,
.not-page-template *::after {
    box-sizing: border-box;
}

/* El hero va pegado al header: las migas se ocultan desde header.php
   ($header_hide_breadcrumbs) y aquí se anula la separación heredada
   del wrapper de contenido. */
body.page-template-template-noticias .site-main,
.not-page-template {
    margin-top: 0;
    padding-top: 0;
}

/* Dos anchos, los dos del diseño: el texto y la rejilla van a 1516
   (x 202..1718) y el panel destacado a 1741 (x 90..1831). */
.not-container {
    max-width: var(--not-container);
    margin: 0 auto;
    padding: 0 20px;
}

.not-container--panel {
    max-width: 1781px;
}

/* ----------------------------------------------------------
   Hero (1920 x 403, título anclado abajo)
   ---------------------------------------------------------- */
.not-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100vw;
    height: 403px;
    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 0 49px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.not-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(50, 107, 120, .88) 0%, rgba(50, 107, 120, .70) 100%);
}

.not-hero .not-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Heading 1. Las dos líneas van al mismo cuerpo: medido sobre la tinta
   (pitch de 89px a escala nativa → 89 / 1,1 = 80). La caja de 140 que da
   Figma está dimensionada a mano y no cuadra con dos líneas de 88. */
.not-hero__title {
    margin: 0;
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--not-white);
}

/* ----------------------------------------------------------
   Intro
   ---------------------------------------------------------- */
.not-intro {
    padding: 86px 0 0;
}

/* Heading 6 */
.not-text {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--not-ink);
}

.not-text:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
   Botón (200 x 50 en el panel, 392 x 50 en la tarjeta)
   ---------------------------------------------------------- */
.not-btn {
    display: inline-block;
    min-width: 200px;
    padding: 12px 28px;
    border-radius: 16px;
    background-color: var(--not-cyan);
    color: var(--not-white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}

.not-btn:hover,
.not-btn:focus-visible {
    background-color: var(--not-cyan-dark);
    color: var(--not-white);
}

/* ----------------------------------------------------------
   Panel de entrada destacada (1741 x 612)
   ---------------------------------------------------------- */
.not-destacado {
    margin-top: 113px;
}

/* Columnas en fracciones, no en px: mantienen la proporción del diseño
   (682 de texto / 746 de imagen sobre 1517 de ancho interior) pero encogen.
   Con `682px 746px` el panel desbordaría en cualquier viewport por debajo
   de 1781, que es justo el tramo entre el breakpoint de 1024 y el diseño. */
/* Flex con envoltura en vez de rejilla, por dos motivos:
   1. Reproduce las columnas del diseño exactamente. Con bases de 560 y 746 y
      un hueco de 89, en los 1517 de ancho interior sobran 122 que se los lleva
      la columna de texto (la única con flex-grow): 682 de texto y 746 de
      imagen, los dos valores del Figma.
   2. Envuelve sola cuando las dos bases no caben, sin gastar un breakpoint, y
      sin el estiramiento que dejaba la imagen en una astilla en los anchos
      intermedios. El padding y el hueco van con clamp por lo mismo. */
.not-panel {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 4vw, 89px);
    padding: clamp(28px, 3vw, 60px) clamp(22px, 5.8vw, 112px) clamp(32px, 3.4vw, 66px);
    border-radius: 20px;
    background-color: var(--not-cyan-soft);
}

.not-panel__body {
    display: flex;
    flex: 1 1 560px;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

/* Heading 2 */
.not-panel__kicker {
    margin: 0 0 21px;
    font-size: 55px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--not-cyan);
}

/* Heading 3 */
.not-panel__titulo {
    margin: 0 0 35px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--not-ink);
}

.not-panel__titulo a {
    color: inherit;
    text-decoration: none;
}

.not-panel__titulo a:hover,
.not-panel__titulo a:focus-visible {
    text-decoration: underline;
}

/* Heading 6 */
.not-panel__texto {
    margin: 0 0 55px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--not-ink);
}

.not-panel__cta {
    margin-top: auto;
}

/* La imagen se estira a la altura de la columna de texto en vez de fijar
   su proporción: con un titular real de dos líneas el panel crece por encima
   de los 612 del diseño (que asumía el marcador "TITULAR", de una sola), y si
   la imagen no acompaña queda un hueco. Los 486 del diseño quedan como suelo. */
/* El ancho gobierna la proporción: antes, con la altura libre, era esta la
   que fijaba el ancho (imagen de 862 en una columna de 714) y el panel
   desbordaba; el max-width lo impide y evita además que al envolver la imagen
   crezca por encima de los 746 del diseño.
   A dos columnas la imagen se estira a la altura de la columna de texto, que
   con un titular real de dos líneas pasa de los 486 del diseño. Es a propósito:
   el Figma los tiene iguales porque su titular es el marcador "TITULAR", de una
   sola línea, y dejar la imagen a 486 abriría un hueco bajo ella. */
.not-panel__media {
    flex: 1 1 746px;
    max-width: 746px;
    aspect-ratio: 746 / 486;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.not-panel__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------------
   Listado: titular + rejilla 3 x 3
   ---------------------------------------------------------- */
.not-listado {
    margin-top: 90px;
}

/* Heading 2, centrado y en cian (medido: pitch de 61px → 61 / 1,1 = 55) */
.not-listado__title {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 55px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: var(--not-cyan);
}

.not-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 54px 75px;
}

/* ----------------------------------------------------------
   Tarjeta de noticia (455 x 763)
   ---------------------------------------------------------- */
.not-card {
    display: flex;
    flex-direction: column;
    min-height: 763px;
    padding: 30px;
    border-radius: 20px;
    background-color: var(--not-cyan-bg);
}

.not-card__media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

.not-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 395 / 321;
    object-fit: cover;
}

.not-card__fecha {
    display: block;
    margin-top: 19px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--not-ink);
}

/* Heading 5 en negrita. El `min-height` reserva las 3 líneas del diseño
   para que todas las tarjetas de la fila midan lo mismo pase lo que pase
   con la longitud del titular; el clamp corta si se pasa. */
.not-card__titulo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 19px 0 0;
    min-height: calc(3 * 1.1em);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--not-ink);
}

.not-card__titulo a {
    color: inherit;
    text-decoration: none;
}

.not-card__titulo a:hover,
.not-card__titulo a:focus-visible {
    text-decoration: underline;
}

/* Heading 6, 4 líneas reservadas igual que el titular */
.not-card__texto {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 19px 0 0;
    min-height: calc(4 * 1.26em);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--not-ink);
}

/* `margin-top: auto` en vez de los 40px del diseño: empuja el botón al fondo
   de la tarjeta, así queda alineado entre las tres de la fila aunque un
   titular ocupe menos líneas. Los 40px quedan como separación mínima. */
.not-card__cta {
    display: block;
    width: 100%;
    margin-top: auto;
}

/* ----------------------------------------------------------
   Paginación (cajas de 49, la activa de 56 con trazo)
   ---------------------------------------------------------- */
.not-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 78px 0 132px;
}

.not-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 49px;
    height: 49px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--not-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.not-pagination a.page-numbers:hover,
.not-pagination a.page-numbers:focus-visible {
    background-color: var(--not-cyan-bg);
    color: var(--not-ink);
}

.not-pagination .page-numbers.current {
    min-width: 56px;
    height: 56px;
    border-color: var(--not-cyan);
    color: var(--not-cyan);
}

.not-pagination .page-numbers.dots {
    min-width: 32px;
    padding: 0;
    border-color: transparent;
}

.not-pagination .prev,
.not-pagination .next {
    min-width: 56px;
    height: 56px;
    border-color: var(--not-cyan);
    font-size: 26px;
    color: var(--not-cyan);
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .not-hero {
        height: 320px;
        padding: 0 0 36px;
    }

    .not-hero__title {
        font-size: 44px;
    }

    .not-intro {
        padding-top: 56px;
    }

    .not-text {
        font-size: 20px;
    }

    .not-destacado {
        margin-top: 60px;
    }

    .not-panel {
        gap: 34px;
        padding: 40px 40px 44px;
    }

    .not-panel__kicker {
        margin-bottom: 14px;
        font-size: 36px;
    }

    .not-panel__titulo {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .not-panel__texto {
        margin-bottom: 28px;
        font-size: 20px;
    }

    .not-listado {
        margin-top: 60px;
    }

    .not-listado__title {
        max-width: 560px;
        margin-bottom: 30px;
        font-size: 36px;
    }

    .not-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 30px;
    }

    .not-card {
        min-height: 0;
        padding: 22px;
    }

    .not-card__titulo {
        font-size: 26px;
    }

    .not-card__texto {
        font-size: 20px;
    }

    .not-card__fecha {
        font-size: 18px;
    }

    .not-pagination {
        margin: 56px 0 80px;
    }
}

@media (max-width: 767px) {
    .not-hero {
        height: 260px;
        padding: 0 0 30px;
    }

    .not-hero__title {
        font-size: 30px;
    }

    .not-hero__title br {
        display: none;
    }

    .not-intro {
        padding-top: 40px;
    }

    .not-text {
        font-size: 17px;
    }

    .not-destacado {
        margin-top: 40px;
    }

    .not-panel {
        gap: 26px;
        padding: 26px 20px 30px;
        border-radius: 14px;
    }

    .not-panel__kicker {
        font-size: 26px;
    }

    .not-panel__titulo {
        font-size: 22px;
    }

    .not-panel__texto {
        margin-bottom: 22px;
        font-size: 17px;
    }

    .not-listado {
        margin-top: 40px;
    }

    .not-listado__title {
        max-width: none;
        font-size: 26px;
    }

    .not-listado__title br {
        display: none;
    }

    .not-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .not-card {
        padding: 18px;
        border-radius: 14px;
    }

    .not-card__titulo {
        min-height: 0;
        font-size: 21px;
    }

    .not-card__texto {
        min-height: 0;
        font-size: 17px;
    }

    .not-card__fecha {
        font-size: 16px;
    }

    .not-btn {
        min-width: 0;
        padding: 11px 22px;
        font-size: 16px;
        border-radius: 12px;
    }

    .not-pagination {
        gap: 6px;
        margin: 40px 0 50px;
    }

    .not-pagination .page-numbers {
        min-width: 40px;
        height: 40px;
        padding: 0 6px;
        font-size: 16px;
    }

    .not-pagination .page-numbers.current,
    .not-pagination .prev,
    .not-pagination .next {
        min-width: 44px;
        height: 44px;
    }

    .not-pagination .prev,
    .not-pagination .next {
        font-size: 20px;
    }
}