/**
 * Página Gestión de proyectos (pages/project-management.php).
 * Origen: project-management.html (valores exactos). Se carga solo en esa plantilla.
 * Globales usados aquí (style.css): .section-head--wide, .section-head--flush,
 * .lede--wide y .section--flush-bottom.
 * La rejilla de servicios (.mini-grid en el mockup) se hace con utilidades.
 *
 * @package silomasters
 */

/* =====================================================
   GESTIÓN INTEGRAL: rejilla de servicios
   ===================================================== */
/* reset explícito de la lista: sin JS no hay preflight de Tailwind CDN (el margin-top va en la utilidad mt-11) */
.mini-grid{margin-bottom:0; padding:0; list-style:none;}

.mini-card{display:flex; align-items:center; gap:12px; min-height:72px; padding:14px 18px; background:var(--bg-tint); border-radius:var(--r-lg); font-family:var(--sans); font-weight:700; font-size:14.5px; color:var(--text);}
.mini-card .material-symbols-outlined{color:var(--orange); font-size:24px; flex-shrink:0;}

/* CTA: el enlace ocupa toda la celda; la elevación va solo aquí (las tarjetas de servicio no son interactivas).
   El .reveal está en el <li>, así que su transform no choca con el del hover. */
.mini-card-cta{height:100%; background:var(--orange-dark); color:var(--white); justify-content:space-between; text-transform:uppercase; letter-spacing:.02em; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.mini-card-cta .material-symbols-outlined{color:var(--white); font-size:22px;}
.mini-card-cta:hover{background:var(--orange-darker); transform:translateY(-3px); box-shadow:0 14px 24px -12px rgba(236,101,41,.55);}
.mini-card-cta:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}

@media(prefers-reduced-motion: reduce){
  .mini-card-cta{transition:none;}
  .mini-card-cta:hover{transform:none;}
}

/* =====================================================
   PRESENCIA GLOBAL: mapa
   ===================================================== */
/* padding superior de 80px en todos los anchos (estilo en línea en el mockup); gana a .section también por debajo de 720px */
.section.mundo-section{padding-top:80px;}

.map-frame{margin-top:40px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--white);}
.map-frame img{width:100%; height:auto; display:block;}