/* ======================================================
   SYMAQ — Sistema de diseño
   Identidad corporativa: azul + rojo + blanco.
====================================================== */

:root{
  --papel:      #FFFFFF;
  --papel-alt:  #EBF1FA;
  --linea:      #DDE4EC;
  --tinta:      #16223A;
  --tinta-sua:  #56657A;
  --azul:      #0B3D91;
  --azul-osc:  #082A66;
  --azul-luz:  #E7EEF9;
  --rojo:      #C81432;
  --rojo-osc:  #8E0E23;
  --rojo-luz:  #FBE9EC;
  --blanco:     #FFFFFF;

  --fuente-display: "Space Grotesk", sans-serif;
  --fuente-texto:   "Inter", sans-serif;

  --radio: 8px;
  --sombra: 0 12px 32px -16px rgba(22,34,58,.18);
  --transicion: .35s cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--fuente-texto);
  color:var(--tinta);
  background:var(--papel);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.contenedor{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- Riel de marca — franja fija a lo largo de todo el sitio ---------- */
body::before{
  content:"";
  position:fixed; left:0; top:0; bottom:0; width:6px;
  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(22,34,58,.08);
  z-index:80; pointer-events:none;
}
body::after{
  content:"Desde 1987 — Asunción, Paraguay";
  position:fixed; left:14px; top:130px;
  writing-mode:vertical-rl;
  font-family:var(--fuente-display); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-sua);
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  padding:8px 4px 10px; border-radius:0 0 8px 8px;
  white-space:nowrap; z-index:80; pointer-events:none;
}

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

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

/* ---------- Reveal on scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].visible{ opacity:1; transform:translateY(0); }

/* ---------- Eyebrow (etiqueta técnica) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fuente-display);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rojo);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:currentColor;
}
.eyebrow--claro{ color:var(--azul-luz); }

.titulo-seccion{
  font-family:var(--fuente-display);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:14px 0 18px;
  color:inherit;
}
.texto-lead{ color:var(--tinta-sua); font-size:16px; max-width:60ch; white-space:pre-line; }

.seccion{ padding:96px 0; }
.seccion--alt{ position:relative; background:var(--papel-alt); }
.seccion--alt::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    var(--azul) 0% 33.333%,
    #fff 33.333% 66.666%,
    var(--rojo) 66.666% 100%);
}
.seccion__header{ max-width:640px; margin-bottom:56px; }
.seccion__header--centro{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Marco técnico (firma visual: esquinas de plano) ---------- */
.marco-tecnico{
  position:relative; padding:14px;
}
.marco-tecnico::before,
.marco-tecnico::after,
.marco-tecnico .esquina-br,
.marco-tecnico .esquina-bl{
  content:""; position:absolute; width:22px; height:22px;
  border:2px solid var(--rojo);
}
.marco-tecnico::before{ top:0; left:0; border-right:none; border-bottom:none; }
.marco-tecnico::after{ top:0; right:0; border-left:none; border-bottom:none; }
.marco-tecnico .esquina-bl{ bottom:0; left:0; border-right:none; border-top:none; }
.marco-tecnico .esquina-br{ bottom:0; right:0; border-left:none; border-top:none; }
.marco-tecnico__img{ width:100%; height:100%; object-fit:cover; }

/* ======================================================
   BARRA SUPERIOR
====================================================== */
.topbar{
  position:relative;
  background:var(--azul-osc);
  color:#D8E2EA;
  font-size:12.5px;
}
.topbar::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    var(--azul) 0% 33.333%,
    #fff 33.333% 66.666%,
    var(--rojo) 66.666% 100%);
}
.topbar__inner{
  max-width:1180px; margin:0 auto; padding:9px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.topbar__grupo{ display:flex; gap:24px; flex-wrap:wrap; }
.topbar__redes{ display:flex; gap:18px; }
.topbar__redes a{ opacity:.8; transition:opacity var(--transicion); }
.topbar__redes a:hover{ opacity:1; }

/* ======================================================
   ENCABEZADO
====================================================== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.header__inner{
  max-width:1180px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand__logo{ height:36px; }
.nav{ display:flex; align-items:center; gap:36px; }
.nav a{
  font-size:14.5px; font-weight:500; color:var(--tinta-sua);
  position:relative; padding:4px 0;
  transition:color var(--transicion);
}
.nav a:hover, .nav a.activo{ color:var(--azul); }
.nav a.activo::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--rojo);
}
.nav__cta{
  background:linear-gradient(135deg, var(--rojo) 0%, var(--rojo-osc) 100%);
  color:#fff !important; padding:11px 24px !important;
  border-radius:999px;
  font-weight:700 !important;
  letter-spacing:.02em;
  box-shadow:0 6px 16px -8px rgba(200,20,50,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.nav__cta:hover{ transform:translateY(-1px); box-shadow:0 10px 20px -8px rgba(200,20,50,.55); }
.nav__cta::after{ display:none; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px;
  width:32px; background:none; border:none; cursor:pointer;
}
.nav__toggle span{ height:2px; background:var(--tinta); border-radius:2px; }

/* ======================================================
   HERO — imagen completa, tono claro
====================================================== */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center;
  padding:160px 0 96px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 30%,
      rgba(255,255,255,.64) 58%,
      rgba(231,238,249,.35) 100%),
    linear-gradient(0deg, rgba(255,255,255,.5) 0%, transparent 30%);
}
.hero__content{
  position:relative; max-width:1180px; margin:0 auto; padding:0 32px; width:100%;
}

.hero__title{
  font-family:var(--fuente-display);
  font-size:clamp(34px,5vw,60px);
  font-weight:700; line-height:1.08; letter-spacing:-.015em;
  color:var(--tinta);
  margin-top:18px;
  max-width:20ch;
}
.hero__subtitle{
  margin-top:22px; font-size:17.5px; color:var(--tinta-sua); max-width:46ch;
}
.hero__actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

.hero__cifras{
  margin-top:56px; display:flex; gap:40px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid rgba(22,34,58,.14); max-width:520px;
}
.hero__cifras strong{
  display:block; font-family:var(--fuente-display); font-size:24px; font-weight:700; color:var(--azul);
}
.hero__cifras span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-sua); }

.hero__scroll{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(22,34,58,.3); border-radius:20px;
}
.hero__scroll span{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:var(--rojo);
  animation:hero-scroll 1.8s ease infinite;
}
@keyframes hero-scroll{
  0%{ opacity:1; top:7px; } 70%{ opacity:0; top:20px; } 100%{ opacity:0; top:7px; }
}

/* ---------- Botones — sistema corporativo ---------- */
.btn{
  --btn-pad-y: 15px;
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--btn-pad-y) 28px; font-size:13.5px; font-weight:700;
  font-family:var(--fuente-texto); text-transform:uppercase; letter-spacing:.045em;
  border-radius:var(--radio); border:1.5px solid transparent;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap; cursor:pointer;
}
.btn svg{ width:16px; height:16px; transition:transform .3s ease; }

/* Primario — azul institucional, para navegación y exploración */
.btn--primary{
  background:linear-gradient(135deg, var(--azul) 0%, var(--azul-osc) 100%);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(8,42,102,.55);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -10px rgba(8,42,102,.6);
}
.btn--primary:hover svg{ transform:translateX(4px); }
.btn--primary:active{ transform:translateY(0); }

/* Acento — rojo institucional, reservado para llamados a la acción */
.btn--acento{
  background:linear-gradient(135deg, var(--rojo) 0%, var(--rojo-osc) 100%);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(142,14,35,.5);
}
.btn--acento:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -10px rgba(142,14,35,.55);
}
.btn--acento:hover svg{ transform:translateX(4px); }
.btn--acento:active{ transform:translateY(0); }

/* Contorno — blanco/transparente sobre fotografías */
.btn--ghost-claro{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(10px);
  border-color:rgba(11,61,145,.22);
  color:var(--azul-osc);
}
.btn--ghost-claro:hover{
  background:#fff; border-color:var(--azul); color:var(--azul);
  transform:translateY(-2px);
  box-shadow:0 12px 24px -12px rgba(11,61,145,.25);
}

/* Contorno sólido — para usos secundarios sobre fondo claro */
.btn--outline{
  background:transparent;
  border-color:var(--azul);
  color:var(--azul);
}
.btn--outline:hover{
  background:var(--azul); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 24px -12px rgba(8,42,102,.35);
}

/* ======================================================
   FRANJA DE CIFRAS — único bloque de color fuerte
====================================================== */
.stats{
  position:relative;
  background:var(--azul-osc);
  padding:52px 0;
  overflow:hidden;
}
.stats::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:48px 48px;
}
.stats::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    var(--rojo) 0% 33.333%,
    #fff 33.333% 66.666%,
    #6E9BDD 66.666% 100%);
}
.stats__inner{
  position:relative;
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.stats__item{ text-align:left; border-left:2px solid var(--rojo); padding-left:16px; }
.stats__item strong{
  display:block; font-family:var(--fuente-display); font-size:clamp(26px,3vw,36px);
  color:#fff; font-weight:700;
}
.stats__item span{ font-size:13px; color:#AFC1D0; }

/* ======================================================
   SECCIONES GENERALES
====================================================== */
.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.ficha{ position:relative; }
.ficha__etiqueta{
  display:inline-block; font-family:var(--fuente-display); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-sua);
  margin-bottom:10px;
}
.ficha__img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14.5px; color:var(--azul);
  border-bottom:1px solid transparent;
}
.enlace-flecha svg{ width:18px; height:18px; transition:transform var(--transicion); }
.enlace-flecha:hover svg{ transform:translateX(4px); }

/* ---------- Línea de tiempo tipo regla de medición ---------- */
.linea-tiempo{ position:relative; padding-left:28px; }
.linea-tiempo::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:repeating-linear-gradient(180deg, var(--linea) 0 6px, transparent 6px 12px);
}
.hito{ position:relative; padding:0 0 44px 32px; }
.hito:last-child{ padding-bottom:0; }
.hito::before{
  content:""; position:absolute; left:-5px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--papel); border:2px solid var(--rojo);
}
.hito__anio{
  font-family:var(--fuente-display); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rojo);
  margin-bottom:6px;
}
.hito__texto h3{ font-family:var(--fuente-display); font-size:20px; font-weight:600; margin-bottom:6px; }
.hito__texto p{ color:var(--tinta-sua); max-width:56ch; font-size:15px; }

/* ---------- Misión / visión ---------- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.mv-tarjeta{
  background:var(--azul-luz); border:1px solid var(--linea); border-top:3px solid var(--azul);
  border-radius:var(--radio);
  padding:40px; position:relative;
}
.mv-tarjeta__num{
  font-family:var(--fuente-display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--azul);
}
.mv-tarjeta h3{ font-family:var(--fuente-display); font-size:23px; margin:12px 0 14px; }
.mv-tarjeta p{ color:var(--tinta-sua); font-size:15.5px; }
.mv-tarjeta--acento{ border-color:var(--linea); border-top-color:var(--rojo); background:var(--rojo-luz); }
.mv-tarjeta--acento .mv-tarjeta__num{ color:var(--rojo); }

/* ---------- Unidades de negocio ---------- */
.tarjetas{ display:grid; gap:24px; }
.tarjetas--3{ grid-template-columns:repeat(3,1fr); }
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  padding:32px 28px; border-top:3px solid var(--azul);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.tarjeta__sector{
  font-family:var(--fuente-display); font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--rojo);
}
.tarjeta h3{ font-family:var(--fuente-display); font-size:20px; margin:12px 0 10px; }
.tarjeta p{ color:var(--tinta-sua); font-size:15px; }

/* ---------- Clientes ---------- */
.logos-clientes{
  display:flex; flex-wrap:wrap; gap:14px;
}
.logos-clientes span{
  border:1px solid var(--linea); background:var(--blanco);
  padding:12px 20px; font-size:14px; font-weight:500; color:var(--tinta-sua);
  border-radius:var(--radio);
}

/* ======================================================
   CTA FINAL — segundo (y último) acento de color
====================================================== */
.cta-final{
  position:relative;
  padding:90px 0;
  background:linear-gradient(115deg, var(--azul) 0%, var(--azul-osc) 55%, var(--rojo-osc) 140%);
  overflow:hidden;
}
.cta-final::before{
  content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px;
  border:2px solid rgba(255,255,255,.18); border-radius:50%;
}
.cta-final::after{
  content:""; position:absolute; left:-60px; bottom:-100px; width:260px; height:260px;
  border:2px solid rgba(200,20,50,.3); border-radius:50%;
}
.cta-final__contenido{ position:relative; text-align:center; max-width:600px; margin:0 auto; }
.cta-final__contenido h2{
  font-family:var(--fuente-display); color:#fff; font-size:clamp(26px,3.4vw,38px); font-weight:600;
}
.cta-final__contenido p{ color:#D7E2F2; margin:14px 0 30px; font-size:16px; }
.cta-final .btn--primary{
  background:#fff;
  color:var(--azul-osc);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.45);
}
.cta-final .btn--primary:hover{
  color:var(--rojo);
  box-shadow:0 16px 32px -10px rgba(0,0,0,.5);
}

/* ======================================================
   PIE DE PÁGINA
====================================================== */
.footer{ position:relative; background:var(--azul-osc); color:#B9CBDA; }
.footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    #5A8CDB 0% 33.333%,
    #fff 33.333% 66.666%,
    var(--rojo) 66.666% 100%);
}
.footer__top{
  max-width:1180px; margin:0 auto; padding:64px 32px 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer__logo{ height:30px; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer__desc{ font-size:14px; max-width:34ch; color:#9DB2C2; }
.footer__col h4{
  font-family:var(--fuente-display); color:#fff; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;
}
.footer__col li{ margin-bottom:10px; font-size:14px; }
.footer__col a{ transition:color var(--transicion); }
.footer__col a:hover{ color:#fff; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 32px; max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12.5px; color:#7E92A2;
}

/* ======================================================
   PÁGINA INTERNA — encabezado compacto
====================================================== */
.pagina-hero{
  position:relative;
  padding:190px 0 72px;
  background:var(--papel-alt);
  overflow:hidden;
  border-bottom:1px solid var(--linea);
}
.pagina-hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.pagina-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 30%,
      rgba(255,255,255,.7) 58%,
      rgba(231,238,249,.55) 100%),
    linear-gradient(0deg, rgba(255,255,255,.55) 0%, transparent 30%);
}
.pagina-hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 15% 0%, black 0%, transparent 65%);
  opacity:.7;
}
.migas{
  position:relative;
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--tinta-sua); margin-bottom:22px;
}
.migas a{ color:var(--tinta-sua); transition:color var(--transicion); }
.migas a:hover{ color:var(--azul); }
.migas span{ color:var(--linea); }
.pagina-hero__contenido{ position:relative; max-width:680px; }
.pagina-hero__titulo{
  font-family:var(--fuente-display); font-weight:700;
  font-size:clamp(32px,4.2vw,48px); line-height:1.1; letter-spacing:-.015em;
  color:var(--tinta);
}
.pagina-hero__subtitulo{ margin-top:16px; font-size:16.5px; color:var(--tinta-sua); max-width:56ch; }

/* ---------- Bloques de servicio (alternados) ---------- */
.servicio-bloque{ padding:88px 0; }
.servicio-bloque:nth-child(even){ background:var(--papel-alt); }
.servicio-bloque__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.servicio-bloque__grid.invertido .servicio-bloque__media{ order:2; }
.servicio-bloque__media .marco-tecnico{ aspect-ratio:4/3; }
.servicio-bloque__num{
  font-family:var(--fuente-display); font-size:13px; font-weight:700;
  letter-spacing:.14em; color:var(--rojo); text-transform:uppercase;
}
.servicio-bloque__lista{ margin-top:22px; display:grid; gap:12px; }
.servicio-bloque__lista li{
  display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--tinta-sua);
}
.servicio-bloque__lista svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--azul); }

/* ---------- Obras: filtros y grilla ---------- */
.obras-filtros{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;
}
.obras-filtros button{
  font-family:var(--fuente-texto); font-size:13.5px; font-weight:600;
  padding:10px 20px; border-radius:999px; border:1px solid var(--linea);
  background:var(--blanco); color:var(--tinta-sua); cursor:pointer;
  transition:all var(--transicion);
}
.obras-filtros button:hover{ border-color:var(--azul); color:var(--azul); }
.obras-filtros button.activo{ background:var(--azul); border-color:var(--azul); color:#fff; }

.obras-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.obra-card{ background:var(--blanco); border:1px solid var(--linea); }
.obra-card .marco-tecnico{ aspect-ratio:4/3; }
.obra-card__cuerpo{ padding:22px 24px 26px; }
.obra-card__sector{
  font-family:var(--fuente-display); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rojo);
}
.obra-card__cuerpo h3{ font-family:var(--fuente-display); font-size:18.5px; margin:10px 0 6px; }
.obra-card__cuerpo p{ font-size:14px; color:var(--tinta-sua); }
.obra-card[hidden]{ display:none; }

/* ---------- Clientes: grilla completa por sector ---------- */
.clientes-sector{ margin-bottom:52px; }
.clientes-sector:last-child{ margin-bottom:0; }
.clientes-sector__titulo{
  font-family:var(--fuente-display); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-sua);
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--linea);
}
.clientes-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cliente-chip{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--linea); background:var(--blanco);
  padding:26px 16px; font-size:14.5px; font-weight:600; color:var(--tinta);
  transition:all var(--transicion); min-height:84px;
}
.cliente-chip:hover{ border-color:var(--rojo); color:var(--rojo); transform:translateY(-2px); box-shadow:var(--sombra); }

/* ---------- Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.info-tarjetas{ display:grid; gap:16px; margin-bottom:32px; }
.info-tarjeta{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--blanco); border:1px solid var(--linea); padding:20px 22px;
}
.info-tarjeta__icono{
  width:40px; height:40px; flex-shrink:0; border-radius:50%;
  background:var(--azul-luz); color:var(--azul);
  display:flex; align-items:center; justify-content:center;
}
.info-tarjeta__icono svg{ width:19px; height:19px; }
.info-tarjeta h4{ font-family:var(--fuente-display); font-size:15px; margin-bottom:4px; }
.info-tarjeta p{ font-size:14px; color:var(--tinta-sua); }

.mapa-placeholder{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--papel-alt); border:1px solid var(--linea);
}
.mapa-placeholder__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:36px 36px;
}
.mapa-placeholder__pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.mapa-placeholder__pin svg{ width:34px; height:34px; color:var(--rojo); }
.mapa-placeholder__pin span{
  background:var(--azul-osc); color:#fff; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}

.form-contacto{ background:var(--blanco); border:1px solid var(--linea); padding:40px; }
.campo{ margin-bottom:20px; }
.campo label{
  display:block; font-size:13px; font-weight:600; color:var(--tinta); margin-bottom:8px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 16px; border:1px solid var(--linea); border-radius:var(--radio);
  font-family:var(--fuente-texto); font-size:14.5px; color:var(--tinta); background:var(--papel);
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-luz);
}
.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-contacto textarea{ resize:vertical; min-height:120px; }
.form-contacto .btn{ width:100%; justify-content:center; border:none; }

/* ======================================================
   REDES FLOTANTES (WhatsApp / Instagram)
====================================================== */
.redes-flotantes{
  position:fixed;
  right:20px;
  top:60%;
  transform:translateY(-50%);
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.redes-flotantes a{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(22,34,58,.45);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.redes-flotantes a svg{ width:26px; height:26px; }
.redes-flotantes a:hover{
  transform:translateX(-4px) scale(1.05);
  box-shadow:0 14px 28px -8px rgba(22,34,58,.55);
}
.redes-flotantes__instagram{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.redes-flotantes__whatsapp{ background:#25D366; }

@media (max-width:720px){
  .redes-flotantes{ right:12px; gap:10px; top:auto; bottom:20px; transform:none; }
  .redes-flotantes a{ width:46px; height:46px; border-radius:12px; }
  .redes-flotantes a svg{ width:22px; height:22px; }
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width:960px){
  .grid-2{ grid-template-columns:1fr; }
  .mv-grid, .tarjetas--3{ grid-template-columns:1fr; }
  .stats__inner{ grid-template-columns:repeat(2,1fr); row-gap:28px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .servicio-bloque__grid{ grid-template-columns:1fr; }
  .servicio-bloque__grid.invertido .servicio-bloque__media{ order:0; }
  .obras-grid{ grid-template-columns:repeat(2,1fr); }
  .clientes-grid{ grid-template-columns:repeat(3,1fr); }
  .contacto-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .riel-bandera, .riel-bandera__label{ display:none; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--papel); border-bottom:1px solid var(--linea);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 32px 20px;
    display:none;
  }
  .nav.abierto{ display:flex; }
  .nav a{ width:100%; padding:12px 0; border-bottom:1px solid var(--linea); }
  .nav__cta{ margin-top:12px; text-align:center; }
  .nav__toggle{ display:flex; }
  .topbar__grupo{ gap:14px; }
  .seccion{ padding:64px 0; }
  .footer__top{ grid-template-columns:1fr; padding:48px 24px 32px; }
  .footer__bottom{ padding:20px 24px; }
  .pagina-hero{ padding:150px 0 56px; }
  .obras-grid{ grid-template-columns:1fr; }
  .clientes-grid{ grid-template-columns:repeat(2,1fr); }
  .campo-fila{ grid-template-columns:1fr; }
  .form-contacto{ padding:28px; }
}