/* ======================================================
   SYMAQ — Sistema de diseño corporativo (v2)
   Identidad: azul institucional + rojo + blanco.
   Estructura:
     01. Tokens
     02. Reset y base
     03. Utilidades y tipografía
     04. Botones y enlaces
     05. Riel de marca / redes flotantes
     06. Topbar / Header / Nav
     07. Hero y hero de página
     08. Indicadores
     09. Secciones, tarjetas, marcos
     10. Servicios
     11. Obras
     12. Clientes
     13. Galería modal
     14. Contacto
     15. CTA final y footer
     16. Responsive
====================================================== */

/* ---------- 01. Tokens ---------- */
:root{
  /* superficies */
  --papel:       #FFFFFF;
  --papel-alt:   #F4F7FB;
  --papel-hueso: #FBFCFE;
  --linea:       #E1E8F1;
  --linea-sua:   #EEF2F8;

  /* tinta */
  --tinta:       #101B30;
  --tinta-med:   #3A4A63;
  --tinta-sua:   #6B7A90;

  /* marca */
  --azul:        #0055A4;
  --azul-osc:    #003D78;
  --azul-prof:   #002F5C;
  --azul-luz:    #E6EFF9;
  --rojo:        #C81432;
  --rojo-osc:    #96061F;
  --rojo-luz:    #FCEBEE;
  --blanco:      #FFFFFF;

  /* tipografía */
  --fuente-display: "Space Grotesk", "Segoe UI", sans-serif;
  --fuente-texto:   "Inter", "Segoe UI", sans-serif;

  /* escala */
  --paso-1: clamp(2.6rem, 5.4vw, 4.35rem);
  --paso-2: clamp(2rem, 3.6vw, 3rem);
  --paso-3: clamp(1.5rem, 2.2vw, 2rem);
  --paso-4: 1.15rem;

  /* forma */
  --radio:     4px;
  --radio-med: 8px;
  --radio-max: 18px;

  /* profundidad */
  --sombra-1: 0 1px 2px rgba(16,27,48,.05), 0 2px 10px -6px rgba(16,27,48,.10);
  --sombra-2: 0 18px 44px -26px rgba(0,85,164,.32), 0 2px 6px rgba(16,27,48,.05);
  --sombra-3: 0 42px 90px -44px rgba(0,47,92,.55);

  /* movimiento */
  --transicion: .38s cubic-bezier(.22,.61,.36,1);
  --transicion-rap: .2s ease;

  /* gradientes */
  --grad-azul:  linear-gradient(135deg, var(--azul) 0%, var(--azul-prof) 100%);
  --grad-rojo:  linear-gradient(135deg, var(--rojo) 0%, var(--rojo-osc) 100%);
  --grad-scrim: linear-gradient(100deg, rgba(0,47,92,.94) 0%, rgba(0,47,92,.80) 42%, rgba(0,47,92,.42) 100%);

  --ancho: 1220px;
}

/* ---------- 02. Reset y base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--fuente-texto);
  font-size:16.5px;
  color:var(--tinta);
  background:var(--papel);
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }
::selection{ background:var(--azul); color:#fff; }
body.sin-scroll{ overflow:hidden; }

:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 34px; }

/* ---------- 03. Utilidades y tipografía ---------- */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
[data-reveal].visible{ opacity:1; transform:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--fuente-display);
  font-size:.68rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:30px; height:2px;
  background:var(--rojo); flex:none;
}
.eyebrow--oscuro{ color:var(--azul); }
.eyebrow--claro{ color:rgba(255,255,255,.9); }

.titulo-seccion{
  font-family:var(--fuente-display);
  font-size:var(--paso-2);
  font-weight:700; line-height:1.08;
  letter-spacing:-.028em;
  color:var(--tinta);
  text-wrap:balance;
}
.texto-lead{
  color:var(--tinta-med);
  font-size:1.045rem;
  max-width:62ch;
  margin-top:20px;
  white-space:pre-line;
}
.seccion{ padding:110px 0; position:relative; }
.seccion--alt{
  background:var(--papel-alt);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.seccion__header{ max-width:760px; margin-bottom:56px; }
.seccion__header--centro{ margin-left:auto; margin-right:auto; text-align:center; }
.seccion__header--centro .texto-lead{ margin-left:auto; margin-right:auto; }
.grid-2{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:72px; align-items:center;
}

/* ---------- 04. Botones y enlaces ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--fuente-display);
  font-size:.83rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:var(--radio);
  cursor:pointer;
  transition:transform var(--transicion-rap), background var(--transicion-rap),
             color var(--transicion-rap), box-shadow var(--transicion), border-color var(--transicion-rap);
}
.btn svg{ width:17px; height:17px; transition:transform var(--transicion-rap); }
.btn:hover svg{ transform:translateX(4px); }
.btn--primary{
  background:var(--grad-rojo); color:#fff;
  box-shadow:0 16px 34px -18px rgba(150,6,31,.75);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -18px rgba(150,6,31,.8); }
.btn--ghost-claro{
  color:#fff; border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.btn--ghost-claro:hover{ background:#fff; color:var(--azul-prof); border-color:#fff; transform:translateY(-2px); }
.btn--outline{ color:var(--azul); border-color:var(--azul); background:transparent; }
.btn--outline:hover{ background:var(--azul); color:#fff; }
.btn--acento{ background:var(--grad-azul); color:#fff; }
.btn--acento:hover{ transform:translateY(-2px); }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:30px;
  font-family:var(--fuente-display);
  font-size:.8rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--azul);
  padding-bottom:5px;
  border-bottom:1px solid rgba(0,85,164,.28);
  transition:color var(--transicion-rap), border-color var(--transicion-rap), gap var(--transicion-rap);
}
.enlace-flecha svg{ width:16px; height:16px; }
.enlace-flecha:hover{ color:var(--rojo); border-color:var(--rojo); gap:15px; }

/* ---------- 05. Riel de marca / redes flotantes ---------- */
body::before{
  content:"";
  position:fixed; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,
    var(--rojo) 0% 33.333%,
    #fff 33.333% 66.666%,
    var(--azul) 66.666% 100%);
  box-shadow:1px 0 0 rgba(16,27,48,.07);
  z-index:80; pointer-events:none;
}

.redes-flotantes{
  position:fixed; right:20px; bottom:24px;
  display:flex; flex-direction:column; gap:12px;
  z-index:90;
}
.redes-flotantes a{
  width:50px; height:50px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  box-shadow:var(--sombra-2);
  transition:transform var(--transicion-rap), box-shadow var(--transicion-rap);
}
.redes-flotantes a svg{ width:23px; height:23px; }
.redes-flotantes a:hover{ transform:translateY(-3px) scale(1.05); }
.redes-flotantes__instagram{ background:linear-gradient(135deg,#7a3ffb,#d62976 55%,#fa7e1e); }
.redes-flotantes__whatsapp{ background:linear-gradient(135deg,#25D366,#128C7E); }

/* ---------- 06. Topbar / Header / Nav ---------- */
.topbar{
  background:var(--azul-prof);
  color:rgba(255,255,255,.78);
  font-size:.775rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative; z-index:60;
}
.topbar__inner{
  max-width:var(--ancho); margin:0 auto; padding:9px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.topbar__grupo{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.topbar__item{ display:inline-flex; align-items:center; gap:7px; letter-spacing:.01em; }
.topbar__redes a{
  font-family:var(--fuente-display);
  font-size:.78rem; font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.72);
  transition:color var(--transicion-rap);
}
.topbar__redes a:hover{ color:#fff; }

.header{
  position:sticky; top:0; z-index:70;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--linea);
  transition:box-shadow var(--transicion), padding var(--transicion), background var(--transicion);
}
.header.compacto{ box-shadow:0 10px 30px -22px rgba(16,27,48,.5); background:rgba(255,255,255,.94); }
.header__inner{
  max-width:var(--ancho); margin:0 auto; padding:15px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  transition:padding var(--transicion);
}
.header.compacto .header__inner{ padding:10px 34px; }
.brand{ display:flex; align-items:center; }
.brand__logo{ height:52px; width:auto; transition:height var(--transicion); }
.header.compacto .brand__logo{ height:42px; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative;
  font-family:var(--fuente-display);
  font-size:.82rem; font-weight:600;
  letter-spacing:.05em;
  color:var(--tinta-med);
  padding:11px 15px;
  border-radius:var(--radio);
  transition:color var(--transicion-rap), background var(--transicion-rap);
}
.nav a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px;
  height:2px; background:var(--rojo);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--transicion);
}
.nav a:hover{ color:var(--azul-prof); }
.nav a:hover::after,
.nav a.activo::after{ transform:scaleX(1); }
.nav a.activo{ color:var(--azul-prof); }
.nav .nav__cta{
  margin-left:12px;
  background:var(--grad-azul); color:#fff;
  padding:12px 24px;
  letter-spacing:.02em; font-size:.85rem; font-weight:700;
  box-shadow:0 14px 30px -18px rgba(0,61,120,.85);
}
.nav .nav__cta::after{ display:none; }
.nav .nav__cta:hover{ background:var(--grad-rojo); color:#fff; transform:translateY(-1px); }

.nav__toggle{
  display:none;
  width:46px; height:46px;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:#fff; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{
  display:block; width:20px; height:2px; background:var(--azul-prof);
  transition:transform var(--transicion-rap), opacity var(--transicion-rap);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 07. Hero ---------- */
.hero{
  position:relative;
  min-height:min(88vh, 860px);
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--azul-prof);
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  animation:heroZoom 22s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__overlay{
  position:absolute; inset:0;
  background:var(--grad-scrim);
}
.hero__overlay::after{
  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:78px 78px;
  mask-image:radial-gradient(circle at 78% 40%, #000, transparent 72%);
  opacity:.55;
}
.hero__content{
  position:relative; z-index:2;
  max-width:var(--ancho); width:100%;
  margin:0 auto; padding:150px 34px 130px;
  color:#fff;
}
.hero__title{
  font-family:var(--fuente-display);
  font-size:var(--paso-1);
  font-weight:700; line-height:1.02;
  letter-spacing:-.035em;
  max-width:19ch;
  text-wrap:balance;
}
.hero__subtitle{
  margin-top:26px;
  max-width:56ch;
  color:rgba(255,255,255,.82);
  font-size:1.09rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

.hero__cifras{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:64px;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:26px;
  max-width:660px;
}
.hero__cifras > div{
  display:flex; flex-direction:column; gap:2px;
  padding-right:44px; margin-right:44px;
  border-right:1px solid rgba(255,255,255,.14);
}
.hero__cifras > div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero__cifras strong{
  font-family:var(--fuente-display);
  font-size:1.85rem; font-weight:700; letter-spacing:-.02em;
}
.hero__cifras span{
  font-size:.73rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3;
  width:26px; height:44px;
  border:1px solid rgba(255,255,255,.4); border-radius:16px;
  display:grid; place-items:start center; padding-top:8px;
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:#fff;
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{ 0%{opacity:0; transform:translateY(0);} 40%{opacity:1;} 100%{opacity:0; transform:translateY(16px);} }

/* Hero de páginas internas */
.pagina-hero{
  position:relative;
  padding:112px 0 84px;
  background:var(--azul-prof);
  overflow:hidden;
  color:#fff;
}
.pagina-hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.5;
}
.pagina-hero__overlay{ position:absolute; inset:0; background:var(--grad-scrim); }
.pagina-hero__grid{
  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:66px 66px;
  mask-image:linear-gradient(90deg, transparent, #000);
}
.pagina-hero .contenedor{ position:relative; z-index:2; }
.migas{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.07em;
  color:rgba(255,255,255,.62);
  margin-bottom:26px;
}
.migas a{ color:rgba(255,255,255,.85); transition:color var(--transicion-rap); }
.migas a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.pagina-hero__contenido{ max-width:830px; }
.pagina-hero__titulo{
  font-family:var(--fuente-display);
  font-size:var(--paso-2);
  font-weight:700; line-height:1.06; letter-spacing:-.03em;
  text-wrap:balance;
}
.pagina-hero__subtitulo{
  margin-top:20px; max-width:62ch;
  color:rgba(255,255,255,.8);
  font-size:1.04rem;
}

/* ---------- 08. Indicadores ---------- */
.stats{ background:var(--papel); border-bottom:1px solid var(--linea); }
.stats__inner{
  max-width:var(--ancho); margin:0 auto; padding:0 34px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stats__item{
  padding:44px 30px;
  border-left:1px solid var(--linea);
  position:relative;
  transition:background var(--transicion);
}
.stats__item:first-child{ border-left:none; padding-left:0; }
.stats__item:last-child{ padding-right:0; }
.stats__item::after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--rojo); transition:width var(--transicion);
}
.stats__item:hover::after{ width:100%; }
.stats__item strong{
  display:block;
  font-family:var(--fuente-display);
  font-size:clamp(2rem,3.1vw,2.7rem); font-weight:700;
  letter-spacing:-.03em; color:var(--azul-prof);
  line-height:1;
}
.stats__item span{
  display:block; margin-top:10px;
  font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-sua);
}

/* ---------- 09. Secciones, tarjetas, marcos ---------- */
.seccion__texto .titulo-seccion{ margin-top:4px; }

.marco-tecnico{
  position:relative;
  border-radius:var(--radio-med);
  overflow:hidden;
  background:var(--azul-luz);
  box-shadow:var(--sombra-2);
}
.marco-tecnico__img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3;
  transition:transform 1s cubic-bezier(.22,.61,.36,1), filter var(--transicion);
}
.marco-tecnico:hover .marco-tecnico__img{ transform:scale(1.045); }
.marco-tecnico .esquina-bl,
.marco-tecnico .esquina-br{
  position:absolute; width:22px; height:22px; z-index:2;
  border:2px solid rgba(255,255,255,.85);
  opacity:.85; pointer-events:none;
}
.marco-tecnico .esquina-bl{ left:14px; bottom:14px; border-right:none; border-top:none; }
.marco-tecnico .esquina-br{ right:14px; bottom:14px; border-left:none; border-top:none; }

.ficha{ position:relative; }
.ficha__etiqueta{
  display:inline-block; margin-bottom:14px;
  font-family:var(--fuente-display);
  font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-sua);
}
.ficha__img{ border-radius:var(--radio-med); }

.mv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.mv-tarjeta{
  position:relative;
  padding:44px 40px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-1);
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  overflow:hidden;
}
.mv-tarjeta::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--azul); transform:scaleY(0); transform-origin:top;
  transition:transform var(--transicion);
}
.mv-tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); }
.mv-tarjeta:hover::before{ transform:scaleY(1); }
.mv-tarjeta--acento{ background:var(--azul-prof); border-color:transparent; color:#fff; }
.mv-tarjeta--acento::before{ background:var(--rojo); }
.mv-tarjeta__num{
  font-family:var(--fuente-display);
  font-size:.7rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--rojo);
}
.mv-tarjeta--acento .mv-tarjeta__num{ color:#FF8DA1; }
.mv-tarjeta h3{
  font-family:var(--fuente-display);
  font-size:var(--paso-3); font-weight:700; letter-spacing:-.022em;
  margin:14px 0 16px; line-height:1.16;
}
.mv-tarjeta p{ color:var(--tinta-med); }
.mv-tarjeta--acento p{ color:rgba(255,255,255,.8); }

.tarjetas{ display:grid; gap:26px; }
.tarjetas--2{ grid-template-columns:repeat(2,1fr); }
.tarjetas--3{ grid-template-columns:repeat(3,1fr); }
.tarjeta{
  position:relative;
  padding:42px 38px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-1);
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover{ transform:translateY(-5px); box-shadow:var(--sombra-2); border-color:rgba(0,85,164,.28); }
.tarjeta__sector{
  display:inline-block;
  font-family:var(--fuente-display);
  font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--azul);
  padding:5px 12px;
  background:var(--azul-luz);
  border-radius:999px;
}
.tarjeta h3{
  font-family:var(--fuente-display);
  font-size:1.32rem; font-weight:700; letter-spacing:-.02em;
  margin:18px 0 12px; line-height:1.2;
}
.tarjeta p{ color:var(--tinta-med); font-size:.98rem; }

.logos-clientes{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1px; background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--radio-med); overflow:hidden;
}
.logos-clientes__item{
  display:grid; place-items:center; text-align:center;
  min-height:92px; padding:18px 20px;
  background:var(--papel);
  transition:background var(--transicion-rap);
}
.logos-clientes__item:hover{ background:var(--papel-hueso); }
.logos-clientes__logo{
  max-width:100%; max-height:44px; object-fit:contain;
  filter:grayscale(100%); opacity:.72;
  transition:filter var(--transicion-rap), opacity var(--transicion-rap);
}
.logos-clientes__item:hover .logos-clientes__logo{ filter:grayscale(0%); opacity:1; }
.logos-clientes__nombre{
  font-family:var(--fuente-display);
  font-size:.87rem; font-weight:600; letter-spacing:.02em;
  color:var(--tinta-sua);
}

/* Línea de tiempo (opcional) */
.linea-tiempo{ display:grid; gap:0; margin-top:40px; }
.hito{
  display:grid; grid-template-columns:130px 1fr; gap:26px;
  padding:26px 0; border-top:1px solid var(--linea);
}
.hito__anio{
  font-family:var(--fuente-display);
  font-size:1.35rem; font-weight:700; color:var(--azul);
  letter-spacing:-.02em;
}
.hito__texto{ color:var(--tinta-med); }

/* ---------- 10. Servicios ---------- */
.servicio-bloque{ padding:104px 0; border-bottom:1px solid var(--linea); }
.servicio-bloque:nth-of-type(even){ background:var(--papel-alt); }
.servicio-bloque__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center;
}
.servicio-bloque:nth-of-type(even) .servicio-bloque__media{ order:-1; }
.servicio-bloque__num{
  display:inline-block; margin-bottom:16px;
  font-family:var(--fuente-display);
  font-size:.7rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--rojo);
  padding-bottom:8px;
  border-bottom:2px solid var(--rojo-luz);
}
.servicio-bloque__lista{ margin-top:32px; display:grid; gap:2px; }
.servicio-bloque__lista li{
  display:flex; align-items:center; gap:14px;
  padding:15px 0;
  border-top:1px solid var(--linea);
  font-size:.98rem; color:var(--tinta);
  font-weight:500;
}
.servicio-bloque__lista li:last-child{ border-bottom:1px solid var(--linea); }
.servicio-bloque__lista svg{
  width:19px; height:19px; flex:none;
  color:var(--azul);
  padding:3px; box-sizing:content-box;
  background:var(--azul-luz); border-radius:50%;
}
.servicio-bloque__media .marco-tecnico__img{ aspect-ratio:5/4; }

/* ---------- 11. Obras ---------- */
.obras-filtros{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:44px;
  padding-bottom:26px;
  border-bottom:1px solid var(--linea);
}
.obras-filtros button{
  font-family:var(--fuente-display);
  font-size:.76rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:12px 22px;
  color:var(--tinta-med);
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:999px;
  cursor:pointer;
  transition:all var(--transicion-rap);
}
.obras-filtros button:hover{ color:var(--azul-prof); border-color:rgba(0,85,164,.35); }
.obras-filtros button.activo{
  background:var(--azul-prof); color:#fff; border-color:var(--azul-prof);
  box-shadow:0 12px 26px -16px rgba(0,47,92,.8);
}

.obras-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:32px;
}
.obra-card{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--sombra-1);
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.obra-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-2); border-color:rgba(0,85,164,.24); }
.obra-card .marco-tecnico{ border-radius:0; box-shadow:none; }
.obra-card .marco-tecnico__img{ aspect-ratio:16/11; }
.obra-card__marco--interactivo{ cursor:pointer; position:relative; }
.obra-card__marco--interactivo::after{
  content:"Ver galería";
  position:absolute; inset:auto 0 0 0;
  padding:44px 18px 16px;
  font-family:var(--fuente-display);
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(transparent, rgba(0,47,92,.88));
  opacity:0; transform:translateY(10px);
  transition:opacity var(--transicion), transform var(--transicion);
}
.obra-card:hover .obra-card__marco--interactivo::after{ opacity:1; transform:none; }
.obra-card__cuerpo{ padding:28px 28px 32px; display:flex; flex-direction:column; gap:10px; flex:1; }
.obra-card__sector{
  align-self:flex-start;
  font-family:var(--fuente-display);
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rojo);
  padding:5px 12px; background:var(--rojo-luz); border-radius:999px;
}
.obra-card h3{
  font-family:var(--fuente-display);
  font-size:1.24rem; font-weight:700; letter-spacing:-.02em;
}
.obra-card p{ color:var(--tinta-med); font-size:.95rem; }

/* ---------- 12. Clientes ---------- */
.clientes-sector{ margin-bottom:72px; }
.clientes-sector:last-of-type{ margin-bottom:40px; }
.clientes-sector__titulo{
  font-family:var(--fuente-display);
  font-size:1.05rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--azul-prof);
  padding-bottom:16px;
  border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:14px;
}
.clientes-sector__titulo::before{
  content:""; width:10px; height:10px; flex:none;
  background:var(--rojo); border-radius:2px; transform:rotate(45deg);
}
.clientes-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:22px; margin-top:30px;
}
.cliente-chip{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:14px;
  padding:26px 20px 22px;
  width:100%; text-align:center;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-1);
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
button.cliente-chip{ appearance:none; -webkit-appearance:none; margin:0; cursor:pointer; }
.cliente-chip:hover{
  transform:translateY(-5px);
  box-shadow:var(--sombra-2);
  border-color:rgba(0,85,164,.28);
}
.cliente-chip__marco{
  position:relative; width:100%; height:70px;
  display:grid; place-items:center;
}
.cliente-chip__marco::before,
.cliente-chip__marco::after{
  content:""; position:absolute; width:11px; height:11px;
  border:1.5px solid var(--azul); opacity:.2;
  transition:opacity var(--transicion);
}
.cliente-chip__marco::before{ top:0; left:0; border-right:none; border-bottom:none; }
.cliente-chip__marco::after{ bottom:0; right:0; border-left:none; border-top:none; }
.cliente-chip:hover .cliente-chip__marco::before,
.cliente-chip:hover .cliente-chip__marco::after{ opacity:.6; }
.cliente-chip__logo{
  max-width:82%; max-height:70px; object-fit:contain;
  filter:grayscale(100%); opacity:.7;
  transition:filter var(--transicion), opacity var(--transicion), transform var(--transicion);
}
.cliente-chip:hover .cliente-chip__logo{ filter:none; opacity:1; transform:scale(1.03); }
.cliente-chip__nombre{
  font-family:var(--fuente-display);
  font-size:.86rem; font-weight:600; letter-spacing:-.01em;
  color:var(--azul-prof);
}
.cliente-chip__ver{
  font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--rojo);
  opacity:.5; transition:opacity var(--transicion-rap);
}
.cliente-chip:hover .cliente-chip__ver{ opacity:1; }

/* ---------- 13. Galería modal ---------- */
.galeria-modal{
  display:none; position:fixed; inset:0;
  width:100vw; height:100vh; z-index:1000;
  align-items:center; justify-content:center;
  padding:20px;
}
.galeria-modal.activo{ display:flex; animation:fadeIn .28s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.galeria-modal__fondo{
  position:fixed; inset:0;
  background:rgba(0,47,92,.9);
  backdrop-filter:blur(6px);
}
.galeria-modal__caja{
  position:relative; z-index:1;
  width:min(1020px, 94vw); max-height:92vh;
  background:var(--papel);
  border-radius:var(--radio-max);
  padding:30px;
  overflow:auto;
  box-shadow:var(--sombra-3);
  animation:subir .34s cubic-bezier(.22,.61,.36,1);
}
@keyframes subir{ from{ transform:translateY(18px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.galeria-modal__cerrar{
  position:absolute; top:18px; right:18px;
  width:40px; height:40px; padding:0;
  border:1px solid var(--linea); border-radius:50%;
  background:#fff; color:var(--azul-prof);
  display:grid; place-items:center; cursor:pointer;
  transition:all var(--transicion-rap);
}
.galeria-modal__cerrar svg{ width:18px; height:18px; }
.galeria-modal__cerrar:hover{ background:var(--rojo); border-color:var(--rojo); color:#fff; transform:rotate(90deg); }
.galeria-modal__cabecera{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px 18px;
  margin:0 52px 20px 0;
}
.galeria-modal__titulo{
  font-family:var(--fuente-display);
  font-size:1.2rem; font-weight:700; letter-spacing:-.02em;
  color:var(--azul-prof);
  margin:0 52px 18px 0;
}
.galeria-modal__cabecera .galeria-modal__titulo{ margin:0; }
.galeria-modal__subtitulo{
  font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--rojo);
  background:var(--rojo-luz);
  border:1px solid rgba(200,20,50,.2);
  border-radius:999px; padding:5px 16px;
}
.galeria-modal__visor{
  position:relative;
  background:var(--papel-alt);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  display:grid; place-items:center;
  overflow:hidden;
}
.galeria-modal__imagen{
  width:100%; max-height:66vh; object-fit:contain;
  background:#0A1730;
}
.galeria-modal__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; padding:0;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--azul-prof);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--sombra-2);
  transition:background var(--transicion-rap), color var(--transicion-rap), transform var(--transicion-rap);
  z-index:2;
}
.galeria-modal__flecha svg{ width:20px; height:20px; }
.galeria-modal__flecha:hover{ background:var(--azul-prof); color:#fff; }
.galeria-modal__flecha--izq{ left:14px; }
.galeria-modal__flecha--der{ right:14px; }
.galeria-modal__flecha--izq:hover{ transform:translateY(-50%) translateX(-3px); }
.galeria-modal__flecha--der:hover{ transform:translateY(-50%) translateX(3px); }
.galeria-modal__contador{
  margin-top:16px; text-align:center;
  font-family:var(--fuente-display);
  font-size:.78rem; font-weight:700; letter-spacing:.16em;
  color:var(--tinta-sua);
}

/* ---------- 14. Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.info-tarjetas{ display:grid; gap:16px; }
.info-tarjeta{
  display:flex; gap:20px; align-items:flex-start;
  padding:26px 26px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-1);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.info-tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-2); }
.info-tarjeta__icono{
  width:48px; height:48px; flex:none;
  display:grid; place-items:center;
  background:var(--azul-luz); color:var(--azul);
  border-radius:var(--radio);
}
.info-tarjeta__icono svg{ width:22px; height:22px; }
.info-tarjeta h4{
  font-family:var(--fuente-display);
  font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-sua);
  margin-bottom:5px;
}
.info-tarjeta p{ color:var(--tinta); font-weight:500; }
.info-tarjeta p a:hover{ color:var(--rojo); text-decoration:underline; text-underline-offset:3px; }

.form-contacto{
  display:grid; gap:18px;
  padding:38px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-2);
}
.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.campo{ display:grid; gap:8px; }
.campo label{
  font-family:var(--fuente-display);
  font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-sua);
}
.campo input, .campo textarea, .campo select{
  font-family:var(--fuente-texto); font-size:.97rem;
  color:var(--tinta);
  padding:14px 16px;
  background:var(--papel-hueso);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  transition:border-color var(--transicion-rap), box-shadow var(--transicion-rap), background var(--transicion-rap);
}
.campo textarea{ min-height:140px; resize:vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; background:#fff;
  border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(0,85,164,.1);
}

.mapa-embed{
  position:relative;
  overflow:hidden;
  min-height:420px;
  background:var(--azul-prof);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-2);
}
.mapa-embed iframe{ display:block; width:100%; height:100%; }
.mapa-embed__abrir{
  position:absolute;
  left:50%; bottom:16px; z-index:2;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--azul-prof);
  font-family:var(--fuente-display);
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:var(--sombra-2);
  transition:transform var(--transicion-rap), box-shadow var(--transicion-rap), background var(--transicion-rap), color var(--transicion-rap);
}
.mapa-embed__abrir svg{ width:18px; height:18px; color:var(--rojo); flex:none; }
.mapa-embed__abrir:hover{
  background:var(--azul); color:#fff;
  transform:translateX(-50%) translateY(-2px);
}
.mapa-embed__abrir:hover svg{ color:#fff; }

.mapa-placeholder{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  min-height:420px;
  background:var(--azul-prof);
  border-radius:var(--radio-med);
  box-shadow:var(--sombra-2);
}
.mapa-placeholder__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:52px 52px;
}
.mapa-placeholder__pin{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:#fff; text-align:center; padding:24px;
}
.mapa-placeholder__pin svg{
  width:38px; height:38px;
  padding:12px; box-sizing:content-box;
  background:var(--grad-rojo); border-radius:50%;
  box-shadow:0 18px 36px -18px rgba(150,6,31,.9);
}
.mapa-placeholder__pin span{
  font-family:var(--fuente-display);
  font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.mapa-placeholder:hover .mapa-placeholder__pin svg{ transform:translateY(-4px); transition:transform var(--transicion); }

/* ---------- 15. CTA final y footer ---------- */
.cta-final{
  position:relative; overflow:hidden;
  padding:104px 0;
  background:var(--grad-azul);
  color:#fff;
  text-align:center;
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at 50% 0%, #000, transparent 70%);
}
.cta-final__contenido{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta-final h2{
  font-family:var(--fuente-display);
  font-size:var(--paso-2); font-weight:700;
  letter-spacing:-.03em; line-height:1.08;
  max-width:22ch; text-wrap:balance;
}
.cta-final p{ margin:18px 0 34px; color:rgba(255,255,255,.82); max-width:56ch; }

.footer{ background:var(--azul-prof); color:rgba(255,255,255,.7); padding-top:78px; }
.footer__top{
  max-width:var(--ancho); margin:0 auto; padding:0 34px 56px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;
}
.footer__logo{ height:52px; width:auto; filter:brightness(0) invert(1); opacity:.94; }
.footer__desc{ margin-top:20px; max-width:34ch; font-size:.93rem; }
.footer__col h4{
  font-family:var(--fuente-display);
  font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:20px;
}
.footer__col ul{ display:grid; gap:11px; font-size:.93rem; }
.footer__col a{ transition:color var(--transicion-rap), padding-left var(--transicion-rap); }
.footer__col a:hover{ color:#fff; padding-left:5px; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);
}
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:center; justify-content:space-between;
  max-width:var(--ancho); margin:0 auto; padding:24px 34px 30px;
  font-size:.8rem; color:rgba(255,255,255,.55);
}

/* ---------- 16. Responsive ---------- */
@media (max-width:1080px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .stats__inner{ grid-template-columns:repeat(2,1fr); }
  .stats__item{ padding:34px 24px; border-left:1px solid var(--linea); }
  .stats__item:nth-child(odd){ border-left:none; padding-left:0; }
}
@media (max-width:960px){
  .contenedor{ padding:0 24px; }
  .topbar__inner, .header__inner, .header.compacto .header__inner,
  .stats__inner, .footer__top, .footer__bottom, .hero__content{ padding-left:24px; padding-right:24px; }
  .grid-2, .servicio-bloque__grid, .contacto-grid, .mv-grid, .tarjetas--2, .tarjetas--3{
    grid-template-columns:1fr; gap:44px;
  }
  .servicio-bloque:nth-of-type(even) .servicio-bloque__media{ order:0; }
  .seccion, .servicio-bloque{ padding:76px 0; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff;
    border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra-2);
    padding:14px 24px 22px;
    display:none;
  }
  .nav.abierto{ display:flex; }
  .nav a{ padding:14px 6px; border-bottom:1px solid var(--linea-sua); border-radius:0; }
  .nav a::after{ display:none; }
  .nav .nav__cta{ margin:12px 0 0; text-align:center; justify-content:center; border-radius:var(--radio); }
  .nav__toggle{ display:flex; }
  .header{ position:sticky; }
  .hero{ min-height:auto; }
  .hero__content{ padding-top:104px; padding-bottom:96px; }
  .hero__cifras > div{ padding-right:26px; margin-right:26px; }
  .galeria-modal__caja{ padding:20px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .topbar__grupo{ gap:14px; font-size:.72rem; }
  .topbar__redes{ display:none; }
  .hero__cifras{ gap:22px; }
  .hero__cifras > div{ border-right:none; padding-right:0; margin-right:0; min-width:44%; }
  .mv-tarjeta, .tarjeta, .form-contacto{ padding:30px 24px; }
  .clientes-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
  .obras-grid{ grid-template-columns:1fr; }
  .campo-fila{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:36px; }
  .redes-flotantes a{ width:46px; height:46px; }
  .galeria-modal__flecha{ width:40px; height:40px; }
}