:root{
  --marino:#0F2340;
  --marino-2:#1A3358;
  --oro:#B8892D;
  --oro-claro:#E9D9B5;
  --gris:#F3F4F6;
  --linea:#DADDE2;
  --texto:#1D232B;
  --suave:#5A626C;
}
*{box-sizing:border-box;margin:0}
body{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:#fff;line-height:1.6;font-size:1.0625rem}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.env{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ---------- Barrita superior ---------- */
.superior{background:var(--marino);color:#C9D3E2;font-size:.85rem}
.superior .env{display:flex;justify-content:flex-end;gap:1.75rem;padding-block:.45rem;flex-wrap:wrap}
.superior a{text-decoration:none}
.superior a:hover{color:#fff}

/* ---------- Encabezado y menú ---------- */
.encabezado{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.encabezado .env{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.8rem}
.logo img{width:170px;height:auto}
.menu{list-style:none;padding:0;display:flex;align-items:center;gap:1.9rem;font-size:.95rem;font-weight:600}
.menu>li{position:relative}
.menu a,.titulo-sub{text-decoration:none;color:var(--marino);cursor:pointer}
.menu a:hover,.titulo-sub:hover{color:var(--oro)}
.menu>li>a[aria-current="page"],.tiene-sub.activo>.titulo-sub{color:var(--oro)}
.sub{display:none;list-style:none;padding:.5rem 0;position:absolute;top:100%;left:-1rem;min-width:15rem;background:#fff;border:1px solid var(--linea);border-top:3px solid var(--oro);margin-top:.6rem}
.tiene-sub:hover .sub,.tiene-sub:focus-within .sub{display:block}
.tiene-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:.8rem}
.sub a{display:block;padding:.5rem 1rem;font-weight:500}
.sub a:hover{background:var(--gris)}
.sub a[aria-current="page"]{background:var(--gris);color:var(--oro)}
.cotizar{background:var(--oro);color:#fff!important;padding:.65rem 1.2rem;border-radius:2px}
.cotizar:hover{background:var(--marino)}
.abrir{display:none;background:none;border:2px solid var(--marino);color:var(--marino);font:inherit;font-weight:700;padding:.4rem .9rem;cursor:pointer}

/* ---------- Portada del inicio ---------- */
.portada{position:relative;color:#fff;background:var(--marino)}
.portada .env{position:relative;padding-block:6.5rem 6rem}
.etiqueta{display:inline-block;color:var(--oro-claro);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-left:3px solid var(--oro);padding-left:.75rem}
.portada h1{font-weight:800;font-variation-settings:"wdth" 108;font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.1;max-width:22ch;margin-top:1.25rem}
.portada p{max-width:56ch;margin-top:1.4rem;font-size:1.15rem;color:#D5DDE8}

/* ---------- Encabezado de páginas internas ---------- */
.banner{background:var(--marino);color:#fff}
.banner .env{padding-block:4rem 3.5rem}
.banner h1{font-weight:800;font-variation-settings:"wdth" 108;font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;max-width:24ch;margin-top:1rem}
.banner p{max-width:60ch;margin-top:1rem;font-size:1.1rem;color:#D5DDE8}

/* ---------- Botones ---------- */
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.boton{display:inline-block;padding:.95rem 1.6rem;font-weight:700;text-decoration:none;border:2px solid var(--oro);background:var(--oro);color:#fff}
.boton:hover{background:var(--marino);border-color:var(--marino);color:#fff}
.boton.linea{background:transparent;border-color:#fff;color:#fff}
.boton.linea:hover{background:#fff;color:var(--marino)}

/* ---------- Cifras ---------- */
.cifras{background:var(--marino-2);color:#fff}
.cifras .env{display:grid;grid-template-columns:repeat(4,1fr)}
.cifra{padding:2rem 1.25rem;border-left:1px solid rgba(255,255,255,.15)}
.cifra:first-child{border-left:0;padding-left:0}
.cifra strong{display:block;font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;font-variation-settings:"wdth" 112;color:var(--oro-claro);line-height:1.1}
.cifra span{color:#C9D3E2;font-size:.95rem}

/* ---------- Secciones ---------- */
section{padding-block:5rem}
section.gris{background:var(--gris)}
.titulo{max-width:46rem}
.titulo .etiqueta{color:var(--oro)}
h2{font-weight:800;font-variation-settings:"wdth" 108;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;color:var(--marino);margin-top:.8rem}
.titulo p{color:var(--suave);margin-top:.9rem}
.nota{margin-top:2rem;max-width:60ch;color:var(--suave)}

/* Líneas de negocio */
.lineas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.75rem}
.linea-n{display:flex;flex-direction:column;border:1px solid var(--linea);text-decoration:none;background:#fff;transition:border-color .2s}
.linea-n:hover{border-color:var(--oro)}
.foto-pendiente{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--gris) 0 14px,#E7E9EC 14px 28px);display:grid;place-items:center;color:var(--suave);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.linea-n .cuerpo{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.linea-n h3{font-size:1.15rem;color:var(--marino);line-height:1.25}
.linea-n p{color:var(--suave);font-size:.95rem;flex:1}
.linea-n .mas{color:var(--oro);font-weight:700;font-size:.9rem}

/* Cita del director */
.cita{background:var(--gris)}
.cita .env{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:3rem;align-items:center}
.cita .retrato{aspect-ratio:1;max-width:260px}
.cita blockquote{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.35;color:var(--marino);font-weight:600;border-left:4px solid var(--oro);padding-left:1.5rem}
.cita cite{display:block;margin-top:1.25rem;padding-left:1.75rem;font-style:normal;color:var(--suave)}
.cita cite strong{color:var(--texto)}

/* Valores, sectores y razones */
.valores{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;margin-top:2.5rem}
.sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-top:2.5rem}
.sectores.tres{grid-template-columns:repeat(3,1fr)}
.valor{border-top:3px solid var(--marino);padding-top:1rem}
.valor h3{font-size:1.05rem;color:var(--marino)}
.valor p{color:var(--suave);font-size:.95rem;margin-top:.35rem}

/* Clientes */
.clientes{border-top:1px solid var(--linea)}
.lista-clientes{list-style:none;padding:0;margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.lista-clientes li{border:1px solid var(--linea);padding:.6rem 1rem;font-weight:600;color:var(--marino);font-size:.95rem}

/* Listas de servicio */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.lista{list-style:none;padding:0;margin-top:1.5rem;border-top:2px solid var(--marino)}
.lista li{padding:.8rem 0 .8rem 1.4rem;border-bottom:1px solid var(--linea);position:relative}
.lista li::before{content:"";position:absolute;left:0;top:1.35rem;width:.55rem;height:2px;background:var(--oro)}

/* Espacios inteligentes */
.lista-tec{list-style:none;padding:0;margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem}
.lista-tec li{border:1px solid var(--linea);border-top:3px solid var(--oro);padding:1.25rem}
.lista-tec strong{display:block;font-size:1.1rem;color:var(--marino)}
.lista-tec span{color:var(--suave);font-size:.95rem}

/* Proyectos */
.proyectos{list-style:none;padding:0;margin-top:2.5rem;border-top:2px solid var(--marino)}
.proyectos li{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.5rem 2rem;padding-block:1.6rem;border-bottom:1px solid var(--linea)}
.anio{font-weight:800;font-variation-settings:"wdth" 112;font-size:1.4rem;line-height:1.2;color:var(--oro)}
.proyectos h3{font-size:1.25rem;line-height:1.25;color:var(--marino)}
.proyectos p{color:var(--suave);max-width:68ch;margin-top:.35rem}
.proyectos .cliente{color:var(--texto);font-weight:600}

/* Proceso */
.pasos{list-style:none;padding:0;margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;counter-reset:paso}
.pasos li{border-top:3px solid var(--marino);padding-top:1rem;counter-increment:paso}
.pasos li::before{content:counter(paso);display:block;font-weight:800;font-size:2.2rem;line-height:1;color:var(--oro);margin-bottom:.6rem}
.pasos h3{font-size:1.15rem;color:var(--marino)}
.pasos p{color:var(--suave);margin-top:.35rem}

/* Contacto */
.datos{display:grid;gap:1.5rem;max-width:42rem}
.dato small{display:block;color:var(--suave);font-size:.9rem}
.dato a{font-weight:700;font-size:clamp(1.3rem,3vw,1.8rem);text-decoration:none;color:var(--marino);word-break:break-word}
.dato a:hover{color:var(--oro)}
.dato span{font-size:1.1rem}

/* Llamado final */
.llamado{background:var(--marino);color:#fff}
.llamado h2{color:#fff}
.llamado p{color:#C9D3E2;margin-top:.75rem;max-width:52ch}

/* ---------- Pie ---------- */
footer{background:#0A182D;color:#AEB9C8;font-size:.92rem}
footer .env{display:grid;grid-template-columns:2fr 1fr 1.3fr 1.4fr;gap:2.5rem;padding-block:3.5rem}
footer h4{color:#fff;font-size:.95rem;margin-bottom:.8rem}
footer ul{list-style:none;padding:0;display:grid;gap:.4rem}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.pie-legal{border-top:1px solid rgba(255,255,255,.1)}
.pie-legal .env{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1.25rem}

/* ---------- Pantallas medianas ---------- */
@media (max-width:980px){
  .lineas,.sectores,.pasos{grid-template-columns:repeat(2,1fr)}
  .sectores.tres{grid-template-columns:1fr}
  .valores{grid-template-columns:repeat(2,1fr)}
  footer .env{grid-template-columns:1fr 1fr}
}
/* ---------- Celular ---------- */
@media (max-width:820px){
  .abrir{display:block}
  .encabezado .env{flex-wrap:wrap}
  #menu{display:none;width:100%}
  #menu.abierto{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--linea)}
  .menu>li{border-bottom:1px solid var(--linea)}
  .menu a,.titulo-sub{display:block;padding:.8rem 0}
  .titulo-sub{color:var(--suave);font-size:.85rem;padding-bottom:.2rem;cursor:default}
  .sub{display:block;position:static;border:0;margin:0;padding:0 0 .5rem 1rem;min-width:0}
  .tiene-sub::after{display:none}
  .cotizar{text-align:center;margin:.75rem 0}
  .cifras .env{grid-template-columns:1fr 1fr}
  .cifra{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.15)}
  .cita .env,.dos-col{grid-template-columns:1fr}
  .proyectos li{grid-template-columns:1fr}
  .superior .env{justify-content:flex-start;gap:1rem}
}
@media (max-width:520px){
  .lineas,.valores,.sectores,.pasos,footer .env{grid-template-columns:1fr}
  .portada .env{padding-block:4.5rem 4rem}
  section{padding-block:3.5rem}
}