/* MXGA — secciones del home y bloques de contenido reconstruidos desde mxga.mx.
   Solo clases NUEVAS: la navbar, el carrusel, el pie y la plantilla de articulo
   siguen viviendo en nav.css y article.css. Paleta oficial (#04539C). */

/* ---------------- Aviso importante ----------------
   Replica del bloque .mxga-aviso del home de mxga.mx (rojo #A8261C sobre #FFF6F4). */
.mxga-aviso{
  width:100%; box-sizing:border-box; background:var(--alert-bg,#FFF6F4);
  border-top:1px solid rgba(168,38,28,.22); border-bottom:1px solid rgba(168,38,28,.22);
  border-left:5px solid var(--alert,#A8261C);
  font-family:var(--font-body),"Open Sans",system-ui,sans-serif;
}
.mxga-aviso__in{ max-width:1090px; margin:0 auto; padding:18px 20px; display:flex; gap:16px; align-items:flex-start; box-sizing:border-box }
.mxga-aviso__ico{ flex:none; width:24px; height:24px; color:var(--alert,#A8261C); margin-top:2px }
.mxga-aviso__ico svg{ width:100%; height:100%; display:block }
.mxga-aviso__tx{ flex:1; min-width:0 }
.mxga-aviso__ttl{ display:block; color:var(--alert-dark,#8C1F16); font-size:18px; font-weight:700; line-height:1.3; margin:0 0 3px; font-family:var(--font-display),"Montserrat",sans-serif }
.mxga-aviso__sub{ margin:0; font-size:15.5px; line-height:1.5; color:#4A3B39 }
.mxga-aviso__btn{
  flex:none; align-self:center; background:var(--alert,#A8261C); color:#fff!important;
  font-size:15px; font-weight:700; line-height:1; padding:12px 20px; border-radius:2px;
  text-decoration:none!important; white-space:nowrap; transition:background .18s ease;
}
.mxga-aviso__btn:hover{ background:var(--alert-dark,#8C1F16) }
@media(max-width:780px){
  .mxga-aviso__in{ flex-wrap:wrap; padding:16px }
  .mxga-aviso__ttl{ font-size:16.5px } .mxga-aviso__sub{ font-size:14.5px }
  .mxga-aviso__btn{ align-self:stretch; width:100%; text-align:center; margin-left:40px; box-sizing:border-box }
}
@media(max-width:480px){ .mxga-aviso__btn{ margin-left:0 } }

/* ---------------- Secciones del home ---------------- */
.hsec{ padding:clamp(3rem,6vw,5rem) 0 }
.hsec--alt{ background:var(--surface,#F5F7FA) }
.hsec>.container>h2{
  font-family:var(--font-display),"Montserrat",sans-serif; color:var(--navy,#04539C);
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25; margin:0 0 2rem; text-align:center;
}
.hsec--cta{ background:var(--navy,#04539C); color:#fff; text-align:center }
.hsec--cta>.container>h2{ color:#fff; margin-bottom:1.4rem }
.hsec--cta .btn{ background:#fff; color:var(--navy,#04539C) }
.hsec--cta .btn:hover{ background:var(--teal-light,#68CCD1); color:#0b2b3f }

/* Tarjetas: "Áreas de MXGA" y "Publicaciones de Boletines Recientes" */
.hcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(1.2rem,2.5vw,1.8rem) }
.hcard{
  background:#fff; border:1px solid var(--border,rgba(4,83,156,.14)); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .22s ease, transform .22s ease;
}
.hcard:hover{ box-shadow:0 14px 32px rgba(4,83,156,.13); transform:translateY(-3px) }
.hcard-img{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--surface,#F5F7FA) }
.hcard-b{ padding:1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1 }
.hcard-b h3{ font-family:var(--font-display),"Montserrat",sans-serif; font-size:1.08rem; line-height:1.35; color:var(--navy,#04539C); margin:0 }
.hcard-b h3 a{ color:inherit; text-decoration:none }
.hcard-b h3 a:hover{ text-decoration:underline }
.hcard-b>p{ margin:0; color:var(--text-muted,#585858); font-size:.95rem; line-height:1.6 }

/* Banda de cifras: "Nuestra experiencia en números" */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(1.2rem,3vw,2rem) }
.stat{ text-align:center; padding:.5rem }
.stat b{
  display:block; font-family:var(--font-display),"Montserrat",sans-serif; font-weight:700;
  color:var(--navy,#04539C); font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.25; margin-bottom:.5rem;
}
.stat span{ color:var(--text-muted,#585858); font-size:.95rem; line-height:1.6 }

/* ---------------- Bloques de contenido (páginas internas) ---------------- */
/* Lista de enlaces: en mxga.mx los servicios se listan con un chevron ">". */
.link-list{ display:flex; flex-direction:column; gap:.15rem; margin:1.1rem 0 }
.link-list--tight{ margin:.4rem 0 0 }
.link-list a,.link-list .ll-plain{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem .9rem; border-radius:7px; font-size:.96rem; line-height:1.45;
  color:var(--navy,#04539C); text-decoration:none; border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease;
}
.link-list a:hover{ background:var(--surface,#F5F7FA); border-color:var(--border,rgba(4,83,156,.14)); text-decoration:none }
.link-list a span{ color:var(--teal-light,#68CCD1); font-weight:700; flex:none }
.link-list .ll-plain{ color:var(--text,#111) }

/* Lista de puntos: el resumen de alcances bajo el título de cada página. */
.feature-list{ list-style:none; padding:0; margin:1.1rem 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.55rem }
.feature-list li{ position:relative; padding-left:1.6rem; line-height:1.6; color:var(--text,#111) }
.feature-list li::before{
  content:""; position:absolute; left:0; top:.62em; width:.55rem; height:.55rem;
  background:var(--teal-light,#68CCD1); border-radius:2px;
}

.blk-fig{ margin:1.8rem 0 }
.blk-fig img{ width:100%; height:auto; border-radius:10px; display:block }

.page-cta{ margin:2.5rem 0 4rem }
.page-body h2{ margin-top:2.4rem }
.page-body h3{ margin-top:1.8rem }
.page-body h4{ margin-top:1.3rem }
.page-body>p{ margin:.85rem 0 }

@media(max-width:640px){
  .hsec{ padding:2.5rem 0 }
  .feature-list{ grid-template-columns:1fr }
}

/* Bloque partido: imagen a un lado, texto al otro (ej. "Mexico Global Alliance"). */
.hsplit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.5rem,4vw,3rem); align-items:center }
.hsplit-img img{ width:100%; height:auto; border-radius:10px; display:block }
.hsplit-tx h2{ text-align:left!important; margin:0 0 1rem }
.hsplit-tx p{ margin:.8rem 0; color:var(--text-muted,#585858); line-height:1.75 }
@media(max-width:820px){ .hsplit{ grid-template-columns:1fr } }