/* ===========================================================
   Sistemas Klimatec · hoja de estilo del sitio
   Paleta y tipografía tomadas del folleto corporativo 2026
   =========================================================== */

:root{
  --navy:#0C2438;
  --navy-700:#16405C;
  --navy-500:#2E5873;
  --aqua:#82C1CF;
  --aqua-600:#2E6B80;
  --tint:#E7F0F5;
  --ink:#182735;
  --body:#3C4E5C;
  --gray:#5A6E7C;
  --line:#D4E2EA;
  --max:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--aqua-600); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- barra superior ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:3px solid var(--aqua);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .logo img{ height:30px; width:auto; }
.nav ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav a{
  color:#C4D4DE; text-decoration:none; font-size:14px; font-weight:500;
  letter-spacing:.04em; padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover{ color:#fff; }
.nav a.activo{ color:#fff; border-bottom-color:var(--aqua); }
.menu-btn{
  display:none; background:none; border:1px solid #3C5970; color:#C4D4DE;
  padding:8px 12px; border-radius:3px; font-size:14px; cursor:pointer;
}

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--navy); color:#fff;
  background-size:cover; background-position:center;
  padding:120px 0 108px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,36,56,.55) 0%,rgba(12,36,56,.78) 100%);
}
.hero .wrap{ position:relative; }
.hero .kicker{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--aqua); font-weight:500; margin-bottom:26px;
}
.hero h1{
  font-family:'IBM Plex Serif',Georgia,serif; font-weight:300;
  font-size:clamp(30px,5vw,50px); line-height:1.26; margin:0 0 30px;
  color:#fff; max-width:17em;
}
.hero h1 em{ font-style:normal; color:var(--aqua); }
.hero .lede{
  font-size:18px; font-weight:300; line-height:1.7; color:#C4D4DE;
  max-width:36em; border-left:2px solid var(--aqua-600); padding-left:22px;
}

/* ---------- encabezado de página interior ---------- */
.cabecera{
  background:var(--navy); color:#fff; background-size:cover; background-position:center;
  position:relative; padding:76px 0 64px;
}
.cabecera::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,36,56,.62) 0%,rgba(12,36,56,.82) 100%);
}
.cabecera .wrap{ position:relative; }
.cabecera .num{
  font-size:12px; font-weight:600; letter-spacing:.2em; color:var(--aqua); display:block; margin-bottom:10px;
}
.cabecera h1{
  font-size:clamp(26px,4vw,38px); font-weight:600; margin:0 0 18px; color:#fff; line-height:1.22;
}
.cabecera p{
  font-family:'IBM Plex Serif',Georgia,serif; font-weight:300; font-size:19px;
  line-height:1.6; color:#C4D4DE; margin:0; max-width:40em;
}

/* ---------- secciones ---------- */
.sec{ padding:76px 0; }
.sec.tint{ background:var(--tint); }
.sec.oscura{ background:var(--navy); color:#C4D4DE; }

.sec-cab{ margin-bottom:40px; }
.sec-cab .num{
  font-size:12px; font-weight:600; letter-spacing:.2em; color:var(--aqua-600);
  display:block; margin-bottom:8px;
}
.sec-cab h2{
  font-size:clamp(23px,3.2vw,31px); font-weight:600; color:var(--navy);
  margin:0 0 14px; line-height:1.24; letter-spacing:-.01em;
}
.sec-cab .regla{ height:3px; width:52px; background:var(--navy); }
.sec-cab p{
  font-family:'IBM Plex Serif',Georgia,serif; font-weight:300; font-size:19px;
  line-height:1.58; color:var(--navy-500); margin:20px 0 0; max-width:40em;
}
.sec.oscura .sec-cab h2{ color:#fff; }
.sec.oscura .sec-cab .regla{ background:var(--aqua); }
.sec.oscura .sec-cab p{ color:#C4D4DE; }
.sec.oscura .sec-cab .num{ color:var(--aqua); }

.texto{ max-width:70ch; }
.texto p{ margin:0 0 20px; }
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.dos-col p{ margin:0 0 18px; }

/* ---------- cifras ---------- */
.cifras{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:34px 0; margin:46px 0 0;
}
.cifras .v{
  font-family:'IBM Plex Serif',Georgia,serif; font-weight:300; font-size:40px;
  color:var(--navy); line-height:1; margin-bottom:12px;
}
.cifras .l{
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray); line-height:1.45;
}
.sec.oscura .cifras{ border-color:#2C4A63; }
.sec.oscura .cifras .v{ color:#fff; }
.sec.oscura .cifras .l{ color:#8FA9BC; }

/* ---------- rejilla de tarjetas ---------- */
.rejilla{ display:grid; gap:22px; }
.r2{ grid-template-columns:repeat(2,1fr); }
.r3{ grid-template-columns:repeat(3,1fr); }
.r4{ grid-template-columns:repeat(4,1fr); }

.tarjeta{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--aqua-600);
  padding:26px 24px 28px;
}
.sec.tint .tarjeta{ background:#fff; }
.tarjeta h3{
  font-size:17px; font-weight:600; color:var(--navy); margin:0 0 10px; line-height:1.32;
}
.tarjeta .n{
  font-family:'IBM Plex Serif',Georgia,serif; font-size:22px; font-weight:300;
  color:var(--aqua-600); line-height:1; margin-bottom:12px; display:block;
}
.tarjeta p{ font-size:15px; line-height:1.6; color:var(--gray); margin:0 0 14px; }
.tarjeta ul{ margin:0; padding:0; list-style:none; border-top:1px solid #EAF1F5; padding-top:14px; }
.tarjeta li{
  font-size:14px; line-height:1.55; color:var(--gray); position:relative;
  padding-left:17px; margin-bottom:9px;
}
.tarjeta li::before{
  content:""; position:absolute; left:0; top:7px; width:7px; height:7px; background:var(--aqua);
}
.tarjeta li:last-child{ margin-bottom:0; }

/* tarjeta plana, sin borde superior */
.plana{ border-top:1px solid var(--line); background:var(--tint); }
.sec.tint .plana{ background:#fff; }

/* ---------- normativas ---------- */
.normas{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; }
.normas div{ background:var(--navy); padding:20px 22px 22px; }
.normas .k{
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--aqua); display:block; margin-bottom:8px;
}
.normas .v{ font-size:19px; font-weight:600; color:#fff; letter-spacing:.01em; }

/* ---------- lista de sectores ---------- */
.sectores{ border-top:1px solid var(--line); }
.sectores .fila{
  display:grid; grid-template-columns:48px 280px 1fr; gap:18px;
  border-bottom:1px solid var(--line); padding:20px 0; align-items:start;
}
.sectores .n{ font-size:13px; font-weight:600; color:var(--aqua-600); letter-spacing:.06em; }
.sectores .t{ font-size:16px; font-weight:600; color:var(--navy); }
.sectores .d{ font-size:15px; line-height:1.6; color:var(--gray); }

/* ---------- galería ---------- */
.galeria{ display:grid; gap:14px; margin-top:44px; }
.galeria img{ width:100%; height:100%; object-fit:cover; }
.galeria figure{ margin:0; }
.pie{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#8FA1AF; margin-top:14px; line-height:1.6;
}

/* ---------- matriz de experiencia ---------- */
.matriz{ margin-top:12px; }
.matriz .grupo{ margin-bottom:34px; }
.matriz .gh{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:2px solid var(--navy); padding-bottom:10px; margin-bottom:4px;
}
.matriz .gh .k{ font-size:13px; font-weight:600; color:var(--aqua-600); letter-spacing:.08em; }
.matriz .gh .t{
  font-size:15px; font-weight:600; color:var(--navy);
  letter-spacing:.07em; text-transform:uppercase;
}
.matriz .enc{
  display:grid; grid-template-columns:2fr 1.5fr 1.2fr; gap:20px;
  padding:0 0 10px; border-bottom:1px solid var(--line); margin-bottom:2px;
}
.matriz .enc span{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#93A7B4;
}
.matriz .fila{
  display:grid; grid-template-columns:2fr 1.5fr 1.2fr; gap:20px;
  padding:13px 0; border-bottom:1px solid #EDF2F5; align-items:start;
}
.matriz .eq{ font-size:15px; font-weight:500; color:var(--navy); line-height:1.45; }
.matriz .ar{ font-size:14px; color:var(--gray); line-height:1.45; }
.matriz .se{
  font-size:13px; font-weight:600; color:var(--aqua-600); line-height:1.45; text-align:right;
}

/* ---------- destacados / llamadas ---------- */
.franja{
  background:var(--navy); color:#fff; padding:60px 0;
  background-size:cover; background-position:center; position:relative;
}
.franja::before{ content:""; position:absolute; inset:0; background:rgba(12,36,56,.80); }
.franja .wrap{ position:relative; }
.franja h2{
  font-family:'IBM Plex Serif',Georgia,serif; font-weight:300;
  font-size:clamp(23px,3.4vw,33px); line-height:1.36; margin:0 0 18px; color:#fff; max-width:22em;
}
.franja h2 em{ font-style:normal; color:var(--aqua); }
.franja p{ color:#C4D4DE; font-size:17px; max-width:46em; margin:0 0 26px; }

.boton{
  display:inline-block; background:var(--aqua); color:var(--navy);
  font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 30px; text-decoration:none; border:none;
}
.boton:hover{ background:#9AD0DB; }
.boton.linea{
  background:transparent; color:var(--aqua); border:1px solid var(--aqua-600);
}
.boton.linea:hover{ background:rgba(130,193,207,.12); }

/* ---------- contacto ---------- */
.contacto{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.dato{ margin-bottom:30px; }
.dato .h{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--aqua-600); margin-bottom:8px;
}
.dato .v{ font-size:17px; line-height:1.6; color:var(--navy); }
.dato .v a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); }
.dato .v a:hover{ border-bottom-color:var(--aqua-600); }

/* ---------- pie ---------- */
.pie-sitio{ background:var(--navy); color:#8FA9BC; padding:54px 0 30px; }
.pie-sitio .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.pie-sitio img{ height:30px; width:auto; margin-bottom:18px; }
.pie-sitio h4{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--aqua); margin:0 0 12px;
}
.pie-sitio p,.pie-sitio li{ font-size:14.5px; line-height:1.7; margin:0; }
.pie-sitio ul{ list-style:none; margin:0; padding:0; }
.pie-sitio a{ color:#8FA9BC; text-decoration:none; }
.pie-sitio a:hover{ color:#fff; }
.pie-sitio .legal{
  border-top:1px solid #2C4A63; padding-top:20px;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#6E8699;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .r3,.r4,.normas{ grid-template-columns:repeat(2,1fr); }
  .cifras{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .contacto,.dos-col{ grid-template-columns:1fr; gap:26px; }
  .pie-sitio .cols{ grid-template-columns:1fr; gap:30px; }
  .sectores .fila{ grid-template-columns:34px 1fr; }
  .sectores .d{ grid-column:2; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 16px; }
  .nav .wrap{ height:62px; }
  .nav ul{
    display:none; position:absolute; top:62px; left:0; right:0;
    background:var(--navy); flex-direction:column; gap:0; padding:8px 16px 18px;
    border-bottom:3px solid var(--aqua);
  }
  .nav ul.abierto{ display:flex; }
  .nav ul li{ border-top:1px solid #1E3C52; }
  .nav ul a{ display:block; padding:14px 0; font-size:15px; }
  .menu-btn{ display:block; }
  .hero{ padding:76px 0 68px; }
  .cabecera{ padding:54px 0 46px; }
  .sec{ padding:52px 0; }
  .r2,.r3,.r4,.normas{ grid-template-columns:1fr; }
  .matriz .enc{ display:none; }
  .matriz .fila{ grid-template-columns:1fr; gap:4px; padding:14px 0; }
  .matriz .se{ text-align:left; }
  .franja{ padding:46px 0; }
}

@media print{
  .nav,.menu-btn{ display:none; }
  .hero,.cabecera,.franja,.sec.oscura,.pie-sitio{ background:#fff !important; color:#000 !important; }
  .hero::before,.cabecera::before,.franja::before{ display:none; }
}