/* CHC INTEGRA — hoja de estilos
   ──────────────────────────────────────────────────────────────────────────────────────
   El sistema sale del manual de marca v1.5: una tinta en tres valores, naranja solo de
   sistema, Bitter para la marca y los titulares, IBM Plex Sans para leer.

   El sitio va sobre TINTA porque el isotipo en 3D vive en un lienzo fijo detrás de todo el
   documento: sobre papel, el objeto quedaría flotando en una caja blanca. Es la misma
   arquitectura de las dos referencias de la casa (R8 y la plantilla «Producto 360»).

   Las reglas de contraste del manual se cumplen aquí: nada de texto claro sobre naranja
   (5,8:1 con tinta encima; 2,5:1 con papel), y nada de texto sobre el azul claro. */

@font-face {
  font-family: 'Bitter';
  src: url('../medios/fuentes/bitter.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('../medios/fuentes/plex.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-display: swap;
}

:root {
  --tinta:  #0B1F3A;
  --acero:  #4E6E96;
  --claro:  #9DB4CF;
  --papel:  #F3F1EC;
  --naranja:#FF6B35;

  /* Sobre fondo oscuro el texto secundario no puede ser el gris del papel: se calcula
     desde el papel para conservar 4,5:1 largos. */
  --suave:  rgba(243, 241, 236, .72);
  --tenue:  rgba(243, 241, 236, .46);
  --filete: rgba(157, 180, 207, .26);
  --panel:  rgba(8, 24, 44, .78);

  --marca: 'Bitter', Georgia, serif;
  --texto: 'Plex', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margen: clamp(20px, 5vw, 88px);
  --ancho: 1240px;
  --ritmo: clamp(88px, 12vw, 176px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--texto);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--marca); font-weight: 700; line-height: 1.08; margin: 0; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--papel); color: var(--tinta); padding: 12px 20px; text-decoration: none;
}
.saltar:focus { left: 0; }

/* ---------- el lienzo 3D y el contenido encima ---------- */
#lienzo3d {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;   /* el objeto no roba ni un clic ni un gesto de scroll */
}
.velo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(100deg,
    rgba(11, 31, 58, 0) 0%, rgba(11, 31, 58, .30) 26%,
    rgba(11, 31, 58, .80) 52%, rgba(11, 31, 58, .90) 100%);
}
body.escena-suelo .velo { opacity: 1; }
.cabecera, main, .pie, .progreso { position: relative; z-index: 1; }

/* ---------- barra de avance ---------- */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: rgba(157, 180, 207, .16);
}
.progreso span {
  display: block; height: 100%; width: 0;
  background: var(--naranja);
  transform-origin: left;
}

/* ---------- textos reutilizables ---------- */
.rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--claro); margin-bottom: 18px;
}
.titulo { font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -.01em; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  background: var(--naranja); color: var(--tinta);
  font-family: var(--marca); font-weight: 700; font-size: 16px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.boton:hover { background: #FF8154; transform: translateY(-2px); }
.boton-menor { min-height: 44px; padding: 0 20px; font-size: 14px; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.enlace-flecha::after { content: '↓'; transition: transform .25s ease; }
.enlace-flecha:hover::after { transform: translateY(3px); }
.enlace-flecha:hover { border-bottom-color: currentColor; }

/* ---------- cabecera ---------- */
.cabecera {
  position: fixed; inset: 2px 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--margen);
  background: color-mix(in srgb, var(--tinta) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transform: translateY(-115%);
  transition: transform .35s ease, border-color .35s ease;
}
.cabecera.visible { transform: none; border-bottom-color: var(--filete); }
.cabecera-marca img { height: 34px; width: auto; }
.cabecera-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.cabecera-nav a { text-decoration: none; font-size: 15px; font-weight: 500; }
.cabecera-nav a:not(.boton):hover { color: var(--naranja); }

/* ---------- portada ---------- */
.portada {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: 120px var(--margen) 90px;
  overflow: hidden;
}
.portada-fondo {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(78, 110, 150, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 110, 150, .22) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 18%, transparent 76%);
}
.portada-caja { position: relative; width: 100%; max-width: 980px; text-align: center; }

/* El símbolo plano de la portada es el respaldo: cuando el 3D arranca, sobra —
   estaríamos enseñando el mismo símbolo dos veces, uno encima del otro. */
.portada-simbolo { display: grid; place-items: center; margin-bottom: clamp(26px, 4vw, 46px); }
.con-3d .portada-simbolo { visibility: hidden; height: clamp(120px, 17vw, 210px); }
.iso { width: clamp(108px, 14vw, 178px); height: auto; }
.iso .pieza-base { fill: var(--papel); }
.iso .pieza-izq  { fill: var(--claro); }
.iso .pieza-der  { fill: var(--acero); }

.pieza { transform-box: fill-box; transform-origin: center; }
.portada .pieza { animation: armar .9s cubic-bezier(.2,.75,.25,1) both; }
.portada .pieza-base { animation-delay: .05s; --dx: 0;     --dy: 46px; }
.portada .pieza-izq  { animation-delay: .19s; --dx: -38px; --dy: -22px; }
.portada .pieza-der  { animation-delay: .33s; --dx: 38px;  --dy: -22px; }
@keyframes armar {
  from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 40px)) scale(.86); }
  to   { opacity: 1; transform: none; }
}

.portada h1 {
  font-size: clamp(38px, 6.4vw, 82px); letter-spacing: -.015em;
  margin-bottom: clamp(18px, 2.5vw, 28px);
  text-shadow: 0 2px 40px rgba(6, 18, 34, .55);   /* el titular manda sobre el objeto, no al revés */
}
.portada h1 em { font-style: normal; color: var(--claro); }
.entrada {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55;
  max-width: 62ch; margin-inline: auto; color: var(--suave);
}
.portada-acciones {
  display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}
.portada-pie {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tenue);
}
.portada-pie span { display: block; animation: respirar 2.4s ease-in-out infinite; }
@keyframes respirar { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } }

/* ---------- por qué integral ---------- */
/* La seccion «por que integral» es CORTA de texto pero LARGA de scroll: dentro de ella
   caben cuatro beats del guion —apertura, cierre, silencio y el golpe— y cada uno necesita
   recorrido de rueda para existir. Con la altura natural (290 px) los cuatro pasaban en
   medio gesto. El texto se queda pegado en el centro mientras el 3D hace su trabajo. */
.integral { min-height: 150vh; display: flex; align-items: flex-start; }   /* 240vh hacia esperar demasiado al castor */
.integral > .contenedor {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  /* Sin animacion, ese recorrido vacio no compra nada y solo obliga a rodar de mas. */
  .integral { min-height: 0; }
  .integral > .contenedor { position: static; min-height: 0; padding: var(--ritmo) 0; }
}
.declaracion {
  font-family: var(--marca); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -.01em;
  max-width: 20ch;
  text-shadow: 0 2px 30px rgba(6, 18, 34, .5);
}
.declaracion em { font-style: normal; color: var(--naranja); }
.declaracion-2 { margin-top: .5em; margin-left: auto; text-align: right; }

/* ---------- las tres líneas ---------- */
.lineas { padding: var(--ritmo) 0; }
.lineas-rejilla {
  width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen);
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 88px); align-items: start;
}
.lineas-fija { position: sticky; top: 118px; }
.lineas-simbolo { display: grid; place-items: center; padding: 10px 0 26px; }
.iso-grande { width: clamp(150px, 18vw, 240px); }
/* Con el 3D encendido, el que marca la línea activa es el objeto; el SVG sobra. */
.con-3d .lineas-simbolo { display: none; }

.lineas .pieza { transition: fill .45s ease, opacity .45s ease, transform .45s ease; opacity: .22; }
.lineas .pieza-base { fill: var(--papel); }
.lineas .pieza-izq  { fill: var(--claro); }
.lineas .pieza-der  { fill: var(--acero); }
.lineas[data-activa="base"] .pieza-base,
.lineas[data-activa="izq"]  .pieza-izq,
.lineas[data-activa="der"]  .pieza-der { opacity: 1; transform: scale(1.04); }

.lineas-nota { font-size: 13.5px; line-height: 1.5; color: var(--tenue); max-width: 30ch; }

.lineas-lista { list-style: none; margin: 0; padding: 0; }
.linea {
  padding: clamp(40px, 7vw, 86px) 0;
  border-top: 1px solid var(--filete);
  opacity: .38; transition: opacity .45s ease;
}
.linea:first-child { border-top: 0; padding-top: 0; }
.linea.activa { opacity: 1; }
.linea-num {
  font-family: var(--marca); font-weight: 800; font-size: 14px;
  color: var(--naranja); letter-spacing: .08em; margin-bottom: 12px;
}
.linea h2 { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.01em; margin-bottom: 14px; }
.linea-entrada { font-size: clamp(17px, 1.4vw, 20px); color: var(--claro); max-width: 46ch; margin-bottom: 26px; }
.linea-detalle { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.linea-detalle li {
  padding-left: 26px; position: relative; font-size: 15.5px; line-height: 1.55;
  color: var(--suave); max-width: 62ch;
}
.linea-detalle li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 9px; background: var(--naranja);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.linea-detalle b { color: var(--papel); font-weight: 600; }

/* ---------- para quién ---------- */
/* A partir de aquí el contenido se apoya en un panel: el objeto 3D sigue detrás, pero el
   texto largo necesita un fondo propio para no pelearse con él. */
.sectores, .contacto {
  padding: var(--ritmo) 0;
  background: var(--panel);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--filete);
}
.sectores-lista {
  list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--filete);
}
.sectores-lista li {
  font-family: var(--marca); font-weight: 700; font-size: clamp(19px, 1.9vw, 25px);
  padding: 26px 8px 26px 0; border-bottom: 1px solid var(--filete);
}
.sectores-pie { margin-top: 34px; color: var(--claro); max-width: 56ch; }

/* ---------- contacto ---------- */
.contacto-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 6vw, 84px); align-items: start;
}
.contacto-texto { color: var(--suave); max-width: 42ch; margin-top: 20px; }
.contacto-datos { margin: 36px 0 0; display: grid; }
.contacto-datos > div {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--filete);
}
.contacto-datos dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.contacto-datos dd { margin: 0; font-weight: 500; }
.contacto-datos a { text-decoration: none; border-bottom: 1px solid var(--acero); }
.contacto-datos a:hover { border-bottom-color: var(--naranja); }

.formulario {
  display: grid; gap: 18px;
  background: rgba(243, 241, 236, .04);
  border: 1px solid var(--filete);
  padding: clamp(24px, 3vw, 38px);
}
.campo { display: grid; gap: 7px; }
.campo label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--claro); }
.campo input, .campo select, .campo textarea {
  font-family: var(--texto); font-size: 16px; color: var(--papel);
  background: rgba(6, 18, 34, .55); border: 1px solid var(--filete); border-radius: 0;
  padding: 13px 14px; min-height: 48px; width: 100%;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo select option { color: var(--tinta); }
.formulario .boton { width: 100%; margin-top: 4px; }
.formulario-aviso { font-size: 14px; min-height: 1.4em; color: var(--tenue); }
.formulario-aviso[data-estado="error"] { color: #FF9A86; }
.formulario-aviso[data-estado="ok"] { color: #8FE3B4; }

/* ---------- pie ---------- */
.pie { background: #061222; padding: clamp(46px, 6vw, 76px) 0 40px; border-top: 1px solid var(--filete); }
.pie-rejilla { display: grid; gap: 22px; justify-items: start; }
.pie-marca { height: 46px; width: auto; }
.pie-lineas {
  font-family: var(--marca); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--claro);
}
.pie-legal { font-size: 13px; color: var(--tenue); }

/* ---------- revelado al entrar en pantalla ---------- */
.rev { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rev.dentro { opacity: 1; transform: none; }
.rev:nth-child(2) { transition-delay: .06s; }
.rev:nth-child(3) { transition-delay: .12s; }
.rev:nth-child(4) { transition-delay: .18s; }
.rev:nth-child(5) { transition-delay: .24s; }
.rev:nth-child(6) { transition-delay: .3s; }

/* ---------- móvil ---------- */
@media (max-width: 900px) {
  .cabecera-nav a:not(.boton) { display: none; }
  .lineas-rejilla { grid-template-columns: 1fr; }
  .lineas-fija {
    position: sticky; top: 60px; z-index: 5;
    display: flex; align-items: center; gap: 16px;
    background: color-mix(in srgb, var(--tinta) 90%, transparent);
    backdrop-filter: blur(8px); padding: 12px 0; margin-bottom: 8px;
  }
  .lineas-simbolo { padding: 0; }
  .iso-grande { width: 58px; }
  .lineas-nota { font-size: 12.5px; max-width: none; }
  .declaracion-2 { text-align: left; margin-left: 0; }
  .contacto-datos > div { grid-template-columns: 1fr; gap: 4px; }
  /* En móvil manda el texto: el objeto baja a fondo atmosférico. A .5 todavía se cruzaba con
     los párrafos de las tres líneas y costaba leer. */
  #lienzo3d { opacity: .3; }
}

/* ---------- quien pide menos movimiento, lo recibe ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rev { opacity: 1; transform: none; }
  .linea { opacity: 1; }
  .lineas .pieza { opacity: 1; }
  .cabecera { transform: none; border-bottom-color: var(--filete); }
}


/* ---------- composicion de las tres lineas (2026-09-22) ----------
   La columna fija con el simbolo plano se quita: el simbolo ya esta en 3D, y dos simbolos
   a la vez confunden cual es la marca. Cada linea es una PANTALLA: numeral grande, titulo
   que entra palabra a palabra con el scroll, detalle escalonado. 01 y 03 a la derecha, 02 a
   la IZQUIERDA (la camara del 3D se espeja para ese tramo): el ojo cambia de lado y la
   pagina deja de leerse como una columna puesta por poner. */
.lineas-rejilla--libre { display: block; }
.lineas-rejilla--libre .lineas-fija { display: none; }
.lineas-rejilla--libre .linea {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 12vh 0; opacity: 1;
}
/* alineacion por flex, no por margen: un bloque de ancho completo ignora `margin-left:auto`
   y el titulo se quedaba pegado a la izquierda mientras el detalle iba a la derecha */
/* Todo a la derecha, medido: con cada linea a 100vh los textos de dos pilares coinciden
   ~600 px en cada cambio, y poner 02 a la izquierda dejaba al castor oculto 1200 px. La
   variedad la ponen el numeral y el titulo que entran palabra a palabra, no el lado. */
.lineas-rejilla--libre .linea { align-items: flex-end; }
.lineas-rejilla--libre .linea > * { width: fit-content; max-width: min(46ch, 680px, 100%); margin: 0; }
.lineas-rejilla--libre .linea h2, .lineas-rejilla--libre .linea .linea-num { text-align: right; }
.lineas-rejilla--libre .linea-num {
  font-family: var(--marca); font-weight: 800; font-size: clamp(64px, 9vw, 132px);
  line-height: .9; color: var(--naranja); opacity: .92; margin: 0 0 6px; letter-spacing: -.03em;
}
.lineas-rejilla--libre .linea h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; margin-bottom: 18px; }
/* titulo palabra a palabra: guion.js envuelve cada palabra en <span class="pal"> */
.linea h2 .pal { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(1.5deg);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.linea.dentro h2 .pal { opacity: 1; transform: none; }
.linea .linea-num, .linea .linea-entrada, .linea .linea-detalle li {
  opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.linea.dentro .linea-num, .linea.dentro .linea-entrada, .linea.dentro .linea-detalle li { opacity: 1; transform: none; }
.linea.dentro .linea-entrada { transition-delay: .35s; }
.linea.dentro .linea-detalle li:nth-child(1) { transition-delay: .45s; }
.linea.dentro .linea-detalle li:nth-child(2) { transition-delay: .55s; }
.linea.dentro .linea-detalle li:nth-child(3) { transition-delay: .65s; }
.linea.dentro .linea-detalle li:nth-child(4) { transition-delay: .75s; }
.linea.dentro .linea-detalle li:nth-child(5) { transition-delay: .85s; }
/* el velo tambien cambia de lado con el texto */
body.escena-suelo.texto-izq .velo { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .linea h2 .pal, .linea .linea-num, .linea .linea-entrada, .linea .linea-detalle li { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 760px) {
  .lineas-rejilla--libre .linea { align-items: flex-start; }
  .lineas-rejilla--libre .linea > * { max-width: 100%; }
  .lineas-rejilla--libre .linea h2, .lineas-rejilla--libre .linea .linea-num { text-align: left; }
  .velo { background: linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,.35) 30%, rgba(11,31,58,.82) 55%, rgba(11,31,58,.92) 100%); }
  .lineas-rejilla--libre .linea { min-height: 0; padding: 10vh 0; }
}

/* «Por que integral»: el isotipo 3D va a la IZQUIERDA y la copia a la DERECHA (antes el
   simbolo quedaba debajo del texto). La segunda declaracion ya iba a la derecha. */
.integral .rotulo, .integral .declaracion { margin-left: auto; width: min(20ch, 100%); }
.integral .declaracion-2 { text-align: right; }
@media (max-width: 760px) { .integral .rotulo, .integral .declaracion { margin-left: 0; width: 100%; } }