/**
 * Landings servicio × geo — /mexico/ciudades|estados/{slug}/servicios/{svc}/
 * Carga AL FINAL (footer sync) para ganar sobre home-mobile / cards-mobile.
 * Solo body.mx-service-landing — no afecta home, hubs ni páginas de ciudad.
 */

/* ——— Móvil: más respiro lateral SOLO en el banner/hero ——— */
/* No tocar .footer, .full-width-section, FAQ ni módulos globales (menú/footer = estándar sitio). */
@media (max-width: 968px) {
    body.mx-service-landing .top-content-wrapper .container--hero,
    body.mx-service-landing .top-content-wrapper .content-section {
        padding-left: clamp(1.75rem, 7vw, 2.5rem) !important;
        padding-right: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
}

/* ——— Hero: web/ecom = 2 col (como nacionales); SEO centrado; software/IA 2 col ——— */
body.mx-service-landing .hero-intro {
    width: 100%;
    max-width: none;
}

body.mx-service-landing.mx-svc--seo .hero-intro {
    margin-bottom: 2.5rem;
    text-align: center;
}

body.mx-service-landing .hero-title {
    margin-bottom: 1.25rem !important;
    line-height: 1.38 !important;
    letter-spacing: 0.5px !important;
}

body.mx-service-landing.mx-svc--seo .hero-title {
    text-align: center !important;
}

body.mx-service-landing.mx-svc--web .hero-title,
body.mx-service-landing.mx-svc--ecommerce .hero-title,
body.mx-service-landing.mx-svc--software .hero-title,
body.mx-service-landing.mx-svc--ia .hero-title,
body.mx-service-landing.mx-svc--web .hero-subtitle,
body.mx-service-landing.mx-svc--ecommerce .hero-subtitle,
body.mx-service-landing.mx-svc--software .hero-subtitle,
body.mx-service-landing.mx-svc--ia .hero-subtitle {
    text-align: left !important;
}

/* Badges: centrar solo SEO (web/ecom siguen el split 50/50) */
body.mx-service-landing.mx-svc--seo .hero-intro .badge {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.mx-service-landing.mx-svc--seo .hero-subtitle {
    max-width: min(820px, 60ch) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    line-height: 1.7 !important;
    font-size: var(--cw-text-hero-sub, clamp(0.95rem, 1.05vw, 1.05rem)) !important;
    text-align: center !important;
}

body.mx-service-landing.mx-svc--web .hero-subtitle,
body.mx-service-landing.mx-svc--ecommerce .hero-subtitle {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.7 !important;
    font-size: var(--cw-text-hero-sub, clamp(0.95rem, 1.05vw, 1.05rem)) !important;
}

/* ——— ≤968px: web/ecom centrados (columna única) ——— */
@media (max-width: 968px) {
    body.mx-service-landing.mx-svc--web .hero-intro,
    body.mx-service-landing.mx-svc--ecommerce .hero-intro {
        text-align: center;
    }
    body.mx-service-landing.mx-svc--web .hero-title,
    body.mx-service-landing.mx-svc--ecommerce .hero-title,
    body.mx-service-landing.mx-svc--web .hero-subtitle,
    body.mx-service-landing.mx-svc--ecommerce .hero-subtitle {
        text-align: center !important;
    }
    body.mx-service-landing.mx-svc--web .hero-intro .badge,
    body.mx-service-landing.mx-svc--ecommerce .hero-intro .badge {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.mx-service-landing.mx-svc--web .hero-subtitle,
    body.mx-service-landing.mx-svc--ecommerce .hero-subtitle {
        max-width: min(820px, 60ch) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ——— Pillar: título ancho completo; icono + texto en fila centrada ——— */
body.mx-service-landing .mx-svc-geo-pillar {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
}

body.mx-service-landing .mx-svc-geo-pillar .mx-svc-geo-title {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.38 !important;
}

body.mx-service-landing .mx-svc-geo-pillar-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    margin-inline: auto !important;
}

body.mx-service-landing .mx-svc-geo-pillar-copy {
    flex: 0 1 auto !important;
    max-width: min(60ch, calc(100% - 4.5rem)) !important;
    text-align: center !important;
}

body.mx-service-landing .mx-svc-geo-pillar .mx-svc-geo-lead,
body.mx-service-landing .mx-svc-geo-pillar .mx-svc-geo-context {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.55 !important;
}
body.mx-service-landing .mx-svc-geo-pillar .mx-svc-geo-lead {
    margin: 0 0 0.85rem !important;
}
body.mx-service-landing .mx-svc-geo-pillar .mx-svc-geo-context {
    margin: 0 !important;
}

/* ——— Sección cards (igual home) ——— */
body.mx-service-landing .mx-geo-solutions.cards-section--bridge {
    margin-top: clamp(2rem, 4vw, 3.5rem) !important;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
    margin-inline: auto !important;
    padding: clamp(2rem, 4vw, 3.5rem) var(--cw-shell-pad-x, 5%) !important;
    max-width: var(--cw-shell-wide, 1540px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.mx-service-landing .mx-geo-solutions .cards-section__eyebrow {
    display: block !important;
    margin: 0 auto 0.85rem !important;
}

body.mx-service-landing .mx-geo-solutions .section-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
}

body.mx-service-landing .mx-geo-solutions .section-subtitle {
    margin: 0 auto 1.5rem !important;
    max-width: 52ch !important;
    text-align: center !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container.cards-container--rail.cards-container--quad {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.75rem, 1.2vw, 1.05rem) !important;
    width: 100% !important;
    max-width: min(1680px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
}

@media (min-width: 969px) {
    body.mx-service-landing .mx-geo-solutions .cards-container.cards-container--rail.cards-container--quad {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 86% !important;
        max-width: min(1447px, 86%) !important;
    }
}

@media (max-width: 560px) {
    body.mx-service-landing .mx-geo-solutions .cards-container.cards-container--rail.cards-container--quad {
        grid-template-columns: 1fr !important;
    }
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail.cards-container--quad > .card-svc {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100%;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc__title-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc__glow {
    display: none !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc .card-icon,
body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc .improved-icon {
    width: clamp(40px, 3.2vw, 46px) !important;
    height: clamp(40px, 3.2vw, 46px) !important;
    min-width: clamp(40px, 3.2vw, 46px) !important;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important;
    border-radius: 10px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: unset !important;
    color: var(--card-svc-accent, #00f3ff) !important;
    background: color-mix(in srgb, var(--card-svc-accent, #00f3ff) 10%, rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid color-mix(in srgb, var(--card-svc-accent, #00f3ff) 24%, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: none !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc__heading {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    grid-area: unset !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card p {
    flex: 1 1 auto !important;
}

/* Botones = home (no píldora 999px de home-mobile) */
body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-button,
body.mx-service-landing .mx-geo-solutions .cards-container--rail .modern-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: auto !important;
    min-height: 40px !important;
    padding: 0.55rem 0.75rem !important;
    font-family: Inter, 'Segoe UI', system-ui, sans-serif !important;
    font-size: clamp(0.78rem, 0.82vw, 0.88rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    border-radius: 10px !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc:hover .card-button,
body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc:hover .modern-button {
    background: color-mix(in srgb, var(--card-svc-accent, #00f3ff) 10%, rgba(255, 255, 255, 0.04)) !important;
    border-color: color-mix(in srgb, var(--card-svc-accent, #00f3ff) 28%, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: none !important;
    color: #fff !important;
    transform: none !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-button i,
body.mx-service-landing .mx-geo-solutions .cards-container--rail .modern-button i {
    font-size: 0.7rem !important;
    transition: transform 0.28s ease !important;
}

body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc:hover .card-button i,
body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-svc:hover .modern-button i {
    transform: translateX(3px) !important;
}

@media (max-width: 968px) {
    body.mx-service-landing .mx-geo-solutions .cards-container--rail .card-button,
    body.mx-service-landing .mx-geo-solutions .cards-container--rail .modern-button {
        min-height: var(--cw-btn-h-sm, 46px) !important;
        padding: 0.65rem 1rem !important;
        font-size: clamp(0.78rem, 2.8vw, 0.85rem) !important;
        border-radius: 11px !important;
        white-space: normal !important;
    }
    body.mx-service-landing .mx-geo-solutions .cards-container.cards-container--rail.cards-container--quad {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ——— ≤640px: teléfonos — hero CTA 50/50 + cards 1 columna ——— */
@media (max-width: 640px) {
    /* Hero CTA buttons: fila centrada, 50/50 de ancho */
    body.mx-service-landing .cta-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }
    body.mx-service-landing .cta-container .cta-button {
        flex: 1 1 calc(50% - 0.325rem) !important;
        min-width: 0 !important;
        width: auto !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 48px !important;
        white-space: normal !important;
        padding: 0.75rem 0.85rem !important;
        font-size: clamp(0.78rem, 3vw, 0.86rem) !important;
    }
    /* Cards otras soluciones: 1 columna */
    body.mx-service-landing .mx-geo-solutions .cards-container.cards-container--rail.cards-container--quad {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    /* Subtítulo hero: misma escala que home */
    body.mx-service-landing.mx-svc--web .hero-subtitle,
    body.mx-service-landing.mx-svc--ecommerce .hero-subtitle,
    body.mx-service-landing.mx-svc--seo .hero-subtitle {
        font-size: var(--cw-text-hero-sub, clamp(0.95rem, 1.05vw, 1.05rem)) !important;
    }
}

/* ——— ≤480px: apilar pillar body, tipografía compacta ——— */
@media (max-width: 480px) {
    body.mx-service-landing .mx-svc-geo-pillar-body {
        flex-direction: column !important;
        align-items: center !important;
    }
    body.mx-service-landing .mx-svc-geo-pillar-copy {
        max-width: 100% !important;
        text-align: center !important;
    }
}