/* GlassPilot · sitio público
   Misma familia y paleta que la aplicación (el verde del canto del vidrio float),
   llevada a la noche de una nave de proceso: el único color cálido es el del horno. */


:root {
  --noche: #0E3B33;      /* canto del float visto de frente */
  --noche-2: #0A2E28;
  --canto: #1D7A67;
  --menta: #8FD9C6;
  --cristal: #CFEBE3;
  --horno: #E8892B;
  --luz: #EDF2F0;
  --superficie: #FFFFFF;
  --tinta: #17302B;
  --tinta-suave: #51655F;
  --linea: #CCD9D5;
  --fabricable: #1D7A67;
  --revision: #9A5F0B;
  --rechazo: #B0362F;
  --sin-dato: #4A5A86;
  --foco: #2A6FDB;
  --gutter: clamp(16px, 5vw, 72px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--luz);
  color: var(--tinta);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.012em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: 8px 12px; z-index: 20; }
.saltar:focus { left: 8px; }

/* ------------------------------------------------------------ barra */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  background: rgba(10, 46, 40, 0.86);
  backdrop-filter: blur(10px);
  color: #EAF6F2;
  border-bottom: 1px solid rgba(207, 235, 227, 0.12);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 760; font-size: 1.25rem; font-stretch: 86%; }
.marca svg { width: 26px; height: 26px; }
.marca rect { fill: rgba(207, 235, 227, 0.22); stroke: var(--menta); stroke-width: 2.5; }
.marca path { stroke: var(--menta); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.barra nav { display: flex; gap: 22px; margin-left: auto; }
.barra nav a { text-decoration: none; color: #BFD8D1; font-size: 0.95rem; }
.barra nav a:hover { color: #FFFFFF; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 6px;
  text-decoration: none; font-weight: 650; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.boton-fuerte { background: var(--menta); color: var(--noche-2); }
.boton-fuerte:hover { background: #B4E8DA; }
.boton-linea { border: 1.5px solid rgba(207, 235, 227, 0.5); color: #EAF6F2; }
.boton-linea:hover { border-color: var(--menta); }
.boton-claro { border: 1.5px solid rgba(207, 235, 227, 0.4); color: #EAF6F2; min-height: 38px; padding: 0 16px; }
.boton-claro:hover { background: rgba(207, 235, 227, 0.1); }

/* ------------------------------------------------------------ escena */
.escena {
  position: relative;
  color: #EAF6F2;
  background:
    linear-gradient(rgba(207, 235, 227, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(207, 235, 227, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, var(--noche-2), var(--noche) 70%);
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(48px, 6vw, 88px);
  overflow: hidden;
}
.escena-in {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.para { color: var(--menta); font-size: 1rem; font-weight: 600; margin-bottom: 18px; }
.escena h1 {
  font-size: clamp(2.7rem, 5.6vw, 5.4rem);
  font-stretch: 66%;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
  max-width: 14ch;
  text-wrap: balance;
}
.bajada { margin-top: 24px; max-width: 54ch; font-size: clamp(1.06rem, 1.6vw, 1.25rem); color: #C3DCD5; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.linea { min-width: 0; }

/* ------------------------------------------------------------ vidrio 3D */
.vidrio { position: relative; margin: 0; min-width: 0; aspect-ratio: 1 / 0.92; background: radial-gradient(closest-side, rgba(143, 217, 198, 0.16), transparent 72%); }
.vidrio canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.vidrio-respaldo { position: absolute; inset: 8% 10%; width: 80%; height: 84%; }
.vidrio-respaldo rect { fill: rgba(207, 235, 227, 0.08); stroke: var(--menta); stroke-width: 1.6; }
.vidrio-respaldo rect.alu { fill: none; stroke: #B7C2C0; stroke-dasharray: 4 4; }
.vidrio.vivo .vidrio-respaldo { display: none; }
.vidrio-capas {
  position: absolute; left: 0; right: 0; bottom: 2%;
  display: flex; justify-content: center; gap: clamp(14px, 3vw, 36px);
  font-size: .92rem; font-stretch: 82%; color: #9FC4BA; letter-spacing: .02em;
}
.vidrio-capas span { transition: color .5s, opacity .5s; opacity: .55; }
.vidrio-capas.abierto span { opacity: 1; color: var(--menta); }

/* ------------------------------------------------------------ la línea */
.linea-seccion { background: var(--noche); color: #EAF6F2; padding: 0 var(--gutter) clamp(56px, 7vw, 96px); border-top: 1px solid rgba(207, 235, 227, 0.1); }
.linea-in { max-width: 1176px; margin: 0 auto; padding-top: clamp(48px, 6vw, 80px); }
.linea-seccion h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-stretch: 74%; font-weight: 760; margin-bottom: clamp(24px, 4vw, 40px); }
.linea-svg { display: block; width: 100%; height: auto; overflow: visible; }
.estacion rect:first-child { fill: rgba(207, 235, 227, 0.035); stroke: rgba(207, 235, 227, 0.28); stroke-width: 1.5; stroke-dasharray: 6 5; }
.estacion text, .control text, .cota text { fill: #BFD8D1; font-family: "Archivo", sans-serif; font-size: 15px; font-stretch: 80%; letter-spacing: .02em; }
.estacion text { text-anchor: middle; font-weight: 650; font-size: 23px; fill: #DCEFEA; }
.maquina * { fill: none; stroke: rgba(207, 235, 227, 0.42); stroke-width: 1.6; }
.maquina .traza { stroke-dasharray: 3 4; }
.resistencia path { stroke: rgba(242, 165, 74, 0.55); stroke-linejoin: round; }
.horno .calor { fill: url(#g-horno); stroke: none; opacity: 0; }
#p-rodillos circle { fill: rgba(207, 235, 227, 0.32); }
.riel { stroke: rgba(207, 235, 227, 0.35); stroke-width: 2; }
.hoja-cuerpo { stroke: var(--cristal); stroke-width: 2.5; }
.hoja-brillo { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; stroke-linecap: round; fill: none; }
.cota line { stroke: var(--menta); stroke-width: 1.2; }
.cota text { text-anchor: middle; font-size: 17px; fill: var(--menta); }
.control circle { fill: none; stroke: var(--menta); stroke-width: 1.8; }
.control path { fill: none; stroke: var(--menta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.control text { font-size: 19px; fill: #DCEFEA; }

/* La línea: 12 s por vuelta. La hoja se detiene en cada estación, la estación se
   enciende mientras trabaja y debajo queda el control que se pasó. */
@media (prefers-reduced-motion: no-preference) {
  .hoja { animation: recorrido 12s cubic-bezier(.55, 0, .35, 1) infinite; }
  .hoja-cuerpo { animation: temple 12s linear infinite; }
  .estacion[data-n="1"] rect:first-child { animation: trabaja1 12s linear infinite; }
  .estacion[data-n="2"] rect:first-child { animation: trabaja2 12s linear infinite; }
  .estacion[data-n="3"] rect:first-child { animation: trabaja3 12s linear infinite; }
  .estacion[data-n="4"] rect:first-child { animation: trabaja4 12s linear infinite; }
  .horno .calor { animation: calor 12s linear infinite; }
  .control { opacity: 0; }
  .control[data-n="1"] { animation: control1 12s linear infinite; }
  .control[data-n="2"] { animation: control2 12s linear infinite; }
  .control[data-n="3"] { animation: control3 12s linear infinite; }
  .control[data-n="4"] { animation: control4 12s linear infinite; }
}

@keyframes recorrido {
  0%   { transform: translateX(-140px); opacity: 0; }
  3%   { opacity: 1; }
  8%, 20%  { transform: translateX(65px); }
  28%, 42% { transform: translateX(295px); }
  50%, 66% { transform: translateX(535px); }
  74%, 88% { transform: translateX(775px); opacity: 1; }
  97%  { transform: translateX(1000px); opacity: 0; }
  100% { transform: translateX(1000px); opacity: 0; }
}
@keyframes temple {
  0%, 52%  { fill: url(#g-vidrio); stroke: var(--cristal); }
  58%, 62% { stroke: #F2A54A; }
  70%, 100% { stroke: var(--cristal); }
}
@keyframes calor { 0%, 48% { opacity: 0; } 54%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes trabaja1 { 0%, 7% { stroke: rgba(207,235,227,.28); } 9%, 19% { stroke: var(--menta); stroke-dasharray: 0; } 22%, 100% { stroke: rgba(207,235,227,.28); } }
@keyframes trabaja2 { 0%, 27% { stroke: rgba(207,235,227,.28); } 29%, 41% { stroke: var(--menta); stroke-dasharray: 0; } 44%, 100% { stroke: rgba(207,235,227,.28); } }
@keyframes trabaja3 { 0%, 49% { stroke: rgba(207,235,227,.28); } 51%, 65% { stroke: var(--horno); stroke-dasharray: 0; } 68%, 100% { stroke: rgba(207,235,227,.28); } }
@keyframes trabaja4 { 0%, 73% { stroke: rgba(207,235,227,.28); } 75%, 87% { stroke: var(--menta); stroke-dasharray: 0; } 90%, 100% { stroke: rgba(207,235,227,.28); } }
@keyframes control1 { 0%, 14% { opacity: 0; } 17%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes control2 { 0%, 36% { opacity: 0; } 39%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes control3 { 0%, 60% { opacity: 0; } 63%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes control4 { 0%, 82% { opacity: 0; } 85%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hoja { transform: translateX(535px); }
  .horno .calor { opacity: .8; }
}

/* ------------------------------------------------------------ validación */
.validacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  max-width: 1320px; margin: 0 auto;
}
.validacion h2, .frenos h2, .modulos h2, .planta h2, .cierre h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-stretch: 72%;
  font-weight: 780;
  line-height: 1.02;
  max-width: 20ch;
}
.validacion-texto p { margin-top: 20px; max-width: 52ch; color: var(--tinta-suave); }
.estados { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.estados li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.estados b { font-weight: 680; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.punto.fabricable { background: var(--fabricable); }
.punto.revision { background: var(--revision); }
.punto.rechazo { background: var(--rechazo); }
.punto.sindato { background: var(--sin-dato); }

.pedido {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(23, 48, 43, .04), 0 24px 48px -28px rgba(14, 59, 51, .45);
  padding: 24px clamp(18px, 3vw, 32px) 26px;
  min-height: 430px;
  display: flex; flex-direction: column;
}
.pedido-cabeza { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--linea); padding-bottom: 12px; }
.pedido-rotulo { color: var(--tinta-suave); font-size: .9rem; }
.pedido-num { font-weight: 700; font-stretch: 80%; font-size: 1.1rem; }
.pedido-texto { margin-top: 16px; font-size: 1.2rem; font-weight: 600; min-height: 3.2em; }
.pedido-texto .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--canto); vertical-align: -0.15em; margin-left: 2px; }
.pedido-checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.pedido-checks li {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
  font-size: .98rem; line-height: 1.4;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.pedido-checks li.visto { opacity: 1; transform: none; }
.pedido-checks .icono { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; margin-top: 1px; }
.icono.ok { background: var(--fabricable); }
.icono.ojo { background: var(--revision); }
.icono.no { background: var(--rechazo); }
.pedido-checks small { display: block; color: var(--tinta-suave); font-size: .82rem; }
.pedido-veredicto {
  margin-top: 18px; padding: 12px 16px; border-radius: 6px;
  font-weight: 780; font-stretch: 78%; font-size: 1.35rem; letter-spacing: .01em;
  background: var(--luz); color: var(--tinta-suave);
  transition: background-color .3s, color .3s;
}
.pedido-veredicto small { display: block; font-weight: 500; font-stretch: 100%; font-size: .9rem; margin-top: 2px; }
.pedido-veredicto.fabricable { background: #DDF1EA; color: var(--fabricable); }
.pedido-veredicto.revision { background: #F7EBD6; color: var(--revision); }
.pedido-veredicto.rechazo { background: #F6DEDB; color: var(--rechazo); }

/* ------------------------------------------------------------ frenos */
.frenos { padding: 0 var(--gutter) clamp(64px, 9vw, 120px); max-width: 1320px; margin: 0 auto; }
.frenos-filas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 2px solid var(--tinta); }
.frenos article { padding: 24px 28px 0 0; }
.frenos article + article { padding-left: 28px; border-left: 1px solid var(--linea); }
.frenos h3 { font-size: 1.3rem; font-stretch: 84%; }
.frenos p { margin-top: 10px; color: var(--tinta-suave); max-width: 40ch; }

/* ------------------------------------------------------------ oferta */
.oferta { background: var(--superficie); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 120px) var(--gutter); }
.oferta-in, .instalacion-in, .proximo-in, .arranque-in { max-width: 1176px; margin: 0 auto; }
.oferta h2, .instalacion h2, .proximo h2, .arranque h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-stretch: 72%; font-weight: 780; line-height: 1.02; }
.oferta-bajada { margin-top: 18px; max-width: 60ch; color: var(--tinta-suave); font-size: 1.1rem; }
.capa { display: grid; grid-template-columns: minmax(160px, 0.55fr) minmax(0, 2fr); gap: 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 2px solid var(--tinta); }
.capa h3 { font-size: 1.5rem; font-stretch: 76%; font-weight: 780; color: var(--canto); }
.capa dl { margin: 0; display: grid; }
.capa dl > div { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.6fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--linea); }
.capa dl > div:first-child { border-top: 0; padding-top: 0; }
.capa dt { font-weight: 700; font-size: 1.08rem; }
.capa dd { margin: 0; color: var(--tinta-suave); max-width: 64ch; }

/* ------------------------------------------------------------ instalación */
.instalacion { padding: clamp(64px, 9vw, 112px) var(--gutter) 0; }
.modos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--tinta); }
.modos li { padding: 20px 22px 0 0; display: grid; gap: 8px; align-content: start; }
.modos li + li { padding-left: 22px; border-left: 1px solid var(--linea); }
.modos b { font-size: 1.15rem; font-stretch: 84%; }
.modos span { color: var(--tinta-suave); }

/* ------------------------------------------------------------ en desarrollo */
.proximo { padding: clamp(56px, 7vw, 88px) var(--gutter) 0; }
.proximo-in { border-left: 3px solid var(--revision); padding-left: 24px; }
.proximo h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.proximo p { margin-top: 12px; max-width: 66ch; color: var(--tinta-suave); }

/* ------------------------------------------------------------ cómo empezamos */
.arranque { padding: clamp(64px, 9vw, 112px) var(--gutter); }
.pasos { list-style: none; padding: 0; margin: 36px 0 0; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pasos li { counter-increment: paso; display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--tinta); }
.pasos li::before { content: counter(paso); font-weight: 800; font-stretch: 70%; font-size: 2.6rem; line-height: 1; color: var(--canto); }
.pasos b { font-size: 1.2rem; font-stretch: 84%; }
.pasos span { color: var(--tinta-suave); }
.arranque-nota { margin-top: 40px; max-width: 62ch; font-size: 1.1rem; }

/* ------------------------------------------------------------ preguntas */
.preguntas { padding: 0 var(--gutter) clamp(64px, 9vw, 112px); }
.preguntas-in { max-width: 860px; margin: 0 auto 0 max(0px, calc((100% - 1176px) / 2)); }
.preguntas h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-stretch: 74%; font-weight: 780; margin-bottom: 20px; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 650; font-size: 1.08rem; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.5rem; color: var(--canto); transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 18px; color: var(--tinta-suave); max-width: 66ch; }

/* ------------------------------------------------------------ cierre */
.cierre { background: var(--noche); color: #EAF6F2; padding: clamp(64px, 9vw, 112px) var(--gutter); }
.cierre-in { max-width: 1176px; margin: 0 auto; }
.cierre h2 { max-width: none; }
.cierre p { margin-top: 16px; margin-bottom: 28px; color: #C3DCD5; max-width: 52ch; }

.pie { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 24px var(--gutter); background: var(--noche-2); color: #9FBDB5; font-size: .92rem; }
.pie a { color: #CFE8E1; }
.pie span { margin-right: auto; }

/* ------------------------------------------------------------ angosto */
@media (max-width: 1100px) {
  .escena-in { grid-template-columns: 1fr; }
  .linea { margin-top: 24px; }
}
@media (max-width: 900px) {
  .capa, .capa dl > div { grid-template-columns: 1fr; gap: 6px; }
  .modos { grid-template-columns: 1fr 1fr; }
  .modos li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pasos { grid-template-columns: 1fr; }
  .validacion { grid-template-columns: 1fr; }
  .frenos-filas { grid-template-columns: 1fr; }
  .frenos article, .frenos article + article { padding: 22px 0 0; border-left: 0; }
  .frenos article + article { border-top: 1px solid var(--linea); margin-top: 22px; }
  .modulos-lista > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .barra nav { display: none; }
  .barra .boton-claro { margin-left: auto; }
  .estacion text { font-size: 22px; }
  .control text { display: none; }
  .pedido { min-height: 470px; }
  .modos { grid-template-columns: 1fr; }
  .modos li, .modos li + li { padding: 18px 0 0; border-left: 0; }
  .vidrio-capas { font-size: .82rem; }
}