/*
Theme Name: Freepress Coop
Theme URI: http://freepress.coop
Version: 1.0
Description: Child Theme de Divi adpatado para este sitio web.
Author: Freepress S. Coop. Mad.
Author URI: http://www.freepress.coop
Template: Divi
*/

/* Estilos personalizados */

/* === MARAMAR — Variables globales === */
:root {
    --color-teal: #3EBB8F;
    --color-violeta: #6B4C9A;
    --color-azul: #3A6BB5;
    --color-teal-suave: #C8E8EA;
    --color-lavanda: #DDD0EE;
    --color-grafito: #2A2A2A;

    --font-titular: 'Nunito', sans-serif;
    --font-texto: 'Nunito Sans', sans-serif;
}

body {
    font-family: var(--font-texto);
    color: var(--color-grafito);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-titular);
}

/* === Blog module — noticias: cards de igual altura === */
.et_pb_posts .et_pb_post:not(.type-documento) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.et_pb_posts .et_pb_post:not(.type-documento) .post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.et_pb_posts .et_pb_post:not(.type-documento) .post-content-inner {
    flex: 1;
}

.et_pb_posts .et_pb_post:not(.type-documento) .et_pb_image_container {
    overflow: hidden;
    flex-shrink: 0;
}

.et_pb_posts .et_pb_post:not(.type-documento) .et_pb_image_container img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* === Blog module — documentos: imagen al lado del texto === */
.et_pb_post.type-documento {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
}

.et_pb_post.type-documento .et_pb_image_container {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
}

.et_pb_post.type-documento .et_pb_image_container img {
    display: block;
    margin: 0;
}

.et_pb_post.type-documento h2.entry-title,
.et_pb_post.type-documento .post-meta,
.et_pb_post.type-documento .post-content {
    grid-column: 2;
}

.et_pb_post.type-documento .post-meta {
    display: none;
}

/* === Blog module — botón "leer más" como botón de acción === */
.et_pb_posts .post-content a.more-link {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    background-color: #6B4C9A !important;
    color: #fff !important;
    text-align: center !important;
    font-family: var(--font-texto) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    text-decoration: none !important;
    border-radius: 22px !important;
    margin-top: 16px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    transition: background-color 0.2s ease !important;
}

.et_pb_posts .post-content a.more-link:hover {
    background-color: #2d6e72 !important;
    color: #fff !important;
}

.et_pb_posts .post-content a.more-link {
    font-size: 0 !important;
}

.et_pb_posts .post-content a.more-link::before {
    content: 'Saber más y registrar interés';
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-texto);
}

/* === Gravity Forms — tema Orbital personalizado === */
/* Variables definidas en .gform-theme--framework (nombre real del selector base de GF) */
.gform-theme--framework {
    --gf-color-primary:                   #3EBB8F;
    --gf-color-primary-rgb:               62,187,143;
    --gf-color-primary-contrast:          #ffffff;
    --gf-color-primary-contrast-rgb:      255,255,255;
    --gf-color-primary-darker:            #2da077;
    --gf-color-primary-lighter:           #2da077;
    --gf-color-out-ctrl-light:            #d0d0d0;
    --gf-color-in-ctrl-contrast:          #2A2A2A;
    --gf-radius:                          22px;
    --gf-radius-max-sm:                   22px;
    --gf-radius-max-md:                   22px;
    --gf-radius-max-lg:                   22px;
}

/* Ocultar título del formulario ("Contacto") 
.gform_wrapper .gform_heading {
    display: none !important;
}*/

/* Fuente Nunito Sans en todos los elementos del formulario */
.gform-theme--framework input,
.gform-theme--framework textarea,
.gform-theme--framework select,
.gform-theme--framework label,
.gform-theme--framework legend,
.gform-theme--framework button,
.gform-theme--framework .gfield_label,
.gform-theme--framework .gfield_description,
.gform-theme--framework .gfield_required {
    font-family: 'Nunito Sans', sans-serif !important;
}

/* Border radius 22px directo en los campos */
.gform-theme--framework input[type="text"],
.gform-theme--framework input[type="email"],
.gform-theme--framework input[type="tel"],
.gform-theme--framework input[type="number"],
.gform-theme--framework input[type="url"],
.gform-theme--framework select,
.gform-theme--framework textarea {
    border-radius: 22px !important;
}

/* Botón de envío */
.gform-theme--framework .gform-button,
.gform-theme--framework .gform-button--primary,
.gform-theme--framework button[type="submit"],
.gform-theme--framework input[type="submit"] {
    background-color: #3EBB8F !important;
    color: #ffffff !important;
    border-radius: 22px !important;
    font-family: var(--font-texto) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.gform-theme--framework .gform-button:hover,
.gform-theme--framework .gform-button--primary:hover,
.gform-theme--framework button[type="submit"]:hover,
.gform-theme--framework input[type="submit"]:hover {
    background-color: #2da077 !important;
}

/* "(Obligatorio)" en violeta de marca */
.gform-theme--framework .gfield_required {
    color: #6B4C9A !important;
}

/* === Shortcode [actividades_proximas] === */
.maramar-actividades {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px;
    font-family: 'Nunito Sans', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 980px) {
    .maramar-actividades { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .maramar-actividades { grid-template-columns: 1fr !important; }
}

.maramar-actividad {
    background: #f9f9fb;
    border-radius: 14px;
    border-top: 5px solid var(--color-teal);
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.maramar-actividad:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

/* Ciclo de colores en el borde superior */
.maramar-actividad:nth-child(3n+1) { border-top-color: var(--color-teal); }
.maramar-actividad:nth-child(3n+2) { border-top-color: var(--color-violeta); }
.maramar-actividad:nth-child(3n+3) { border-top-color: var(--color-azul); }

.maramar-actividad__imagen img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.maramar-actividad__cuerpo {
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 10px;
}

/* Fecha estilo badge grande centrado */
.maramar-actividad__fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin-bottom: 4px;
}

.maramar-actividad__dia {
    font-family: 'Nunito', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-grafito);
}

.maramar-actividad:nth-child(3n+1) .maramar-actividad__dia { color: var(--color-teal); }
.maramar-actividad:nth-child(3n+2) .maramar-actividad__dia { color: var(--color-violeta); }
.maramar-actividad:nth-child(3n+3) .maramar-actividad__dia { color: var(--color-azul); }

.maramar-actividad__mes {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #888;
    text-transform: uppercase;
    margin-top: 2px;
}

.maramar-actividad__titulo {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-grafito) !important;
    margin: 0;
    line-height: 1.3;
}

.maramar-actividad__titulo a {
    color: inherit !important;
    text-decoration: none !important;
}

.maramar-actividad__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: #777 !important;
}

.maramar-actividad__hora::before { content: '⏰ '; }
.maramar-actividad__lugar::before { content: '📍 '; }

.maramar-actividad__extracto {
    font-size: 14px;
    color: #666 !important;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.maramar-actividad__cta {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
    padding: 11px 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Nunito Sans', sans-serif;
    text-decoration: none !important;
    margin-top: auto;
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: transparent;
    border: 2px solid var(--color-teal);
    color: var(--color-teal) !important;
}

.maramar-actividad__cta:hover {
    background-color: var(--color-teal) !important;
    color: #fff !important;
}

/* ===================================================================
   RESPONSIVE FIXES — Divi 5 Theme Builder + Homepage Modules
   =================================================================== */

/* ─── HEADER ─────────────────────────────────────────────────────── */

/* 1. Header row: align-self:center en contenedor de 0px de alto coloca
      el centro de la fila en y=0, recortando la mitad superior del logo.
      Con especificidad 0,2,0 se supera el !important del CSS diferido
      (especificidad 0,1,0). padding-top baja el contenido del borde teal. */
.et-l--header .et_pb_row_0_tb_header {
    align-self: flex-start !important;
    padding-top: 8px !important;
}

/* 2. Logo height en tablet: el builder genera 72px en ≤1324px pero en
      desktop es 60px — la regresión hace el header más alto en tablet */
@media only screen and (max-width: 1324px) {
    .et_pb_menu_0_tb_header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img,
    .et_pb_menu_0_tb_header .et_pb_menu__logo-slot .et_pb_menu__logo-wrap img {
        height: 50px !important;
    }
}

/* 3. Botón "Dona ahora": sustituir padding porcentual (2%/12%) por píxeles fijos */
@media only screen and (max-width: 1324px) {
    .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
    .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover {
        padding-top:    10px !important;
        padding-right:  18px !important;
        padding-bottom: 10px !important;
        padding-left:   18px !important;
    }
}
@media only screen and (max-width: 767px) {
    .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
    .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover {
        padding-top:    12px !important;
        padding-right:  24px !important;
        padding-bottom: 12px !important;
        padding-left:   24px !important;
    }
}

/* 4. Menú móvil desplegable: fondo blanco, borde teal y sombra */
.et_pb_menu_0_tb_header .et_mobile_menu {
    background-color: #ffffff !important;
    border-top: 3px solid var(--color-teal) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 0 16px !important;
}
.et_pb_menu_0_tb_header .et_mobile_menu li a {
    color: var(--color-grafito) !important;
    padding: 10px 20px !important;
    display: block !important;
}
.et_pb_menu_0_tb_header .et_mobile_menu li a:hover {
    color: var(--color-teal) !important;
}

/* 5. Menú hamburguesa vs botón "Dona ahora": la columna del botón está
      después en el DOM y pinta encima del dropdown. Se crean contextos
      de apilamiento explícitos para que el menú quede siempre al frente. */
.et-l--header .et_pb_column_0_tb_header {
    position: relative;
    z-index: 10;
}
.et-l--header .et_pb_column_1_tb_header {
    position: relative;
    z-index: 1;
}

/* ─── FOOTER ─────────────────────────────────────────────────────── */

/* 6. Reset márgenes de <p> en tablet/móvil: el navegador añade ~1em
      por defecto, generando separación extra entre los sub-ítems.
      Solo se aplica en breakpoints donde los módulos ocupan más ancho
      que en desktop, para no alterar el ritmo visual del pie en desktop. */
@media only screen and (max-width: 1324px) {
    .et-l--footer .et_pb_text_inner p {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* 7. Sub-ítems: margin-top:-15% es relativo al ancho de la columna.
      En tablet/móvil las columnas son más anchas que en desktop
      (50% / 100% vs 20%), por lo que -15% genera más px negativos.
      Se sustituye por un valor fijo compacto y positivo. */
@media only screen and (max-width: 1324px) {
    .et-l--footer .et_pb_text_1_tb_footer,
    .et-l--footer .et_pb_text_2_tb_footer,
    .et-l--footer .et_pb_text_3_tb_footer,
    .et-l--footer .et_pb_text_4_tb_footer,
    .et-l--footer .et_pb_text_6_tb_footer,
    .et-l--footer .et_pb_text_7_tb_footer,
    .et-l--footer .et_pb_text_8_tb_footer,
    .et-l--footer .et_pb_text_9_tb_footer,
    .et-l--footer .et_pb_text_11_tb_footer,
    .et-l--footer .et_pb_text_12_tb_footer,
    .et-l--footer .et_pb_text_13_tb_footer,
    .et-l--footer .et_pb_text_15_tb_footer,
    .et-l--footer .et_pb_text_16_tb_footer,
    .et-l--footer .et_pb_text_17_tb_footer,
    .et-l--footer .et_pb_text_18_tb_footer {
        margin-top: 2px !important;
    }
    .et-l--footer .et_pb_text_0_tb_footer,
    .et-l--footer .et_pb_text_5_tb_footer,
    .et-l--footer .et_pb_text_10_tb_footer,
    .et-l--footer .et_pb_text_14_tb_footer {
        margin-bottom: 14px !important;
    }
}
@media only screen and (max-width: 767px) {
    .et-l--footer .et_pb_text_1_tb_footer,
    .et-l--footer .et_pb_text_2_tb_footer,
    .et-l--footer .et_pb_text_3_tb_footer,
    .et-l--footer .et_pb_text_4_tb_footer,
    .et-l--footer .et_pb_text_6_tb_footer,
    .et-l--footer .et_pb_text_7_tb_footer,
    .et-l--footer .et_pb_text_8_tb_footer,
    .et-l--footer .et_pb_text_9_tb_footer,
    .et-l--footer .et_pb_text_11_tb_footer,
    .et-l--footer .et_pb_text_12_tb_footer,
    .et-l--footer .et_pb_text_13_tb_footer,
    .et-l--footer .et_pb_text_15_tb_footer,
    .et-l--footer .et_pb_text_16_tb_footer,
    .et-l--footer .et_pb_text_17_tb_footer,
    .et-l--footer .et_pb_text_18_tb_footer {
        margin-top: 2px !important;
    }
    .et-l--footer .et_pb_text_0_tb_footer,
    .et-l--footer .et_pb_text_5_tb_footer,
    .et-l--footer .et_pb_text_10_tb_footer,
    .et-l--footer .et_pb_text_14_tb_footer {
        margin-bottom: 12px !important;
    }
}

/* ─── HOME PAGE — HERO ───────────────────────────────────────────── */

/* 8. Botones del hero: el CSS inline los deja con justify-content:start
      y width:75% en móvil. Especificidad 0,2,0 supera al 0,1,0 inline. */
@media only screen and (max-width: 767px) {
    .home .et_pb_row_1 {
        justify-content: center !important;
        width: 90% !important;
    }
}

/* ─── HOME PAGE — MÓDULO CIFRAS ──────────────────────────────────── */

/* 9. Contador numérico: el CSS diferido genera line-height:0em en los
      títulos h3, lo que colapsa la caja de línea y superpone el texto
      al número. Se corrige a un interlineado normal. */
.et_pb_number_counter .title h3 {
    line-height: 1.4 !important;
    margin-top: 8px !important;
}
.et_pb_number_counter_1 .percent p {
    text-align: center !important;
}

/* ─── HOME PAGE — BANDA CTA MORADA ──────────────────────────────── */

/* 10. La banda CTA (row_5) tiene flex-wrap:nowrap del builder,
       impidiendo que los elementos apilen en móvil. */
@media only screen and (max-width: 767px) {
    .home .et_pb_row_5 {
        flex-wrap: wrap !important;
    }
}

/* ─── HOME PAGE — BOTONES CON PADDING EXCESIVO ───────────────────── */

/* 11. Botones 2/3/4: padding lateral 25% → demasiado espacio en responsive */
@media only screen and (max-width: 1324px) {
    .home .et_pb_button_2,
    .home .et_pb_button_3,
    .home .et_pb_button_4 {
        padding-right: 10% !important;
        padding-left:  10% !important;
    }
}
@media only screen and (max-width: 767px) {
    .home .et_pb_button_2,
    .home .et_pb_button_3,
    .home .et_pb_button_4 {
        padding-right: 20px !important;
        padding-left:  20px !important;
    }
}

/* ─── HOME PAGE — TEXTO DECORATIVO GRANDE ────────────────────────── */

/* 12. Texto decorativo et_pb_text_8: desbordamiento horizontal en móvil */
@media only screen and (max-width: 767px) {
    .home .et_pb_text_8 {
        overflow: hidden !important;
    }
}