/* ==========================================================================
   TIPOGRAFÍA — Jost, geométrica, servida desde tu propio dominio
   Vive en  assets/jost-var.woff2  y no dentro de este archivo. Estuvo
   incrustada en base64 y eso sumaba 57 KB a una hoja de estilos que bloquea
   el pintado de la página. Como archivo aparte se descarga en paralelo.
   Es una geométrica de la escuela de la Futura, con la misma anatomía que
   sostiene los rótulos de la moda italiana: círculo perfecto en la O, asta
   fina, mayúsculas anchas. En trazo ligero y con el espaciado muy abierto da
   exactamente ese aire. Licencia SIL Open Font, uso comercial permitido.
   Un solo archivo variable de 100 a 900: no hay que cargar seis pesos.
   Servida desde tu servidor, así que sigue sin haber ni una conexión externa
   y no se transmite la IP del visitante a ningún tercero (RGPD).
   La monoespaciada queda reservada para las cifras, que es donde sirve.
   ========================================================================== */
@font-face {
  font-family: "Jost";
  src: url("../jost-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-display: "Jost", Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic",
               "URW Gothic", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --f-data: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Roboto Mono",
            Menlo, Consolas, monospace;

  /* Paleta única: papel blanco y tinta azul noche.
     El ámbar queda reservado para representar la luz —la escala, el mando de
     temperatura de color, la barra de ahorro—, nunca para decorar. Esa
     disciplina es lo que hace que un acento signifique algo. */
  --ink:        #FCFCFB;   /* el papel */
  --ink-raised: #F2F3F1;   /* superficie levantada */
  --line:       rgba(15, 29, 48, 0.17);
  --line-soft:  rgba(15, 29, 48, 0.09);
  --text:       #0F1D30;   /* azul noche */
  --text-dim:   #5B6C80;
  --warm:       #8F5200;   /* ámbar oscuro: el único que contrasta sobre papel */
  --warm-hi:    #6B3D00;
  --warm-lit:   #E9A23C;   /* ámbar vivo, solo para rellenos y trazos */
  --cool:       #1A5E8C;

  --shell: min(1220px, 100% - 3rem);
  --step:  clamp(4.5rem, 9vw, 8.5rem);
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}


* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Halo ambiental: una única fuente de luz cálida arriba a la izquierda.
   Es la compañía: una luminaria encendida en la oscuridad. */

a { color: inherit; }

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

.shell { width: var(--shell); margin-inline: auto; }

/* --- Voz del dato ------------------------------------------------------- */
.mono {
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
}
/* La monoespaciada queda sólo para las cifras: ahí sí distingue el dato. */
.metric-value, .tick-value { font-family: var(--f-data); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-family: var(--f-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   CABECERA
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
}

.brand {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 300;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.brand::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm-lit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm-lit) 24%, transparent);
}

.site-nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.site-nav a {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--text); border-bottom-color: var(--warm); }

.header-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; }

.lang-switcher { display: flex; gap: 1px; }
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  padding: 0.35rem 0.4rem;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] { color: var(--warm); }

.theme-toggle {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--warm); }
/* Ya no hay dos temas. El conmutador se oculta aquí y además se retira del
   documento desde app.js, para que no lo alcance ni el tabulador. */
.theme-toggle { display: none !important; }

/* ==========================================================================
   SECCIONES
   Sin numeración 01/02/03: el contenido no es una secuencia. En su lugar,
   una etiqueta que dice de qué trata cada bloque, como en una ficha técnica.
   ========================================================================== */
main { position: relative; z-index: 1; }

.band { padding-block: var(--step); border-top: 1px solid var(--line-soft); }
.band:first-child { border-top: 0; }

.band-label {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 2.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.band-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

h1, h2, h3 { font-weight: 300; letter-spacing: -0.008em; line-height: 1.08; margin: 0; }

h1 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); font-weight: 200; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.12; font-weight: 250; }
h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.38;
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 62ch;
  font-weight: 300;
}

/* ==========================================================================
   HÉROE
   ========================================================================== */
.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; }
.hero .eyebrow { margin: 0 0 1.6rem; color: var(--text-dim); }
.hero h1 { max-width: 15ch; }
.hero h1 em {
  font-style: normal;
  color: var(--warm);
}
.hero-sub {
  margin: 1.9rem 0 0;
  max-width: 52ch;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  font-weight: 300;
  color: var(--text-dim);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.6rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn-primary {
  background: var(--text);
  color: var(--ink);
  box-shadow: none;
}
.btn-primary:hover { background: #1B3352; }
.btn-primary:hover { transform: translateY(-2px); }

.btn-outline { border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--warm); color: var(--warm); }

/* ==========================================================================
   FIRMA DE LA PÁGINA — LA ESCALA DE EFICACIA LUMINOSA
   El argumento entero de la compañía es una posición en un eje. Así que el
   eje es el elemento principal, no un número suelto con un degradado detrás.
   El brillo de la barra codifica la propia magnitud: más luz por vatio.
   ========================================================================== */
.scale {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--ink-raised) 70%, transparent);
}
.scale-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-dim);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.axis { position: relative; height: 10px; }

.axis-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #D9DDE1 0%,
    #C2C9CF 22%,
    #A9B3BC 46%,
    color-mix(in srgb, var(--cct) 45%, #B0A88F) 64%,
    var(--warm-lit) 86%,
    color-mix(in srgb, var(--cct) 70%, #7A4400) 100%);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw-axis 1.5s var(--ease) 0.25s forwards;
}

@keyframes draw-axis { to { transform: scaleX(1); } }

/* Banda del LED comercial actual: 130–200 lm/W es un rango, no un punto. */
.axis-band {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: calc(130 / 300 * 100%);
  width: calc(70 / 300 * 100%);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: repeating-linear-gradient(115deg,
    var(--line-soft) 0 2px, transparent 2px 7px);
  opacity: 0;
  animation: fade-in 0.7s var(--ease) 1.15s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

.tick {
  position: absolute;
  top: 0;
  left: var(--x);
  opacity: 0;
  animation: fade-in 0.55s var(--ease) forwards;
}
.tick-stem {
  position: absolute;
  left: 0;
  top: -14px;
  width: 1px;
  height: 38px;
  background: var(--line);
}
.tick-copy {
  position: absolute;
  top: 32px;
  left: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: 11ch;
  text-align: center;
  color: var(--text-dim);
  line-height: 1.45;
}
.tick[data-row="2"] .tick-copy { top: 74px; }
.tick[data-row="2"] .tick-stem { height: 80px; }
.tick-value { display: block; color: var(--text); }

/* La marca propia: el único punto que emite luz. */
.tick-self .tick-stem { background: var(--warm); width: 2px; }
.tick-self .tick-copy { color: var(--warm); max-width: 16ch; }
.tick-self .tick-value {
  color: var(--warm);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.tick-self::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--warm-lit);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm-lit) 26%, transparent);
}

.scale-note {
  margin: 7.5rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 74ch;
}

/* ==========================================================================
   CIFRAS
   ========================================================================== */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.metric {
  padding: 2.4rem 1.75rem 2.4rem 0;
  border-right: 1px solid var(--line-soft);
}
.metric:last-child { border-right: 0; }
.metric-value {
  display: block;
  font-family: var(--f-data);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.85rem;
}
.metric-unit { color: var(--warm); }
.metric-label { color: var(--text-dim); display: block; }

/* ==========================================================================
   REJILLAS DE CONTENIDO
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } }

.link-more {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--warm);
  border-bottom: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
  padding-bottom: 0.3rem;
  transition: border-color 0.2s var(--ease);
}
.link-more:hover { border-bottom-color: var(--warm); }

.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.adv-grid > article {
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.3rem);
}
.adv-grid h3 { margin-bottom: 0.85rem; }
.adv-grid p { margin: 0; color: var(--text-dim); font-size: 0.9375rem; }
.adv-index {
  display: block;
  font-family: var(--f-data);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--warm);
  margin-bottom: 1.6rem;
}

/* --- Aplicaciones -------------------------------------------------------
   Los marcadores vacíos se sustituyen por un patrón de haz dibujado con CSS,
   distinto por tipología. Cuando tengas fotografías reales, mete un <img>
   dentro de .frame y borra la clase beam-*: el hueco ya no se nota.
   ------------------------------------------------------------------------ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.5rem;
}
.app-grid figure { margin: 0; }
.frame {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
}
.beam-a::after {
  background:
    conic-gradient(from 200deg at 50% -12%, transparent 0deg,
      color-mix(in srgb, var(--warm) 34%, transparent) 14deg, transparent 30deg),
    radial-gradient(38% 22% at 50% 92%, color-mix(in srgb, var(--warm) 26%, transparent), transparent 70%);
}
.beam-b::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 27%,
      color-mix(in srgb, var(--cool) 18%, transparent) 27% 29%, transparent 29% 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--cool) 12%, transparent), transparent 60%);
}
.beam-c::after {
  background:
    radial-gradient(circle at 26% 22%, color-mix(in srgb, var(--warm) 30%, transparent), transparent 42%),
    radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--cool) 22%, transparent), transparent 46%),
    radial-gradient(circle at 44% 88%, color-mix(in srgb, var(--warm) 20%, transparent), transparent 40%);
}
.beam-d::after {
  background:
    repeating-conic-gradient(from 90deg at 50% 118%,
      color-mix(in srgb, var(--warm) 22%, transparent) 0deg 3deg, transparent 3deg 11deg);
}
.app-grid figcaption {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Certificaciones ---------------------------------------------------- */
.cert-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.cert-list li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.cert-list li::before {
  content: attr(data-ref);
  font-family: var(--f-data);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--warm);
}
.cert-note { margin: 1.75rem 0 0; font-size: 0.8125rem; color: var(--text-dim); max-width: 66ch; }

/* --- Llamada final ------------------------------------------------------ */
.closing { text-align: left; }
.closing h2 { max-width: 16ch; }
.closing .lede { margin-top: 1.5rem; }

/* ==========================================================================
   PIE
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 3.5rem 2.5rem;
  position: relative;
  z-index: 1;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-tagline { color: var(--text-dim); margin: 0.9rem 0 0; max-width: 34ch; font-size: 0.9375rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-links a {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
}
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
}

/* ==========================================================================
   APARICIONES AL DESPLAZAR
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .axis-track { transform: scaleX(1); }
  .axis-band, .tick { opacity: 1; }
}

/* ==========================================================================
   PANTALLAS ESTRECHAS
   ========================================================================== */
@media (max-width: 860px) {
  :root { --shell: min(1220px, 100% - 2.25rem); }
  .site-nav { display: none; }
  .header-tools { margin-left: auto; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-right: 0; }
  .metric:last-child { border-bottom: 0; }
  .tick-copy { font-size: 0.625rem; letter-spacing: 0.1em; max-width: 8ch; }
  .tick-self .tick-copy { max-width: 10ch; }
  .scale-note { margin-top: 8.5rem; }
}
@media (max-width: 520px) {
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   COMPONENTES DE LAS PÁGINAS INTERIORES
   La portada usa la escala de eficacia como pieza central. Las interiores
   heredan el mismo sistema y añaden estos cuatro bloques.
   ========================================================================== */

/* --- Cabecera de página interior ---------------------------------------- */
.page-head { padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.page-head h1 { max-width: 16ch; }
.page-head .lede { margin-top: 1.9rem; }

/* --- Tabla de especificaciones ------------------------------------------
   Dos columnas con filete: es la forma canónica de una ficha técnica.
   Los valores en monoespaciada, las etiquetas en la geométrica.
   ------------------------------------------------------------------------ */
.specs { border-top: 1px solid var(--line-soft); margin: 0; }
.specs > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.specs dt { color: var(--text-dim); font-size: 0.9375rem; }
.specs dd {
  margin: 0;
  font-family: var(--f-data);
  font-size: 0.875rem;
  text-align: right;
  letter-spacing: -0.01em;
}
.specs dd em {
  font-style: normal;
  color: var(--warm);
}
.specs-note {
  margin: 1.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-dim);
  max-width: 70ch;
  line-height: 1.6;
}

/* --- Lista numerada de servicios ---------------------------------------- */
.services { border-top: 1px solid var(--line-soft); }
.service {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  padding: clamp(1.9rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 800px) {
  .service { grid-template-columns: 5rem 1fr 1.15fr; gap: 2.5rem; align-items: start; }
}
.service-ref {
  font-family: var(--f-data);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--warm);
  padding-top: 0.35rem;
}
.service h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 300; }
.service p { margin: 0; color: var(--text-dim); font-size: 0.9375rem; }

/* --- Rejilla de sectores ------------------------------------------------ */
.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.sectors > article {
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  position: relative;
}
.sectors h3 { margin-bottom: 0.9rem; }
.sectors p { margin: 0; color: var(--text-dim); font-size: 0.9375rem; }
.sector-ref {
  display: block;
  font-family: var(--f-data);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--warm);
  margin-bottom: 1.5rem;
}

/* --- Contacto ------------------------------------------------------------ */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 860px) { .contact { grid-template-columns: 0.75fr 1fr; } }

.contact-info { margin: 0; border-top: 1px solid var(--line-soft); }
.contact-info dt {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 1.4rem;
}
.contact-info dd {
  margin: 0.5rem 0 1.4rem;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1.4rem;
  font-weight: 300;
}
.contact-info dd:last-child { border-bottom: 0; }
.contact-info a { color: var(--warm); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-info a:hover { border-bottom-color: var(--warm); }

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.7rem;
}
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 300;
  padding: 0.6rem 0;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--warm); }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); opacity: 0.55; }

.form-note {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-dim);
  line-height: 1.6;
}


/* ==========================================================================
   COMPORTAMIENTO AL DESPLAZAR
   Cuatro piezas, todas ligadas al mismo asunto: la luz.
   1. Una línea luminosa arriba que se llena conforme avanzas.
   2. El halo ambiental deja de estar clavado y desciende contigo, como si
      la fuente de luz recorriera la página.
   3. Los bloques ya no aparecen de golpe: sus elementos entran escalonados.
   4. La cabecera se estrecha al separarte del principio.
   Donde el navegador admite líneas de tiempo de desplazamiento nativas se usan,
   porque van fuera del hilo principal y no dan tirones. Donde no, hay respaldo
   en JavaScript. Y con movimiento reducido, nada de esto se ejecuta.
   ========================================================================== */

/* --- 1. Progreso ---------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--warm-lit) 60%, transparent) 0%,
    var(--warm-lit) 55%,
    color-mix(in srgb, var(--cct) 70%, #7A4400) 100%);
  pointer-events: none;
}

/* --- 2. Halo que desciende ------------------------------------------------ */
body::before { display: none; }

.aura {
  position: fixed;
  inset: -35vh -25% auto -25%;
  height: 115vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 40% at 26% 30%,
    color-mix(in srgb, var(--cct) 22%, transparent),
    transparent 66%);
  transform: translate3d(0, calc(var(--aura, 0) * 42vh), 0);
  will-change: transform;
}


/* --- 3. Entrada escalonada ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.85s var(--ease);
}

/* Los hijos de una rejilla entran uno detrás de otro, no en bloque. */
.stagger > * {
  opacity: 0;
  transform: translateY(18px);
}
.is-in .stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.is-in .stagger > *:nth-child(1) { transition-delay: 0.06s; }
.is-in .stagger > *:nth-child(2) { transition-delay: 0.14s; }
.is-in .stagger > *:nth-child(3) { transition-delay: 0.22s; }
.is-in .stagger > *:nth-child(4) { transition-delay: 0.30s; }
.is-in .stagger > *:nth-child(5) { transition-delay: 0.38s; }
.is-in .stagger > *:nth-child(6) { transition-delay: 0.46s; }
.is-in .stagger > *:nth-child(7) { transition-delay: 0.54s; }
.is-in .stagger > *:nth-child(8) { transition-delay: 0.62s; }
.is-in .stagger > *:nth-child(9) { transition-delay: 0.70s; }

/* El filete que cierra cada etiqueta de sección se dibuja de izquierda a
   derecha en lugar de estar ya ahí. Detalle pequeño, se nota. */
.band-label::after { transform: scaleX(0); transform-origin: 0 50%; }
.is-in .band-label::after {
  transform: scaleX(1);
  transition: transform 1.1s var(--ease) 0.25s;
}

/* --- 4. Cabecera al separarse del principio -------------------------------- */
.site-header {
  transition: padding 0.35s var(--ease), border-color 0.35s var(--ease),
              background-color 0.35s var(--ease);
}
.site-header.is-scrolled {
  padding-block: 0.7rem;
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
}
.site-header.is-scrolled .brand { font-size: 0.875rem; letter-spacing: 0.38em; }
.brand { transition: font-size 0.35s var(--ease), letter-spacing 0.35s var(--ease); }

/* --- Anclas por debajo de la cabecera fija -------------------------------- */
[id] { scroll-margin-top: 6rem; }

/* --- Contadores ----------------------------------------------------------- */
.metric-value { font-variant-numeric: tabular-nums; }

/* --- Líneas de tiempo nativas cuando existen ------------------------------- */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    transform: scaleX(0);
    animation: progreso linear forwards;
    animation-timeline: scroll(root block);
  }
  @keyframes progreso { to { transform: scaleX(1); } }

  .aura {
    animation: descenso linear forwards;
    animation-timeline: scroll(root block);
  }
  @keyframes descenso { to { transform: translate3d(0, 42vh, 0); } }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .aura { animation: none !important; }
  .aura { transform: none !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .band-label::after { transform: scaleX(1) !important; }
  .site-header.is-scrolled { padding-block: 1.05rem; }
}

/* ==========================================================================
   ═══ NIVEL 10 ═══
   Cinco decisiones, todas derivadas de una misma idea: si vendes luz, la
   página tiene que comportarse como luz, no limitarse a describirla.

   1. TEMPERATURA DE COLOR. La ficha técnica dice 2700 K – 6500 K configurable.
      En vez de escribirlo, el visitante lo mueve y ve cómo cambia la luz de
      toda la web. La afirmación deja de leerse y pasa a demostrarse.
   2. EL CURSOR ES UNA FUENTE DE LUZ. Ilumina el fondo y barre las tarjetas.
   3. EL HAZ. Un cono volumétrico con curvas isolux en el suelo, como en un
      diagrama fotométrico. Se estrecha al desplazar.
   4. GRANO. Una capa de ruido finísima. Es lo que separa un fondo oscuro
      plano de uno que parece tener materia.
   5. TRANSICIONES ENTRE PÁGINAS. Navegar deja de ser un parpadeo blanco.
   ========================================================================== */

/* --- 1. Temperatura de color --------------------------------------------- */
:root { --cct: #FFC46B; }

/* El ámbar de texto se oscurece a partir del color elegido para que siga
   siendo legible sobre papel; el vivo se queda tal cual para los rellenos. */
:root {
  /* El acento de texto es fijo: si dependiera de la temperatura elegida, a
     6500 K se volvía un pardo sucio y perdía contraste. Solo el ámbar de
     relleno sigue al mando, que es donde representa luz de verdad. */
  --warm-lit: var(--cct);
}

/* El papel se tiñe con la temperatura elegida. Sobre blanco esto se lee como
   lo que es: la misma hoja iluminada con otra luz. En oscuro no se apreciaba. */
body { background: color-mix(in srgb, var(--cct) 6%, #FCFCFB); }

.cct {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.cct-label { color: var(--text-dim); white-space: nowrap; }
.cct input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 190px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF9A3C 0%, #FFC46B 28%, #FFE3C4 55%, #F2F3FF 80%, #CFE0FF 100%);
  cursor: ew-resize;
  outline-offset: 6px;
}
.cct input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--cct);
  border: 2px solid var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cct) 28%, transparent);
  cursor: ew-resize;
}
.cct input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--cct);
  border: 2px solid var(--text);
  cursor: ew-resize;
}
.cct-value {
  font-family: var(--f-data);
  font-size: 0.875rem;
  color: var(--warm);
  min-width: 5.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- 2. El cursor como fuente de luz -------------------------------------- */
.pointer-light {
  position: fixed;
  top: 0; left: 0;
  width: 46rem; height: 46rem;
  margin: -23rem 0 0 -23rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cct) 16%, transparent) 0%,
    color-mix(in srgb, var(--cct) 6%, transparent) 34%,
    transparent 66%);
  transform: translate3d(-100vw, 0, 0);
  transition: opacity 0.5s var(--ease);
  will-change: transform;
}
.pointer-light.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .pointer-light { display: none; } }


/* El haz que barre una tarjeta al pasar por encima. */
.adv-grid > article,
.sectors > article,
.service,
.frame {
  position: relative;
  isolation: isolate;
}
.adv-grid > article::before,
.sectors > article::before,
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(24rem 18rem at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--cct) 13%, transparent), transparent 72%);
}
.adv-grid > article:hover::before,
.sectors > article:hover::before,
.service:hover::before { opacity: 1; }

/* --- 3. El haz del héroe -------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero > .shell { position: relative; z-index: 2; }

.beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Cono volumétrico: nace fuera de pantalla, arriba a la izquierda. */
.beam::before {
  content: "";
  position: absolute;
  top: -22%; left: 8%;
  width: 78%; height: 130%;
  background: conic-gradient(from 168deg at 24% 0%,
    transparent 0deg,
    color-mix(in srgb, var(--cct) 11%, transparent) 9deg,
    color-mix(in srgb, var(--cct) 4%, transparent) 21deg,
    transparent 32deg);
  filter: blur(6px);
  transform: scaleX(var(--beam, 1));
  transform-origin: 24% 0%;
  transition: transform 0.4s var(--ease);
}
/* Curvas isolux: los anillos que dibuja un haz sobre el suelo. */
.beam::after {
  content: "";
  position: absolute;
  left: 14%; bottom: -34%;
  width: 62%; height: 62%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--cct) 8%, transparent) 0 1px,
    transparent 1px 13%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 68%);
  opacity: 0.9;
}


/* El punto de la escala respira. */
.tick-self::after { animation: latido 4.5s var(--ease) 2.4s infinite; }
/* Escala y opacidad las mueve la tarjeta gráfica sin repintar. Animar la
   sombra, que es lo que hacía antes, obliga a redibujar en cada fotograma. */
@keyframes latido {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.14); opacity: 0.78; }
}

/* --- 4. Grano ------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --- 5. Transiciones entre páginas ---------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: 0.28s var(--ease) both salir;
}
::view-transition-new(root) {
  animation: 0.42s var(--ease) both entrar;
}
@keyframes salir { to { opacity: 0; transform: translateY(-10px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }

/* --- Etiquetas de sección que se quedan ----------------------------------- */
@media (min-width: 900px) {
  .band-label {
    position: sticky;
    top: 5.5rem;
    z-index: 3;
    background: linear-gradient(180deg,
      var(--ink) 30%, color-mix(in srgb, var(--ink) 0%, transparent));
    padding-block: 0.75rem;
    margin-bottom: 1.6rem;
  }
}

/* --- Escala tipográfica: más aire, más aplomo ----------------------------- */
h1 { font-size: clamp(2.9rem, 8.4vw, 7rem); letter-spacing: -0.022em; }
.hero h1 { max-width: 13ch; }
.hero { padding-block: clamp(4.5rem, 12vw, 9rem) 0; }
.page-head h1 { max-width: 14ch; }

/* --- Capas: el contenido siempre por encima de los adornos ---------------- */
main, .site-header, .site-footer { position: relative; z-index: 2; }
.aura { z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .tick-self::after { animation: none !important; }
  .pointer-light { display: none !important; }
  .beam::before { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ==========================================================================
   CALCULADORA
   Tres pasos apilados, resultado abajo. Los números en monoespaciada; las
   cifras que cambian, en ámbar. Nada de tarjetas ni sombras: es una
   herramienta de cálculo, y debe parecer una hoja de trabajo, no un anuncio.
   ========================================================================== */
.calc { display: grid; gap: clamp(2.5rem, 5vw, 3.75rem); }
.calc-step { display: grid; gap: 1.25rem; }
.calc .band-label { margin-bottom: 0.5rem; position: static; background: none; }

/* --- Pestañas -------------------------------------------------------------- */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line-soft); }
.calc-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.8rem 1.1rem 0.8rem 0;
  margin-right: 1.75rem;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.calc-tab:hover { color: var(--text); }
.calc-tab.is-on { color: var(--warm); border-bottom-color: var(--warm); }

.calc-panel { display: none; }
.calc-panel.is-on { display: block; }

/* --- Controles -------------------------------------------------------------- */
.calc-select,
.calc-search {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 300;
  padding: 0.7rem 0;
  transition: border-color 0.2s var(--ease);
}
.calc-select { appearance: none; cursor: pointer; }
.calc-select option { background: var(--ink-raised); color: var(--text); }
.calc-select:focus, .calc-search:focus { outline: none; border-bottom-color: var(--warm); }

.calc-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  max-height: 17rem;
  overflow-y: auto;
}
.calc-list li { background: var(--ink); }
.calc-list button {
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 300;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.calc-list button:hover { color: var(--text); background: var(--ink-raised); }
.calc-list button.is-on { color: var(--warm); background: var(--ink-raised); }
.calc-empty { padding: 1.1rem; color: var(--text-dim); font-size: 0.9375rem; }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0 2.25rem;
}
.calc-grid .field input { font-family: var(--f-data); font-size: 0.9375rem; }

.calc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.calc-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-family: var(--f-data);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.calc-chip:hover { color: var(--text); border-color: var(--line); }
.calc-chip.is-on { color: var(--warm); border-color: var(--warm); }

.calc-eff {
  margin: 0.25rem 0 0;
  font-family: var(--f-data);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.calc-eff strong { color: var(--warm); font-weight: 400; }

.calc-adv { border-top: 1px solid var(--line-soft); padding-top: 1.5rem; }
.calc-adv summary {
  cursor: pointer;
  color: var(--text-dim);
  list-style: none;
  padding-bottom: 1.25rem;
}
.calc-adv summary::-webkit-details-marker { display: none; }
.calc-adv summary::before { content: "+ "; color: var(--warm); }
.calc-adv[open] summary::before { content: "− "; }
.calc-adv summary:hover { color: var(--text); }
.calc-help { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--text-dim); max-width: 62ch; line-height: 1.6; }

/* --- Resultado -------------------------------------------------------------- */
.calc-out { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }
.calc-hero-out { margin-bottom: 2.5rem; }
.calc-hero-out > p.mono { color: var(--text-dim); margin: 0 0 0.75rem; }
.calc-big {
  margin: 0;
  font-family: var(--f-data);
  font-size: clamp(2.6rem, 8vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.calc-bar {
  margin: 1.75rem 0 0.75rem;
  height: 4px;
  background: var(--line-soft);
  overflow: hidden;
}
.calc-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--warm-lit) 65%, transparent), var(--warm-lit));
  transition: width 0.6s var(--ease);
}
.calc-cut { margin: 0; color: var(--text-dim); }
.calc-cut::first-letter { color: var(--warm); }

.calc-arrow { color: var(--text-dim); padding: 0 0.35rem; }
.calc-out .specs dd { white-space: nowrap; }

.calc-warn {
  margin: 0;
  padding: 1.25rem 1.4rem;
  border-left: 2px solid var(--warm);
  background: color-mix(in srgb, var(--ink-raised) 70%, transparent);
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 68ch;
}

.calc-cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 2rem; border-top: 1px solid var(--line-soft); }
.calc-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.calc-hint {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-dim);
  max-width: 52ch;
  line-height: 1.6;
}
.calc-cta .lede { margin-top: 1rem; }

@media (max-width: 620px) {
  .calc-tab { margin-right: 1.1rem; font-size: 0.6875rem; letter-spacing: 0.14em; }
  .calc-out .specs > div { grid-template-columns: 1fr; gap: 0.4rem; }
  .calc-out .specs dd { text-align: left; white-space: normal; }
}

/* ==========================================================================
   INFORME IMPRIMIBLE
   No se ve en pantalla. Al imprimir desaparece la web entera y queda una
   hoja en negro sobre blanco: membrete, cifras de partida, resultado,
   método y pie con los datos de contacto. El navegador ofrece «Guardar
   como PDF» y sale un documento vectorial, con texto seleccionable, sin
   descargar ninguna librería. Sirve igual en el móvil.
   ========================================================================== */
.print-doc { display: none; }

@media print {
  /* Nada de la web en papel. */
  .site-header, .site-footer, .grain, .aura, .pointer-light, .scroll-progress,
  .skip-link, .page-head, .calc-step, .calc-adv, .calc-cta, .calc-out > *:not(.print-doc),
  .beam { display: none !important; }

  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  main, .band, .shell { padding: 0 !important; margin: 0 !important; width: auto !important; border: 0 !important; }

  @page { margin: 17mm 16mm; }

  .print-doc {
    display: block !important;
    font-family: var(--f-display);
    color: #000;
  }

  /* Membrete */
  .pd-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1.5pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 16pt;
  }
  .pd-brand {
    margin: 0;
    font-family: var(--f-display);
    font-size: 12pt;
    font-weight: 300;
    letter-spacing: 0.44em;
    text-transform: uppercase;
  }
  .pd-meta { margin: 0; font-size: 8.5pt; color: #444; }

  .pd-title {
    margin: 0 0 3pt;
    font-size: 18pt;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .pd-sub { margin: 0 0 13pt; font-size: 9.5pt; color: #555; }

  /* La cifra que justifica el documento */
  .pd-big-label {
    margin: 0 0 2pt;
    font-family: var(--f-display);
    font-size: 8pt;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #555;
  }
  .pd-big {
    margin: 0 0 14pt;
    font-family: var(--f-data);
    font-size: 25pt;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .pd-h2 {
    margin: 0 0 6pt;
    font-family: var(--f-display);
    font-size: 7.5pt;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #555;
    border-bottom: 0.5pt solid #BBB;
    padding-bottom: 3pt;
  }

  .pd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 13pt;
  }
  .pd-table th,
  .pd-table td {
    text-align: left;
    padding: 2.9pt 0;
    border-bottom: 0.5pt solid #DDD;
    vertical-align: baseline;
  }
  .pd-table th { font-weight: 400; color: #333; width: 58%; }
  .pd-table td { font-family: var(--f-data); font-size: 9.5pt; text-align: right; }

  /* Cifras de partida en dos columnas: ocupan la mitad y se leen igual. */
  .pd-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22pt;
    margin: 0 0 13pt;
  }
  .pd-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10pt;
    padding: 2.9pt 0;
    border-bottom: 0.5pt solid #DDD;
  }
  .pd-facts dt { margin: 0; color: #333; }
  .pd-facts dd { margin: 0; font-family: var(--f-data); font-size: 9pt; white-space: nowrap; }

  /* Comparación de potencia: el argumento entero, en dos barras. */
  .pd-bars { margin: 2pt 0 14pt; }
  .pd-bar {
    display: grid;
    grid-template-columns: 78pt 1fr 58pt;
    align-items: center;
    gap: 10pt;
    margin-bottom: 5.5pt;
  }
  .pd-bar-l { font-size: 8.5pt; color: #333; }
  .pd-bar-t { display: block; height: 9pt; border: 0.5pt solid #999; }
  .pd-bar-t i {
    display: block;
    height: 100%;
    background: #DDD;
  }
  .pd-bar.is-new .pd-bar-t i { background: #000; }
  .pd-bar-v {
    font-family: var(--f-data);
    font-size: 9pt;
    text-align: right;
    white-space: nowrap;
  }

  .pd-note { margin: 0 0 11pt; font-size: 8.5pt; color: #333; max-width: 46em; }

  .pd-foot {
    border-top: 0.5pt solid #000;
    padding-top: 7pt;
    font-size: 8pt;
    color: #333;
  }
  .pd-foot p { margin: 0 0 6pt; }
  .pd-disc { color: #666; font-size: 7.5pt; }

  /* Que no se parta una tabla entre dos hojas. */
  .pd-table, .pd-foot { break-inside: avoid; }
  .pd-h2 { break-after: avoid; }
}

/* --- El paso previo a guardar el PDF -------------------------------------- */
.pdf-step {
  margin: 1.75rem 0 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--warm-lit);
  background: var(--ink-raised);
  max-width: 46rem;
}
.pdf-step-t { margin: 0 0 0.6rem; color: var(--text-dim); }
.pdf-step-b { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.6; max-width: 52ch; }
.pdf-step-b strong { font-weight: 500; color: var(--warm); }
.pdf-step-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pdf-step-never {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
  cursor: pointer;
}
.pdf-step-never input { accent-color: var(--text); width: 15px; height: 15px; cursor: pointer; }
@media print { .pdf-step { display: none !important; } }

/* --- Banda ancha de imagen ------------------------------------------------
   Una sola fotografía a todo el ancho del bloque, sin marco ni sombra. En un
   sitio de este tipo la imagen no ilustra el texto: lo interrumpe a propósito,
   para que la página respire entre dos secciones densas.
   -------------------------------------------------------------------------- */
.band-figure { margin: 0; }
.band-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}
.band-figure figcaption {
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Figura vertical dentro de una columna, como en Tecnología. */
.split-figure { margin: 0; }
.split-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}

/* --- Texto legal ----------------------------------------------------------
   Prosa larga que nadie lee por gusto: medida corta, interlínea generosa y
   epígrafes que permitan encontrar el apartado sin leer todo lo anterior.
   -------------------------------------------------------------------------- */
.legal { max-width: 68ch; }
.legal h2 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0;
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-size: 1rem; font-weight: 500; margin: 1.75rem 0 0.6rem; }
.legal p { margin: 0 0 1.1rem; }
.legal ul, .legal ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.55rem; }
.legal a { color: var(--warm); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--warm) 35%, transparent); }
.legal a:hover { border-bottom-color: var(--warm); }
.legal dl { margin: 0 0 1.5rem; border-top: 1px solid var(--line-soft); }
.legal dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .legal dl > div { grid-template-columns: 13rem 1fr; gap: 1.5rem; } }
.legal dt { color: var(--text-dim); font-size: 0.9375rem; }
.legal dd { margin: 0; }

/* Los datos que faltan por rellenar se ven a la legua, para que nadie
   publique un aviso legal con un hueco dentro. */
.pendiente {
  background: color-mix(in srgb, var(--warm-lit) 22%, transparent);
  border-bottom: 1px dashed var(--warm);
  padding: 0 0.25em;
  font-family: var(--f-data);
  font-size: 0.9em;
}

.legal-date { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 0.875rem; }

/* --- Página 404 ----------------------------------------------------------- */
.notfound { min-height: 58vh; display: flex; align-items: center; }
.notfound .code {
  font-family: var(--f-data);
  font-size: clamp(3.5rem, 12vw, 7rem);
  color: var(--warm);
  line-height: 1;
  margin: 0 0 1.5rem;
  font-variant-numeric: tabular-nums;
}

/* --- Formulario: cebo y avisos -------------------------------------------- */
/* El cebo se saca de la pantalla en lugar de ocultarlo con display:none,
   porque algunos robots detectan lo segundo y lo esquivan. */
.cebo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  border-left: 2px solid var(--line);
  background: var(--ink-raised);
}
.form-status.is-ok  { border-left-color: var(--warm-lit); }
.form-status.is-bad { border-left-color: #B3261E; }
.contact-form button[disabled] { opacity: 0.55; cursor: progress; }

/* ==========================================================================
   AJUSTES DE COLOCACIÓN Y RENDIMIENTO
   ========================================================================== */

/* --- La fila de cifras, centrada -----------------------------------------
   Al quedarse en tres y perder una de las etiquetas, la rejilla automática
   las estiraba y dejaba huecos desiguales. En flexbox centrado se leen como
   un grupo, que es lo que son.
   -------------------------------------------------------------------------- */
.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  border-top: 0;
}
.metric {
  flex: 0 1 auto;
  text-align: center;
  padding: 2.4rem clamp(1.5rem, 4vw, 3.5rem);
  border-right: 1px solid var(--line-soft);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.metric:last-child { border-right: 0; }
@media (max-width: 700px) {
  .metric {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding-block: 1.9rem;
  }
  .metric:last-child { border-bottom: 0; }
}

/* --- La rejilla de sectores, sin huecos grises ----------------------------
   Con columnas automáticas, seis tarjetas dejaban dos celdas vacías cuando
   cabían cuatro columnas, y el fondo de la rejilla se veía como un hueco gris.
   Dos o tres columnas siempre dividen a seis.
   -------------------------------------------------------------------------- */
.sectors { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sectors { grid-template-columns: repeat(3, 1fr); } }

/* --- La rejilla de sectores, con cualquier número de tarjetas --------------
   Antes el hueco gris venía del propio método: fondo gris y separaciones de
   un píxel, de modo que toda celda vacía se veía. Con filetes en cada tarjeta
   las celdas vacías simplemente no existen, y da igual que sean seis, siete
   o diez.
   -------------------------------------------------------------------------- */
.sectors {
  background: none;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.sectors > article {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ==========================================================================
   CABECERA: NOMBRE MÁS GRANDE Y MENÚ DE MÓVIL
   ========================================================================== */

/* El nombre crece con la pantalla. Las versales muy espaciadas piden tamaño:
   pequeñas se leen como un código, grandes se leen como un rótulo. */
.brand {
  font-size: clamp(0.875rem, 0.7rem + 0.75vw, 1.3rem);
  letter-spacing: 0.42em;
}
.site-header.is-scrolled .brand {
  font-size: clamp(0.8125rem, 0.68rem + 0.5vw, 1.05rem);
  letter-spacing: 0.38em;
}
.footer-top .brand { font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem); }

/* El panel se ancla a la cabecera. */
.site-header { position: sticky; }

/* --- El botón de tres rayas ------------------------------------------------ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: 0.25rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line-soft);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--text);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
/* Abierto, las tres rayas se convierten en un aspa. */
.site-header.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* La navegación deja de estar oculta y pasa a ser un panel desplegable. */
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 clamp(1.125rem, 4vw, 2rem);
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.32s var(--ease), visibility 0.32s;
  }
  .site-header.is-open .site-nav {
    max-height: 80vh;
    visibility: visible;
    overflow-y: auto;
    padding-block: 0.5rem 1.5rem;
  }
  .site-nav a {
    width: 100%;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
  }
  .site-nav a:last-of-type { border-bottom: 0; }

  /* Los idiomas, dentro del panel y con sitio para dedos. */
  .site-nav .lang-switcher {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
  }
  .site-nav .lang-btn {
    min-width: 44px;
    min-height: 40px;
    border: 1px solid var(--line-soft);
    font-size: 0.8125rem;
  }
  .site-nav .lang-btn[aria-pressed="true"] { border-color: var(--warm); }
}

/* Con movimiento reducido, el panel aparece sin animarse. */
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
  .nav-toggle-bar { transition: none; }
}