/* ==========================================================================
   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 pierden el rótulo del servicio: en el original los
        cinco círculos no llevan texto. Ver .emb__serv más abajo.
     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');

  --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}
.cab__logo img{width:190px}
.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(78vw,520px);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--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{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:34%;aspect-ratio:138/224;background-color:#fff;opacity:.12;
  -webkit-mask:var(--iso) center/contain no-repeat;
  mask:var(--iso) center/contain no-repeat}
.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
   ========================================================================== */
.serv{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:52px 0 46px;align-items:start}
.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}
.emb__marca{font-family:var(--cuerpo);font-size:9.2px;font-weight:500;letter-spacing:2.1px;
            fill:#2b2b2b;text-transform:uppercase}

/* FIDELIDAD TOTAL: en el original los cinco círculos no llevan rótulo.
   El texto sigue en el DOM y en el aria-label del SVG, así que un lector de
   pantalla lo anuncia igual. Para rotularlos: display:block. */
.emb__serv{display:none;
           font-family:var(--cuerpo);font-size:12.5px;font-weight:600;letter-spacing:3.2px;
           fill:var(--c);text-transform:uppercase}

.emb__iso{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
          width:30%;aspect-ratio:138/224;
          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)}

/* ---------- 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}
.pie__cols{display:grid;grid-template-columns:1.4fr 1fr 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:190px;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--inv .panel,.dos--inv .hueco{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{grid-template-columns:1fr;gap:34px}
  .obras{grid-template-columns:1fr}
}

@media(max-width:768px){
  .nav{display:none}
  .hamb{display:block}
  .cab__in{min-height:70px}
  .cab__logo img{width:150px}
  .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}
}