/*
 * Mazca 3 - Subpage Heroes · Mobile Responsive Unified
 * ====================================================
 * Centraliza el comportamiento mobile de todos los heroes de subpáginas
 * sin tocar cada archivo individualmente.
 *
 * Patrón base (espejando hero home mobile):
 *   · Grid 2 cols → flex vertical (texto arriba, elemento único debajo)
 *   · Paddings reducidos, alineación izquierda (mantener personalidad)
 *   · H1 clamp más pequeño pero legible
 *   · Orbs decorativos escalados/recolocados para no saturar
 *   · Tags y CTAs en ancho cómodo (44px+ táctiles)
 *   · Elementos únicos (termómetro, pills, HMI, gráficos) mantienen
 *     su estructura pero se re-escalan con transform:scale o clamp
 *
 * Breakpoints:
 *   ≤ 767px → mobile (override completo)
 *   768-1023 → tablet (ajustes puntuales sólo donde el desktop desborda)
 */

/* ═══════════════════════════════════════════════════════════════════
   BASE COMÚN - aplica a TODOS los heroes en mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /*
     * Regla global: cualquier contenedor hero de subpágina que haga grid
     * 2 cols pasa a columna.
     */
    .cal-hero,
    .cs-hero--desktop,
    .dhero-inner,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .si-hero,
    .at-hero,
    .ii-hero,
    .ip-hero,
    .shi-wrap {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    /*
     * Fallback para heroes SIN contenedor -left explícito.
     * Cualquier hero raíz en mobile centra el contenido.
     */
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-wrap {
        text-align: center;
    }

    /*
     * Padding general - top generoso para que el eyebrow no quede
     * pegado al header. El bottom menor porque luego viene el right.
     */
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .si-hero,
    .at-hero,
    .ii-hero,
    .ip-hero,
    .dhero-wrap,
    .shi-wrap {
        padding: 128px 24px 56px !important;
    }

    /* Min-height razonable - que no ocupe viewport entero */
    .dhero-wrap {
        min-height: auto !important;
    }

    /* ══════════════════════════════════
       ORBS decorativos - más pequeños y fuera del flujo visual
    ══════════════════════════════════ */
    .cal-hero-orb,
    .ene-hero-orb, .ene-hero-orb2,
    .gov-hero-orb, .gov-hero-orb2,
    .idi-hero-orb, .idi-hero-orb2,
    .ma-hero-orb, .ma-hero-orb2,
    .seg-hero-orb, .seg-hero-orb2,
    .dhero-orb {
        width: 320px !important;
        height: 320px !important;
        top: -120px !important;
        right: -100px !important;
    }
    .ene-hero-orb2,
    .gov-hero-orb2,
    .idi-hero-orb2,
    .ma-hero-orb2,
    .seg-hero-orb2 {
        top: auto !important;
        bottom: -80px !important;
        right: auto !important;
        left: -80px !important;
        width: 240px !important;
        height: 240px !important;
    }

    /* ══════════════════════════════════
       LEFT (texto) - ancho completo, CENTRADO como home mobile
    ══════════════════════════════════ */
    .cal-hero-left,
    .ene-hero-left,
    .gov-hero-left,
    .idi-hero-left,
    .ma-hero-left,
    .seg-hero-left,
    .dhero-left,
    .at-left,
    .ii-left,
    .ip-left {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* ══════════════════════════════════
       BREADCRUMBS
    ══════════════════════════════════ */
    .cal-breadcrumb,
    .ene-breadcrumb,
    .gov-breadcrumb,
    .idi-breadcrumb,
    .ma-breadcrumb,
    .seg-breadcrumb {
        font-size: 8px !important;
        margin-bottom: 18px !important;
        flex-wrap: wrap;
    }

    /* ══════════════════════════════════
       TAGS (pill de sección) - centrados
    ══════════════════════════════════ */
    .cal-tag,
    .ene-tag,
    .gov-tag,
    .idi-tag,
    .ma-tag,
    .seg-tag,
    .dhero-tag,
    .at-tag,
    .ii-tag,
    .ip-tag,
    .shi-tag {
        padding: 7px 14px !important;
        font-size: 9px !important;
        margin: 0 auto 20px !important;
    }

    /* ══════════════════════════════════
       H1 - clamp mobile-friendly
    ══════════════════════════════════ */
    .cal-h1, .cal-hero-h1,
    .ene-h1, .ene-hero-h1,
    .gov-h1, .gov-hero-h1,
    .idi-h1, .idi-hero-h1,
    .ma-h1, .ma-hero-h1,
    .seg-h1, .seg-hero-h1,
    .dhero-h1,
    .at-h1, .at-hero-h1,
    .ii-h1, .ii-hero-h1,
    .ip-h1, .ip-hero-h1,
    .shi-h1 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
    }

    /* ══════════════════════════════════
       SUBTÍTULOS - centrados
    ══════════════════════════════════ */
    .cal-hero-sub,
    .ene-hero-sub,
    .gov-hero-sub,
    .idi-hero-sub,
    .ma-hero-sub,
    .seg-hero-sub,
    .dhero-sub,
    .at-hero-sub,
    .ii-hero-sub,
    .ip-hero-sub,
    .shi-sub {
        font-size: 14px !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
        margin: 0 auto 28px !important;
        text-align: center !important;
    }

    /* ══════════════════════════════════
       CTAs - centrados y táctiles
    ══════════════════════════════════ */
    .cal-cta,
    .ene-cta,
    .gov-cta,
    .idi-cta,
    .ma-cta,
    .seg-cta,
    .dhero-cta,
    .at-cta,
    .ii-cta,
    .ip-cta,
    .shi-cta,
    .cal-hero-cta,
    .ene-hero-cta,
    .gov-hero-cta,
    .idi-hero-cta,
    .ma-hero-cta,
    .seg-hero-cta {
        padding: 14px 26px !important;
        font-size: 11px !important;
        width: 100% !important;
        justify-content: center !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    /* ══════════════════════════════════
       RIGHT (elementos únicos)
    ══════════════════════════════════ */
    .cal-hero-right,
    .ene-hero-right,
    .gov-hero-right,
    .idi-hero-right,
    .ma-hero-right,
    .seg-hero-right,
    .at-right,
    .ii-right,
    .ip-right,
    .at-hero-bottom,
    .ii-hero-bottom,
    .ip-hero-bottom {
        margin-top: 48px;
        width: 100%;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ESPECÍFICOS POR SUBPÁGINA
═══════════════════════════════════════════════════════════════════ */

/* ─────── CALIDAD · Termómetro ─────── */
@media (max-width: 767px) {
    .cal-thermo {
        transform: scale(0.85);
        transform-origin: center;
    }
    .cal-thermo-wrap {
        padding: 20px !important;
    }
    .cal-thermo-scale {
        font-size: 10px !important;
    }
    .cal-thermo-label {
        font-size: 11px !important;
    }
}

/* ─────── DIGITAL · Pills de servicios ─────── */
@media (max-width: 767px) {
    .dhero-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start;
    }
    .dhero-pill {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }
    .dhero-right,
    .dhero-visual {
        margin-top: 40px;
    }
}

/* ─────── CONSULTORÍA SISTEMAS · Doble versión ─────── */
@media (max-width: 767px) {
    .cs-hero--desktop { display: none !important; }
    .cs-hero--mobile  { display: block !important; }
}
@media (min-width: 768px) {
    .cs-hero--mobile { display: none !important; }
}

/* ─────── INGENIERÍA INDUSTRIAL (ii-hero) ─────── */
@media (max-width: 767px) {
    .ii-hero-top,
    .ii-hero-bottom {
        padding: 40px 24px !important;
    }
    .ii-hero-top { padding-top: 88px !important; }
    .ii-visual,
    .ii-diagram {
        transform: scale(0.88);
        transform-origin: top center;
    }
}

/* ─────── INGENIERÍA PROCESOS (ip-hero) ─────── */
@media (max-width: 767px) {
    .ip-hero-top,
    .ip-hero-bottom {
        padding: 40px 24px !important;
    }
    .ip-hero-top { padding-top: 88px !important; }
    .ip-visual,
    .ip-diagram {
        transform: scale(0.88);
        transform-origin: top center;
    }
}

/* ─────── AUTOMOCIÓN (at-hero) ─────── */
@media (max-width: 767px) {
    .at-hero-top,
    .at-hero-bottom {
        padding: 40px 24px !important;
    }
    .at-hero-top { padding-top: 88px !important; }
    .at-visual,
    .at-car {
        transform: scale(0.88);
        transform-origin: top center;
    }
}

/* ─────── SUMINISTRO INDUSTRIAL · HMI display ─────── */
@media (max-width: 767px) {
    /*
     * El grid real está en .shi-main (no en .shi-wrap)
     * Lo pasamos a columna y centramos todo como la home mobile
     */
    .shi-wrap .shi-main {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 128px 24px 48px !important;
        min-height: auto !important;
    }

    /* LEFT centrado tipo home */
    .shi-wrap .shi-left {
        padding: 0 !important;
        padding-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Eyebrow centrado */
    .shi-wrap .shi-eyebrow {
        margin: 0 auto 24px !important;
    }

    /* H1 bien legible mobile */
    .shi-wrap .shi-h1 {
        font-size: clamp(34px, 9vw, 48px) !important;
        line-height: 1.08 !important;
        text-align: center !important;
    }

    /* Regla "Distribuidor oficial · 4 marcas líderes" - pasarla a bloque centrado */
    .shi-wrap .shi-rule {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 20px auto !important;
    }
    .shi-wrap .shi-rule-line {
        max-width: 60px !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent) !important;
    }
    .shi-wrap .shi-rule-label {
        text-align: center !important;
        white-space: normal !important;
    }

    /* Subtítulo centrado */
    .shi-wrap .shi-sub {
        text-align: center !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        margin: 0 auto 28px !important;
    }

    /* CTA centrado */
    .shi-wrap .shi-cta {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        padding: 15px 26px !important;
    }

    /*
     * RIGHT - El HMI portfolio
     * Centrado, sin padding lateral, escalado al ancho real
     */
    .shi-wrap .shi-right {
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .shi-wrap .shi-hmi {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px !important;
        padding: 20px 16px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .shi-hmi-header {
        padding: 0 0 14px !important;
        margin-bottom: 14px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .shi-hmi-body {
        padding: 0 !important;
    }
    .shi-hmi-grid {
        gap: 8px !important;
    }
    .shi-hmi-cell {
        padding: 10px !important;
    }
    .shi-hmi-val {
        font-size: 18px !important;
    }
    .shi-hmi-lbl {
        font-size: 8px !important;
    }

    /* Orb decorativo contenido */
    .shi-wrap .shi-orb {
        width: 380px !important;
        height: 380px !important;
        top: -120px !important;
        right: -120px !important;
    }
}

/* ─────── MEDIO AMBIENTE ─────── */
@media (max-width: 767px) {
    .ma-visual,
    .ma-chart {
        transform: scale(0.9);
        transform-origin: top center;
    }
}

/* ─────── SEGURIDAD ─────── */
@media (max-width: 767px) {
    .seg-visual,
    .seg-hero-visual {
        transform: scale(0.9);
        transform-origin: top center;
    }
}

/* ─────── I+D TECNOLOGÍA ─────── */
@media (max-width: 767px) {
    .idi-network,
    .idi-visual {
        transform: scale(0.88);
        transform-origin: top center;
    }
}

/* ─────── EFICIENCIA ENERGÉTICA ─────── */
@media (max-width: 767px) {
    .ene-visual,
    .ene-chart,
    .ene-dial {
        transform: scale(0.9);
        transform-origin: top center;
    }
}

/* ─────── BUEN GOBIERNO ─────── */
@media (max-width: 767px) {
    .gov-visual,
    .gov-scheme {
        transform: scale(0.9);
        transform-origin: top center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET (768-1023) - ajustes puntuales
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-inner {
        gap: clamp(20px, 3vw, 36px) !important;
    }

    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-wrap,
    .shi-wrap,
    .at-hero,
    .ii-hero,
    .ip-hero {
        padding: 96px 40px 72px !important;
    }

    .cal-h1, .ene-h1, .gov-h1, .idi-h1, .ma-h1, .seg-h1,
    .dhero-h1, .at-h1, .ii-h1, .ip-h1, .shi-h1 {
        font-size: clamp(32px, 5vw, 46px) !important;
    }
}