/**
 * APEX HOME — MÓVIL
 * ─────────────────────────────────────────────────────────────
 * Fuente única de verdad para la versión móvil de la home.
 * Se carga DESPUÉS de apex-home.css (dependencia 'apex-home'),
 * así gana en conflictos de igual especificidad.
 *
 * Filosofía: ESENCIAL. En móvil se oculta lo decorativo y se
 * muestra solo lo importante, apilado y ordenado.
 *
 * Breakpoint principal: <=768px (móvil + tablet chica).
 * Ajustes finos: <=400px.
 * NO afecta desktop (>768px no entra a ninguna media query de aquí).
 */

@media (max-width:768px){

  /* ══════════════════════════════════════════════════════
     HERO — minimalista: solo título + descripción + botones
     ══════════════════════════════════════════════════════ */
  .hero-v2{min-height:auto}
  .hero-v2-inner{flex-direction:column;align-items:stretch;padding:0;min-height:auto}
  .hv2-left{width:100%;padding:34px 20px 40px}

  /* Ocultar foto, nombre, panel de mercados y box de admisión */
  .hv2-photo,
  .hv2-nametag,
  .hv2-ops,
  .hv2-adm{display:none !important}

  .hv2-eyebrow{margin-bottom:22px}
  .hv2-title{font-size:clamp(44px,12vw,64px);line-height:.94}
  .hv2-rule{margin:24px 0 22px}
  .hv2-desc{font-size:15.5px;max-width:100%;margin-bottom:30px}
  .hv2-cta{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:0}
  .hv2-btn-accent,
  .hv2-btn-line{width:100%;text-align:center;justify-content:center;font-size:14px;padding:14px 20px}

  /* ══════════════════════════════════════════════════════
     SECTIONS — base
     ══════════════════════════════════════════════════════ */
  .section{padding:46px 18px}
  .sec-tag{font-size:9px;margin-bottom:14px}
  .sec-h2{font-size:clamp(32px,8.5vw,42px);margin-bottom:14px}
  .sec-body,
  .sec-body-lg{font-size:15px;max-width:100%}

  /* ══════════════════════════════════════════════════════
     PROGRAMAS — quitar decoración (gráfico fantasma + íconos grandes)
     ══════════════════════════════════════════════════════ */
  .apex-programas{padding:48px 0}
  .apex-programas-grid{grid-template-columns:1fr;gap:32px}
  .apex-copy{min-height:auto}
  .apx-eyebrow{margin-bottom:6px}
  .apx-mega-title{font-size:clamp(40px,10vw,52px)}
  .apx-lead{width:100%;font-size:16px;margin:22px 0 28px}

  /* gráfico decorativo de fondo: fuera */
  .apx-market-art{display:none !important}

  /* los 3 pilares (Enfoque/Metodología/Rigor): chicos, en fila compacta */
  .apx-pillars{gap:14px;flex-wrap:wrap}
  .apx-pillars i{display:none}             /* separadores verticales fuera */
  .apx-pillar{width:auto;flex:1;min-width:88px}
  .apx-pillar img{width:30px;height:30px;margin:0 0 8px}
  .apx-pillar strong{font-size:12px;letter-spacing:.04em}

  /* tarjeta del programa: se mantiene, padding cómodo */
  .apx-program-card{padding:26px 20px;min-height:unset}
  .apx-card-title{font-size:27px}
  .apx-stats{gap:14px;flex-wrap:wrap}
  .apx-card-desc{font-size:14px}

  /* ══════════════════════════════════════════════════════
     ESPECIALIZACIONES — quitar imagen decorativa de fondo
     ══════════════════════════════════════════════════════ */
  .apex-especializaciones{padding:48px 0}
  .apx-special-head{grid-template-columns:1fr;gap:24px;margin-bottom:34px}
  .apx-special-head p{width:100%;margin-bottom:0}
  .apx-mega-title.small{font-size:clamp(38px,9.5vw,50px)}
  .apx-special-grid{grid-template-columns:1fr;gap:16px}

  .apx-special-visual{display:none !important}
  .apx-special-body{width:100%}
  .apx-special-card{min-height:unset;padding:24px 20px}
  /* en táctil no hay hover: mostrar los puntos siempre */
  .apx-special-points{max-height:none !important;opacity:1 !important;margin:0 0 18px !important}
  .apx-special-card h3{font-size:23px}
  .apx-special-sub{font-size:14px}

  /* ══════════════════════════════════════════════════════
     PILARES ("Dos pilares") — full width, sin depender de hover
     ══════════════════════════════════════════════════════ */
  .pilares-grid{grid-template-columns:1fr;gap:14px}
  .pilar{padding:24px 20px;transform:none !important}
  .pilar-icon{width:26px;height:26px;opacity:.85}
  .pilar-num-badge{margin-bottom:16px}
  .pilar-num-badge span{font-size:38px}
  .pilar h3{font-size:22px}
  .pilar p{opacity:1 !important;max-height:none !important;margin-bottom:16px !important;font-size:14px}
  .pilar-tags{display:none}                /* tags resumidos fuera en móvil */
  .pilar-detail{max-height:none !important;opacity:1 !important}
  .pilar-detail li{font-size:13.5px;padding:9px 0;gap:11px}
  .pilar-detail li .di-icon{width:28px;height:28px;font-size:12px}

  /* ══════════════════════════════════════════════════════
     EQUIPO — 1 columna, foto se mantiene
     ══════════════════════════════════════════════════════ */
  .equipo-grid{grid-template-columns:1fr;gap:14px;max-width:340px}
  .miembro{aspect-ratio:3/4}

  /* ══════════════════════════════════════════════════════
     VALORES — acordeón táctil (ya manejado), ajuste de layout
     ══════════════════════════════════════════════════════ */
  .valores-layout{grid-template-columns:1fr;gap:26px}
  .flip-grid{margin-top:24px;gap:8px}
  .flip-card{height:auto;perspective:none}
  .flip-inner{transform:none !important;position:static;transform-style:flat}
  .flip-front{position:static;backface-visibility:visible;border-radius:6px;padding:14px 16px}
  .flip-front-name{font-size:15px}
  .flip-back{position:static;transform:none;backface-visibility:visible;border-radius:6px;padding:14px 16px;margin-top:3px;display:none}
  .flip-card.open .flip-back{display:flex}
  .flip-back-text{font-size:12.5px;line-height:1.55}

  /* ══════════════════════════════════════════════════════
     CTA FINAL + FOOTER
     ══════════════════════════════════════════════════════ */
  .casos-inner{padding:28px 18px;margin:24px auto 0}
  .casos-inner .btn-accent{width:100%;justify-content:center}
  .footer-main{padding:44px 18px 28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ══════════════════════════════════════════════════════════
   AJUSTES FINOS — pantallas muy chicas (<=400px)
   ══════════════════════════════════════════════════════════ */
@media (max-width:400px){
  .hv2-title{font-size:clamp(40px,13vw,52px)}
  .section{padding:40px 16px}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  /* si los 3 pilares se ven apretados en pantallas mínimas, ocultarlos */
  .apx-pillars{gap:10px}
  .apx-pillar strong{font-size:11px}
}