/* MIDA — construido sobre los tres mockups aprobados el 03-10-2026.
   Los colores salen de ahi y del logo real, medidos, no elegidos de memoria. */
:root{
  --navy:#0a2342;          /* barra, hero, pie */
  --navy-2:#123a68;
  --navy-3:#0e2d52;
  --azul:#1f6fd0;          /* acento vivo del mockup */
  --azul-claro:#59a5f5;    /* la tercera linea del titulo */
  /* Para texto CHICO sobre la foto del hero. El #59a5f5 da 3,92 contra el
     peor pixel del fondo en movil (medido), y AA pide 4,5 bajo 18,66px.
     En titulos grandes el #59a5f5 sigue sirviendo, por eso son dos. */
  --azul-sobre-foto:#8ec5ff;
  --azul-suave:#eaf2fd;
  --naranjo:#f28a16;
  --naranjo-2:#d9770a;
  --tinta:#0d1f33;
  --texto:#4a5b70;
  --gris:#f4f7fb;
  --borde:#e2e9f2;
  --radio:16px;
  --radio-s:10px;
  --sombra:0 14px 40px rgba(10,35,66,.10);
  --sombra-card:0 2px 10px rgba(10,35,66,.06);
  --ancho:1200px;
  /* Archivo: grotesca industrial, aguanta los pesos altos sin verse blanda y
     NO es Inter, que es la fuente por defecto de medio internet.
     El mono es para los datos duros (telefono, cifras, codigos): en un sitio
     de mantencion, que los numeros se lean como instrumento es parte del
     mensaje, no decoracion. */
  --fuente:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fuente);
  color:var(--texto);background:#fff;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--tinta);line-height:1.04;margin:0 0 .5em;letter-spacing:-.035em;
  text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:800}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
p{text-wrap:pretty}
p{margin:0 0 1rem}
.contenedor{width:min(100% - 2rem,var(--ancho));margin-inline:auto}
.centrado{text-align:center}

/* el acento de dos colores de los titulos del mockup */
.acento{color:var(--azul)}

.antetitulo{
  font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:500;
  color:var(--azul);margin:0 0 .8rem;
}
.antetitulo--claro{color:var(--azul-sobre-foto)}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.4rem;border-radius:var(--radio-s);
  font-weight:600;font-size:.95rem;border:1px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.boton:hover{text-decoration:none;transform:translateY(-1px)}
.boton svg{flex:0 0 auto}
.boton--naranjo{background:var(--naranjo);color:#fff}
.boton--naranjo:hover{background:var(--naranjo-2);color:#fff}
.boton--azul{background:var(--azul);color:#fff}
.boton--azul:hover{background:#1a5cb0;color:#fff}
.boton--borde{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)}
.boton--borde:hover{background:rgba(255,255,255,.16)}
.boton--claro{background:#fff;color:var(--tinta);border-color:var(--borde)}
.boton--claro:hover{border-color:var(--azul);color:var(--azul)}
.boton--grande{padding:1rem 1.6rem;font-size:1rem}

/* ---------- barra ---------- */
.barra{background:var(--navy);position:sticky;top:0;z-index:60}
.barra__fila{display:flex;align-items:center;gap:1.2rem;min-height:84px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.marca img{border-radius:50%;width:52px;height:52px}
.marca__nombre{display:flex;flex-direction:column;line-height:1.15}
.marca__nombre strong{color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.marca__nombre span{color:#9fb8d6;font-size:.74rem}
.marca__texto{color:#fff;font-weight:900;font-size:1.5rem;letter-spacing:.04em}

.menu{display:flex;align-items:center;gap:1.7rem;margin-left:auto}
.menu>a{color:#cddcee;font-size:.93rem;font-weight:500;padding:.45rem 0;position:relative}
.menu>a:hover,.menu>a.activo{color:#fff;text-decoration:none}
.menu>a.activo::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--azul-claro);border-radius:2px;
}
.menu__acciones{display:flex;align-items:center;gap:.65rem;margin-left:1rem}

/* el boton de emergencia del mockup: lleva el numero adentro */
.emergencia{
  display:inline-flex;align-items:center;gap:.65rem;
  background:var(--naranjo);color:#fff;border-radius:var(--radio-s);
  padding:.5rem 1.1rem;transition:background .18s;
}
.emergencia:hover{background:var(--naranjo-2);text-decoration:none;color:#fff}
.emergencia__icono{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;flex:0 0 auto;
}
.emergencia__texto{display:flex;flex-direction:column;line-height:1.15}
.emergencia__texto small{font-size:.7rem;opacity:.92}
.emergencia__texto strong{font-size:.98rem;font-weight:700;letter-spacing:.01em}

.hamburguesa{display:none;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer}
.hamburguesa span{display:block;width:24px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

@media (max-width:1120px){
  .hamburguesa{display:block}
  .menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.4rem 0 1.1rem}
  .menu.abierto{display:flex}
  .menu>a{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .menu>a.activo::after{display:none}
  .menu__acciones{flex-direction:column;align-items:stretch;margin:1rem 0 0}
  .emergencia{justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.hero__foto{
  position:absolute;inset:0 0 0 38%;width:62%;height:100%;object-fit:cover;z-index:-2;
}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 36%,rgba(10,35,66,.86) 52%,rgba(10,35,66,.25) 100%);
}
.hero--sin-foto{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 100%)}
.hero__texto{padding:4.5rem 0 4.8rem}
.hero__texto>*{max-width:620px}
.hero h1{color:#fff;text-transform:uppercase;font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem)}
.hero h1 .linea3{color:var(--azul-claro);display:block}
.hero__bajada{color:#c9dcf0;font-size:1.06rem;max-width:44ch;margin:0 0 2rem}
.hero__botones{display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:900px){
  .hero__foto{inset:0;width:100%}
  .hero__velo{background:linear-gradient(180deg,rgba(10,35,66,.90) 0%,rgba(10,35,66,.72) 55%,rgba(10,35,66,.88) 100%)}
  .hero__texto{padding:3.2rem 0 3.4rem}
  /* Bajo 900px la foto pasa a cubrir TODO el hero y queda detras del
     titulo. Medido a 768: el #59a5f5 da 2,78 contra el peor pixel del
     fondo y AA pide 3,0 en texto grande. Arriba de 900 la linea queda
     sobre navy plano y conserva el celeste del mockup. */
  .hero h1 .linea3{color:var(--azul-sobre-foto)}
}

/* ---------- franja de razones ---------- */
.razones{background:var(--gris);border-bottom:1px solid var(--borde)}
.razones__fila{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1.4rem;padding:1.8rem 0;
}
.razon{display:flex;align-items:center;gap:.85rem}
.razon__icono{
  width:42px;height:42px;border-radius:12px;background:var(--azul-suave);color:var(--azul);
  display:grid;place-items:center;flex:0 0 auto;
}
.razon__texto{display:flex;flex-direction:column;line-height:1.3}
.razon__texto strong{color:var(--tinta);font-size:.98rem}
.razon__texto span{font-size:.88rem}

/* ---------- secciones ---------- */
.seccion{padding:4.2rem 0}
.seccion--gris{background:var(--gris)}
.seccion__cabeza{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:2rem;align-items:end;margin-bottom:2.2rem;
}
.seccion__cabeza p{margin:0}
@media (max-width:860px){.seccion__cabeza{grid-template-columns:1fr;gap:.8rem}}

.encabezado{background:var(--navy);padding:3.2rem 0;position:relative;overflow:hidden}
.encabezado h1{color:#fff}
.encabezado__bajada{color:#c9dcf0;max-width:58ch;margin:0}
.encabezado__bajada a{color:#ffc07a}
.miga{color:#92acc9;font-size:.88rem;margin:0 0 .7rem}
.miga a{color:#cddcee}

.aviso{
  background:#fff7e8;border:1px solid #f2d9a8;border-radius:var(--radio);
  padding:1rem 1.2rem;color:#7a5410;
}

/* ---------- tarjetas de servicio ---------- */
.grilla-bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:1.4rem}
.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra-card);transition:box-shadow .2s,transform .2s;
  display:flex;flex-direction:column;
}
.tarjeta:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.tarjeta__media{position:relative}
.tarjeta__foto{width:100%;aspect-ratio:16/10;object-fit:cover}
.tarjeta__foto--vacia{
  background:
    radial-gradient(120% 120% at 20% 10%, var(--navy-2) 0%, var(--navy) 70%);
  display:grid;place-items:center;color:rgba(89,165,245,.30);
}
.tarjeta__foto--vacia svg{width:72px;height:72px;stroke-width:1.2}
.bloque__foto--vacia svg{width:84px;height:84px;stroke-width:1.2}
.tarjeta__simbolo{
  /* Vive DENTRO del cuerpo, no del media: ese recorta (overflow:hidden para
     el zoom de la foto) y le cortaba la mitad al circulo. El cuerpo empieza
     justo donde termina la imagen, asi que -21px lo deja montado en el borde
     sin depender de la altura de la foto. */
  position:absolute;left:1.1rem;top:-21px;width:42px;height:42px;border-radius:50%;
  background:#fff;color:var(--naranjo);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(10,35,66,.18);
}
.tarjeta__cuerpo{padding:2rem 1.25rem 1.4rem;display:flex;flex-direction:column;flex:1}
.tarjeta h3{margin-bottom:.45rem}
.tarjeta h3 a{color:var(--tinta)}
.tarjeta h3 a:hover{color:var(--azul);text-decoration:none}
.tarjeta__resumen{font-size:.92rem;margin:0 0 1rem}
.tarjeta__mas{
  margin-top:auto;color:var(--azul);font-weight:600;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.35rem;
}
.etiquetas{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem}
.etiquetas span{
  background:var(--azul-suave);color:#1c5aa8;font-size:.68rem;font-weight:700;
  letter-spacing:.07em;padding:.3rem .6rem;border-radius:999px;
}

/* ---------- franja de cifras ---------- */
.cifras{background:var(--navy);color:#c9dcf0;padding:3.2rem 0;position:relative;overflow:hidden}
.cifras__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,58%);gap:2rem;align-items:center}
.cifras h2{color:#fff;margin:0}
.cifras__grupo{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.2rem}
.cifra{padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.18)}
.cifra:first-child{border-left:0;padding-left:0}
.cifra strong{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;font-weight:800;line-height:1}
.cifra span{font-size:.9rem}
@media (max-width:860px){.cifras__fila{grid-template-columns:1fr}}

/* ---------- lista de bloques (pagina servicios) ---------- */
.lista-bloques{display:flex;flex-direction:column;gap:1.5rem}
.bloque{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:1.8rem;
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra-card);
}
.bloque__foto{width:100%;height:100%;min-height:230px;object-fit:cover}
.bloque__foto--vacia{background:radial-gradient(120% 120% at 20% 10%,var(--navy-2) 0%,var(--navy) 70%);display:grid;place-items:center;color:rgba(89,165,245,.30)}
.bloque__texto{padding:1.8rem 1.8rem 2rem}
.bloque__numero{color:var(--naranjo);font-weight:800;letter-spacing:.12em;margin:0 0 .3rem;font-size:.8rem}
.pildoras{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0 0 1.4rem}
.pildoras li{background:var(--gris);border:1px solid var(--borde);border-radius:999px;padding:.4rem .85rem;font-size:.87rem}
@media (max-width:860px){
  .bloque{grid-template-columns:1fr}
  .bloque__foto{min-height:210px;aspect-ratio:16/9}
}

/* ---------- detalle ---------- */
.detalle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,45%);gap:2.4rem;align-items:start}
.detalle__foto{border-radius:var(--radio);box-shadow:var(--sombra);width:100%;object-fit:cover}
@media (max-width:860px){.detalle{grid-template-columns:1fr}}

/* ---------- trabajos ---------- */
.grilla-trabajos{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1.3rem}
.trabajo{margin:0;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-card)}
.trabajo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trabajo figcaption{padding:.9rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.15rem}
.trabajo figcaption strong{color:var(--tinta);font-size:.98rem}
.trabajo figcaption span{font-size:.87rem}
.trabajo__bloque{color:var(--azul);font-weight:600}
.trabajo figcaption p{font-size:.9rem;margin:.45rem 0 0}

/* ---------- comunas ---------- */
.comunas{background:var(--gris);padding:2.6rem 0;border-block:1px solid var(--borde)}
.comunas__fila{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:2rem;align-items:center}
.comunas h2{font-size:1.5rem;margin:0}
.comunas h2::after{content:"";display:block;width:52px;height:3px;background:var(--naranjo);border-radius:2px;margin-top:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.chips span{background:#fff;border:1px solid var(--borde);border-radius:999px;padding:.45rem .95rem;font-size:.9rem}
.chips__mas{color:var(--azul);font-weight:600}
.chips--claro span{background:var(--gris)}
@media (max-width:760px){.comunas__fila{grid-template-columns:1fr;gap:1rem}}

/* ---------- cierre ---------- */
.cierre{background:var(--navy);color:#c9dcf0;padding:3.2rem 0}
.cierre h2{color:#fff;margin-bottom:.4rem}
.cierre__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:2rem;align-items:center}
.cierre__botones{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.cierre__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.4rem;list-style:none;padding:0;margin:0}
.cierre__datos li{display:flex;gap:.7rem;align-items:flex-start}
.cierre__datos strong{display:block;color:#fff;font-size:.9rem;font-weight:600}
.cierre__datos span{font-size:.88rem}
.cierre__datos a{color:#fff}
.icono-circulo{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);
  display:grid;place-items:center;flex:0 0 auto;color:var(--azul-claro);
}
@media (max-width:860px){.cierre__fila{grid-template-columns:1fr}}

/* ---------- formulario ---------- */
.formulario{max-width:820px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin-bottom:1.5rem}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo--ancho{grid-column:1/-1}
.campo--check{flex-direction:row;align-items:center;gap:.6rem;grid-column:1/-1}
.campo__etiqueta{font-size:.87rem;font-weight:600;color:var(--tinta)}
.campo input,.campo select,.campo textarea{
  font:inherit;color:var(--tinta);padding:.78rem .9rem;
  border:1px solid var(--borde);border-radius:var(--radio-s);background:#fff;width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.campo--check input{width:auto}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.error{color:#b42318;font-size:.85rem}
.exito{background:var(--gris);border:1px solid var(--borde);border-radius:var(--radio);padding:1.8rem}
.exito h2{margin-top:0}

/* ---------- contacto ---------- */
.contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem}
.ficha{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra-card);padding:1.6rem}
.ficha ul{list-style:none;padding:0;margin:0}
.ficha li{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--borde)}
.ficha li:last-child{border-bottom:0}
.ficha strong{display:block;color:var(--tinta);font-size:.85rem}
.ficha__dato{font-size:1.05rem;color:var(--tinta);font-weight:600}
.ficha .icono-circulo{background:var(--azul-suave);color:var(--azul)}
.contacto__telefono{font-size:1.8rem;font-weight:800;color:var(--tinta);display:block}

/* ---------- pie ---------- */
.pie{background:var(--navy);color:#a8c2de;padding:3rem 0 1.4rem;font-size:.92rem}
.pie a{color:#cddcee}
.pie__grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem}
.pie__titulo{color:#fff;font-weight:700;margin:0 0 .7rem;font-size:.95rem}
.pie p{margin:.3rem 0}
.pie__marca{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.pie__marca img{width:46px;height:46px;border-radius:50%}
.pie__legal{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;
}

/* ---------- WhatsApp flotante ---------- */
.flotante-wa{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.24);
}
.flotante-wa:hover{background:#1fba59}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- /trabajos/: galeria PAREJA ----------
   Todas las celdas miden lo mismo (4:3) y la foto se recorta con object-fit.
   Las de Rodolfo vienen mezcladas —verticales de celular y horizontales— y a
   tamano natural daban una columna despareja. La celda fija la altura ANTES de
   que cargue la imagen, asi que la pagina no salta al ir apareciendo. */
.obra{padding:2.8rem 0;border-top:1px solid var(--borde)}
.obra:first-child{border-top:0;padding-top:.5rem}
.obra__cabeza h2{margin:0 0 .4rem;font-size:1.5rem}
.obra__meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1.2rem;
  font-size:.9rem}
.obra__cuenta{font-size:.78rem;color:var(--texto);opacity:.75}
.obra__texto{max-width:65ch;margin:0 0 1.2rem}

.obra__fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.obra__foto{
  display:block;border-radius:var(--radio-s);overflow:hidden;background:var(--gris);
  aspect-ratio:4/3;position:relative;
  box-shadow:0 1px 2px rgba(10,35,66,.07),0 10px 24px -16px rgba(10,35,66,.45);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.obra__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.obra__foto:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(10,35,66,.08),0 20px 38px -20px rgba(10,35,66,.5)}
.obra__foto:hover img{transform:scale(1.05)}
.obra__foto:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

/* El resto de las fotos, plegadas: ocho trabajos con 39 fotos de corrido hacian
   una pagina interminable. */
.obra__mas{margin-top:12px}
.obra__mas summary{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--azul);padding:.6rem .9rem;border:1px solid var(--borde);
  border-radius:var(--radio-s);transition:background .2s,border-color .2s;
}
.obra__mas summary::-webkit-details-marker{display:none}
.obra__mas summary::after{content:"+";font-size:1rem;line-height:1}
.obra__mas[open] summary::after{content:"‘2"}
.obra__mas summary:hover{background:var(--azul-suave);border-color:var(--azul)}
.obra__mas summary:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.obra__fotos--extra{margin-top:12px}

@media (max-width:900px){.obra__fotos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.obra__fotos{grid-template-columns:repeat(2,1fr);gap:8px}}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE OFICIO — lo que separa "sitio de servicios" de "sitio de MANTENCIÓN
   INDUSTRIAL". Nada de esto es adorno: son las señales que usa el rubro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Los datos duros van en mono y con cifras tabulares. Un teléfono y una
      presión escritos con la misma fuente del párrafo se leen como texto; en
      mono se leen como lectura de instrumento, que es de lo que vive MIDA. */
.telefono-dato,.cifra strong,.obra__cuenta,.etiquetas span{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.boton--naranjo .wa-num,.cierre__datos a{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 2. Grano fijo sobre todo. Rompe la planitud digital sin que se note como
      "efecto": a 0.025 de opacidad no se ve, se siente. pointer-events:none
      para que no se coma ni un clic. */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3. Retícula técnica tenue en las secciones claras, como un plano de montaje.
      Se desvanece hacia abajo para que no compita con el contenido. */
.seccion--gris,.razones,.comunas{position:relative;isolation:isolate}
.seccion--gris::before,.razones::before,.comunas::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(31,111,208,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,111,208,.07) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);
          mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

/* 4. La tarjeta de servicio deja de ser "borde + sombra + blanco", que es el
      patrón de card más repetido que existe. Ahora la define la FOTO y una
      barra de acento que crece al pasar el mouse. */
.tarjeta{
  border:0;background:#fff;border-radius:var(--radio);overflow:hidden;
  box-shadow:0 1px 2px rgba(10,35,66,.06),0 12px 28px -18px rgba(10,35,66,.45);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
  position:relative;
}
.tarjeta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--naranjo);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.tarjeta:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(10,35,66,.07),0 28px 50px -24px rgba(10,35,66,.5)}
.tarjeta:hover::after{transform:scaleX(1)}
.tarjeta:hover .tarjeta__foto{transform:scale(1.045)}
.tarjeta__media{overflow:hidden}
.tarjeta__foto{transition:transform .5s cubic-bezier(.2,.7,.3,1)}

/* 5. Numeración de los bloques. En una ficha técnica los ítems van numerados;
      acá además ordena la lectura de los cuatro servicios. */
.tarjeta__cuerpo{position:relative}
.tarjeta__cuerpo::before{
  content:"0" counter(bloque);counter-increment:bloque;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;
  color:var(--azul);opacity:.55;position:absolute;top:1.15rem;right:1.25rem;
}
.grilla-bloques{counter-reset:bloque}

/* 6. Entrada escalonada al hacer scroll. Sin librería: IntersectionObserver.
      Respeta prefers-reduced-motion apagándose entero. */
@media (prefers-reduced-motion:no-preference){
  .asoma{opacity:0;transform:translateY(18px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
  .asoma.visible{opacity:1;transform:none}
}

/* ---------- visor de fotos ----------
   <dialog> nativo: el Escape, el foco atrapado y el fondo inerte vienen dados
   por el navegador. Reimplementar eso a mano es donde se rompe la accesibilidad. */
.visor{
  border:0;padding:0;background:transparent;max-width:min(96vw,1180px);max-height:94vh;
  overflow:visible;color:#fff;
}
.visor::backdrop{background:rgba(6,20,38,.92);backdrop-filter:blur(3px)}
.visor__foto{
  display:block;max-width:100%;max-height:82vh;width:auto;margin:0 auto;
  border-radius:var(--radio-s);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.visor__pie{
  display:flex;justify-content:center;align-items:baseline;gap:.9rem;
  margin:.9rem 0 0;font-size:.9rem;color:#dbe7f5;text-align:center;
}
.visor__cuenta{font-family:var(--mono);font-variant-numeric:tabular-nums;opacity:.7;font-size:.8rem}
.visor__cerrar,.visor__nav{
  position:fixed;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);
  border-radius:999px;display:grid;place-items:center;line-height:1;
  transition:background .2s,transform .2s;
}
/* 44px minimo: es el tamano al que un dedo acierta sin pelear. */
.visor__cerrar{top:18px;right:18px;width:46px;height:46px;font-size:1.7rem}
.visor__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem}
.visor__nav--izq{left:18px}
.visor__nav--der{right:18px}
.visor__cerrar:hover,.visor__nav:hover{background:rgba(255,255,255,.26)}
.visor__nav:hover{transform:translateY(-50%) scale(1.06)}
.visor__cerrar:focus-visible,.visor__nav:focus-visible{outline:3px solid var(--azul-sobre-foto);outline-offset:2px}
@media (max-width:560px){
  .visor__nav{width:46px;height:46px;font-size:1.6rem}
  .visor__nav--izq{left:8px} .visor__nav--der{right:8px}
  .visor__foto{max-height:74vh}
}