/*
 * MGER Consorcio — ajustes del tema
 * Desarrollado por Codesmic · codesmic.com
 *
 * Se carga DESPUÉS de mger.css (el diseño portado del preview) y depende de
 * él. Aquí va lo que el preview no tenía y lo que hace falta para que Astra
 * no pise el diseño en producción.
 *
 * Paleta: noche #0A0A0A · marino #1B3550 · dorado #B8946B · crema #F5F2EC
 */

:root {
    --mger-noche: #0A0A0A;
    --mger-noche-2: #141414;
    --mger-marino: #1B3550;
    --mger-dorado: #B8946B;
    --mger-crema: #F5F2EC;
    --mger-texto: #1A1A1A;
    --mger-gris: #6B6B6B;
    --mger-borde: rgba(184, 148, 107, 0.18);

    /* El dorado de marca sobre blanco da 2.81:1 — no alcanza para texto.
       Sirve para bordes, filetes e iconos, pero no para leerse. Esta version
       oscurecida conserva el tono y da 5.70:1 sobre blanco y 5.10:1 sobre
       crema. Se usa SOLO en texto chico sobre fondo claro; en fondo oscuro
       el dorado de marca va perfecto. */
    --mger-dorado-texto: #82603B;
}

/* =========================================================================
 * EL <header> PELÓN DEL PREVIEW
 *
 * mger.css trae `header { position:sticky; background:rgba(10,10,10,.94); }`
 * sin clase, porque en el preview sólo existía un <header> en toda la página.
 * Dentro de WordPress hay más de uno: las plantillas usan
 * <header class="mger-page__header"> para el título, y quedaba con la barra
 * negra encima. El título es marino #1B3550 sobre negro — ilegible.
 *
 * Se anula todo lo que el selector pelón le impone.
 * ========================================================================= */

.mger-page__header,
.mger-legal__header {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    z-index: auto;
}

/* =========================================================================
 * SELECCIÓN DE TEXTO
 *
 * Astra pinta la selección con su color de acento, que no es de MGER. Se fija
 * aquí con el dorado de la marca, independiente de lo que traiga el padre.
 * ========================================================================= */

::selection {
    background: var(--mger-dorado) !important;
    color: #0A0A0A !important;
    text-shadow: none !important;
}
::-moz-selection {
    background: var(--mger-dorado) !important;
    color: #0A0A0A !important;
    text-shadow: none !important;
}

/* Astra aplica el acento también sobre elementos concretos, no solo en el
   selector global, así que se cubren los contenedores del sitio. */
body ::selection,
body *::selection,
header ::selection,
footer ::selection,
.form ::selection,
.mger-page ::selection,
.mger-legal ::selection,
.mger-modal ::selection {
    background: var(--mger-dorado) !important;
    color: #0A0A0A !important;
}
body ::-moz-selection,
body *::-moz-selection {
    background: var(--mger-dorado) !important;
    color: #0A0A0A !important;
}

/* =========================================================================
 * ANCLAS DEL ONE-PAGE
 *
 * El header es sticky, así que al entrar por URL directa
 * (mgerconsorcio.com/#contacto) la sección queda pegada bajo el header.
 * ========================================================================= */

#top,
#inicio,
#nosotros,
#servicios,
#valores,
#presencia,
#contacto {
    scroll-margin-top: 92px;
}

@media (max-width: 768px) {
    #top, #inicio, #nosotros, #servicios,
    #valores, #presencia, #contacto {
        scroll-margin-top: 72px;
    }
}

/* =========================================================================
 * MENÚ MÓVIL
 *
 * .nav-wrap usa display:contents en escritorio, así que el menú y el CTA
 * siguen siendo hijos directos del flex de <nav> y el diseño aprobado no
 * cambia en nada. Abajo de 1024px ese mismo contenedor se vuelve el panel.
 *
 * El panel cuelga del <header> con position:absolute y no fixed: el header
 * tiene backdrop-filter, y un ancestro con filtro vuelve contenedor a sus
 * hijos fixed, así que un panel fixed quedaría recortado al alto del header.
 * ========================================================================= */

.nav-wrap { display: contents; }
.nav-toggle,
.nav-backdrop { display: none; }

@media (max-width: 1024px) {
    .nav-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0 10px;
        background: none; border: none; cursor: pointer;
        margin-left: auto;
    }
    .nav-toggle span {
        display: block; height: 2px; width: 100%;
        background: #FFFFFF; border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-wrap {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        /* Opaco a propósito: un panel semitransparente deja leer el sitio
           de atrás encima del menú. */
        background: var(--mger-noche);
        border-bottom: 1px solid var(--mger-dorado);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        padding: 0 1.5rem;
        max-height: 0; overflow: hidden;
        opacity: 0; visibility: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, visibility 0s linear 0.3s;
        z-index: 120;
    }
    .nav-wrap.is-open {
        max-height: calc(100vh - 78px); overflow-y: auto;
        opacity: 1; visibility: visible;
        padding: 0.5rem 1.5rem 1.5rem;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, visibility 0s;
    }

    /* mger.css esconde .nav-menu abajo de 1024px. Dentro del panel se repone. */
    .nav-wrap .nav-menu {
        display: flex !important; flex-direction: column; align-items: stretch;
        gap: 0; width: 100%; margin: 0 0 1.1rem; padding: 0; list-style: none;
    }
    .nav-wrap .nav-menu li { width: 100%; }
    .nav-wrap .nav-menu a {
        display: block; width: 100%;
        padding: 0.95rem 0; font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.85);
        border-bottom: 1px solid rgba(184, 148, 107, 0.18);
    }
    .nav-wrap .nav-menu a:hover { color: var(--mger-dorado); }

    /* mger.css esconde .cta-header abajo de 768px. Dentro del panel se repone. */
    .nav-wrap .cta-header {
        display: block !important; width: 100%; text-align: center;
        padding: 0.85rem 1.3rem;
    }

    .nav-backdrop {
        display: block; position: absolute; top: 100%; left: 0; right: 0;
        height: 100vh;
        background: rgba(10, 10, 10, 0.55);
        opacity: 0; pointer-events: none;
        transition: opacity 0.28s ease;
        z-index: 110;
    }
    .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    body.nav-open { overflow: hidden; }
}

/* =========================================================================
 * FORMULARIO — BLINDAJE CONTRA ASTRA Y CONTRA CHROME
 *
 * Astra trae sus propias reglas para input y textarea y le gana al diseño
 * portado, que no usa !important. El resultado en producción es texto gris
 * claro sobre fondo claro: ilegible. Se fija color, fondo y el relleno de
 * texto de WebKit con !important.
 * ========================================================================= */

.form .form-group input[type="text"],
.form .form-group input[type="email"],
.form .form-group textarea,
.form input[type="text"],
.form input[type="email"],
.form textarea {
    background: var(--mger-crema) !important;
    background-color: var(--mger-crema) !important;
    color: var(--mger-texto) !important;
    -webkit-text-fill-color: var(--mger-texto) !important;
    caret-color: var(--mger-texto) !important;
    border: 1px solid var(--mger-borde) !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: none !important;
}

.form .form-group input::placeholder,
.form .form-group textarea::placeholder,
.form input::placeholder,
.form textarea::placeholder {
    color: var(--mger-gris) !important;
    -webkit-text-fill-color: var(--mger-gris) !important;
    opacity: 1;
}

.form .form-group input:focus,
.form .form-group textarea:focus,
.form input:focus,
.form textarea:focus {
    outline: none !important;
    border-color: var(--mger-dorado) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: var(--mger-texto) !important;
    -webkit-text-fill-color: var(--mger-texto) !important;
}

/* --- Autocompletado de Chrome ---
   Chrome pinta los campos autollenados con su propio fondo y no respeta
   background. Se neutraliza con box-shadow inset y una transición larguísima,
   que es el truco estándar. Los cuatro estados, porque cubren casos distintos. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form input:-webkit-autofill:active,
.form textarea:-webkit-autofill,
.form textarea:-webkit-autofill:hover,
.form textarea:-webkit-autofill:focus,
.form textarea:-webkit-autofill:active {
    -webkit-text-fill-color: var(--mger-texto) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--mger-crema) inset !important;
    box-shadow: 0 0 0 1000px var(--mger-crema) inset !important;
    caret-color: var(--mger-texto) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.form input:-webkit-autofill:focus,
.form textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
}

/* --- Consentimiento y avisos --- */
.form-consent {
    display: flex; align-items: flex-start; gap: 0.6rem;
    margin: 0.2rem 0 1.3rem;
    font-size: 0.82rem; line-height: 1.5; color: var(--mger-gris);
}
.form-consent input[type="checkbox"] {
    width: 16px; height: 16px; margin-top: 0.15rem;
    flex-shrink: 0; accent-color: var(--mger-dorado);
}
.form-consent a { color: var(--mger-marino); font-weight: 600; text-decoration: underline; }
.form-consent a:hover { color: var(--mger-dorado); }

.form-nota {
    margin-top: 1rem; padding: 0.9rem 1.1rem;
    font-size: 0.87rem; line-height: 1.5;
    border-left: 3px solid var(--mger-dorado);
    background: var(--mger-crema);
}
.form-nota--ok { border-left-color: #2E7D32; }
.form-nota--error { border-left-color: #C62828; }
.form-nota a { color: var(--mger-marino); font-weight: 600; }

/* =========================================================================
 * MODAL DEL AVISO DE PRIVACIDAD
 * ========================================================================= */

.mger-modal {
    display: none;
    position: fixed; inset: 0; z-index: 900;
    background: rgba(10, 10, 10, 0.72);
    padding: 5vh 1.2rem;
    overflow-y: auto;
}
.mger-modal.is-open { display: block; }

.mger-modal__box {
    position: relative;
    max-width: 780px; margin: 0 auto;
    /* Opaco. Un modal semitransparente deja leer el sitio de atrás. */
    background: #FFFFFF;
    border-top: 3px solid var(--mger-dorado);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
    padding: 3rem 2.6rem 2.6rem;
}

.mger-modal__close {
    position: absolute; top: 0.8rem; right: 1rem;
    width: 40px; height: 40px;
    background: none; border: none;
    font-size: 2rem; line-height: 1; color: var(--mger-gris);
    cursor: pointer;
}
.mger-modal__close:hover { color: var(--mger-texto); }

@media (max-width: 640px) {
    .mger-modal { padding: 0; }
    .mger-modal__box { padding: 2.6rem 1.3rem 2rem; min-height: 100vh; }
}

/* =========================================================================
 * PLANTILLAS DE WORDPRESS
 * Páginas genéricas, aviso de privacidad, listados y entradas.
 * ========================================================================= */

.mger-page {
    background: var(--mger-crema);
    padding: 4.5rem 2.5rem 5rem;
    min-height: 60vh;
}
.mger-page__container { max-width: 860px; margin: 0 auto; }

.mger-page__header { margin-bottom: 2.4rem; }
.mger-page__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3rem); font-weight: 500;
    line-height: 1.15; letter-spacing: -0.01em;
    color: var(--mger-marino);
}
.mger-page__meta { margin-top: 0.6rem; font-size: 0.85rem; color: var(--mger-gris); }

.mger-page__content { color: var(--mger-texto); font-size: 1rem; line-height: 1.75; }
.mger-page__content h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.9rem; font-weight: 500; color: var(--mger-marino);
    margin: 2.2rem 0 1rem;
}
.mger-page__content h3 { font-size: 1.15rem; font-weight: 600; margin: 1.8rem 0 0.7rem; color: var(--mger-marino); }
.mger-page__content p { margin-bottom: 1rem; }
.mger-page__content ul { margin: 0.6rem 0 1.2rem 1.2rem; }
.mger-page__content li { margin-bottom: 0.4rem; }
.mger-page__content a { color: var(--mger-marino); font-weight: 600; }
.mger-page__content a:hover { color: var(--mger-dorado); }

.mger-page__item { padding: 1.6rem 0; border-bottom: 1px solid var(--mger-borde); }
.mger-page__item h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.mger-page__item a { text-decoration: none; }
.mger-page__excerpt { color: var(--mger-gris); font-size: 0.95rem; }

/* --- Aviso de privacidad: subhero --- */
.subhero {
    background: var(--mger-noche);
    background-image:
        radial-gradient(circle at 80% 20%, rgba(27, 53, 80, 0.45) 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(184, 148, 107, 0.10) 0%, transparent 55%);
    padding: 4.5rem 2.5rem 4rem;
    border-bottom: 1px solid var(--mger-dorado);
}
.subhero-content { max-width: 860px; margin: 0 auto; }

.breadcrumb {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1.6rem;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.breadcrumb a:hover { color: var(--mger-dorado); }
.breadcrumb .sep { color: rgba(184, 148, 107, 0.5); }

.subhero-eyebrow {
    font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--mger-dorado); font-weight: 600; margin-bottom: 0.9rem;
}
.subhero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 500;
    line-height: 1.1; letter-spacing: -0.01em; color: #FFFFFF;
    margin-bottom: 1.2rem;
}
.subhero h1 em { font-style: italic; color: var(--mger-dorado); }
.subhero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem; line-height: 1.75; max-width: 640px;
}

/* --- Aviso de privacidad: cuerpo --- */
.mger-legal__body { background: var(--mger-crema); padding: 3.5rem 2.5rem 5rem; }
.mger-legal__container { max-width: 860px; margin: 0 auto; }
.mger-legal__h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.9rem; font-weight: 500; color: var(--mger-marino);
    margin-bottom: 0.2rem;
}

/* En la página el subhero ya trae el <h1> "Aviso de Privacidad", así que este
   <h2> lo repetiría. Se queda sólo en el modal, donde sí es el título.
   El texto es el mismo en los dos lados porque sale de la misma función. */
.mger-legal__body .mger-legal__h2 { display: none; }

/* --- Tarjeta del responsable --- */
.responsable-card {
    background: #FFFFFF;
    border: 1px solid var(--mger-borde);
    border-top: 3px solid var(--mger-dorado);
    padding: 2rem 2rem 1.4rem;
    margin: 2rem 0 2.4rem;
}
.responsable-head { padding-bottom: 1.4rem; border-bottom: 1px solid var(--mger-borde); }
.small-eyebrow {
    display: block; font-size: 0.66rem; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--mger-dorado-texto);
    font-weight: 600; margin-bottom: 0.6rem;
}
.responsable-head h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.7rem; font-weight: 500; color: var(--mger-marino);
    margin-bottom: 0.5rem;
}
.responsable-head p { color: var(--mger-gris); font-size: 0.93rem; margin: 0; }

.responsable-data {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem; padding-top: 1.4rem;
}
.resp-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.resp-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1px solid var(--mger-dorado);
    display: flex; align-items: center; justify-content: center;
}
.resp-icon svg { width: 16px; height: 16px; stroke: var(--mger-dorado); fill: none; stroke-width: 1.5; }
.resp-text strong {
    display: block; font-size: 0.64rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--mger-dorado-texto);
    font-weight: 600; margin-bottom: 0.3rem;
}
.resp-text span { font-size: 0.88rem; color: var(--mger-texto); line-height: 1.5; }
.resp-text a { color: var(--mger-marino); font-weight: 600; text-decoration: none; }
.resp-text a:hover { color: var(--mger-dorado); }

@media (max-width: 860px) {
    .responsable-data { grid-template-columns: 1fr; gap: 1.1rem; }
    .subhero { padding: 3rem 1.3rem 2.6rem; }
    .mger-legal__body { padding: 2.4rem 1.3rem 3.5rem; }
    .responsable-card { padding: 1.5rem 1.3rem 1.1rem; }
}

/* En el modal la tarjeta va mas compacta y sin borde superior grueso. */
.mger-modal .responsable-card { border-top-width: 1px; padding: 1.4rem 1.4rem 1rem; margin: 1.4rem 0 1.6rem; }
.mger-modal .responsable-data { grid-template-columns: 1fr; gap: 1rem; }

/* --- Aviso de privacidad: secciones --- */
.mger-legal__meta {
    font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mger-gris); margin-bottom: 2rem;
}
.privacy-section {
    background: #FFFFFF;
    border: 1px solid var(--mger-borde);
    padding: 1.6rem 1.8rem;
    margin-bottom: 1rem;
    scroll-margin-top: 5rem;
    transition: border-color 0.2s ease;
}
.privacy-section:hover { border-color: rgba(184, 148, 107, 0.4); }
.privacy-section h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem; font-weight: 600; color: var(--mger-marino);
    margin: 0 0 0.9rem; letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 0.7rem;
}
.privacy-section h3 span {
    font-family: 'Inter', sans-serif; font-weight: 700;
    color: var(--mger-dorado-texto); font-size: 0.78rem; letter-spacing: 0.15em;
}
.privacy-section p { color: var(--mger-texto); font-size: 0.95rem; margin-bottom: 0.8rem; }
.privacy-section p:last-child { margin-bottom: 0; }
.privacy-section ul { list-style: none; margin: 0.4rem 0 0.9rem; padding: 0; }
.privacy-section li { padding: 0.35rem 0 0.35rem 1.4rem; color: var(--mger-texto); font-size: 0.94rem; position: relative; }
.privacy-section li::before {
    content: ''; position: absolute; left: 0; top: 0.95rem;
    width: 8px; height: 1.5px; background: var(--mger-dorado);
}
.privacy-section strong { font-weight: 600; }
.privacy-section a { color: var(--mger-marino); font-weight: 600; }

/* En el modal las tarjetas van sin fondo: ya están sobre blanco. */
.mger-modal .privacy-section { border: none; border-bottom: 1px solid var(--mger-borde); padding: 1.2rem 0; margin: 0; }
.mger-modal .privacy-section:last-child { border-bottom: none; }
.mger-modal h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem; font-weight: 500; color: var(--mger-marino); margin-bottom: 0.3rem;
}

/* =========================================================================
 * 404 — cabe en una pantalla, sin scroll
 *
 * Una página de error es una sola decisión: volver, ver las empresas o
 * escribirnos. Con el pie completo de cuatro columnas la página medía 1,440px
 * contra un viewport de 900 y dejaba 540px de scroll. En el 404 el pie se
 * reduce a su última línea.
 * ========================================================================= */

body.error404 footer .footer-grid { display: none; }
body.error404 footer { padding: 1.4rem 2.5rem 1.4rem; }
body.error404 footer .footer-bottom { padding-top: 0; border-top: none; }

.mger-404 {
    min-height: calc(100vh - 92px - 104px);
    display: flex; align-items: center; justify-content: center;
    background: var(--mger-noche);
    background-image:
        radial-gradient(circle at 80% 20%, rgba(27, 53, 80, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(184, 148, 107, 0.08) 0%, transparent 50%);
    padding: 2rem 1.5rem;
}
.mger-404__inner { max-width: 620px; text-align: center; }
.mger-404__code {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(4rem, 14vw, 7rem); line-height: 1;
    color: var(--mger-dorado); opacity: 0.9;
}
.mger-404__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 500;
    color: #FFFFFF; margin: 0.6rem 0 1rem;
}
.mger-404__lede { color: rgba(255, 255, 255, 0.7); font-size: 0.98rem; line-height: 1.7; margin-bottom: 2rem; }
.mger-404__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.8rem; }
.mger-btn {
    display: inline-block; padding: 0.85rem 1.7rem;
    font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none; transition: all 0.3s ease;
}
.mger-btn--primary { background: var(--mger-dorado); color: var(--mger-noche); }
.mger-btn--primary:hover { background: #D4B889; }
.mger-btn--ghost { border: 1px solid var(--mger-dorado); color: var(--mger-dorado); }
.mger-btn--ghost:hover { background: var(--mger-dorado); color: var(--mger-noche); }
.mger-404__contacto { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; text-decoration: none; }
.mger-404__contacto:hover { color: var(--mger-dorado); }

/* =========================================================================
 * PIE — liga legal
 * ========================================================================= */

.footer-legal a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem; text-decoration: none;
}
.footer-legal a:hover { color: var(--mger-dorado); }

/* =========================================================================
 * TITULOS QUE ASTRA PISABA
 *
 * En mger.css estos titulos no declaran color: lo heredan del contenedor.
 * Astra si lo declara explicito (#1E293B) sobre la etiqueta, y un valor
 * explicito le gana siempre a uno heredado. Resultado medido en produccion
 * el 3-ago-2026: el h1 del hero y los titulos de empresas y ciudades salian
 * en gris oscuro sobre fondo oscuro, con 1.2:1 de contraste.
 *
 * El blanco es el del diseno aprobado, verificado contra el preview de
 * Vercel, que corre sin Astra.
 * ========================================================================= */

.hero h1,
.empresa-card h3,
.empresa-card.featured-center h3,
.ciudad-card h4 {
    color: #FFFFFF !important;
}

/* =========================================================================
 * PIE DE PAGINA
 * ========================================================================= */

/* Con flex y space-between el bloque de en medio se centra respecto al hueco
   que le dejan los otros dos, no respecto a la pagina: quedaba 87px a la
   derecha del centro real. Con tres columnas 1fr auto 1fr el de en medio cae
   siempre en el centro sin importar cuanto midan los laterales. */
@media (min-width: 769px) {
    .footer-bottom {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .footer-bottom .footer-copy   { justify-self: start; }
    .footer-bottom .footer-legal  { justify-self: center; }
    .footer-bottom .footer-credit { justify-self: end; }
}

/* El credito va solo con texto. Se probo con el isotipo de Codesmic al lado
   y no funciono: a ese tamano compite con el texto en vez de acompanarlo.
   El archivo del isotipo blanco se queda en assets/img/codesmic/ por si mas
   adelante se usa en otro lado. */

/* El boton apagado despues de un envio correcto. Se queda visible para que
   quede claro que ya se mando, en vez de invitar a reenviar lo mismo. */
.form--enviado .form-submit,
.form-submit:disabled {
    opacity: 0.55;
    cursor: default;
}

/* =========================================================================
 * FONDO DE LA PAGINA
 *
 * Astra declara body { background: #fff } en su main.min.css y le gana al
 * diseno portado. Encima, html no tiene fondo declarado en ningun lado.
 *
 * Se nota al hacer zoom en el telefono: al arrastrar mas alla del contenido
 * el navegador pinta el lienzo, que hereda de html, y sale una franja blanca
 * que no es del diseno. Reportado el 3-ago-2026 con capturas.
 * ========================================================================= */

html {
    background: var(--mger-crema);
}

body {
    background: var(--mger-crema) !important;
}

/* =========================================================================
 * LISTAS DEL PIE
 *
 * Astra le pone margin-left a los ul y en produccion los enlaces del pie
 * salian sangrados casi 44px respecto a su encabezado. Medido el 3-ago-2026
 * contra el sitio en vivo; en local no aparecia porque el render no cargaba
 * esa hoja.
 * ========================================================================= */

.footer-col ul,
.footer-brand ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* =========================================================================
 * ENLACE DIRECTO A CADA EMPRESA
 *
 * Los enlaces del pie apuntan a la tarjeta de cada empresa, no al bloque
 * completo. Al llegar, la tarjeta se resalta un momento para que quede claro
 * cual de las siete se abrio, y despues vuelve a su estado normal.
 *
 * Se usa :target y no JavaScript: asi funciona igual al hacer clic que al
 * entrar por una URL pegada o compartida.
 * ========================================================================= */

.empresa-card {
    scroll-margin-top: 110px;
}

@media (max-width: 768px) {
    .empresa-card {
        scroll-margin-top: 84px;
    }
}

.empresa-card:target {
    animation: mgerResaltaTarjeta 3s cubic-bezier(.2, .8, .2, 1) 1;
}

@keyframes mgerResaltaTarjeta {
    0%, 45% {
        border-color: var(--mger-dorado);
        box-shadow: 0 0 0 1px var(--mger-dorado), 0 18px 40px rgba(0, 0, 0, 0.45);
        transform: translateY(-4px);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
        transform: none;
    }
}

/* Quien pidio menos animacion no ve el brinco, pero si el borde dorado. */
@media (prefers-reduced-motion: reduce) {
    .empresa-card:target {
        animation: none;
        border-color: var(--mger-dorado);
        box-shadow: 0 0 0 1px var(--mger-dorado);
    }
}

/* =========================================================================
 * PIE PLEGABLE EN MOVIL
 *
 * Apilado, el pie medía 1,346px en un telefono de 390px: 1.6 pantallas solo
 * de pie. Medido el 3-ago-2026.
 *
 * Las tres columnas son <details> cerrados. En movil eso es un acordeon; en
 * escritorio el CSS los fuerza abiertos y les quita el signo, asi que la
 * vista aprobada de cuatro columnas queda exactamente igual.
 *
 * Se eligio <details> y no JavaScript porque funciona aunque el JS falle y
 * el lector de pantalla ya sabe anunciarlo como algo que se abre y cierra.
 * ========================================================================= */

/* --- Escritorio: siempre abierto, sin apariencia de control --- */
@media (min-width: 1025px) {
    /*
     * `display: block` sobre el <ul> NO abre un <details> cerrado. El navegador
     * no oculta el contenido poniéndole display:none al <ul>: lo oculta con
     * content-visibility en un contenedor interno propio, al que solo se llega
     * con ::details-content. Por eso el pie llevaba sus 16 enlaces invisibles
     * en escritorio: el <ul> sí quedaba en block, pero el contenedor de arriba
     * seguía plegado. Medido en producción el 7-ago-2026.
     *
     * La regla del <ul> se deja por si algún navegador viejo la aprovecha; es
     * inofensiva. La que de verdad abre el pie es la de abajo.
     */
    .footer-col--plegable > ul {
        display: block !important;
    }
    .footer-col--plegable::details-content {
        content-visibility: visible;
    }
    .footer-col--plegable > summary {
        display: block;
        list-style: none;
        cursor: default;
        pointer-events: none;
    }
    .footer-col--plegable > summary::-webkit-details-marker { display: none; }
    .footer-col--plegable > summary::after { content: none; }
}

/* --- Movil: acordeon --- */
@media (max-width: 1024px) {
    .footer-grid {
        gap: 0 !important;
        /* El margen inferior original era de 4rem, pensado para cuatro
           columnas de enlaces. Con el acordeon cerrado dejaba un hueco
           muerto de casi 100px antes del copyright. */
        margin-bottom: 2rem;
    }

    .footer-brand {
        margin-bottom: 1.6rem;
    }

    .footer-col--plegable {
        border-top: 1px solid rgba(184, 148, 107, 0.18);
    }
    .footer-col--plegable:last-of-type {
        border-bottom: 1px solid rgba(184, 148, 107, 0.18);
    }

    .footer-col--plegable > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Alto comodo para el dedo */
        padding: 1.05rem 0;
    }
    .footer-col--plegable > summary::-webkit-details-marker { display: none; }

    .footer-col--plegable > summary h4 {
        margin: 0;
    }

    .footer-col--plegable > summary::after {
        content: '+';
        color: var(--mger-dorado);
        font-size: 1.15rem;
        line-height: 1;
        font-weight: 400;
    }
    .footer-col--plegable[open] > summary::after {
        content: '\2212';
    }

    .footer-col--plegable > ul {
        padding: 0 0 1rem !important;
    }
    .footer-col--plegable > ul li {
        margin-bottom: 0.55rem;
    }

    /* El foco por teclado tiene que verse: el summary no trae contorno propio. */
    .footer-col--plegable > summary:focus-visible {
        outline: 2px solid var(--mger-dorado);
        outline-offset: 3px;
    }
}