/* =============================================================================
   MarcoPostal — PÁGINAS DE SERVICIO
   Se carga DESPUÉS de marcopostal-home.css y sólo agrega lo que las subpáginas
   necesitan. Variables, tipografía, botones, header, menú y footer se heredan
   tal cual: si la home cambia de escala o de color, estas páginas cambian con
   ella y no hay dos sistemas que mantener sincronizados a mano.

   Regla que se respeta en todo el archivo: los selectores propios usan una
   sola clase y, cuando tienen que ganarle a una regla de la home, van
   prefijados con .mp-serv en vez de subir la especificidad al azar. El choque
   de especificidad ya causó cinco defectos en la home; acá se evita de entrada.
   ========================================================================== */

/* El hero de las subpáginas es claro y el header arranca sobre fondo claro,
   igual que en la home con .mp-hero--claro. Se replica el mismo contrato. */
.mp-serv .mp-header:not(.is-compact){background:transparent;}
.mp-serv .mp-header:not(.is-compact) .mp-logo--white{opacity:0;}
.mp-serv .mp-header:not(.is-compact) .mp-logo--color{opacity:1;}

/* =============================================================================
   1. MIGAS
   Visibles, no sólo en los datos estructurados: sirven al lector para saber
   dónde está y a los buscadores para entender la jerarquía del sitio.
   ========================================================================== */
.mp-migas{display:flex;align-items:center;gap:9px;margin-bottom:22px;
  font-size:12px;line-height:18px;color:var(--mp-gray-600);}
.mp-migas a{color:var(--mp-gray-600);border-bottom:1px solid transparent;
  transition:color .2s var(--mp-e),border-color .2s var(--mp-e);}
.mp-migas a:hover{color:var(--mp-green-dk,#00701E);border-bottom-color:currentColor;}
.mp-migas span[aria-hidden]{color:var(--mp-gray-300);}

/* =============================================================================
   2. HERO DE SERVICIO
   Partido, no a sangre completa. Dos motivos: distingue de un vistazo una
   subpágina de la portada, y las fotografías disponibles son verticales —una
   foto vertical estirada a pantalla completa se recorta hasta perder el asunto.
   ========================================================================== */
.mp-shero{position:relative;background:var(--mp-white);
  padding:clamp(112px,14vh,164px) 0 clamp(80px,10vh,120px);overflow:hidden;}
.mp-shero::before{
  /* Mancha de color muy suave detrás de la columna de texto. Aporta la única
     nota de marca de la sección sin teñir la fotografía. */
  content:"";position:absolute;z-index:0;left:-8%;top:-14%;width:62%;height:96%;
  background:radial-gradient(46% 46% at 42% 46%,rgba(0,156,42,.09),transparent 72%);
  pointer-events:none;
}
.mp-shero__grid{position:relative;z-index:1;align-items:center;row-gap:40px;}
.mp-shero__tx{grid-column:1 / 7;}
.mp-shero__fig{grid-column:8 / 13;position:relative;}

/* 15ch dejaba el H1 en 240px sobre una columna de 648: «Servicio de última /
   milla en / Montevideo y área / metropolitana» — cuatro líneas y una de ellas
   con dos palabras. 22ch da aire y `text-wrap:balance` reparte las palabras
   entre las líneas en vez de llenar la primera y dejar la última suelta.
   Donde el navegador no soporte balance, la propiedad se ignora y queda el
   comportamiento de siempre: no hace falta reserva. */
.mp-serv .mp-shero__tx .mp-h1{margin-top:16px;max-width:22ch;text-wrap:balance;}
.mp-serv .mp-def__h,
.mp-serv .mp-sfaq__hd .mp-h2,
.mp-serv .mp-scta .mp-h2{text-wrap:balance;}
.mp-shero__lead{margin-top:20px;max-width:48ch;color:var(--mp-gray-700);}
.mp-shero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

.mp-serv .mp-shero__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin-top:42px;padding-top:20px;border-top:1px solid var(--mp-line-light);
}
.mp-shero__facts dt{font-size:15px;line-height:22px;font-weight:600;
  color:var(--mp-black,#111417);letter-spacing:-.01em;}
.mp-serv .mp-shero__facts dd{margin:3px 0 0;font-size:12.5px;line-height:19px;
  color:var(--mp-gray-600);}

.mp-shero__fig{border-radius:24px;overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 40px 80px -34px rgba(13,16,18,.42);}
.mp-shero__fig img{width:100%;height:100%;object-fit:cover;}

/* =============================================================================
   3. DEFINICIÓN
   El bloque que responde "¿qué es X?". Va sobre fondo oscuro a propósito: es
   la única sección de la página con inversión de color, lo que la separa
   visualmente del resto y la señala como la respuesta.
   Contraste medido sobre #0D1012: párrafo #FFFFFF 18,9:1; secundario
   rgba(255,255,255,.76) 11,0:1; ambos por encima de 4,5:1.
   ========================================================================== */
.mp-def{background:var(--mp-black,#111417);color:#fff;
  padding:clamp(88px,12vh,140px) 0;}
.mp-def__grid{align-items:start;row-gap:26px;}
.mp-def__h{grid-column:1 / 6;color:#fff;max-width:14ch;}
.mp-def__tx{grid-column:6 / 13;}
.mp-def__p{font-size:clamp(17px,1.35vw,20px);line-height:1.58;font-weight:400;
  color:#fff;max-width:62ch;letter-spacing:-.01em;}
/* Con sangría y filete: sin eso eran dos párrafos seguidos del mismo tamaño y
   el segundo —que es un comentario sobre el primero, no una continuación— se
   leía como más de lo mismo. */
.mp-def__x{margin-top:28px;padding-left:20px;font-size:15px;line-height:1.7;
  color:rgba(255,255,255,.72);max-width:58ch;
  border-left:2px solid rgba(0,156,42,.55);}

/* =============================================================================
   4. PASOS
   ========================================================================== */
.mp-pasos{background:var(--mp-white);padding:clamp(88px,12vh,136px) 0;}
.mp-serv .mp-pasos .mp-h2{margin-top:16px;}
.mp-pasos__ls{margin-top:clamp(38px,5vh,54px);display:grid;gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));}
/* `align-content:start` no es opcional. Los cuatro <li> son celdas de la
   grilla exterior y se estiran a la misma altura; adentro, cada uno es a su vez
   una grilla de dos filas automáticas, y el sobrante de esa altura se repartía
   entre las dos filas —que es lo que hace `align-content:normal`—. Como cada
   paso tiene una descripción de largo distinto, el sobrante era distinto y el
   número empujaba al título hacia abajo de forma desigual.
   Medido antes del arreglo: el <span> del número medía 18, 30, 18 y 41px de
   alto, y los cuatro títulos arrancaban en 149, 161, 149 y 172. Con `start` las
   filas conservan su altura de contenido y el sobrante queda al final. */
.mp-pasos__it{position:relative;display:grid;align-content:start;gap:0;
  padding:26px 26px 30px 0;border-top:2px solid var(--mp-line-light);}
.mp-pasos__it::after{
  /* Se ilumina el tramo de la línea superior que corresponde al paso: la fila
     de bordes se lee entonces como una barra de avance, no como una tabla. */
  content:"";position:absolute;left:0;top:-2px;width:0;height:2px;
  background:var(--mp-green);transition:width .7s var(--mp-e);
}
.mp-pasos__it.is-in::after{width:100%;}
.mp-pasos__n{display:block;font-size:11.5px;line-height:18px;font-weight:600;
  letter-spacing:2.4px;color:var(--mp-green-dk,#00701E);
  font-variant-numeric:tabular-nums;margin-bottom:14px;}
.mp-pasos__t{font-size:17px;line-height:1.28;font-weight:600;letter-spacing:-.018em;
  color:var(--mp-black,#111417);}
.mp-pasos__d{margin-top:10px;font-size:14.5px;line-height:1.6;
  color:var(--mp-gray-700);}

/* =============================================================================
   5. PARA QUIÉN · BENEFICIOS
   ========================================================================== */
.mp-dual{background:var(--mp-off-white);padding:clamp(84px,11vh,128px) 0;}
/* Tarjetas y no dos columnas de texto suelto. El bloque anterior eran ocho
   renglones sobre el mismo fondo, sin nada que marcara dónde termina una idea
   y empieza la otra: se leía como un párrafo largo partido en viñetas. */
.mp-dual__grid{row-gap:20px;column-gap:20px;}
.mp-dual__col{background:#fff;border:1px solid var(--mp-line-light);
  border-radius:22px;padding:clamp(28px,3.2vw,40px);}
.mp-dual__col:first-child{grid-column:1 / 7;}
.mp-dual__col:last-child{grid-column:7 / 13;}
/* Dos líneas reservadas aunque el título ocupe una. «Ideal para» entra en una
   y «Qué cambia en tu operación» en dos, así que sin esto las dos listas
   arrancaban a 26px de diferencia y las viñetas quedaban desfasadas. */
.mp-dual__t{max-width:20ch;min-height:calc(2 * var(--mp-h3-line, 1.2) * 1em);}
.mp-lista{margin-top:24px;display:grid;gap:13px;}
.mp-lista li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;
  color:var(--mp-gray-700);}
.mp-lista li::before{content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:50%;background:var(--mp-gray-300);}
.mp-lista--check li::before{background:var(--mp-green);}

/* =============================================================================
   6. COBERTURA
   ========================================================================== */
.mp-scob{background:var(--mp-white);padding:clamp(60px,8vh,88px) 0;
  border-top:1px solid var(--mp-line-light);}
.mp-scob__grid{align-items:end;row-gap:22px;}
.mp-scob__grid > div{grid-column:1 / 7;}
.mp-scob__d{grid-column:7 / 13;max-width:56ch;}
.mp-serv .mp-scob .mp-h2{margin-top:14px;}

/* =============================================================================
   7. SERVICIOS RELACIONADOS
   Enlazado interno real. En el WordPress actual ninguna página de servicio
   enlaza a otra: cada una es un callejón sin salida, tanto para el lector
   como para el rastreador.
   ========================================================================== */
.mp-rel{background:var(--mp-white);padding:clamp(80px,11vh,120px) 0;
  border-top:1px solid var(--mp-line-light);}
.mp-rel__ls{margin-top:28px;display:grid;gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));}
.mp-rel__it{display:flex;flex-direction:column;gap:9px;padding:24px 24px 22px;
  border-radius:18px;background:#fff;border:1px solid var(--mp-line-light);
  transition:border-color .28s var(--mp-e),transform .28s var(--mp-e),
             box-shadow .28s var(--mp-e);}
.mp-rel__it:hover{border-color:var(--mp-green);transform:translateY(-3px);
  box-shadow:0 18px 38px -20px rgba(0,156,42,.4);}
.mp-rel__n{font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.018em;
  color:var(--mp-black,#111417);}
.mp-rel__d{font-size:13.5px;line-height:1.55;color:var(--mp-gray-600);}
.mp-rel__ar{margin-top:4px;font-size:16px;color:var(--mp-green-dk,#00701E);
  transition:transform .28s var(--mp-e);}
.mp-rel__it:hover .mp-rel__ar{transform:translateX(5px);}

/* =============================================================================
   8. PREGUNTAS
   ========================================================================== */
.mp-sfaq{background:var(--mp-off-white);padding:clamp(88px,12vh,136px) 0;}
.mp-sfaq__grid{align-items:start;row-gap:30px;}
.mp-sfaq__hd{grid-column:1 / 5;position:sticky;top:96px;}
.mp-sfaq__ls{grid-column:6 / 13;}
.mp-serv .mp-sfaq__hd .mp-h2{margin-top:14px;max-width:12ch;}
.mp-sfaq__ls .mp-faq__it{border-bottom:1px solid var(--mp-line-light);}
.mp-sfaq__ls .mp-faq__it:first-child{border-top:1px solid var(--mp-line-light);}
.mp-serv .mp-faq__q{width:100%;display:flex;align-items:flex-start;
  justify-content:space-between;gap:22px;padding:22px 0;min-height:44px;
  text-align:left;font-size:16.5px;line-height:1.42;font-weight:600;
  letter-spacing:-.012em;color:var(--mp-black,#111417);background:none;border:0;
  cursor:pointer;}
.mp-faq__ic{position:relative;flex:0 0 auto;width:15px;height:15px;margin-top:5px;}
.mp-faq__ic::before,.mp-faq__ic::after{content:"";position:absolute;
  background:var(--mp-green-dk,#00701E);transition:transform .3s var(--mp-e);}
.mp-faq__ic::before{left:0;top:7px;width:15px;height:1.6px;}
.mp-faq__ic::after{left:6.7px;top:0;width:1.6px;height:15px;}
.mp-faq__q[aria-expanded="true"] .mp-faq__ic::after{transform:scaleY(0);}
.mp-serv .mp-faq__a{overflow:hidden;height:0;}
.mp-serv .mp-faq__a.is-open{height:auto;}
.mp-serv .mp-faq__a p{padding:0 40px 24px 0;font-size:15px;line-height:1.66;
  color:var(--mp-gray-700);max-width:64ch;}

/* =============================================================================
   9. CIERRE
   ========================================================================== */
/* El cierre era negro y el pie de página también: dos bandas negras seguidas
   sin nada que las separe, así que el bloque de contacto se comía con el pie y
   la página parecía terminar dos veces. Pasa a claro.
   No es sólo separarlos: la página ya tiene una sección oscura —la definición—
   y el pie. Con el cierre en negro eran tres bandas oscuras en una página de
   nueve secciones, y la última llamada a la acción, que es la que tiene que
   destacarse, era la que menos se distinguía de su entorno. */
.mp-scta{position:relative;background:var(--mp-white);
  padding:clamp(96px,13vh,150px) 0 clamp(104px,14vh,160px);overflow:hidden;
  border-top:1px solid var(--mp-line-light);}
.mp-scta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 74% at 50% 8%,rgba(0,156,42,.10),transparent 68%);
}
.mp-scta__in{position:relative;z-index:1;max-width:640px;margin-inline:auto;
  text-align:center;}
.mp-serv .mp-scta .mp-h2{color:var(--mp-black,#111417);max-width:18ch;
  margin-inline:auto;}
.mp-scta__d{margin:20px auto 0;color:var(--mp-gray-700);max-width:50ch;}
.mp-scta__bt{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;
  justify-content:center;}
.mp-scta__pie{margin-top:26px;font-size:13px;line-height:1.6;
  color:var(--mp-gray-600);}
.mp-scta__pie a{color:var(--mp-gray-700);border-bottom:1px solid var(--mp-line-light);}
.mp-scta__pie a:hover{color:var(--mp-black,#111417);border-bottom-color:currentColor;}

/* ── formulario dentro de la sección de cierre ─────────────────────────────
   .mp-form nació para la home, que lo apoya sobre el bloque azul oscuro: sus
   etiquetas son blancas y el borde de los campos apenas se insinúa, porque
   ahí alcanza. Sobre el fondo blanco de esta sección quedaría invisible —las
   etiquetas literalmente no se verían—. De ahí la variante clara.

   Contrastes medidos sobre #FFFFFF:
     etiqueta          #3E4643 ................... 9,74:1   (texto pide 4,5)
     nota al pie       #5A6360 ................... 6,20:1
     borde del campo   rgba(13,16,18,.45) → #929394  3,08:1
       El borde es lo que delimita un campo de formulario, así que le
       corresponde el mínimo de 3:1 de elementos no textuales. Con el borde
       original —.16 de opacidad— daba 1,2:1 y el campo no se distinguía del
       fondo de la sección.
   ---------------------------------------------------------------------- */
.mp-scta .mp-form{grid-column:auto;margin-top:36px;text-align:left;}
.mp-form--claro .mp-form__field label{color:var(--mp-gray-700);}
.mp-form--claro .mp-form__field input,
.mp-form--claro .mp-form__field select,
.mp-form--claro .mp-form__field textarea{
  background:var(--mp-white);border-color:rgba(13,16,18,.45);}
.mp-form--claro .mp-form__note{color:var(--mp-gray-600);}
.mp-form--claro .mp-form__msg{
  background:var(--mp-off-white);border:1px solid rgba(0,156,42,.38);
  color:var(--mp-black);text-align:left;}

/* =============================================================================
   10. DESPLEGABLE DE SERVICIOS
   Se mudó a marcopostal-home.css. Motivo: la portada también lo usa ahora, y
   dos copias del mismo componente en dos hojas distintas es garantía de que
   una de las dos se quede vieja.
   ========================================================================== */

/* =============================================================================
   11. ESTADOS INICIALES DE ANIMACIÓN
   Sólo se aplican cuando el JS confirmó que puede animar. Con .mp-nomotion
   —que es el estado de partida y el de fallo— todo queda visible y quieto.

   EL HERO QUEDA EXPRESAMENTE AFUERA (`:not(.mp-shero *)` vía el selector de
   abajo). Motivo medible, no estético: el título y la fotografía del hero son
   el elemento más grande de la pantalla inicial, o sea el que Google cronometra
   como Largest Contentful Paint. Si arrancan en opacidad 0, ese reloj no corre
   hasta que termina de bajar GSAP del CDN y de correr el tween —fácilmente un
   segundo largo en una conexión mala—. Un elemento pintado transparente, para
   la métrica, no está pintado.
   Lo comprobé acá: con el hero en opacidad 0, el h1 seguía en 0,45 y la foto en
   0 varios segundos después de cargar.
   El hero igual se mueve, pero sólo con `transform`, que no cuenta como pintado
   y por lo tanto no retrasa nada.
   ========================================================================== */
html:not(.mp-nomotion) .mp-serv [data-mp-el]:not(.mp-shero [data-mp-el]),
html:not(.mp-nomotion) .mp-serv [data-mp-stagger] > *{opacity:0;}

/* =============================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .mp-pasos__ls{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mp-pasos__it{padding-right:20px;}
  .mp-rel__ls{grid-template-columns:1fr;}
  .mp-sfaq__hd{position:static;grid-column:1 / 13;}
  .mp-sfaq__ls{grid-column:1 / 13;}
}
@media (max-width:1024px){
  .mp-shero__tx{grid-column:1 / 13;}
  .mp-shero__fig{grid-column:1 / 13;aspect-ratio:16/10;}
  .mp-shero::before{width:100%;left:-20%;}
  .mp-def__h,.mp-def__tx{grid-column:1 / 13;}
  .mp-dual__col:first-child,.mp-dual__col:last-child{grid-column:1 / 13;}
  .mp-scob__grid > div,.mp-scob__d{grid-column:1 / 13;}
}
@media (max-width:640px){
  .mp-shero{padding-top:clamp(88px,12vh,120px);}
  .mp-serv .mp-shero__facts{grid-template-columns:1fr;gap:14px;}
  .mp-pasos__ls{grid-template-columns:1fr;}
  .mp-pasos__it{padding:20px 0 22px;}
  .mp-shero__cta .mp-btn,.mp-scta__bt .mp-btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .mp-pasos__it::after{transition:none;width:100%;}
  .mp-rel__it{transition:none;}
}