/* ==========================================================================
   CLON DE LA MAQUETA DE grupomatriz.es — contenido de Loyola Construcciones
   FIDELIDAD TOTAL · SIN FOTOGRAFÍA

   Todos los valores de esta hoja salen de medir el original en el DOM
   (11-12 de agosto de 2026), no de estimarlos a ojo.

   TRES COSAS QUE CAMBIAN RESPECTO DEL BOCETO ANTERIOR
     1. --azul vuelve a #1746A2, el valor medido en grupomatriz.es.
     2. Los emblemas SÍ llevan el rótulo del servicio, a diferencia del
        original. Con siete isotipos iguales no había otra. Ver .emb__serv.
     3. El <h1> se mantiene. El original tiene cero, pero es invisible:
        corregirlo no altera una sola línea del diseño.

   PARA VOLVER AL AZUL DE LOYOLA: cambiá --azul y --azul-tenue. Nada más.
   ========================================================================== */

:root{
  /* Medidos en el original */
  --azul:#1746A2;            /* primario. Loyola: #2b7fff */
  --azul-tenue:rgba(23,70,162,.09);
  --azul-nav:#1e73be;
  --azul-form:#066aab;
  --azul-noche:#171e59;      /* franja de contacto y pie */
  --gris:#f7f8f9;            /* franja de servicios */
  --tinta:#222222;
  --ancho:1310px;

  /* Isotipo real, usado como máscara para recolorearlo. Ruta relativa:
     este sitio tiene que abrir con doble clic desde un pendrive. */
  --iso:url('../img/isotipo-blanco.png?v=228b52db');

  --tit:'Signika',sans-serif;
  --cuerpo:'Montserrat',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--cuerpo);font-size:15px;line-height:1.5;color:var(--tinta);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--azul-nav);text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0}

/* Escala tipográfica medida en el original */
h2{font-family:var(--tit);font-size:35px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--tinta)}
h3{font-family:var(--tit);font-size:35px;font-weight:600;text-transform:uppercase;color:var(--azul)}
h4{font-family:var(--tit);font-size:40px;font-weight:600;color:var(--tinta)}
h5{font-family:var(--tit);font-size:24px;font-weight:500;color:var(--azul)}
h6{font-family:var(--cuerpo);font-size:15px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--tinta)}

/* ==========================================================================
   APARIENCIA DESACOPLADA DEL NIVEL SEMÁNTICO

   El original tiene la escala visual bien resuelta y la jerarquía rota: abre
   en H5 y salta H5->H6->H2. Replicar el look no obliga a replicar el error.
   Estas cuatro clases llevan exactamente los valores medidos de H3, H4, H5 y
   H6, de modo que cada titular puede usar el nivel que le corresponde sin que
   se mueva un píxel. El linter verifica que no haya saltos.
   ========================================================================== */
.tit    {font-family:var(--tit);font-size:35px;font-weight:600;text-transform:uppercase;color:var(--azul)}
.tit-gd {font-family:var(--tit);font-size:40px;font-weight:600;color:var(--tinta)}
.tit-min{font-family:var(--cuerpo);font-size:15px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--tinta)}
.claim  {font-family:var(--tit);font-size:24px;font-weight:500;color:var(--azul);margin:0}
p{margin:0 0 16px}
.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* Dato que falta y no se inventa. Amarillo para que no llegue a producción
   por distracción: en una pantalla se ve desde el otro lado de la oficina. */
.pendiente{background:#ffe9a8;color:#5c4600;padding:1px 6px;border-radius:3px;font-weight:500;white-space:nowrap}
.pendiente::before{content:"\26A0 "}

/* ---------- Cabecera ---------- */
.cab{background:#fff;border-bottom:1px solid #eceff3;position:sticky;top:0;z-index:60}
.cab__in{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:24px}
/* El lockup pasó de "LOYOLA" a "DE LOYOLA": se alargó de 3,14 a 3,87 de
   relación. Los anchos suben para que el isotipo conserve la misma altura
   que antes —60 px en la cabecera— y el aspect-ratio va en el CSS para que
   mande sobre los width/height del HTML y no haya salto de layout. */
.cab__logo img{width:232px;aspect-ratio:1014/262}
.nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav a{font-size:15px;font-weight:500;color:var(--tinta)}
.nav a:hover,.nav a.act{color:var(--azul-nav)}
.nav .drop{position:relative}
.nav .drop>a::after{content:"\2304";margin-left:6px;font-size:13px;position:relative;top:-2px}
.nav .sub{position:absolute;top:100%;left:-16px;background:#fff;border:1px solid #eceff3;box-shadow:0 8px 24px rgba(0,0,0,.09);min-width:250px;padding:8px 0;display:none;flex-direction:column;gap:0}
.nav .drop:hover .sub,.nav .drop:focus-within .sub{display:flex}
.nav .sub a{display:block;padding:9px 18px;font-size:14px}
.nav .sub a:hover{background:var(--gris)}
.hamb{display:none;background:none;border:0;font-size:15px;font-weight:500;cursor:pointer;color:var(--tinta);padding:0 20px}

/* ---------- Botón pill (idéntico al original) ---------- */
.btn{display:inline-block;background:var(--azul);color:#fff;font-size:17px;font-weight:500;
     padding:10px 20px;border-radius:25px;border:0;cursor:pointer;transition:filter .2s}
.btn:hover{filter:brightness(.9);color:#fff}
.btn--blanco{background:#fff;color:var(--azul)}

/* ==========================================================================
   HERO — cover a ancho completo, min-height 430px, velo azul al 60%

   SIN FOTOGRAFÍA. El original pone acá una foto de 2.439 KB. Este campo la
   reemplaza con un plano de obra: retícula de 64px sobre degradado, que es
   una imagen de la construcción sin ser una fotografía. La geometría —altura
   mínima, velo, centrado, posición del logo— no se toca: el hueco no altera
   ni un píxel de la estructura.
   ========================================================================== */
.hero{position:relative;min-height:430px;display:grid;place-items:center;padding:15px;
      background:#0d2a5e;overflow:hidden}
.hero__fondo{position:absolute;inset:0;background:
  radial-gradient(1100px 520px at 22% 18%, #2f63b4 0%, transparent 60%),
  radial-gradient(900px 480px at 82% 78%, #0e2f6b 0%, transparent 62%),
  linear-gradient(140deg,#0e2f6b,#24589f 55%,#12356f)}
/* Retícula de plano. Dos gradientes lineales de 1px: cuesta 0 peticiones. */
.hero__fondo::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px}
.hero__velo{position:absolute;inset:0;background:var(--azul);opacity:.6}
.hero__in{position:relative;text-align:center;padding:70px 0 54px}
.hero__logo{width:min(88vw,640px);aspect-ratio:1014/262;margin:0 auto 26px}
.hero__claim{font-family:var(--tit);font-size:clamp(20px,3.2vw,32px);font-weight:400;
             letter-spacing:6px;text-transform:uppercase;color:#fff;margin:0 0 34px}
.hero__chev{width:44px;margin:0 auto;opacity:.92;animation:baja 2.1s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media(prefers-reduced-motion:reduce){.hero__chev{animation:none}}

/* Hero de página interna: misma caja, mismo velo, mismo alto mínimo.
   Cambia el contenido —título en vez de lockup—, no la geometría. */
.hero--foto .hero__fondo{background:none}
.hero--foto .hero__fondo::after{content:none}
.hero__fondo picture,.hero__fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero--int .hero__in{padding:56px 0}
.hero--int h1{font-family:var(--tit);font-size:40px;font-weight:600;color:#fff;margin:0 0 12px}
.hero--int p{color:rgba(255,255,255,.9);margin:0;font-size:16px}
.hero--int .miga{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:16px}
.hero--int .miga a{color:rgba(255,255,255,.75)}
.hero--int .miga a:hover{color:#fff}

/* ---------- Franjas ---------- */
.franja{padding:64px 0;text-align:center}
.franja .claim{max-width:820px;margin:0 auto}
.sec{padding:70px 0}
.sec--gris{background:var(--gris)}
.sec--noche{background:var(--azul-noche);color:#fff}
.sec--noche h2,.sec--noche h4,.sec--noche h6,
.sec--noche .tit,.sec--noche .tit-gd,.sec--noche .tit-min,.sec--noche .claim{color:#fff}
.sec--noche p{color:rgba(255,255,255,.85)}

/* ---------- Dos columnas: bloque visual + texto ---------- */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.eyebrow{display:block;margin-bottom:14px;color:var(--azul);
         font-family:var(--cuerpo);font-size:15px;font-weight:500;letter-spacing:2px;text-transform:uppercase}
.dos h2{margin-bottom:22px}
.dos .btn{margin-top:12px}
.dos--inv .panel,.dos--inv .hueco,.dos--inv .ilustra{order:2}

/* ==========================================================================
   LOS DOS TRATAMIENTOS DEL HUECO DE FOTO

   .panel  RESUELTO. Donde la foto era decorativa —institucional, contacto—
           el bloque se resuelve con marca: campo azul, isotipo al 34% como
           marca de agua. No dice "falta una foto" porque no falta: así queda.

   .hueco  MARCADO. Donde la foto ES el contenido —galería de obras— se
           reserva la geometría exacta y se rotula. Un rayado a 45° se lee
           como "provisorio" sin que haga falta explicarlo.

   Las dos conservan la caja del original. La estructura no cambia por no
   tener fotos: cambia el relleno.
   ========================================================================== */
.panel{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;
       background:linear-gradient(150deg,var(--azul-noche),var(--azul) 130%)}
.panel::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px}
/* El isotipo real, recoloreado a blanco por máscara y bajado a 12% de opacidad */
.panel::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:36%;aspect-ratio:155/262;background-color:#fff;opacity:.12;
  -webkit-mask:var(--iso) center/contain no-repeat;
  mask:var(--iso) center/contain no-repeat}
/* ==========================================================================
   FOTO ILUSTRATIVA

   Son imágenes de stock, no obra de Loyola, y varias están generadas por IA.
   El pie lo dice en cada una: cuesta 12 px de altura y evita que alguien
   suponga que ese es el personal de la empresa. La galería de Proyectos no
   usa esta clase — ahí van fotos reales y no llevan pie.
   ========================================================================== */
.ilustra{margin:0}
.ilustra img{width:100%;height:auto;display:block;border-radius:6px;background:#eef2f7}
.ilustra figcaption{margin-top:8px;font-size:12px;letter-spacing:.4px;color:#8a97a8}
.sec--noche .ilustra figcaption{color:rgba(255,255,255,.6)}

/* Variante de marca: el mismo campo azul, pero con el lockup legible en vez
   de la marca de agua. Va donde una foto de personas afirmaría algo que no
   podemos sostener —al lado del formulario de contacto—, y no cuesta un byte:
   el pie ya carga ese mismo archivo, así que el navegador lo tiene en caché. */
.panel--marca{display:grid;place-items:center}
.panel--marca::after{content:none}
.panel--marca img{position:relative;width:52%;max-width:340px;aspect-ratio:1014/262;height:auto}

.panel--ancho{aspect-ratio:16/10}
.panel--alto{aspect-ratio:3/4}

.hueco{position:relative;aspect-ratio:4/3;border-radius:6px;display:grid;place-items:center;
       background:repeating-linear-gradient(45deg,#e9eff8 0 14px,#dfe8f5 14px 28px);
       color:#5d708c;padding:20px;text-align:center}
.hueco b{display:block;font-family:var(--cuerpo);font-size:12px;font-weight:600;
         letter-spacing:1.6px;text-transform:uppercase;margin-bottom:4px}
.hueco span{font-size:12px;opacity:.85}
.hueco--cuadrado{aspect-ratio:1/1}
.hueco--ancho{aspect-ratio:16/10}

/* ==========================================================================
   EMBLEMAS CIRCULARES DE SERVICIO

   El isotipo se recolorea con mask-image: el canal alfa del PNG blanco hace
   de máscara y el color sale de background-color. Un archivo de 13 KB sirve
   los cinco emblemas de cualquier color. Descartados los filtros CSS
   (hue-rotate, sepia): no dan colores exactos y hay que calibrarlos a ojo.

   Encaje verificado con números, no a ojo:
     arco superior, base del texto   10,0%   glifos hasta ~14%
     isotipo                         21,7% a 70,3%
     holgura isotipo <-> texto       7,7 puntos
   ========================================================================== */
/* Siete emblemas, no cinco. Una sola fila de 7 los dejaría en 164px y el texto
   del arco caería a ~7,5px: ilegible. Con max-width 880 entran exactamente 4 por
   fila y quedan 4+3 centrados, que conserva el motivo de "fila de círculos" del
   original sin sacrificar legibilidad. */
.serv{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
      gap:34px 32px;margin:52px auto 46px;max-width:880px}
.serv > *{flex:0 0 190px}
.emb{position:relative;width:100%;max-width:190px;margin:0 auto;aspect-ratio:1/1}
.emb__aro{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* El emblema entero es clickeable. En vez de envolver el SVG en un <a> —que
   obligaría a repintar la estructura— se estira un enlace transparente por
   encima. Lleva texto real oculto, no un aria-label pelado: un enlace vacío
   se anuncia como "enlace" a secas en varios lectores de pantalla. */
.emb__link{position:absolute;inset:0;z-index:2;border-radius:50%}
.emb__link:focus-visible{outline:3px solid var(--c,var(--azul));outline-offset:4px}
.emb:hover .emb__iso{transform:translate(-50%,-50%) scale(1.06)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;
        clip-path:inset(50%);white-space:nowrap}
.emb__marca{font-family:var(--cuerpo);font-size:10px;font-weight:500;letter-spacing:5.5px;
            fill:#2b2b2b;text-transform:uppercase}

/* DESVIACIÓN DELIBERADA DEL ORIGINAL. En grupomatriz.es los círculos no
   llevan rótulo, pero ahí son cinco fotos distintas: se distinguen solas.
   Acá son siete isotipos idénticos que solo cambian de color, y sin el
   nombre no hay forma de saber cuál es cuál. La fidelidad no puede costar
   que la página no se entienda.

   El cuerpo y el tracking los fija build.py según el largo del nombre, con
   --fs y --ls: "PILETAS" y "AUTOMATIZACIÓN" no pueden ir al mismo tamaño
   sobre un arco de largo fijo. */
.emb__serv{display:block;
           font-family:var(--cuerpo);font-weight:600;
           font-size:var(--fs,12.5px);letter-spacing:var(--ls,3.2px);
           fill:var(--c);text-transform:uppercase}

.emb__iso{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
          width:33%;aspect-ratio:155/262;
          background-color:var(--c);
          -webkit-mask:var(--iso) center/contain no-repeat;
          mask:var(--iso) center/contain no-repeat}
/* Sin soporte de mask (pre-2019) el isotipo blanco sobre fondo claro no se ve.
   Se deja el aro con el color del servicio para que el bloque no desaparezca. */
@supports not (mask-image: url(#x)){
  .emb__iso{background:none;-webkit-mask:none;mask:none;
            border:3px solid var(--c);border-radius:50%;width:38%;aspect-ratio:1/1}
}
.emb:hover .emb__iso{transform:translate(-50%,-50%) scale(1.06);transition:transform .25s}

/* Sin rótulo, el emblema solo no dice qué servicio es. En la página de
   Servicios el título va debajo, fuera del aro, como encabezado de sección. */
.emb-pie{margin-top:18px}

/* ---------- Qué nos diferencia: 3 bloques ---------- */
.dif{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:52px;text-align:center}
.dif__ico{width:120px;aspect-ratio:1/1;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
          background:var(--azul-tenue);color:var(--azul)}
.dif__ico svg{width:52px;height:52px}
.dif .tit-min{margin-bottom:14px;line-height:1.5}
.dif p{font-size:14.5px;color:#4a5566}

/* ---------- Rejilla de obras ---------- */
.obras{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.obra figcaption{padding-top:14px}
.obra .tit-min{margin-bottom:6px}
.obra p{font-size:14px;color:#4a5566;margin:0}

/* ---------- Lista de servicios en detalle ---------- */
.detalle{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;
         border-top:1px solid #eceff3}
.detalle:first-of-type{border-top:0}
.detalle ul{margin:0 0 18px;padding-left:20px;display:grid;gap:8px}
.detalle li{font-size:14.5px}

/* ---------- Datos de contacto ---------- */
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px}
.datos .tit-min{margin-bottom:12px}
.datos ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}

/* ---------- Contacto ---------- */
.cont{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:46px}
.form{display:grid;gap:16px}
.form label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.form .req{color:#e05a4a}
.form input,.form textarea{width:100%;padding:11px 13px;border:1px solid #cfd8e4;border-radius:3px;
  font:inherit;font-size:15px;background:#fff;color:var(--tinta)}
.form input:focus,.form textarea:focus{outline:2px solid #7aa7ff;outline-offset:1px;border-color:#7aa7ff}
.form textarea{min-height:130px;resize:vertical}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Honeypot: campo real, invisible y fuera del recorrido de tabulación y de
   lectores de pantalla. Un bot lo completa; una persona no puede. Cero
   fricción, cero terceros, cero datos a Google. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enviar{background:var(--azul-form);color:#fff;border:0;border-radius:3px;padding:11px 26px;
        font:inherit;font-size:17px;font-weight:500;cursor:pointer;justify-self:start}
.enviar:hover{filter:brightness(1.1)}

/* ==========================================================================
   CANALES DE CONTACTO

   Reemplazan al formulario. Un formulario sin endpoint configurado se traga
   las consultas en silencio, que es peor que no tenerlo: la persona cree que
   escribió. Estos tres enlaces funcionan desde el primer día, no recolectan
   ningún dato y en celular abren WhatsApp, el discador o el cliente de correo.

   El alto mínimo de 56px no es decorativo: es el objetivo táctil cómodo en
   pantalla chica, donde va a entrar la mayoría.
   ========================================================================== */
.canales{display:grid;gap:12px;align-content:center}
.canal{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;
       border-radius:6px;border:1px solid rgba(255,255,255,.22);
       background:rgba(255,255,255,.06);color:#fff;transition:background .2s,transform .2s}
.canal:hover{background:rgba(255,255,255,.13);color:#fff;transform:translateX(3px)}
.canal:focus-visible{outline:3px solid #fff;outline-offset:2px}
.canal svg{width:26px;height:26px;flex:none}
.canal span{display:grid;font-size:15px;line-height:1.35}
.canal b{font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
         opacity:.75;margin-bottom:2px}
.canal--wa{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.45)}
.canal--wa:hover{background:rgba(37,211,102,.26)}
.canales__pie{margin:6px 0 0;font-size:13px;opacity:.7}

/* Sobre fondo claro (página de Contacto) se invierte el contraste. */
.canales--claro .canal{border-color:#dbe3ee;background:#f7f9fc;color:var(--tinta)}
.canales--claro .canal:hover{background:#eef3fa;color:var(--tinta)}
.canales--claro .canal:focus-visible{outline-color:var(--azul)}
.canales--claro .canal svg{color:var(--azul)}
.canales--claro .canal--wa{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.45)}
.canales--claro .canal--wa svg{color:#128c4a}
.canales--claro .canales__pie{opacity:1;color:#5d708c}

/* ---------- Pie ---------- */
.pie{background:var(--azul-noche);color:rgba(255,255,255,.8);padding:64px 0 0}
.pie a{color:rgba(255,255,255,.8)}
.pie a:hover{color:#fff}
/* Dos columnas desde que se quitó la de Legal. Con las tres de antes, dejar
   una vacía hubiera abierto un hueco en el medio del pie. */
.pie__cols{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;padding-bottom:52px}
.pie .tit-min{color:#fff;margin-bottom:18px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
.pie__logo img{width:232px;aspect-ratio:1014/262;margin-bottom:20px}
.zonas{border-top:1px solid rgba(255,255,255,.14);padding:44px 0 30px;text-align:center}
.zonas h2{color:#fff;font-size:24px;letter-spacing:2px;margin-bottom:26px}
.zonas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:14px}
.pie__base{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;font-size:13px;
           display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}

/* ---------- Flotantes derecha (175px · right 25px · top 25%) ---------- */
.flot{position:fixed;right:25px;top:25%;z-index:70;display:grid;gap:6px;width:175px}
.flot a{display:flex;align-items:center;gap:9px;min-height:35px;padding:4px 12px;border-radius:5px;
        color:#fff;font-size:17px;font-weight:500;transition:transform .25s}
.flot a:hover{transform:translateX(-6px);color:#fff}
.flot svg{width:18px;height:18px;flex:none}
.flot__tel{background:#0d6efd}
.flot__wa{background:green}

/* Cinta de aviso: es un clon sin publicar, tiene que verse en cada página */
.aviso{background:#ffe9a8;border-bottom:1px solid #e0c98a;color:#5c4600;
       font-size:13px;padding:9px 20px;text-align:center;font-weight:500;margin:0}

/* Salto al contenido: primer tabulador de la página */
.saltar{position:absolute;left:-9999px;background:#fff;color:var(--azul);padding:10px 16px;z-index:200}
.saltar:focus{left:12px;top:12px;outline:2px solid var(--azul)}

/* ==========================================================================
   MODELO MÓVIL — medido sobre grupomatriz.es cargado en un iframe de 414px

     768px  se oculta el nav y aparece el botón "Menú" (GeneratePress)
     781px  todas las columnas pasan a flex-basis:100% (bloques de WordPress)
     576px  los flotantes dejan de ser barras laterales y se vuelven una
            BARRA INFERIOR FIJA de 40px, dos mitades de 50%, solo iconos
     El hero conserva min-height:430px y el logo ocupa ~97% del ancho
     Los titulares NO se achican: H4 sigue en 40px y H2 en 35px a 395px

   LO ÚNICO QUE NO SE REPLICA: el original desborda 10px en horizontal a
   414px, el mismo bug de alignfull/100vw del informe. Eso no es diseño.
   ========================================================================== */

@media(max-width:1024px){
  .pie__cols{grid-template-columns:1fr 1fr}
  .obras{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:781px){
  .dos,.cont,.detalle{grid-template-columns:1fr;gap:32px}
  .dos .panel,.dos .hueco,.dos .ilustra,
  .dos--inv .panel,.dos--inv .hueco,.dos--inv .ilustra{order:-1}
  .dif,.datos{grid-template-columns:1fr;gap:40px}
  /* En el original los 5 servicios quedan uno por fila. Se conserva el
     apilado, pero con el emblema centrado a 190px en vez de estirado al
     ancho de la columna: a 335px el aro se ve desproporcionado. */
  .serv{flex-direction:column;align-items:center;gap:34px;max-width:none}
  .serv > *{flex:0 0 auto}
  .obras{grid-template-columns:1fr}
}

@media(max-width:768px){
  .nav{display:none}
  .hamb{display:block}
  .cab__in{min-height:70px}
  .cab__logo img{width:184px}
  .hero__logo{width:94%;margin-bottom:20px}   /* el original llega al 97% */
  .hero__claim{letter-spacing:4px}
  .sec{padding:52px 0}
  .franja{padding:48px 0}
  /* Los titulares no se reducen: es lo que hace el original. Solo se acota
     el H2 del pie, que es un texto largo propio de este sitio. */
  .zonas h2{font-size:19px;letter-spacing:1.5px}

  /* Menú desplegado. El JS conmuta una clase y el aspecto lo define el CSS:
     si el JS falla, no queda un nav a medio estilar. */
  .nav.abierto{display:block;position:absolute;top:100%;left:0;right:0;
    background:#fff;padding:8px 20px 18px;
    box-shadow:0 12px 26px rgba(0,0,0,.10);border-bottom:1px solid #eceff3}
  .nav.abierto ul{flex-direction:column;align-items:stretch;gap:0}
  .nav.abierto li{border-bottom:1px solid #f1f4f8}
  .nav.abierto li:last-child{border-bottom:0}
  .nav.abierto a{display:block;padding:13px 0;font-size:16px}
  /* En táctil no existe :hover. Si el submenú dependiera de él, los cinco
     servicios quedarían inalcanzables desde el celular: se muestra siempre,
     indentado, que es lo que hace el menú móvil del original. */
  .nav.abierto .drop>a::after{content:none}
  .nav.abierto .sub{display:flex;position:static;border:0;box-shadow:none;
    min-width:0;padding:0 0 8px 14px;background:transparent}
  .nav.abierto .sub a{padding:9px 0;font-size:14.5px;color:#5a6b82}
  .nav.abierto .sub a:hover{background:transparent;color:var(--azul-nav)}

  .hero--int h1{font-size:32px}
}

@media(max-width:576px){
  .flot{position:fixed;left:0;right:auto;bottom:0;top:auto;
        width:100%;height:40px;display:flex;gap:0;z-index:999999}
  .flot a{flex:1 1 50%;width:50%;min-height:40px;height:40px;
          border-radius:0;padding:0;justify-content:center;gap:0}
  .flot a:hover{transform:none}
  .flot a span{display:none}          /* solo iconos, como el original */
  .flot svg{width:20px;height:20px}
  body{padding-bottom:40px}           /* la barra tapa el final si no se compensa */

  .form .fila{grid-template-columns:1fr}
  .pie__cols{grid-template-columns:1fr;gap:32px}
  .zonas ul{gap:8px 16px;font-size:13px}
  .env{padding:0 16px}
}

/* ==========================================================================
   MEDIOS — inyectado por _fuente/aplicar_medios.py
   ========================================================================== */

/* .foto — tercer tratamiento del hueco, al lado de .panel y .hueco.
   Repite la MISMA relación de aspecto que .hueco (4/3) para que cambiar uno
   por otro no mueva un píxel del layout. El recorte fino ya viene hecho desde
   _fuente/fotos.py; object-fit queda como red ante un redondeo de subpíxel.
   Sin pie "ilustrativa": acá van fotos reales de obra de Loyola. */
.foto{display:block;position:relative;aspect-ratio:4/3;border-radius:6px;
      overflow:hidden;background:var(--gris)}
.foto>img{width:100%;height:100%;object-fit:cover}
.foto--cuadrado{aspect-ratio:1/1}
.dos--inv .foto{order:2}

/* Pie de las ilustrativas, discreto.
   Antes ocupaba un renglón propio debajo de la imagen. Ahora va como chip
   sobre la esquina inferior derecha: se lee como un crédito de foto y no como
   una advertencia. Sigue estando y sigue siendo legible A PROPÓSITO — el pie
   es lo que evita que alguien tome estas imágenes por instalaciones o personal
   reales, así que se lo baja de tono, no se lo esconde.
   El chip es opaco y no translúcido: sobre una foto clara un velo al 40% deja
   el texto en 2:1. Con #0f172a al 78% el contraste medido sobre la foto real
   da 10,0:1 de media y 7,8:1 en el peor píxel — muy por encima del 4,5:1 de
   WCAG AA para texto normal. */
.ilustra{position:relative;margin:0}
.ilustra figcaption{position:absolute;right:8px;bottom:8px;margin:0;
  font-size:10.5px;line-height:1;letter-spacing:.2px;
  padding:4px 7px;border-radius:4px;
  color:rgba(255,255,255,.86);background:rgba(15,23,42,.78)}
.sec--noche .ilustra figcaption{color:rgba(255,255,255,.86)}
@media(max-width:576px){.ilustra figcaption{font-size:10px;right:6px;bottom:6px}}

/* .panel--blanco — solo el logotipo sobre blanco, al lado del formulario.
   Sin marco, por pedido. La caja sigue existiendo —conserva el aspect-ratio
   16/10 de .panel--ancho, así que la grilla de .cont no se mueve y el
   formulario queda alineado igual—, pero deja de verse: sobre la sección
   blanca de contacto.html el campo se funde con la página y lo único que
   queda a la vista es la marca.
   Consecuencia asumida: el bloque ya no se lee como un recuadro, sino como un
   logotipo centrado en el espacio de la izquierda. Es lo buscado; si alguna
   vez esta clase se usara sobre un fondo que no sea blanco, va a hacer falta
   volver a poner el hairline.
   PENDIENTE: logo-azul-380.png mide 380 px y acá se muestra a ~300, así que en
   pantalla retina queda a 1,27x en vez de 2x. Se arregla exportando el
   logotipo a 760 px; también mejora el .panel--marca del inicio. */
.panel--blanco{background:#fff;border:0;display:grid;place-items:center}
.panel--blanco::before,.panel--blanco::after{content:none}
.panel--blanco img{position:relative;width:46%;max-width:300px;height:auto}