/* ==========================================================
   GS CONSTRUCTORES — hoja de estilos única
   ========================================================== */

:root{
  --grafito:#15181B;
  --acero:#3E4C59;
  --concreto:#E8E4DB;
  --concreto2:#C9C4BA;
  --gris:#55575A;
  --oxido:#C4551E;
  --hueso:#F7F5F0;
  --texto:#2B2F33;
  --borde:#DCD8D0;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--texto);
  background:var(--hueso);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--oxido);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;line-height:1.15;margin:0 0 .5em;color:var(--grafito);}
h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.5px;}
h2{font-size:clamp(24px,3vw,33px);font-weight:700;}
h3{font-size:19px;font-weight:700;}
p{margin:0 0 1.1em;}
:focus-visible{outline:3px solid var(--oxido);outline-offset:2px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.seccion{padding:76px 0;}
.seccion--claro{background:var(--concreto);}
.regla{width:56px;height:3px;background:var(--oxido);margin:0 0 22px;}
.plomo{color:var(--acero);max-width:62ch;}

/* ---------- botones ---------- */
.btn{
  display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:15px;padding:14px 30px;border:2px solid transparent;cursor:pointer;
  transition:background .2s,color .2s;
}
.btn:hover{text-decoration:none;}
.btn--solido{background:var(--oxido);color:var(--hueso);}
.btn--solido:hover{background:var(--grafito);}
.btn--linea{border-color:var(--grafito);color:var(--grafito);}
.btn--linea:hover{background:var(--grafito);color:var(--hueso);}
.btn--claro{border-color:var(--hueso);color:var(--hueso);}
.btn--claro:hover{background:var(--hueso);color:var(--grafito);}

/* ---------- logotipo ---------- */
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;}
.logo:hover{text-decoration:none;}
.logo__gs{font-family:'Archivo',sans-serif;font-weight:800;font-size:38px;
  letter-spacing:-.9px;color:var(--grafito);line-height:1;display:block;}
.logo__barra{display:block;width:100%;height:3px;background:var(--grafito);margin:3px 0;}
.logo__nombre{font-family:'Archivo',sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:2.5px;margin-right:-2.5px;color:var(--acero);line-height:1;
  display:block;white-space:nowrap;}
.logo__lema{font-size:10px;color:#7A8189;line-height:1;display:block;margin-top:5px;}
.logo--claro .logo__gs{color:var(--hueso);}
.logo--claro .logo__barra{background:var(--hueso);}
.logo--claro .logo__nombre{color:var(--concreto2);}
.logo--claro .logo__lema{color:var(--concreto2);}

/* ---------- encabezado ---------- */
.cabecera{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:3px solid var(--oxido);box-shadow:0 1px 8px rgba(0,0,0,.05);}
.cabecera__inner{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 24px;max-width:var(--max);margin:0 auto;flex-wrap:nowrap;}
.cabecera__inner nav{min-width:0;}
.menu{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);
  list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end;}
.menu a{font-family:'Archivo',sans-serif;font-weight:500;font-size:14px;
  letter-spacing:.6px;color:var(--grafito);text-transform:uppercase;padding:6px 0;
  position:relative;}
.menu a:hover{color:var(--oxido);text-decoration:none;}
.menu a[aria-current="page"]{color:var(--oxido);font-weight:700;}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:var(--oxido);}
.menu__accion{padding:9px 18px !important;border:2px solid var(--grafito);}
.menu__accion:hover{background:var(--grafito);color:#fff !important;}
.hamburguesa{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.hamburguesa span{display:block;width:24px;height:2px;background:var(--grafito);margin:5px 0;}

/* ---------- portada ---------- */
.portada{position:relative;min-height:74vh;display:flex;align-items:center;
  background:linear-gradient(150deg,var(--grafito) 0%,#252c33 58%,var(--acero) 100%);
  overflow:hidden;}
.portada__trama{position:absolute;inset:0;opacity:.3;}
.portada__foto{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.22;filter:grayscale(1);}
.portada__inner{position:relative;z-index:2;padding:90px 24px;max-width:var(--max);
  margin:0 auto;width:100%;}
.portada h1{color:var(--hueso);max-width:17ch;}
.portada__lugar{display:inline-flex;align-items:center;gap:10px;color:var(--concreto2);
  font-size:13.5px;margin-bottom:20px;}
.portada__lugar::before{content:"";width:26px;height:2px;background:var(--oxido);}
.portada p{color:var(--concreto2);max-width:56ch;font-size:17px;margin-bottom:32px;}
.portada__acciones{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- rejillas ---------- */
.rejilla{display:grid;gap:2px;background:var(--borde);}
.rejilla--3{grid-template-columns:repeat(3,1fr);}
.rejilla--2{grid-template-columns:repeat(2,1fr);}
.rejilla--4{grid-template-columns:repeat(4,1fr);}
.celda{background:var(--hueso);padding:38px 30px;}
.seccion--claro .celda{background:var(--concreto);}

.tarjeta__num{font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;
  color:var(--oxido);letter-spacing:1px;display:block;margin-bottom:14px;}
.lista-limpia{list-style:none;padding:0;margin:0;}
.lista-limpia li{padding:9px 0 9px 20px;border-bottom:1px solid var(--borde);
  position:relative;font-size:15px;}
.lista-limpia li::before{content:"";position:absolute;left:0;top:18px;
  width:8px;height:2px;background:var(--oxido);}
.lista-limpia li:last-child{border-bottom:0;}

/* ---------- clientes ---------- */
.clientes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cliente{background:#fff;border:1px solid var(--borde);min-height:96px;
  display:flex;align-items:center;justify-content:center;padding:20px 24px;}
.cliente img{max-height:46px;width:auto;}

/* ---------- galería ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.filtro{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:500;
  padding:9px 18px;border:1px solid var(--borde);background:#fff;cursor:pointer;
  color:var(--acero);}
.filtro:hover{border-color:var(--oxido);color:var(--oxido);}
.filtro[aria-pressed="true"]{background:var(--grafito);color:var(--hueso);border-color:var(--grafito);}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;}
.galeria figure{margin:0;overflow:hidden;background:var(--concreto2);aspect-ratio:4/3;}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.galeria figure:hover img{transform:scale(1.05);}
.galeria [hidden]{display:none;}

/* ---------- formulario ---------- */
.form{display:grid;gap:18px;max-width:620px;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo label{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--grafito);}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:15.5px;padding:12px 14px;border:1px solid var(--borde);
  background:#fff;color:var(--texto);width:100%;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--oxido);outline:none;}
.campo textarea{resize:vertical;min-height:130px;}
.aviso{padding:16px 18px;border-left:4px solid;margin-bottom:26px;font-size:15px;}
.aviso--ok{background:#EDF5EE;border-color:#3E7D4A;color:#22502B;}
.aviso--error{background:#FBEDE9;border-color:var(--oxido);color:#8A3A14;}
.miel{position:absolute;left:-9999px;}

/* ---------- pie ---------- */
.pie{background:var(--gris);color:var(--concreto2);padding:64px 0 26px;
  border-top:3px solid var(--oxido);}
.pie a{color:var(--concreto2);}
.pie a:hover{color:var(--oxido);}
.pie h4{font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--hueso);margin-bottom:12px;}
.pie__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.pie__linea{border:0;border-top:1px solid rgba(247,245,240,.16);margin:44px 0 20px;}
.pie__base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:#C2BEB7;}
.repse{display:flex;align-items:center;gap:14px;}
.repse img{max-width:150px;background:#fff;padding:8px;}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .rejilla--3,.rejilla--4{grid-template-columns:repeat(2,1fr);}
  .clientes{grid-template-columns:repeat(3,1fr);}
  .pie__cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .seccion{padding:54px 0;}
  .hamburguesa{display:block;}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0;
    border-bottom:1px solid var(--borde);box-shadow:0 12px 24px rgba(0,0,0,.09);}
  .menu.abierto{display:flex;}
  .menu li{border-bottom:1px solid var(--borde);}
  .menu li:last-child{border-bottom:0;}
  .menu a{display:block;padding:14px 24px;}
  .menu__accion{margin:12px 24px;text-align:center;}
  .rejilla--3,.rejilla--2,.rejilla--4{grid-template-columns:1fr;}
  .clientes{grid-template-columns:repeat(2,1fr);}
  .pie__cols{grid-template-columns:1fr;}
  .logo__gs{font-size:30px;}
  .logo__nombre{font-size:8.5px;letter-spacing:1.9px;margin-right:-1.9px;}
  .logo__lema{font-size:9px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- selector de idioma ---------- */
.idioma{
  display:inline-flex !important;align-items:center;gap:7px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:1px;border:1.5px solid var(--borde);padding:5px 10px !important;
  color:var(--acero) !important;
}
.idioma:hover{border-color:var(--oxido);color:var(--oxido) !important;text-decoration:none;}
.bandera{
  width:20px;height:14px;display:block;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.14);
}
.idioma__cod{line-height:1;}
@media (max-width:680px){
  .idioma{margin:12px 24px;width:auto;justify-content:center;}
}