/* DOMHAUS Manufacturing — hoja única. Sin build, sin dependencias, sin JS.
   ───────────────────────────────────────────────────────────────────────────
   POR QUÉ ESTA PALETA Y NO LA DE byaccuor.com

   La primera versión era grafito oscuro, hermana de byaccuor.com. Emili la
   rechazó: «más potente, más vivo, energético, con vida — somos un entorno
   sostenible, pertenecemos a quienes defendemos la sostenibilidad».

   De ahí sale todo lo de abajo. Base clara —la luz es lo que da vida, un
   fondo oscuro la quita—, verde hoja y agua como colores de trabajo y no de
   adorno, tipografía pesada y apretada para la fuerza, y movimiento real pero
   contenido.

   Y una decisión que conviene entender: EL VERDE NO ES DECORACIÓN. La
   sostenibilidad de estos equipos es un hecho técnico documentado en
   tecnologia.html —cero litros al desagüe, cero electricidad en los equipos
   base, cero vertidos—, así que el color señala las cifras que lo demuestran.
   Si algún día esas cifras cambian, el verde sobra.

   Se abandona Instrument Serif a propósito: DOMHAUS habla con proveedores,
   bancos y marcas, no con quien compra un equipo. Manrope se queda, y es el
   único hilo tipográfico que la une al grupo.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* tierra y tinta */
  --tinta:#0A1A14;          /* negro con verde dentro, no gris */
  --tinta-2:#123024;
  --papel:#F6F8F4;
  --papel-2:#EDF2EA;
  --humo:#5E7268;

  /* los colores de trabajo */
  --hoja:#127A52;           /* verde hoja, el institucional */
  --brote:#3FD98B;          /* verde vivo, el acento que empuja */
  --agua:#1FB6C9;           /* cian de agua */
  --sol:#D8F26B;            /* lima, el chispazo */

  --borde:rgba(10,26,20,.12);
  --borde-claro:rgba(246,248,244,.18);

  --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --titulo:"Sora",var(--sans);
  --max:1280px;
  --lat:clamp(22px,6vw,88px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-weight:400;font-size:17.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.env{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--lat)}

/* ── tipografía ───────────────────────────────────────────────────────── */
h1,h2,h3,.cifra{font-family:var(--titulo);font-weight:700;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(40px,8.2vw,104px)}
h2{font-size:clamp(30px,5vw,60px);max-width:20em}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
em{font-style:normal;color:var(--brote)}
.claro em{color:var(--hoja)}

.rotulo{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.rotulo::before{
  content:"";width:26px;height:2px;background:currentColor;
  display:block;flex:none;
}

/* ── barra ────────────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(246,248,244,.86);border-bottom:1px solid var(--borde);
}
@supports (backdrop-filter:blur(16px)){.barra{-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}}
.barra .env{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.marca{font-family:var(--titulo);font-weight:800;font-size:16px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.marca i{
  width:13px;height:13px;flex:none;border-radius:50% 50% 50% 2px;
  background:linear-gradient(135deg,var(--brote),var(--hoja));
  transform:rotate(-12deg);
}
.marca span{font-weight:400;color:var(--humo)}
.barra nav{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--humo)}
.barra nav a{position:relative;transition:color .2s}
.barra nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:var(--hoja);transition:right .28s ease;
}
.barra nav a:hover{color:var(--tinta)}
.barra nav a:hover::after{right:0}
.idioma{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--humo)}
.idioma b{color:var(--hoja)}
@media(max-width:820px){.barra nav{display:none}}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.cabecera{position:relative;color:var(--papel);overflow:hidden;isolation:isolate}
.cabecera .fondo{position:absolute;inset:0;z-index:-2;background:var(--tinta)}
/* duotono: la foto entra solo como luminosidad sobre el degradado vivo */
.cabecera .fondo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:luminosity;opacity:.85;
}
.cabecera .fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,var(--tinta) 4%,var(--hoja) 38%,var(--agua) 68%,var(--brote) 100%);
  background-size:220% 220%;
  animation:corriente 22s ease-in-out infinite;
  mix-blend-mode:color;
}
@keyframes corriente{
  0%,100%{background-position:0% 40%}
  50%{background-position:100% 60%}
}
/* El velo existe para que el texto se lea SIEMPRE, no para oscurecer por
   gusto: la foto tiene una diagonal de luz que se cruza justo con el titular.
   Dos capas — una vertical para el conjunto y una desde la izquierda, que es
   donde vive el texto. */
.cabecera .velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(10,26,20,.78) 0%,rgba(10,26,20,.42) 46%,rgba(10,26,20,.12) 78%),
    linear-gradient(180deg,rgba(10,26,20,.55),rgba(10,26,20,.25) 45%,rgba(10,26,20,.72));
}
.cabecera .env{padding:clamp(64px,9vw,116px) var(--lat) clamp(48px,6vw,76px)}
/*
  ESTAS TRES REGLAS LLEVAN `.cabecera` DELANTE A PROPÓSITO.
  Sin él, `section > .env > p` y `section > .env > .rotulo` —que son más
  específicas— pintaban la entradilla y el rótulo de la cabecera en verde
  oscuro sobre el degradado, o sea ilegibles. Se vio en la primera captura.
*/
.cabecera .rotulo{color:var(--sol)}
.cabecera h1{margin-top:24px;max-width:15em;text-wrap:balance;text-shadow:0 2px 30px rgba(10,26,20,.45)}
.cabecera .entradilla{
  margin-top:26px;max-width:58ch;
  font-size:clamp(16.5px,1.4vw,20px);color:#E4EEE8;
  text-shadow:0 1px 16px rgba(10,26,20,.6);
}

/* ── las cifras, que son el argumento ─────────────────────────────────── */
.cifras{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--borde);
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.cifras div{background:var(--papel);padding:clamp(26px,3.4vw,40px) clamp(20px,2.4vw,32px)}
.cifra{
  display:block;font-size:clamp(44px,6vw,76px);font-weight:800;
  background:linear-gradient(120deg,var(--hoja),var(--brote) 62%,var(--agua));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cifras b{display:block;margin-top:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.cifras p{margin-top:7px;font-size:14px;color:var(--humo);line-height:1.5}

/* ── secciones ────────────────────────────────────────────────────────── */
section{padding:clamp(64px,9vw,128px) 0}
.claro{background:var(--papel)}
.hueso{background:var(--papel-2)}
.oscuro{background:var(--tinta);color:var(--papel)}

/*
  LA MISMA TRAMPA QUE EN LA CABECERA, Y POR ESO SE ESCRIBE ASÍ.
  `section > .env > p` de abajo pinta los párrafos en verde oscuro, que es lo
  correcto sobre papel y ILEGIBLE sobre tinta. Un `.oscuro p` a secas es menos
  específico y perdía, así que estas reglas repiten la forma completa del
  selector. Se vio en la segunda captura: dos secciones enteras con el texto
  casi invisible.
*/
.oscuro>.env>p:not(.rotulo):not(.entradilla){color:#C8D8CF}
.oscuro .tarjeta p{color:#BCCCC3}
.oscuro .tarjeta{background:rgba(246,248,244,.05);border-color:var(--borde-claro)}
.oscuro .lista li{border-color:var(--borde-claro)}
section h2{margin-top:22px;text-wrap:balance}
/*
  EL `:not()` ES LA CORRECCIÓN DE RAÍZ, NO UN ADORNO.

  Este selector empezó siendo `section > .env > p` a secas, y al ser más
  específico que `.rotulo` y `.entradilla` les pisaba el color Y el tamaño:
  los rótulos salían a 18 px en lugar de 11,5 y en verde oscuro sobre fondo
  oscuro. Lo cacé tres veces en tres sitios distintos y las dos primeras las
  parcheé una a una, que fue el error.

  Excluyendo aquí las dos clases, el problema deja de existir para siempre en
  vez de reaparecer en la próxima sección que se añada.
*/
section>.env>p:not(.rotulo):not(.entradilla){max-width:64ch;margin-top:22px;font-size:18px;color:#3B4F46}
section>.env>p:not(.rotulo):not(.entradilla)+p{margin-top:14px}
/*
  EL RÓTULO SE COLOREA POR FONDO, NO POR HERENCIA. Cuarta vez que la misma
  trampa de especificidad muerde: `section > .env > .rotulo` ganaba a
  `.oscuro .rotulo`, así que los rótulos de las secciones oscuras salían en
  verde hoja sobre tinta — 3,36 de contraste, por debajo del 4,5 que exige
  texto de 11,5 px. Nombrar el fondo en cada regla lo deja sin empate posible.
*/
.claro>.env>.rotulo,
.hueso>.env>.rotulo{color:var(--hoja)}
.oscuro>.env>.rotulo{color:var(--sol)}

.rejilla{display:grid;gap:clamp(16px,1.8vw,24px);margin-top:clamp(36px,4.6vw,60px)}
.dos{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.tres{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}

.tarjeta{
  position:relative;overflow:hidden;
  background:var(--papel);border:1px solid var(--borde);
  border-radius:3px;padding:clamp(26px,3vw,36px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.tarjeta::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brote),var(--agua));
  transform:scaleY(0);transform-origin:top;transition:transform .4s ease;
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:0 18px 44px -24px rgba(10,26,20,.4)}
.tarjeta:hover::before{transform:scaleY(1)}
.tarjeta p{margin-top:12px;font-size:16px;color:#46594F}
.oscuro .tarjeta p{color:#B9C9C0}
.num{
  font-family:var(--titulo);font-weight:800;font-size:12px;letter-spacing:.14em;
  color:var(--hoja);display:block;margin-bottom:16px;
}
.oscuro .num{color:var(--brote)}

/* fases del proceso, cada una con su color */
.fase-1{--tono:var(--agua);--tono-txt:#0B6A78}
.fase-2{--tono:var(--hoja);--tono-txt:#0E6242}
.fase-3{--tono:var(--brote);--tono-txt:#0F7A48}
.tarjeta[class*="fase-"]::before{background:var(--tono)}
.tarjeta[class*="fase-"] .num{color:var(--tono-txt)}

/* ── listas de hechos ─────────────────────────────────────────────────── */
.lista{list-style:none;margin-top:clamp(32px,4vw,52px)}
.lista li{
  display:flex;flex-wrap:wrap;gap:6px 32px;
  padding:20px 0;border-top:1px solid var(--borde);
}
.lista li:last-child{border-bottom:1px solid var(--borde)}
.lista b{font-family:var(--titulo);font-weight:700;font-size:15px;min-width:10em;letter-spacing:-.01em}
.lista span{flex:1;min-width:16em;font-size:16.5px;color:#46594F}
.oscuro .lista span{color:#B9C9C0}

/* ── marcas OEM ───────────────────────────────────────────────────────── */
.marcas{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;list-style:none}
.marcas li{
  font-family:var(--titulo);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  padding:10px 18px;border:1px solid var(--borde-claro);border-radius:100px;
}

/* ── identidad de la sociedad ─────────────────────────────────────────── */
.datos{
  list-style:none;margin-top:clamp(32px,4vw,52px);
  display:grid;gap:1px;background:var(--borde);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  border:1px solid var(--borde);border-radius:3px;overflow:hidden;
}
.datos li{background:var(--papel);padding:24px 26px}
.datos b{
  display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hoja);margin-bottom:9px;
}
.datos span{font-size:16.5px}

/* ── páginas legales ──────────────────────────────────────────────────── */
.doc{padding-top:clamp(56px,7vw,92px)}
.doc h2{font-size:clamp(30px,4.4vw,52px)}
.doc h3{margin-top:44px;font-size:21px;color:var(--hoja)}
.doc p,.doc li{max-width:68ch;margin-top:14px;color:#3B4F46}
.doc ul{margin-top:16px;padding-left:22px}
.doc li{margin-top:10px}
.fecha{margin-top:14px;font-size:14px;font-weight:600;color:var(--humo)}

/* ── pie ──────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#9FB3A9;padding:clamp(44px,5vw,64px) 0}
.pie .env{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;justify-content:space-between}
.pie nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14.5px}
.pie a:hover{color:var(--brote)}
.razon{font-size:14px;letter-spacing:.02em}
.pie .franja{
  height:4px;margin-bottom:clamp(36px,4.4vw,56px);
  background:linear-gradient(90deg,var(--hoja),var(--brote),var(--agua),var(--sol),var(--hoja));
  background-size:300% 100%;
  animation:corriente 16s linear infinite;
}

a.enlace{
  color:var(--hoja);font-weight:600;
  border-bottom:2px solid rgba(63,217,139,.45);transition:border-color .25s;
}
a.enlace:hover{border-color:var(--brote)}
.oscuro a.enlace,.pie a.enlace{color:var(--brote)}

/* ── movimiento ───────────────────────────────────────────────────────── */
/*
  ENTRADA AL CARGAR, Y NO AL HACER SCROLL. ESTO COSTÓ UNA VERSIÓN.

  La primera versión revelaba cada sección con `animation-timeline: view()`
  partiendo de `opacity: 0`. Se ve bonito cuando funciona y es una trampa:
  si la línea de tiempo del scroll no avanza —una captura de pantalla, una
  impresión, un navegador que no la implemente y no active el @supports a
  tiempo— el texto SE QUEDA INVISIBLE. Lo descubrió una captura de la página
  entera, donde salieron seis bloques de color vacíos.

  Nunca se revela texto con una animación que puede no terminar. Esta entrada
  es un `animation` normal de duración fija: empiece cuando empiece, acaba
  siempre, y el estado final es el contenido visible.

  El movimiento vivo de la página no depende de esto: está en el degradado de
  la cabecera, la franja del pie, el subrayado del menú y las tarjetas.
*/
.sube{animation:sube .75s cubic-bezier(.2,.7,.3,1) both}
@keyframes sube{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Y nada de esto si a alguien le molesta el movimiento. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .sube{opacity:1;transform:none}
}

@media print{
  .barra,.pie .franja{display:none}
  body{background:#fff;color:#000}
  .oscuro{background:#fff;color:#000}
}