/* ====================================================================
 * DESEGURID CHROME CSS
 * Styles for Chrome CPT header/footer + static fallback
 * ====================================================================
 * Design tokens (inherits from Industo's CSS variables when available)
 */
/* ------------------------------------------------------------------------
 * TOKENS OFICIALES — Manual de Marca v1.1 (29-jul-2025), capitulo 3
 * Fuente: docs/deseguridad.net/Manual de Marca.pdf
 * Estos 10 son la paleta de marca. No agregar colores sin actualizar el manual.
 * Regla de proporcion 60-30-10: 60% neutro, 30% principal, 10% acento.
 * ---------------------------------------------------------------------- */
:root {
    --dg-primary:         #009188;  /* Principal              */
    --dg-primary-dark:    #004843;  /* Principal oscuro       */
    --dg-primary-light:   #AFFFF9;  /* Principal claro        */
    --dg-secondary:       #c2410c;  /* Secundario: CTA, alerta (canonical design.md §1.1) */
    --dg-secondary-dark:  #ea580c;  /* Secundario oscuro (canonical hover)               */
    --dg-secondary-light: #AFFFF9;  /* Secundario claro (canonical primary-light)        */
    --dg-accent:          #009188;  /* Enfasis: enlaces (canonical primary)              */
    --dg-text:            #333333;  /* Gris para texto        */
    --dg-bg-subtle:       #F5F5F5;  /* Gris para fondos       */
    --dg-white:           #FFFFFF;

    /* ------------------------------------------------------------------
     * DERIVADOS — fuera del manual, con funcion propia. El manual no
     * define estados de interaccion ni texto sobre fondo oscuro.
     * No son colores de marca nuevos.
     * ------------------------------------------------------------------ */
    --dg-primary-hover: #00b8a9;  /* un paso mas saturado que --dg-primary */
    --dg-primary-deep:  #003632;  /* submenus: mas oscuro que --dg-primary-dark */
    --dg-text-muted:    #666666;  /* texto secundario sobre fondo claro */
    --dg-text-on-dark:  #b0b0b0;  /* texto secundario sobre fondo oscuro */
    --dg-surface-tint:  var(--dg-primary-light);  /* insignias, circulos */

    --dg-bg-dark:   var(--dg-primary-dark);
    --dg-bg-footer: linear-gradient(360deg, rgb(0, 0, 0) 0%, rgb(0, 72, 67) 100%);
    --dg-border:    rgba(255, 255, 255, 0.12);

    /* Capitulo 4: Mulish para titulares, Roboto para cuerpo. */
    --dg-font-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dg-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ====================================================================
 * DARK MODE TOGGLE — boton en TopBar (derecha, junto a redes sociales)
 * Colores SOLO de la gamma canonical design.md §1.1.
 * ==================================================================== */
.dg-darkmode-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 12px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--dg-primary-light, #AFFFF9) !important;
    background: transparent !important;
    color: var(--dg-primary-light, #AFFFF9) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
.dg-darkmode-toggle:hover {
    background: var(--dg-primary-light, #AFFFF9) !important;
    color: var(--dg-primary-dark, #004843) !important;
    transform: rotate(15deg) !important;
}
.dg-darkmode-toggle:focus-visible {
    outline: 2px solid var(--dg-primary-light, #AFFFF9) !important;
    outline-offset: 2px !important;
}
.dg-darkmode-icon { display: none !important; }
.dg-darkmode-toggle[aria-pressed="false"] .dg-darkmode-icon--moon,
.dg-darkmode-toggle[aria-pressed="true"]  .dg-darkmode-icon--sun { display: block !important; }

/* ====================================================================
 * TEMA OSCURO — Se activa con [data-theme="dark"] en <html>.
 * Solo colores de la gamma canonical (design.md §1.1). Sin hex externos.
 * ==================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --dg-bg-page:      var(--dg-primary-deep,  #003632);
    --dg-bg-surface:   var(--dg-primary-dark,  #004843);
    --dg-fg-page:      var(--dg-primary-light, #AFFFF9);
    --dg-fg-muted:     var(--dg-primary,       #009188);
    --dg-fg-on-primary:#ffffff;
    --dg-bg-subtle:    var(--dg-primary-dark,  #004843);
    --dg-text:         var(--dg-primary-light, #AFFFF9);
    --dg-text-white:   #ffffff;
    --dg-border-line:  rgba(175, 255, 249, 0.22);
}
html[data-theme="dark"] body {
    background-color: var(--dg-bg-page) !important;
    color: var(--dg-fg-page) !important;
}

/* ====================================================================
 * OVERRIDE DE COLORES FUERA DE LA GAMMA EN BOTONES LEGACY
 * (Elementor inline styles + classes del plugin tis-motion-kit)
 * Cualquier botón que aún tenga #B35524 / #00b8cf / #007770 hardcoded
 * se normaliza a la gamma canonical design.md §1.1.
 * ==================================================================== */
.tmk-btn-primary,
.tmk-btn-primary[style],
a.tmk-btn.tmk-btn-primary {
    background: var(--tmk-accent, #009188) !important;
    background-color: var(--tmk-accent, #009188) !important;
    border-color: var(--tmk-accent, #009188) !important;
    box-shadow: 0 8px 24px rgba(0, 145, 136, 0.25) !important;
    color: var(--dg-text-white, #ffffff) !important;
}
.tmk-btn-primary:hover,
a.tmk-btn.tmk-btn-primary:hover {
    background: var(--tmk-accent-hover, #ea580c) !important;
    background-color: var(--tmk-accent-hover, #ea580c) !important;
    border-color: var(--tmk-accent-hover, #ea580c) !important;
}
.tmk-btn-secondary {
    border-color: rgba(255, 255, 255, 0.55) !important;
}
.tmk-btn-secondary:hover {
    background: rgba(175, 255, 249, 0.15) !important;
    border-color: var(--dg-primary-light, #AFFFF9) !important;
}
.wp-block-button__link.has-cta-warm-gradient-background {
    background: linear-gradient(135deg, #B35524 0%, #7D3A19 100%) !important;
    color: var(--dg-text-white, #ffffff) !important;
    border: none !important;
}

/* ====================================================================
 * Canonical High-Contrast Rules for Cards and Sections (design.md §1.4 & §10)
 * ==================================================================== */
.dg-process-card p,
.dg-topic-list li,
.dg-pas-text,
.dg-situation-card__text {
    color: #333333 !important;
}

.dg-process-card h3,
.dg-topic-card h3,
.dg-pas-title,
.dg-situation-card__title {
    color: #004843 !important;
}

.dg-process-header p {
    color: #555555 !important;
}

/* Badges on white or subtle backgrounds must always be dark teal for WCAG AAA */
.dg-badge,
.dg-pas-badge,
.dg-process-step {
    background: rgba(0, 72, 67, 0.08) !important;
    color: #004843 !important;
    border: 1px solid rgba(0, 72, 67, 0.18) !important;
}

/* Dark Mode Tokens (design.md §10) - Only active when data-dg-theme="dark" */
html[data-dg-theme="dark"] {
    --dg-bg-page: #003632;
    --dg-bg-elevated: #004843;
    --dg-text: #F5F5F5;
    --dg-text-muted: #AFFFF9;
    --dg-border: #004843;
    color-scheme: dark;
}

html[data-dg-theme="dark"] .tis-page-content,
html[data-dg-theme="dark"] .entry-content,
html[data-dg-theme="dark"] .dg-process-section,
html[data-dg-theme="dark"] .dg-topics-section,
html[data-dg-theme="dark"] .dg-pas-section {
    background-color: #003632 !important;
    color: #F5F5F5 !important;
}

html[data-dg-theme="dark"] .dg-card,
html[data-dg-theme="dark"] .dg-pas-card,
html[data-dg-theme="dark"] .dg-process-card,
html[data-dg-theme="dark"] .dg-situation-card,
html[data-dg-theme="dark"] .dg-testimonial-card,
html[data-dg-theme="dark"] .dg-topic-card {
    background-color: #004843 !important;
    border-color: rgba(175, 255, 249, 0.2) !important;
    color: #F5F5F5 !important;
}

html[data-dg-theme="dark"] .dg-process-card p,
html[data-dg-theme="dark"] .dg-topic-list li,
html[data-dg-theme="dark"] .dg-pas-text,
html[data-dg-theme="dark"] .dg-situation-card__text {
    color: #F5F5F5 !important;
}

html[data-dg-theme="dark"] .dg-process-card h3,
html[data-dg-theme="dark"] .dg-topic-card h3,
html[data-dg-theme="dark"] .dg-pas-title,
html[data-dg-theme="dark"] .dg-situation-card__title,
html[data-dg-theme="dark"] h1, html[data-dg-theme="dark"] h2, html[data-dg-theme="dark"] h3,
html[data-dg-theme="dark"] h4, html[data-dg-theme="dark"] h5, html[data-dg-theme="dark"] h6 {
    color: #FFFFFF !important;
}

html[data-dg-theme="dark"] .dg-badge,
html[data-dg-theme="dark"] .dg-pas-badge,
html[data-dg-theme="dark"] .dg-process-step {
    background: rgba(175, 255, 249, 0.15) !important;
    color: #AFFFF9 !important;
    border-color: rgba(175, 255, 249, 0.3) !important;
}

html[data-dg-theme="dark"] .dg-btn,
html[data-dg-theme="dark"] .dg-cierre-btn {
    background: linear-gradient(135deg, #B35524 0%, #7D3A19 100%) !important;
    color: #ffffff !important;
}

/* ====================================================================
 * HEADER — Viewport switching
 * Two chrome posts of type=header can coexist:
 *   - .site-header-chrome--desktop (default _tis_chrome_viewport)
 *   - .site-header-chrome--mobile
 * Una sola resolucion: <1150px = mobile inline (logo izq + hamburger der,
 * 20px margen, fondo blanco). >=1150px = desktop. Sin segmentacion
 * intermedia: cualquier cosa entre 1151 y lo que sea va a desktop.
 * ==================================================================== */
.site-header-chrome--mobile {
    display: none;
}
@media (max-width: 1150px) {
    .site-header-chrome--desktop {
        display: none !important;
    }
    .site-header-chrome--mobile {
        display: block;
        background-color: #fff;
        padding: 12px 20px;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* Inline horizontal: logo izquierda, hamburger derecha. La clase
     * is-not-stacked-on-mobile del bloque ya intenta esto, pero el
     * flex-basis:50% inline de cada columna fuerza 50% de ancho.
     * Lo nulleo a auto para que cada una tome su contenido. */
    .site-header-chrome--mobile .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .site-header-chrome--mobile .wp-block-column {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: auto !important;
    }

    /* Logo: max 160px, alineado a la izquierda. */
    .site-header-chrome--mobile .dg-mobile-logo {
        margin: 0 !important;
    }
    .site-header-chrome--mobile .dg-mobile-logo img {
        max-width: 160px;
        height: auto;
        display: block;
    }

    /* Nav block y su columna: fondo blanco (mata el teal de currentColor
     * de WP 6.6+ que se filtra al fondo de la columna que envuelve el nav).
     * El responsive container del nav block viene con media query
     * min-width:600px que lo pone display:block + background:inherit.
     * A ese viewport intermedio (600-1150) el container se ve como un
     * rectangulo teal detras del boton. Mi background: #fff + shorthand
     * lo mata. Selectores hiper-especificos para ganar cualquier specificity. */
    html body .site-header-chrome--mobile .wp-block-column,
    html body .site-header-chrome--mobile .wp-block-navigation,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-content,
    html body .site-header-chrome--mobile .wp-block-navigation__container {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
        background-image: linear-gradient(#fff, #fff) !important;
        color: var(--dg-primary-dark, #004843) !important;
    }

    /* El responsive container en min-width:600px es display:block, lo
     * ocultamos en mobile para que no se vea detras del boton. */
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    /* Hamburger: forzar color teal oscuro y fill directo, sin currentColor
     * (que estaba heredando teal del nav y se veia OK, pero el SVG path
     * tenia un fill naranja via WordPress block CSS). */
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: var(--dg-primary-dark, #004843) !important;
        border: none !important;
        padding: 8px !important;
    }
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open svg,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open svg path,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open svg line,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open svg rect,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open svg circle {
        fill: var(--dg-primary-dark, #004843) !important;
        stroke: var(--dg-primary-dark, #004843) !important;
        color: var(--dg-primary-dark, #004843) !important;
        background: transparent !important;
    }
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open:hover {
        color: var(--dg-primary, #009188) !important;
    }
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open:hover svg,
    html body .site-header-chrome--mobile .wp-block-navigation__responsive-container-open:hover svg path {
        fill: var(--dg-primary, #009188) !important;
        stroke: var(--dg-primary, #009188) !important;
    }
}

/* ====================================================================
 * HEADER — Chrome CPT (Gutenberg blocks in .site-header-chrome)
 * 3-row layout based on native Gutenberg blocks (CPT 17678 & Nav 17683)
 * Row 1: Top Bar (.dg-chrome-header-wrapper)
 * Row 2: Middle Bar (Logo + Contact info)
 * Row 3: Nav Bar (wp-block-navigation — STICKY ONLY!)
 * ==================================================================== */

/* Header wrapper — sticky with exact negative offset matching the REAL measured
 * height of Row 1 (43px) + Row 2 (81px) = 124px, so Row 1 & Row 2 scroll away
 * cleanly and ONLY Row 3 stays visible without leaving empty pixels.
 *
 * The original spec assumed 40px + 96px = 136px. That was never reconciled with
 * the rendered row heights and left the nav bar 12px underneath the admin bar
 * (and 12px of Row 2 peeking above it for logged-out visitors).
 * Row heights are declared here so retuning one value keeps them in sync. */
.site-header-chrome {
    --dg-topbar-h: 43px;
    --dg-middlebar-h: 81px;
    --dg-scroll-away: calc(-1 * (var(--dg-topbar-h) + var(--dg-middlebar-h)));
    position: sticky !important;
    top: var(--dg-scroll-away) !important;
    z-index: 999 !important;
    width: 100% !important;
}

body.admin-bar .site-header-chrome {
    top: calc(var(--dg-scroll-away) + 32px) !important;
}

@media (max-width: 782px) {
    body.admin-bar .site-header-chrome {
        top: calc(var(--dg-scroll-away) + 46px) !important;
    }
}

/* --------------------------------------------------------------------
 * ROW 1: TOP BAR (.dg-chrome-header-wrapper)
 * -------------------------------------------------------------------- */
.site-header-chrome .dg-chrome-header-wrapper,
.site-header-chrome > .wp-block-columns:first-child {
    background: linear-gradient(360deg, rgb(0, 0, 0) 0%, rgb(0, 72, 67) 100%) !important;
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: max(2rem, calc((100% - 1320px) / 2)) !important;
    padding-right: max(2rem, calc((100% - 1320px) / 2)) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Columns inside Top Bar */
.site-header-chrome .dg-chrome-header-wrapper > .wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
}

/* Title text */
.site-header-chrome .dg-chrome-header-wrapper .dg-timeline-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: var(--dg-font-sans) !important;
}

/* Badges for 2016 and 2026 */
.site-header-chrome .dg-chrome-header-wrapper > .wp-block-column:nth-child(2) p,
.site-header-chrome .dg-chrome-header-wrapper > .wp-block-column:nth-child(3) p {
    background: #ffffff !important;
    color: var(--dg-primary) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-family: var(--dg-font-sans) !important;
    white-space: nowrap !important;
}

/* Connecting line between 2016 and 2026 */
.site-header-chrome .dg-chrome-header-wrapper > .wp-block-column:nth-child(2)::after {
    content: '';
    display: inline-block;
    width: 36px;
    height: 2px;
    background: var(--dg-primary);
    margin: 0 8px;
}

/* Col 4: Social links aligned to right with subtle vertical divider */
.site-header-chrome .dg-chrome-header-wrapper > .wp-block-column:last-child {
    margin-left: auto !important;
    border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
    padding-left: 14px !important;
}

.site-header-chrome .dg-chrome-header-wrapper .wp-block-social-links {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
}

.site-header-chrome .dg-chrome-header-wrapper .wp-social-link {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.site-header-chrome .dg-chrome-header-wrapper .wp-social-link:hover {
    transform: scale(1.1) !important;
    opacity: 0.9 !important;
}

.site-header-chrome .dg-chrome-header-wrapper .wp-social-link-anchor {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

.site-header-chrome .dg-chrome-header-wrapper .wp-social-link svg {
    width: 15px !important;
    height: 15px !important;
}

/* --------------------------------------------------------------------
 * ROW 2: MIDDLE BAR (Logo + Contact info)
 * -------------------------------------------------------------------- */
.site-header-chrome > .wp-block-columns:nth-child(2) {
    background: #ffffff !important;
    margin: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: max(2rem, calc((100% - 1320px) / 2)) !important;
    padding-right: max(2rem, calc((100% - 1320px) / 2)) !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) > .wp-block-column:first-child {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) .wp-block-image {
    margin: 0 !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) .wp-block-image img {
    height: 52px !important;
    width: auto !important;
    max-width: 260px !important;
    display: block !important;
}

/* Contact info columns on right */
.site-header-chrome > .wp-block-columns:nth-child(2) > .wp-block-column:last-child {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) > .wp-block-column:last-child .wp-block-columns {
    display: flex !important;
    gap: 36px !important;
    align-items: center !important;
    margin: 0 !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) > .wp-block-column:last-child .wp-block-column {
    margin: 0 !important;
    padding: 0 0 0 46px !important;
    position: relative !important;
}

/* Contact Icons via ::before with warm accent colors */
.site-header-chrome > .wp-block-columns:nth-child(2) > .wp-block-column:last-child .wp-block-column:first-child::before {
    content: '📍';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dg-surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.site-header-chrome > .wp-block-columns:nth-child(2) > .wp-block-column:last-child .wp-block-column:last-child::before {
    content: '✉️';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dg-surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Contact Titles in Brand TEAL (var(--dg-primary)) matching reference */
.site-header-chrome > .wp-block-columns:nth-child(2) h4 {
    margin: 0 0 2px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--dg-primary) !important;
    line-height: 1.2 !important;
    font-family: var(--dg-font-sans) !important;
    white-space: nowrap !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) h4 a {
    color: var(--dg-primary) !important;
    text-decoration: none !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) h4 a:hover {
    color: var(--dg-primary-dark) !important;
}

.site-header-chrome > .wp-block-columns:nth-child(2) p {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--dg-text-muted) !important;
    line-height: 1.2 !important;
    font-family: var(--dg-font-sans) !important;
    white-space: nowrap !important;
}

/* --------------------------------------------------------------------
/* --------------------------------------------------------------------
 * ROW 3: NAVIGATION BAR
 * Sticky behavior is handled cleanly by parent .site-header-chrome (-136px offset)
 * Children must NOT have position: sticky or top offsets that shift them vertically
 * -------------------------------------------------------------------- */
.site-header-chrome .dg-chrome-nav-bar,
.site-header-chrome .wp-block-navigation {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
    background: linear-gradient(90deg, var(--dg-primary-dark) 0%, var(--dg-primary) 100%) !important;
    padding-left: max(2rem, calc((100% - 1320px) / 2)) !important;
    padding-right: max(2rem, calc((100% - 1320px) / 2)) !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.site-header-chrome .wp-block-navigation__responsive-container,
.site-header-chrome .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header-chrome .wp-block-navigation__container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Top-level menu items */
.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 8px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: opacity 0.2s, border-bottom-color 0.2s !important;
    border-bottom: 3px solid transparent !important;
    font-family: var(--dg-font-sans) !important;
}

.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    border-bottom-color: var(--dg-secondary) !important;
    opacity: 0.95 !important;
}

/* Submenu Arrow Toggle */
.site-header-chrome .wp-block-navigation-submenu__toggle {
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

.site-header-chrome .wp-block-navigation-submenu__toggle svg {
    stroke: #ffffff !important;
}

/* SUBMENU CONTAINER DROPDOWN */
.site-header-chrome .wp-block-navigation__submenu-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 280px !important;
    background: var(--dg-primary-deep) !important;
    border-top: 3px solid var(--dg-primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    border-radius: 0 0 6px 6px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 1000 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* OPEN SUBMENU ON HOVER OR FOCUS */
.site-header-chrome .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.site-header-chrome .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
.site-header-chrome .wp-block-navigation-item.has-child.is-menu-open > .wp-block-navigation__submenu-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.site-header-chrome .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.site-header-chrome .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block !important;
    padding: 10px 20px !important;
    color: var(--dg-surface-tint) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease !important;
    font-family: var(--dg-font-sans) !important;
}

.site-header-chrome .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--dg-primary-dark) !important;
    color: #ffffff !important;
    padding-left: 26px !important;
}

/* VIP BUTTON (Ingreso VIP / Academia) en Navigation.
 * Antes: fondo primary deep teal + texto secondary terracotta = contraste 1.5:1,
 * muy por debajo del WCAG AA. La combinacion legible es blanco sobre
 * terracotta, o blanco sobre teal. Usamos cta-warm gradient (la firma
 * del manual de marca) con texto blanco. Contraste final: blanco sobre
 * terracotta = 5.0:1, sobre teal-dark del gradient = 5.7:1. */
.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item:last-child,
.site-header-chrome .dg-nav-vip-btn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.site-header-chrome .dg-nav-vip-btn .wp-block-navigation-item__content,
.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.site-header-chrome .dg-nav-vip-btn .wp-block-navigation-item__content:hover,
.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content:hover {
    background: #ea580c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(123, 58, 25, 0.35) !important;
    border-bottom: none !important;
}

/* ====================================================================
 * HEADER — Static fallback
 * ==================================================================== */
#ct-header-elementor {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
#ct-header-elementor.is-sticky {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Top bar: timeline + social */
.ct-header-top-bar {
    background: linear-gradient(360deg, rgb(0, 0, 0) 0%, rgb(0, 72, 67) 100%);
    padding: 6px 0;
}
.ct-header-top-bar .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.ct-header-top-bar .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Timeline */
.banner-timeline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.banner-timeline .title {
    color: #fff;
    font-family: var(--dg-font-sans);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}
.banner-timeline .line {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 200px;
}
.banner-timeline .year {
    background: #fff;
    color: var(--dg-primary);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}
.banner-timeline .line::before {
    content: '';
    flex: 1;
    height: 3px;
    background: var(--dg-primary);
    min-width: 100px;
}

/* Social icons */
.ct-social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.ct-social-icons li a {
    color: #fff;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}
.ct-social-icons li a:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

/* Main bar: logo + nav */
.ct-header-main-bar {
    padding: 12px 0;
}
.ct-header-main-bar .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.ct-header-main-bar .row {
    display: flex;
    align-items: center;
}
.ct-header-branding {
    flex-shrink: 0;
}
.ct-header-branding .logo-mobile,
.ct-header-branding .logo-light {
    display: inline-block;
}
.ct-header-branding img {
    height: 50px;
    width: auto;
    max-width: 200px;
}
.ct-header-branding .logo-light {
    display: none;
}

/* Header oscuro (sobre home) */
.dark-header #ct-header-elementor {
    background: var(--dg-bg-dark);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dark-header .ct-header-branding .logo-mobile {
    display: none;
}
.dark-header .ct-header-branding .logo-light {
    display: inline-block;
}

/* Navigation */
.ct-header-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.ct-main-navigation {
    display: flex;
    align-items: center;
}
.ct-main-navigation-inner {
    display: flex;
    align-items: center;
    width: 100%;
}
.ct-logo-mobile {
    display: none;
}
.ct-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}
.ct-main-menu > li {
    position: relative;
}
.ct-main-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    color: var(--dg-text);
    font-family: var(--dg-font-sans);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 2px solid transparent;
}
.ct-main-menu > li > a:hover {
    color: var(--dg-primary);
    border-bottom-color: var(--dg-primary);
}
.ct-main-menu .link-icon {
    font-size: 14px;
    color: var(--dg-primary);
}

/* Sub-menu */
.ct-main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--dg-bg-dark);
    border-radius: 8px;
    padding: 8px 0;
    border: 1px solid var(--dg-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 999;
}
.ct-main-menu li:hover > .sub-menu,
.ct-main-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ct-main-menu .sub-menu li > a {
    display: block;
    padding: 10px 24px;
    color: #fff;
    font-family: var(--dg-font-body);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.ct-main-menu .sub-menu li > a:hover {
    color: var(--dg-primary-light);
    background: rgba(255, 255, 255, 0.06);
}

/* Dark header navigation override */
.dark-header .ct-main-menu > li > a {
    color: #fff;
    border-bottom-color: transparent;
}
.dark-header .ct-main-menu > li > a:hover {
    color: var(--dg-primary-light);
    border-bottom-color: var(--dg-primary-light);
}

/* Mobile toggle */
.ct-mobile-meta-item--btn {
    display: none;
    margin-left: 12px;
}
.ct-header-mobile-toggle {
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--dg-text);
}
.dark-header .ct-header-mobile-toggle {
    color: #fff;
}

/* Mobile menu */
@media (max-width: 991px) {
    .ct-header-top-bar {
        display: none;
    }
    .ct-mobile-meta-item--btn {
        display: block;
    }
    .ct-header-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--dg-primary);
    }
    .ct-header-navigation.is-open {
        display: block;
    }
    .ct-main-menu {
        flex-direction: column;
        gap: 0;
        padding: 16px 0;
    }
    .ct-main-menu > li {
        width: 100%;
    }
    .ct-main-menu > li > a {
        color: #fff !important;
        padding: 12px 24px;
        border-bottom-color: rgba(255, 255, 255, 0.15) !important;
    }
    .ct-main-menu > li > a:hover {
        color: var(--dg-primary-light) !important;
        background: rgba(255, 255, 255, 0.06);
    }
    .ct-main-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 0;
        box-shadow: none;
        border: 0;
        margin: 0;
        padding: 0;
    }
    .ct-main-menu .sub-menu li > a {
        padding: 8px 36px;
    }
}

/* ====================================================================
 * FOOTER — Chrome CPT (Gutenberg blocks in .site-footer-chrome)
 * 3-column layout, full-width dark gradient background
 * 200px padding left/right on inner columns, harmonious element spacing
 * ==================================================================== */

.site-footer-chrome {
    position: relative;
    z-index: 5;
    width: 100%;
}

/* The outer wp-block-group has the gradient background — FULL WIDTH */
.site-footer-chrome > .wp-block-group {
    /* Gradient applied inline via Gutenberg block attributes */
    /* Override any default padding — let columns handle side spacing */
}

/* The wp-block-columns gets 200px side padding for content inset */
.site-footer-chrome > .wp-block-group > .wp-block-columns {
    /* 200px padding set inline from the Gutenberg block */
    gap: 3rem;
}

/* Each column gets auto padding for harmony */
.site-footer-chrome .wp-block-column {
    padding: 1rem 0.5rem;
}

/* Column 1: Logo + description + CTA */
.site-footer-chrome .wp-block-column:first-child .wp-block-image img {
    max-width: 280px;
    height: auto;
    margin-bottom: 1rem;
}

.site-footer-chrome .wp-block-column:first-child p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Column 2: Links rápidos */
.site-footer-chrome .wp-block-column:nth-child(2) h2 {
    font-family: var(--dg-font-sans);
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-top: 0;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--dg-primary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Fix: h2 headings in any footer column must be white on the dark teal
   gradient. The `has-link-color` utility from theme.json was applying
   the link color (#0070C0) instead of `has-white-color`. */
.site-footer-chrome h2 {
    color: #fff !important;
}

.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-list li {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

/* Hide empty list items */
.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-list li:empty {
    display: none;
}

.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-list a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    position: relative;
    padding-left: 1rem;
}

.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-list a::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--dg-primary);
    font-weight: 700;
}

.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-list a:hover {
    color: #fff;
}

/* Social links in column 2 */
.site-footer-chrome .wp-block-column:nth-child(2) .wp-block-social-links {
    margin-top: 1.5rem;
}

/* Footer CTA Buttons (Column 1 "Sobre nosotros" & Column 3 Contact) */
.site-footer-chrome .wp-block-button,
.site-footer-chrome .wp-block-column:first-child .wp-block-button {
    display: inline-block !important;
    width: auto !important;
    margin: 1.25rem 0 0 0 !important;
}

.site-footer-chrome .wp-block-button__link,
.site-footer-chrome .wp-block-column:first-child .wp-block-button__link,
.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-button__link,
.site-footer-chrome a.wp-block-button__link {
    background: linear-gradient(135deg, #B35524 0%, #7D3A19 100%) !important;
    color: #FFFFFF !important;
    font-family: var(--dg-font-heading, "Mulish", sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0.75rem 1.75rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 42px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    box-shadow: 0 4px 14px rgba(179, 85, 36, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    margin-bottom: 1.5rem !important;
}

.site-footer-chrome .wp-block-button__link:hover,
.site-footer-chrome .wp-block-column:first-child .wp-block-button__link:hover,
.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-button__link:hover,
.site-footer-chrome a.wp-block-button__link:hover {
    background: linear-gradient(135deg, #7D3A19 0%, #57250E 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(125, 58, 25, 0.5) !important;
    color: #FFFFFF !important;
}

/* Contact details - icon + text pairs.
 * El bloque viene con wp-block-columns que en mobile stackea, dejando
 * un salto antinatural entre el icono (24px) y el texto. Forzamos
 * flex-direction row siempre: icono a la izquierda, texto a la derecha,
 * ambos arriba. */
.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    padding: 0;
    margin-bottom: 0.75rem;
    background: transparent !important;
    gap: 0.75rem;
}

.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns .wp-block-column {
    flex-basis: auto !important;
}

.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns .wp-block-column:first-child {
    flex: 0 0 24px !important;
    width: 24px !important;
    line-height: 1;
}

.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns .wp-block-column:last-child {
    flex: 1 1 auto !important;
    min-width: 0;
}

.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns .wp-block-column p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns .wp-block-column a {
    color: var(--dg-primary-light);
    text-decoration: none;
}

.site-footer-chrome .wp-block-column:nth-child(3) .wp-block-columns .wp-block-column a:hover {
    color: #fff;
}

/* ====================================================================
 * FOOTER — Static fallback
 * ==================================================================== */
#colophon.site-footer-custom {
    background: var(--dg-bg-footer);
    color: var(--dg-text-light);
    margin-top: 60px;
}
.footer-custom-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top: 4 columns */
.footer-top {
    padding: 48px 0 32px;
}
.footer-top .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.footer-col {
    padding: 0 15px;
    margin-bottom: 24px;
}
.footer-logo img {
    max-width: 180px;
    height: auto;
    margin-bottom: 12px;
}
.footer-tagline {
    color: var(--dg-text-on-dark);
    font-family: var(--dg-font-body);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}
.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}
.footer-social li a {
    color: #fff;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transition: background 0.2s ease;
    text-decoration: none;
}
.footer-social li a:hover {
    background: var(--dg-primary);
}
.footer-title {
    color: #fff;
    font-family: var(--dg-font-sans);
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-contact {
    color: var(--dg-text-on-dark);
    font-family: var(--dg-font-body);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 12px;
}
.footer-contact strong {
    color: #fff;
    font-weight: 700;
}
.footer-contact a {
    color: var(--dg-primary-light);
    text-decoration: none;
}
.footer-contact a:hover {
    color: #fff;
}

/* Footer menus */
.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-menu li {
    margin-bottom: 8px;
}
.footer-menu li a {
    color: var(--dg-text-on-dark);
    text-decoration: none;
    font-family: var(--dg-font-body);
    font-size: 13px;
    transition: color 0.2s ease;
}
.footer-menu li a:hover {
    color: var(--dg-primary-light);
}

/* Bottom: copyright */
.footer-bottom {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #888;
    font-size: 12px;
}
.footer-bottom p {
    margin: 0;
}
.footer-bottom a {
    color: var(--dg-primary-light);
    text-decoration: none;
}
.footer-bottom a:hover {
    color: #fff;
}

/* ====================================================================
 * MAIN / CONTENT
 * ==================================================================== */
.site-main {
    min-height: 60vh;
}

/* Lazyload */
img.lazyload {
    opacity: 0;
    transition: opacity 0.3s ease;
}
img.lazyloaded {
    opacity: 1;
}

/* ====================================================================
 * RESPONSIVE — Footer chrome
 * ==================================================================== */
@media (max-width: 1400px) {
    .site-footer-chrome > .wp-block-group > .wp-block-columns {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
}

@media (max-width: 991px) {
    .site-footer-chrome > .wp-block-group > .wp-block-columns {
        padding-left: 40px !important;
        padding-right: 40px !important;
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    .site-footer-chrome > .wp-block-group > .wp-block-columns {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ct-header-timeline,
    .ct-header-social {
        text-align: center;
        justify-content: center;
    }
    .footer-top .row {
        flex-direction: column;
    }
}

/* ====================================================================
 * FOOTER CHROME — Estructura reescrita con HTML semantico
 * Patron: 3 columnas (brand / links / contact) + copy final.
 * Iconos SVG de 20x20px (no emojis). Aria-label en social para screen
 * readers. Contraste: texto blanco rgba(255,255,255,0.85) sobre
 * chrome-dark (#004843) = 9.5:1, sobre el gradient black-to-teal(40%+) =
 * 9.0:1+. WCAG AAA.
 * ==================================================================== */
.site-footer-chrome__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 24px 24px;
    color: #fff;
}

.site-footer-chrome__columns {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    align-items: start;
    gap: 48px;
}

.site-footer-chrome__col h4 {
    margin: 0 0 16px;
    font-family: var(--dg-font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid var(--dg-primary);
    padding-bottom: 8px;
    display: inline-block;
}

.site-footer-chrome__col--brand p {
    margin: 20px 0 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 38ch;
}

.site-footer-chrome__cta {
    display: inline-block;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-family: var(--dg-font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.site-footer-chrome__cta:hover {
    background: #ea580c;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.site-footer-chrome__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.site-footer-chrome__list a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.18s ease, padding-left 0.18s ease;
    padding-left: 0;
}

.site-footer-chrome__list a:hover {
    color: var(--dg-primary-light, #AFFFF9);
    padding-left: 6px;
}

.site-footer-chrome__social {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.site-footer-chrome__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background 0.18s ease, color 0.18s ease;
}

.site-footer-chrome__social-link:hover {
    background: var(--dg-primary);
    color: #fff;
}

.site-footer-chrome__contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.site-footer-chrome__contact-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.18s ease;
}

.site-footer-chrome__contact-item a:hover {
    color: var(--dg-primary-light, #AFFFF9);
}

.site-footer-chrome__contact-icon {
    flex-shrink: 0;
    color: var(--dg-primary-light, #AFFFF9);
}

.site-footer-chrome__hours {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    line-height: 1.6;
}

.site-footer-chrome__hours a {
    color: var(--dg-primary-light, #AFFFF9);
    text-decoration: none;
}

.site-footer-chrome__hours a:hover {
    text-decoration: underline;
}

.site-footer-chrome__copy {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

@media (max-width: 991px) {
    .site-footer-chrome__columns {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .site-footer-chrome__col--brand {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .site-footer-chrome__columns {
        grid-template-columns: 1fr;
    }
    .site-footer-chrome__col--brand {
        grid-column: span 1;
    }
}

/* ====================================================================
 * MEGA MENU (desktop chrome) — 4 columnas con iconos 45px
 * Reemplaza al core/navigation block cuando se carga el chrome CPT.
 * Patron: cada columna tiene icono SVG 45px + label + panel con sublinks
 * que aparece on hover/focus. Una columna "VIP" tiene el gradiente cta-warm
 * para el boton de la academia. Sin kicker, sin section numbers, sin
 * cards de icon+heading+text del mismo tamano (craft floor de Impeccable).
 * ==================================================================== */
.dg-mega-menu {
    background: #fff;
    border-top: 1px solid rgba(0, 72, 67, 0.08);
    border-bottom: 1px solid rgba(0, 72, 67, 0.08);
    padding: 0 16px;
    position: sticky;
    top: var(--dg-scroll-away);
    z-index: 998;
}

.dg-mega-menu__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0;
    align-items: stretch;
}

.dg-mega-menu__column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0, 72, 67, 0.06);
}

.dg-mega-menu__column:last-child {
    border-right: none;
}

.dg-mega-menu__column--vip {
    border-right: none;
    padding: 12px 16px;
}

.dg-mega-menu__trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 16px;
    width: 100%;
    text-decoration: none;
    color: var(--dg-primary-dark);
    transition: background 0.18s ease;
}

.dg-mega-menu__trigger:hover,
.dg-mega-menu__trigger:focus-visible,
.dg-mega-menu__column:hover .dg-mega-menu__trigger,
.dg-mega-menu__column:focus-within .dg-mega-menu__trigger {
    background: rgba(0, 145, 136, 0.06);
}

.dg-mega-menu__icon {
    width: 45px;
    height: 45px;
    color: var(--dg-primary);
    flex-shrink: 0;
}

.dg-mega-menu__trigger:hover .dg-mega-menu__icon,
.dg-mega-menu__trigger:focus-visible .dg-mega-menu__icon {
    color: var(--dg-primary-dark);
}

.dg-mega-menu__label {
    font-family: var(--dg-font-sans);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0.01em;
}

.dg-mega-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    background: #fff;
    border: 1px solid rgba(0, 72, 67, 0.1);
    border-top: 3px solid var(--dg-primary);
    box-shadow: 0 12px 32px rgba(0, 72, 67, 0.12);
    padding: 16px;
    display: none;
    z-index: 10;
}

.dg-mega-menu__column:hover .dg-mega-menu__panel,
.dg-mega-menu__column:focus-within .dg-mega-menu__panel,
.dg-mega-menu__trigger[aria-expanded="true"] + .dg-mega-menu__panel {
    display: block;
}

.dg-mega-menu__panel-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.dg-mega-menu__sublink {
    display: block;
    padding: 10px 12px;
    color: var(--dg-primary-dark);
    text-decoration: none;
    font-family: var(--dg-font-body);
    font-size: 0.9rem;
    line-height: 1.3;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.dg-mega-menu__sublink:hover,
.dg-mega-menu__sublink:focus-visible {
    background: rgba(0, 145, 136, 0.08);
    color: var(--dg-primary);
}

.dg-nav-vip-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-family: var(--dg-font-sans);
    text-align: center;
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.dg-nav-vip-btn:hover,
.dg-nav-vip-btn:focus-visible {
    background: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(123, 58, 25, 0.35);
    transform: translateY(-1px);
}

.dg-nav-vip-btn__label {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dg-nav-vip-btn__sub {
    font-size: 0.75rem;
    opacity: 0.85;
    font-weight: 600;
}

@media (max-width: 991px) {
    .dg-mega-menu__inner {
        grid-template-columns: 1fr 1fr;
    }
    .dg-mega-menu__column {
        border-right: none;
    }
}

@media (max-width: 767px) {
    .dg-mega-menu__inner {
        grid-template-columns: 1fr;
    }
    .dg-mega-menu__icon {
        width: 36px;
        height: 36px;
    }
    .dg-mega-menu__label {
        font-size: 0.85rem;
    }
}