/* =============================================================
   FOOTER "EDICIÓN CLÍNICA" (F9) — banda #EFE7E3 del prototipo
   (Propuestas Landing.dc.html, pie de los frames 2a/2b).

   TODO scopeado bajo .ec-footer: footer.php se incluye en ~100
   páginas legacy y NADA de aquí puede tocarlas. No se usan
   <section> ni h1–h3 dentro del footer (textures.css les mete
   padding/font !important globales).

   Mismo HTML móvil/desktop (SEO): los 3 grupos de enlaces son
   <details> nativos; en móvil funcionan como acordeón, en
   desktop (>=900px) se dibujan como columnas siempre abiertas.

   Confort 45+ (F8): texto informativo >=12px, cuerpo 15px,
   tap targets >=var(--ec-tap-min) en móvil, input email 16px
   (evita zoom iOS), contraste AA verificado sobre la banda.
   ============================================================= */

.ec-footer {
    /* Tokens locales del footer.
       --ec-f-band #EFE7E3: color del prototipo (banda de cierre).
       No existe en la paleta EC (--ec-bg-alt es #FBF8F6, más claro):
       se adopta tal cual porque el handoff es hi-fi ("colores finales").
       --ec-f-mauve-text: el malva de marca #8B5F83 da 4.24:1 sobre
       #EFE7E3 (falla AA en texto pequeño) → oscurecido a #7A5273
       (5.25:1) SOLO para los labels caps del footer. */
    --ec-f-band: #EFE7E3;
    --ec-f-mauve-text: #7A5273;
    --ec-f-border: rgba(46, 36, 41, 0.12);

    background: var(--ec-f-band, #EFE7E3);
    color: var(--ec-ink, #2E2429);
    font-family: var(--ec-font-body, 'Outfit', sans-serif);
    margin-top: 56px;
    border-top: 1px solid var(--ec-f-border);
}

.ec-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 34px 24px 20px;
}

/* ---------- Marca / bio ---------- */
.ec-f-name {
    font-family: var(--ec-font-display, 'Instrument Serif', Georgia, serif);
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 6px;
}

.ec-f-tagline {
    font-size: 13px;                        /* informativo >=12px */
    color: var(--ec-muted, #6E5F66);        /* 4.93:1 sobre #EFE7E3 — AA */
    line-height: 1.65;
    margin: 0 0 14px;
    max-width: 300px;
}

.ec-f-hours {
    font-family: var(--ec-font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    line-height: 1.7;
    color: var(--ec-muted, #6E5F66);
}

.ec-f-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--ec-radius-pill, 999px);
    padding: 4px 12px;
    margin-top: 10px;
}

.ec-f-status.is-open {
    background: #E7F6EF;
    color: #046C4E;                          /* AA sobre #E7F6EF */
    border: 1px solid rgba(4, 108, 78, 0.25);
}

.ec-f-status.is-closed {
    background: #FDECEA;
    color: #B42318;                          /* AA sobre #FDECEA */
    border: 1px solid rgba(180, 35, 24, 0.25);
}

/* ---------- Grupos de enlaces (details nativo) ---------- */
.ec-f-group {
    border-top: 1px solid var(--ec-f-border);
}

.ec-f-group:last-of-type {
    border-bottom: 1px solid var(--ec-f-border);
}

.ec-f-brand {
    padding-bottom: 24px;
}

.ec-f-group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--ec-tap-min, 44px);    /* F8: zona táctil */
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-ink, #2E2429);
}

.ec-f-group summary::-webkit-details-marker {
    display: none;
}

/* Indicador "+" que rota a "×" al abrir (patrón del prototipo) */
.ec-f-group summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: var(--ec-muted, #6E5F66);
    transition: transform var(--ec-transition, 200ms ease);
}

.ec-f-group[open] summary::after {
    transform: rotate(45deg);
}

.ec-f-menu {
    list-style: none;
    padding: 0 0 14px;
    margin: 0;
}

.ec-f-menu a {
    display: inline-block;
    font-size: 14.5px;
    color: var(--ec-text-3, #5A4B52);        /* 6.72:1 sobre banda — AA */
    text-decoration: none;
    padding: 11px 0;                          /* F8: ~44px táctiles en móvil */
    transition: color var(--ec-transition, 200ms ease);
}

.ec-f-menu a:hover {
    color: var(--ec-f-mauve-text, #7A5273);
}

/* ---------- Newsletter ---------- */
.ec-f-news {
    padding: 24px 0 6px;
}

.ec-f-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--ec-ls-mono, 0.12em);
    text-transform: uppercase;
    color: var(--ec-f-mauve-text, #7A5273);
    margin-bottom: 10px;
}

.ec-f-news-desc {
    font-size: 13px;
    color: var(--ec-text-3, #5A4B52);
    line-height: 1.55;
    margin: 0 0 12px;
    max-width: 300px;
}

.ec-f-news-form {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 340px;
}

.ec-f-news-input {
    flex: 1;
    min-width: 0;
    background: var(--ec-card-bg, #FFFFFF);
    border: 1px solid var(--ec-border-16, rgba(46, 36, 41, 0.16));
    border-radius: var(--ec-radius-pill, 999px);
    padding: 11px 18px;
    font-family: var(--ec-font-body, 'Outfit', sans-serif);
    font-size: 16px;                          /* F8: evita zoom iOS */
    color: var(--ec-ink, #2E2429);
    min-height: var(--ec-tap-min, 44px);
}

.ec-f-news-input::placeholder {
    color: var(--ec-placeholder, #826D74);    /* 4.78:1 sobre blanco — AA */
}

.ec-f-news-input:focus {
    outline: 2px solid var(--ec-rose-cta, #9C5876);
    outline-offset: 1px;
    border-color: transparent;
}

.ec-f-news-btn {
    flex-shrink: 0;
    width: var(--ec-tap-min, 44px);
    height: var(--ec-tap-min, 44px);
    border-radius: 50%;
    border: none;
    background: var(--ec-rose-cta, #9C5876);  /* F8: 5.16:1 con blanco */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ec-transition, 200ms ease);
}

.ec-f-news-btn:hover {
    background: var(--ec-rose-cta-hover, #8F4F6A);
}

.ec-f-news-response {
    font-size: 12.5px;
    margin-top: 8px;
    min-height: 1.2em;
}

/* ---------- Línea inferior ---------- */
.ec-f-bottom {
    border-top: 1px solid var(--ec-f-border);
    margin-top: 10px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-f-copy,
.ec-f-pay {
    font-size: 12px;
    color: var(--ec-muted, #6E5F66);
    margin: 0;
}

.ec-f-pay {
    font-family: var(--ec-font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.ec-f-social {
    font-family: var(--ec-font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    letter-spacing: var(--ec-ls-mono, 0.12em);
    text-transform: uppercase;
    color: var(--ec-muted, #6E5F66);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.ec-f-social a {
    color: var(--ec-text-3, #5A4B52);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--ec-tap-min, 44px);      /* F8: táctil también abajo */
    padding: 0 4px;
}

.ec-f-social a:hover {
    color: var(--ec-ink, #2E2429);
}

/* =============================================================
   DESKTOP (>=900px): mismo HTML; los <details> se vuelven
   columnas siempre abiertas (summary = label caps, sin toggle).
   ============================================================= */
@media (min-width: 900px) {
    .ec-footer-inner {
        padding: 44px 36px 26px;
    }

    .ec-f-grid {
        display: grid;
        grid-template-columns: 1.35fr 0.95fr 1fr 1.1fr 1.25fr;
        gap: 32px;
        align-items: start;
    }

    .ec-f-brand {
        padding-bottom: 0;
    }

    .ec-f-group,
    .ec-f-group:last-of-type {
        border: none;
    }

    .ec-f-group summary {
        pointer-events: none;                 /* columnas fijas, sin acordeón */
        min-height: 0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: var(--ec-ls-mono, 0.12em);
        text-transform: uppercase;
        color: var(--ec-f-mauve-text, #7A5273);
        margin-bottom: 12px;
    }

    .ec-f-group summary::after {
        content: none;
    }

    .ec-f-menu {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ec-f-menu a {
        font-size: 13.5px;
        padding: 5px 0;
    }

    .ec-f-news {
        padding: 0;
    }

    .ec-f-bottom {
        margin-top: 36px;
        padding-top: 18px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .ec-f-social a {
        min-height: 0;
    }
}