/* ==========================================================
   FUNDACIÓN EN LOS MEDIOS (template-medios.php)
   Implementa el marco "Fundación en los medios" de Figma
   (nodo 195:1970, 1920 x 4503).

   Reescrito a la escala real del diseño. La versión anterior se
   construyó midiendo sobre un PNG reducido y quedó al ~57%:
   contenedor 1150 en vez de 1516, titulares 34 en vez de 55 y
   cuerpo 15 en vez de 24. Las medidas de aquí salen de
   get_metadata sobre el marco, no de estimaciones.

   Escala del archivo (todo Lato): H1 80/700, H2 55/700,
   H3 48/700, H5 32/500, H6 24/400/1.26.
   ========================================================== */

.med-page-template {
    --med-cyan: #53AEC3;
    --med-cyan-dark: #326B78;
    --med-cyan-soft: #BADFE7;
    --med-cyan-bg: #EAF6F9;
    --med-ink: #141414;
    --med-muted: #4a5a60;
    --med-white: #FFFFFF;
    --med-borde: #D6DBDC;
    --med-placeholder: #B5B5B5;
    --med-container: 1556px;
    --med-font: "Lato", Arial, Helvetica, sans-serif;

    width: 100%;
    font-family: var(--med-font);
    color: var(--med-ink);
}

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

/* Contenido a 1516 (x 203..1719 en el marco). El panel del formulario
   tiene el suyo, 68px más ancho: ver .med-contacto. */
.med-container {
    max-width: var(--med-container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ----------------------------------------------------------
   Hero (1920 x 403)
   ---------------------------------------------------------- */
.med-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100vw;
    min-height: 403px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 0 44px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

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

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

/* Heading 1, dos líneas (caja de 1182 x 140 dimensionada a mano) */
.med-hero__title {
    margin: 0;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--med-white);
}

/* ----------------------------------------------------------
   Textos genéricos
   ---------------------------------------------------------- */

/* Heading 2 */
.med-heading {
    margin: 0 0 29px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--med-cyan);
}

.med-heading--center {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

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

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

/* ----------------------------------------------------------
   Intro: el texto arranca a 53 del hero (y 533 -> 586)
   ---------------------------------------------------------- */
.med-intro {
    padding: 53px 0 0;
}

/* ----------------------------------------------------------
   Notas de prensa: 3 x 455, hueco 70 / 29
   ---------------------------------------------------------- */
.med-notas {
    padding: 51px 0 0;
}

.med-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 455px));
    justify-content: center;
    gap: 29px 70px;
    margin-top: 65px;
}

/* Tarjeta 455 x 672, padding 30, la imagen 395 x 321 */
.med-card {
    display: flex;
    flex-direction: column;
    min-height: 672px;
    padding: 30px;
    border-radius: 20px;
    background-color: var(--med-cyan-bg);
}

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

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

.med-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.med-card__date {
    display: block;
    margin: 21px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--med-muted);
}

.med-card__medio {
    display: block;
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.26;
    color: var(--med-ink);
}

/* Heading 5 en negrita, recortado a las 3 líneas del diseño (caja 392 x 100).
   El min-height reserva las tres para que las tarjetas de la fila midan lo
   mismo aunque un titular ocupe menos. */
.med-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 21px 0 0;
    min-height: calc(3 * 1.1em);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--med-ink);
}

.med-card__title a {
    color: inherit;
    text-decoration: none;
}

.med-card__title a:hover,
.med-card__title a:focus-visible {
    text-decoration: underline;
}

/* 392 x 50 en el diseño */
.med-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: auto;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: var(--med-cyan);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--med-white);
    transition: background-color .2s ease;
}

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

.med-empty {
    margin: 40px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.26;
    text-align: center;
    color: var(--med-muted);
}

/* ----------------------------------------------------------
   Paginación (mismo componente que Noticias: cajas de 49,
   la activa y las flechas de 56 con trazo cian)
   ---------------------------------------------------------- */
.med-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 29px 0 0;
}

.med-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(--med-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}

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

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

.med-pagination .page-numbers.dots {
    min-width: 32px;
    padding: 0;
}

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

/* ----------------------------------------------------------
   Dossier de prensa: panel de 1011 x 358, alineado a la
   izquierda del contenido (x 180 en el marco, no centrado)
   ---------------------------------------------------------- */
.med-dossier {
    padding: 62px 0 0;
}

.med-kit {
    display: grid;
    grid-template-columns: minmax(0, 514px) minmax(0, 1fr);
    align-items: center;
    gap: 33px;
    max-width: 1011px;
    padding: 47px 45px 50px;
    border: 2px solid var(--med-cyan);
    border-radius: 20px;
}

.med-kit__brand {
    line-height: 0;
}

/* 514 x 261 */
.med-kit__logo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 514 / 261;
    object-fit: cover;
    border-radius: 12px;
}

.med-kit__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Heading 3 */
.med-kit__title {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--med-ink);
}

/* Heading 5 */
.med-kit__subtitle {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--med-muted);
}

/* 197 x 50 */
.med-kit__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 197px;
    min-height: 50px;
    margin-top: 36px;
    padding: 10px 24px;
    border-radius: 6px;
    background-color: var(--med-cyan);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--med-white);
    transition: background-color .2s ease;
}

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

/* ----------------------------------------------------------
   Contacta con nosotros

   El panel mide 1584 (x 168..1752), 68px más ancho que el
   contenido de 1516, así que la sección lleva su propio
   contenedor. Dentro, el formulario ocupa 1293 centrados.

   El formulario lo pinta Contact Form 7, así que aquí se
   estilan sus clases dentro del panel.
   ---------------------------------------------------------- */
.med-contacto {
    padding: 76px 0 70px;
}

.med-contacto .med-container {
    max-width: 1624px;
}

.med-contacto__panel {
    padding: 36px 0 38px;
    border-radius: 30px;
    background-color: var(--med-cyan-bg);
}

/* Heading 2 centrado, a 36 del borde del panel */
.med-contacto__panel .med-heading {
    max-width: none;
    margin: 0 0 19px;
    text-align: center;
}

.med-form {
    max-width: 1293px;
    margin: 0 auto;
}

/* Dos columnas con hueco de 49. En el diseño miden 610 y 632; aquí van
   iguales, que la diferencia de 22px no se aprecia y así reparten bien. */
.med-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 49px;
}

/* 19px entre todos los elementos del formulario: es el ritmo del diseño
   (título, dos filas, mensaje, consentimiento y botón, todos a 19). */
.med-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 19px;
}

/* CF7 convierte en <br> el salto de línea que hay dentro de cada <label> del
   editor, y ese <br> mete una línea de 17px por campo: la fila pasaba de 75 a
   93 y el botón caía 63px por debajo del diseño. Se anula aquí para que la
   maqueta no dependa de cómo se hayan escrito los saltos en el formulario.
   El <label> pasa a bloque porque contiene el wrap, que es de bloque. */
.med-form label {
    display: block;
}

.med-form label br {
    display: none;
}

/* width:100% es imprescindible: sin él el input se queda en su tamaño
   por defecto (size=40) y no llena la columna. */
.med-form input[type="text"],
.med-form input[type="email"],
.med-form input[type="tel"],
.med-form input[type="url"],
.med-form textarea {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--med-borde);
    border-radius: 6px;
    background-color: var(--med-white);
    font-family: var(--med-font);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--med-ink);
    outline: none;
}

/* 1293 x 62 en el diseño. `display: block` porque un textarea es inline-block
   y la caja de línea de su padre añadía 4px de holgura por debajo. */
.med-form textarea {
    display: block;
    height: 62px;
    min-height: 62px;
    padding: 14px 16px;
    resize: vertical;
}

.med-form input::placeholder,
.med-form textarea::placeholder {
    color: var(--med-placeholder);
    opacity: 1;
}

.med-form input:focus,
.med-form textarea:focus {
    border-color: var(--med-cyan);
    box-shadow: 0 0 0 3px rgba(83, 174, 195, .18);
}

/* Consentimiento centrado (el grupo va a x 434 de 1393, justo el centro).
   `line-height: 0` quita el strut de la caja de línea que envuelve al
   inline-flex de la etiqueta, que añadía 5px por debajo y bajaba el botón;
   la etiqueta recupera su propio interlineado. */
.med-form .wpcf7-acceptance,
.med-form .wpcf7-checkbox {
    display: block;
    line-height: 0;
    text-align: center;
}

.med-form .wpcf7-list-item {
    margin: 0;
}

.med-form .wpcf7-acceptance label,
.med-form .wpcf7-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    color: var(--med-ink);
}

.med-form input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    accent-color: var(--med-cyan);
}

/* Botón de 197 x 50, centrado y con texto blanco (aquí sí, a diferencia
   del formulario de Contacto, donde el diseño lo pone en oscuro).
   Va con el ancestro .med-page-template para ganar al reset.css del tema
   padre, que pinta los [type=submit] con border:1px solid #c36 y los
   rellena de magenta en hover. Ese reset carga después que esta hoja. */
.med-page-template .med-form .wpcf7-submit {
    display: block;
    min-width: 197px;
    height: 50px;
    margin: 19px auto 0;
    padding: 0 24px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 6px;
    background-color: var(--med-cyan);
    background-image: none;
    font-family: var(--med-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--med-white);
    cursor: pointer;
    transition: background-color .2s ease;
}

.med-page-template .med-form .wpcf7-submit:hover,
.med-page-template .med-form .wpcf7-submit:focus-visible {
    background-color: var(--med-cyan-dark);
    color: var(--med-white);
}

/* Los tres huecos invisibles de CF7, iguales que en Contacto: los <p> con
   que envuelve cada campo, el <fieldset> vacío de los campos ocultos y los
   márgenes de los hijos de screen-reader-response, que se escapan por
   colapso. Ese div no se puede ocultar: es el role="status" del envío. */
.med-form .wpcf7 p {
    margin: 0;
}

.med-form .hidden-fields-container {
    margin: 0;
    padding: 0;
    border: 0;
}

.med-form .screen-reader-response p,
.med-form .screen-reader-response ul {
    margin: 0;
}

.med-form .wpcf7-spinner {
    display: inline-block;
    margin: 0 0 0 10px;
    vertical-align: middle;
}

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

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

    .med-heading {
        margin-bottom: 20px;
        font-size: 36px;
    }

    .med-heading--center {
        max-width: 560px;
    }

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

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

    .med-notas {
        padding-top: 40px;
    }

    .med-grid {
        grid-template-columns: repeat(2, minmax(0, 455px));
        gap: 24px 30px;
        margin-top: 40px;
    }

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

    .med-card__title {
        font-size: 26px;
    }

    .med-card__date,
    .med-card__medio {
        font-size: 18px;
    }

    .med-dossier {
        padding-top: 44px;
    }

    .med-kit {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px 26px 32px;
    }

    .med-kit__title {
        font-size: 34px;
    }

    .med-kit__subtitle {
        font-size: 24px;
    }

    .med-contacto {
        padding: 50px 0 50px;
    }

    .med-contacto__panel {
        padding: 30px 26px 32px;
        border-radius: 20px;
    }

    .med-form__row {
        gap: 20px;
    }

    .med-form input[type="text"],
    .med-form input[type="email"],
    .med-form input[type="tel"],
    .med-form input[type="url"],
    .med-form textarea {
        height: 48px;
        font-size: 18px;
    }

    .med-form textarea {
        height: 56px;
        min-height: 56px;
        padding: 12px 16px;
    }

    .med-form .wpcf7-form-control-wrap {
        margin-bottom: 14px;
    }

    .med-form .wpcf7-acceptance label,
    .med-form .wpcf7-checkbox label {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .med-hero {
        min-height: 240px;
        padding: 0 0 24px;
    }

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

    .med-heading {
        font-size: 26px;
    }

    .med-heading--center {
        max-width: none;
    }

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

    .med-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        margin-top: 30px;
    }

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

    .med-card__title {
        min-height: 0;
        font-size: 21px;
    }

    .med-card__date,
    .med-card__medio {
        font-size: 16px;
    }

    .med-card__cta,
    .med-kit__cta {
        min-height: 44px;
        font-size: 16px;
    }

    .med-kit {
        padding: 20px 16px 24px;
        border-radius: 14px;
    }

    .med-kit__title {
        font-size: 24px;
    }

    .med-kit__subtitle {
        font-size: 19px;
    }

    .med-kit__cta {
        min-width: 0;
        margin-top: 22px;
    }

    .med-contacto {
        padding: 36px 0 40px;
    }

    .med-contacto__panel {
        padding: 24px 18px 26px;
        border-radius: 14px;
    }

    .med-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .med-form input[type="text"],
    .med-form input[type="email"],
    .med-form input[type="tel"],
    .med-form input[type="url"],
    .med-form textarea {
        height: 44px;
        padding: 0 14px;
        font-size: 16px;
    }

    .med-form textarea {
        height: 92px;
        min-height: 92px;
        padding: 11px 14px;
    }

    .med-form .wpcf7-form-control-wrap {
        margin-bottom: 12px;
    }

    .med-form .wpcf7-acceptance label,
    .med-form .wpcf7-checkbox label {
        font-size: 15px;
    }

    .med-form input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .med-page-template .med-form .wpcf7-submit {
        min-width: 0;
        width: 100%;
        height: 46px;
        font-size: 17px;
    }

    .med-empty {
        font-size: 17px;
    }
}