/* Baremo · sitio corporativo
   Tokens y reglas tomados del Baremo Design System.
   No añadir colores, sombras, degradados ni animaciones fuera de los declarados aquí. */

/* ---------- Fuentes ---------- */
@font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibm-plex-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --grafito:#14201E; --papel:#F5F3ED; --agua:#0E5A63; --senal:#C1502E; --gris:#5C6B68;
  --linea:#E0DBCF; --agua-10:#e6eeed; --agua-press:#0b4b52; --agua-claro:#a9c6c4;
  --papel-sobre-agua:#eaf1ef; --senal-press:#a94326; --blanco:#fff;
  --linea-sobre-agua:rgba(234,241,239,.22);

  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1080px;
  --transition-state:background-color 120ms ease-out,border-color 120ms ease-out,color 120ms ease-out;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none !important}}
body{
  font-family:var(--font-sans);font-weight:400;font-size:18px;line-height:1.5;
  color:var(--grafito);background:var(--papel);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--agua);text-decoration:none;transition:var(--transition-state)}
a:hover{color:var(--agua-press)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--agua);outline-offset:2px;border-radius:3px}
.hero :focus-visible,.contacto :focus-visible,.barra :focus-visible{outline-color:var(--papel-sobre-agua)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section[id]{scroll-margin-top:96px}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.salto{position:absolute;left:-9999px}
.salto:focus{left:24px;top:12px;z-index:60;position:fixed;background:var(--senal);color:#fff;padding:10px 18px;border-radius:7px;font-weight:600}

/* ---------- Tipografía de marca ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(38px,6vw,58px);line-height:1.05;max-width:16ch}
h2{font-size:clamp(28px,4.2vw,34px);max-width:22ch}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.3}
p{max-width:60ch}
.lead{font-size:clamp(17px,2.2vw,21px);max-width:52ch}

.antetitulo{
  font-family:var(--font-mono);font-weight:500;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--agua);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.antetitulo::before{content:"";width:26px;height:2px;background:var(--agua);flex:none}
.sobre-oscuro .antetitulo{color:var(--papel-sobre-agua)}
.sobre-oscuro .antetitulo::before{background:var(--senal)}

.fuente{font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--gris);max-width:78ch}
.sobre-oscuro .fuente{color:var(--agua-claro)}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:17px;
  padding:14px 26px;border-radius:7px;border:1px solid transparent;
  transition:var(--transition-state);cursor:pointer;
}
.btn-cta{background:var(--senal);color:#fff;border-radius:8px}
.btn-cta:hover{background:var(--senal-press);color:#fff}
.btn-linea{border-color:var(--papel-sobre-agua);color:var(--papel-sobre-agua);font-family:var(--font-mono);font-weight:400;font-size:15px}
.btn-linea:hover{background:rgba(234,241,239,.10);color:#fff}
.btn-sec{border-color:var(--agua);color:var(--agua)}
.btn-sec:hover{background:var(--agua-10);color:var(--agua-press)}

/* ---------- Barra de navegación ---------- */
.barra{position:sticky;top:0;z-index:50;background:var(--agua);border-bottom:1px solid var(--linea-sobre-agua)}
.barra .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:21px;letter-spacing:-.01em}
.marca:hover{color:#fff}
.marca img{width:34px;height:34px}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto;list-style:none}
.menu a{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--papel-sobre-agua);padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:#fff;border-bottom-color:var(--senal)}
.barra .btn-cta{font-size:15px;padding:10px 18px}

/* ---------- Portada ---------- */
.hero{background:var(--agua);color:#fff;padding:78px 0 108px;position:relative}
.hero h1{color:#fff}
.hero .lead{color:var(--papel-sobre-agua);margin-top:24px}
.acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:38px}
/* Los ticks de la regla graduada se retiraron del héroe: en la esquina superior
   derecha de una web se leen como menú hamburguesa. Siguen siendo válidos en las
   piezas cuadradas del sistema, donde no hay barra de navegación que los confunda. */

/* ---------- Cifras ---------- */
/* z-index: el héroe es position:relative y sin esto taparía las tarjetas montadas */
.cifras{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-58px}
.cifra{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:26px 22px}
.cifra .n{font-family:var(--font-mono);font-weight:500;font-size:clamp(30px,3.4vw,38px);line-height:1;color:var(--senal);font-variant-numeric:tabular-nums}
.cifra .l{font-size:15px;color:var(--gris);margin-top:10px;line-height:1.4}
.cifras-fuente{margin-top:18px}

/* ---------- Secciones ---------- */
.sec{padding:80px 0}
.sec-tope{border-top:1px solid var(--linea)}
.sec .lead{margin-top:20px}

/* Comparativa */
.vs{margin-top:44px;border-top:1px solid var(--linea)}
.vs-fila{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--linea)}
.vs-rotulo{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--agua)}
.vs-clave{font-weight:600;font-size:19px;margin-top:6px;letter-spacing:-.01em}
.vs-texto{color:var(--gris);align-self:center;max-width:56ch}
.vs-texto b{color:var(--grafito);font-weight:600}

/* Servicios */
.rotulo-grupo{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--agua);border-bottom:2px solid var(--agua);padding-bottom:10px;margin:48px 0 4px}
.nucleo{list-style:none}
.nucleo li{display:grid;grid-template-columns:44px 1fr;gap:4px 8px;padding:20px 0;border-bottom:1px solid var(--linea)}
.nucleo .idx{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--agua);padding-top:3px}
.nucleo p{color:var(--gris);font-size:16px;grid-column:2;margin-top:6px}
/* Flujo por columna: en escritorio se lee 05-06-07 | 08-09-10; en móvil vuelve al orden natural */
.capacidades{list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:0 44px}
.capacidades li{display:grid;grid-template-columns:32px 1fr;gap:2px 8px;padding:18px 0;border-bottom:1px solid var(--linea)}
.capacidades .idx{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--agua);padding-top:2px}
.capacidades h3{font-size:17px}
.capacidades p{color:var(--gris);font-size:15px;grid-column:2;margin-top:5px;max-width:42ch}

/* Tabla de resultados */
.tabla-caja{overflow-x:auto;margin-top:38px;border:1px solid var(--linea);border-radius:10px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:700px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--linea)}
thead th{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);background:var(--agua-10)}
tbody td{font-size:16px}
td.n,th.n{text-align:right}
td.n{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
/* La primera celda de cada fila es un th, así que el selector no puede colgar de td */
.periodo{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--gris);display:block;margin-top:3px}
.aviso-tabla{display:none;font-family:var(--font-mono);font-size:11px;color:var(--gris);margin-top:10px}
tfoot td{font-weight:600;background:var(--agua-10);border-bottom:none}
tfoot td.n{color:var(--senal)}

/* Proceso */
.proceso{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:44px}
.paso{border-top:2px solid var(--agua);padding-top:18px}
.paso .idx{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--agua)}
.paso h3{margin:8px 0 10px}
.paso p{color:var(--gris);font-size:16px}

/* Fotos */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.foto img{border-radius:6px;width:100%;height:auto}
.pie{font-family:var(--font-mono);font-size:11px;line-height:1.5;color:var(--gris);margin-top:10px}
.foto-ancha{margin-top:44px;max-width:760px}
.foto-ancha img{border-radius:6px;width:100%;height:auto}

/* Quién responde */
.director{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.lista{list-style:none;margin-top:8px}
.lista li{position:relative;padding-left:30px;margin-top:14px;font-size:17px;line-height:1.45}
.lista li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:4px;border-radius:2px;background:var(--senal)}
.lista b{font-weight:600}

/* ---------- Contacto ---------- */
.contacto{background:var(--agua);color:#fff;padding:84px 0}
.contacto h2{color:#fff}
.contacto .lead{color:var(--papel-sobre-agua);margin-top:24px;border-left:4px solid var(--senal);padding-left:20px;max-width:58ch}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;padding-top:34px;border-top:1px solid var(--linea-sobre-agua)}
.dato .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--agua-claro)}
.dato .v,.dato a{font-family:var(--font-mono);font-size:16px;color:#fff;margin-top:7px;display:inline-block;word-break:break-word}
.dato a:hover{color:var(--senal)}

/* ---------- Pie ---------- */
.pie-sitio{background:var(--papel);padding:30px 0;border-top:1px solid var(--linea)}
.pie-sitio .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.tagline{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--agua)}
.legal{font-family:var(--font-mono);font-size:12px;color:var(--gris)}
.menu-pie{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;width:100%;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--linea)}
.menu-pie a{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.menu-pie a:hover{color:var(--agua)}

/* ---------- Adaptación ---------- */
@media (max-width:900px){
  .cifras{grid-template-columns:1fr 1fr}
  .capacidades{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:0}
  .proceso{grid-template-columns:1fr;gap:28px}
  .director{grid-template-columns:1fr;gap:28px}
  .datos{grid-template-columns:1fr 1fr}
  .fotos{grid-template-columns:1fr}
  .vs-fila{grid-template-columns:1fr;gap:8px}
}
@media (max-width:740px){
  .aviso-tabla{display:block}
}
@media (max-width:640px){
  body{font-size:17px}
  .sec{padding:58px 0}
  .hero{padding:52px 0 92px}
  .contacto{padding:62px 0}
  /* Barra fija compacta: marca + acción. Los anclajes de sección viven en el pie. */
  .barra .wrap{gap:12px;flex-wrap:nowrap;padding-top:11px;padding-bottom:11px}
  .menu{display:none}
  .barra .btn-cta{margin-left:auto;font-size:14px;padding:9px 16px;white-space:nowrap}
  .marca{font-size:19px}
  .marca img{width:30px;height:30px}
  .cifras{grid-template-columns:1fr;margin-top:-64px}
  .datos{grid-template-columns:1fr}
  .acciones .btn{width:100%;text-align:center}
  .nucleo li{grid-template-columns:36px 1fr}
  .foto-ancha{margin-top:32px}
}