/*
MPC V3 Responsivo — hoja propia de SERVICIOS.

Solo lo que ESTE standalone cambia respecto de la Home / de las reglas ya
compartidas en style.css. No se re-declaran aqui: reset, topbar, header/nav,
mega-menu, menu movil, footer, .btn (estructura), .wrap, .mont, .ghost,
.band ni sus media queries — viven en style.css y los comparten las 5
secciones; re-declararlos aqui rompería la cabecera comun.

Fuente: Nuevo_estilo_mpc/MPC_Servicios/MPC Servicios standalone.html (<style> del <head>)
*/

/* R8.2/A3 — este standalone baja los botones a 13px (Home: 13.5px). Se vuelve
   a anclar el CTA del header a 13.5px para que la cabecera compartida, que
   tambien usa .btn, no cambie un pixel en esta pagina. */
.btn { font-size:13px; }
.nav-cta { font-size:13.5px; }

/* Franja de alcance: 3 items con separadores verticales */
.scope-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.scope { display:flex; gap:14px; align-items:flex-start; padding:0 30px; border-left:1px solid #E8E8E8; }
.scope:first-child { padding-left:0; border-left:0; }

/* Tres pilares */
.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar { background:#34495E; color:#fff; padding:36px 30px 32px; display:flex; flex-direction:column; min-height:400px; border-top:4px solid #CD2122; }
.pillar a.pcta:hover { color:#FF8080; }

/* Calibración: cifras + pasos */
.cal-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:2px; }

/* FAQ + panel lateral */
.faq-grid { display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; }
.faq-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:22px 24px 22px 0; background:transparent; border:0; cursor:pointer; color:#141414; font-family:"Open Sans",sans-serif; }
.faq-body { display:none; padding:0 24px 26px 68px; flex-direction:column; gap:16px; }
.faq-body.open { display:flex; }

/* Marcas que damos servicio */
.brand-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ══ Responsive (según frames móviles aprobados) ══ */
@media (max-width: 900px) {
  /* style.css ya trae section h2{font-size:28px!important} y no trae ninguna
     regla generica de h1 (la de Home es .hero h1, scoped); este standalone
     usa selectores genericos con otros valores — se re-declaran a proposito. */
  h1 { font-size:33px !important; letter-spacing:-1.1px !important; }
  section h2 { font-size:26px !important; letter-spacing:-.7px !important; }

  .hero-bg { width:100% !important; opacity:.3; }

  /* Trampa detectada: style.css (Home) le suma `margin-bottom:34px!important`
     a `.hero-ctas` en movil (ahi el hero sigue con mas contenido debajo); este
     standalone NO lo trae. Se neutraliza aqui para no arrastrar el hero. */
  .hero-ctas { margin-bottom:0 !important; }

  .scope-grid { grid-template-columns:1fr; gap:18px; }
  .scope { padding:0 !important; border-left:0 !important; }
  .pillar-grid { grid-template-columns:1fr; }
  .pillar { min-height:0; }
  .cal-grid { grid-template-columns:1fr; gap:40px; }
  .faq-grid { grid-template-columns:1fr; gap:36px; }
  .faq-btn { padding:16px 0; }
  .faq-btn .fq { font-size:14.5px !important; }
  .faq-btn .fdur { display:none; }
  .faq-body { padding:0 0 20px 44px; }
  .brand-grid { grid-template-columns:1fr; }
}