/* contact-hud.css — "canal directo." Overlay tipo HUD analógico de espacio que
   sustituye a la sección de contacto SÓLO cuando llegas por un CTA/botón (nav,
   dropdown, asteroide, hero). La sección normal queda intacta para scroll natural.
   Estética: consola de fósforo (verde), brackets industriales, scanlines CRT,
   rejilla de puntos — coherente con la galaxia. El botón de envío queda sienna
   (CTA de la casa). Siempre oscuro. */

.chud {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background:
    radial-gradient(120% 95% at 50% 28%, rgba(8,8,10,.85) 0%, rgba(5,5,6,.95) 70%, rgba(3,3,4,.97) 100%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none;
  transition: opacity .32s var(--ease-out, ease);
}
.chud.on { opacity: 1; pointer-events: auto; }
/* scanlines + flicker CRT sobre TODO el overlay */
.chud::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 2px 3px);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .chud.on::after { animation: chudFlicker 3.6s steps(60) infinite; }
}
@keyframes chudFlicker { 0%,100% { opacity:.55; } 47% { opacity:.5; } 50% { opacity:.66; } 53% { opacity:.52; } }

/* ── el "aparato" ──────────────────────────────────────────────────────── */
.chud-frame {
  --hud: var(--cat-verde, #618E48);
  position: relative; z-index: 2;
  width: min(540px, 94vw); max-height: 90vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(140% 95% at 50% -8%, color-mix(in srgb, var(--hud) 32%, transparent) 0%, transparent 62%),
    linear-gradient(color-mix(in srgb, var(--hud) 18%, #08080a), color-mix(in srgb, var(--hud) 10%, #060607));
  border: 1px solid color-mix(in srgb, var(--hud) 50%, transparent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 34px 90px -24px rgba(0,0,0,.85),
    inset 0 0 80px -26px color-mix(in srgb, var(--hud) 42%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transform: scale(.92); opacity: 0;
  transition: transform .4s var(--ease-stand, cubic-bezier(.33,1,.68,1)), opacity .3s var(--ease-out, ease);
  overflow: hidden;
}
.chud.on .chud-frame { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .chud.on .chud-frame { animation: chudPowerOn .5s var(--ease-out, ease) 1; }
}
@keyframes chudPowerOn {
  0% { filter: brightness(2.4) saturate(.4); clip-path: inset(48% 0 48% 0); }
  40% { filter: brightness(1.3); clip-path: inset(0 0 0 0); }
  100% { filter: none; }
}

/* brackets de esquina (4) */
.chud-br { position: absolute; width: 18px; height: 18px; z-index: 4; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--hud) 85%, #fff 0%); }
.chud-br.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.chud-br.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; }
.chud-br.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; }
.chud-br.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

/* barra de estado superior */
.chud-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; flex: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hud) 32%, transparent);
  font-family: var(--type-family-workhorse); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hud) 92%, #fff 20%);
  text-shadow: 0 0 8px color-mix(in srgb, var(--hud) 55%, transparent);
}
/* eyebrow movido a la barra superior (junto a la X) */
.chud-eyebrow--bar { display: inline-flex; align-items: center; gap: .7em; margin: 0;
  font-size: 11px; letter-spacing: 0.16em; }
.chud-bar-l, .chud-bar-r { display: inline-flex; align-items: center; gap: .7em; }
.chud-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--hud);
  box-shadow: 0 0 9px var(--hud); }
@media (prefers-reduced-motion: no-preference) { .chud-rec { animation: chudBlink 1.4s steps(1) infinite; } }
@keyframes chudBlink { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } }
.chud-clock { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--hud) 70%, #fff 22%); letter-spacing: .1em; }
.chud-x {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px -4px 0;
  background: none; border: 1px solid color-mix(in srgb, var(--hud) 40%, transparent);
  color: color-mix(in srgb, var(--hud) 92%, #fff 20%); cursor: pointer; border-radius: 2px;
  transition: background .18s, border-color .18s;
}
.chud-x:hover { background: color-mix(in srgb, var(--hud) 22%, transparent); border-color: var(--hud); }
.chud-x svg, .chud-x span { display: block; }

/* zona de pantalla (riel · contenido · riel) */
.chud-screen { position: relative; display: flex; min-height: 0; flex: 1; }
.chud-screen::before {
  /* rejilla de puntos del fósforo, tenue */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--hud) 26%, transparent) .8px, transparent 1.6px);
  background-size: 17px 17px; opacity: .14;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 30%, #000 55%, transparent 100%);
}
.chud-rail {
  flex: none; width: 26px; position: relative; z-index: 1;
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--hud) 34%, transparent) 0 2px, transparent 2px 12px);
  opacity: .5;
}
.chud-rail.left { border-right: 1px solid color-mix(in srgb, var(--hud) 22%, transparent); }
.chud-rail.right { border-left: 1px solid color-mix(in srgb, var(--hud) 22%, transparent); }
@media (max-width: 560px) { .chud-rail { display: none; } }

.chud-content {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  padding: clamp(26px, 4.4vw, 40px) clamp(24px, 4.4vw, 40px) clamp(24px, 3.4vw, 34px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* scrollbar discreta del fósforo */
.chud-content::-webkit-scrollbar { width: 8px; }
.chud-content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hud) 40%, transparent); border-radius: 0; }

/* encabezado de la consola */
.chud-eyebrow {
  font-family: var(--type-family-workhorse); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hud) 88%, #fff 16%);
  display: inline-flex; align-items: center; gap: .7em; margin: 0;
  text-shadow: 0 0 7px color-mix(in srgb, var(--hud) 45%, transparent);
}
.chud-eyebrow .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--hud); box-shadow: 0 0 8px var(--hud); }
.chud-title {
  font-family: var(--type-family-workhorse); font-weight: 900;
  font-size: clamp(26px, 5vw, 38px); line-height: .98; letter-spacing: -0.03em;
  color: #eef3ec; margin: 0; text-wrap: balance;
}
.chud-title .dot { color: var(--cat-sienna); }
.chud-sub {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.55;
  color: #9fb09c; margin: 16px 0 0; max-width: 44ch;
}

/* línea humana (Rubén) compacta */
.chud-human { display: flex; align-items: center; gap: 12px; margin-top: clamp(16px, 2.4vh, 22px); }
.chud-human-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; position: relative;
  border: 1px solid color-mix(in srgb, var(--hud) 40%, transparent); filter: grayscale(.3); }
.chud-human-av::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,0.6) 1px, transparent 1px); background-size: 3px 3px;
  background-color: rgba(10, 11, 13, 0.4); mix-blend-mode: overlay; }
.chud-human-av img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.15) sepia(0.2) saturate(0.9); }
.chud-human-meta { display: flex; flex-direction: column; gap: 3px; }
.chud-human-name { font-family: var(--type-family-workhorse); font-weight: 700; font-size: 14px; color: #e6ebe4; }
.chud-human-role { font-family: var(--type-family-workhorse); font-weight: 500; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #8aa087; display: inline-flex; align-items: center; gap: .55em; }
.chud-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat-verde); box-shadow: 0 0 8px var(--cat-verde); }

/* divisor del fósforo */
.chud-div { height: 1px; margin: clamp(18px, 2.6vh, 24px) 0; border: 0;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--hud) 45%, transparent) 0 6px, transparent 6px 12px); opacity: .6; }

/* el formulario reusa los componentes qk-* pero sin caja propia */
.chud .qk-panel { background: transparent; border: 0; padding: 0; box-shadow: none; }
.chud .qk-block { margin-top: clamp(16px, 2.4vh, 22px); }
.chud .qk-label { color: #9fb09c; }
.chud-callline {
  margin-top: 16px; font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: 13px; color: #8aa087;
}
.chud-callline a { color: #cfe0cb; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--hud) 60%, transparent); }
.chud-callline a:hover { color: #fff; }

/* pie del aparato — toggles/medidores decorativos + estado */
.chud-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid color-mix(in srgb, var(--hud) 32%, transparent);
}
.chud-toggles { display: inline-flex; align-items: center; gap: 7px; }
.chud-toggles i { width: 14px; height: 6px; border-radius: 1px; background: color-mix(in srgb, var(--hud) 28%, transparent); }
.chud-toggles i.on { background: var(--hud); box-shadow: 0 0 7px var(--hud); }
.chud-foot-status {
  font-family: var(--type-family-workhorse); font-weight: 600; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--hud) 75%, #fff 18%);
  display: inline-flex; align-items: center; gap: .6em;
}

/* el botón de envío conserva el sienna de la casa, pero con glow para el HUD */
.chud .qk-submit-row { margin-top: clamp(20px, 3vh, 28px); }
.chud .qk-submit-note { color: #8aa087; }

@media (max-width: 560px) {
  .chud-frame { width: 100%; max-height: 94vh; }
}

/* ════════════════════════════════════════════════════════════════════════
   SCROLL INTRO — overlay de bienvenida (first-visit). Reusa el "aparato" .chud
   pero teñido AZUL (categoría Web · var(--cat-azure)) y, en vez de formulario,
   muestra el haz/punto que CAE (mismo gesto que mt-beam de MapaEstelar) + el
   label SCROLL — para enseñar que el sitio se explora con scroll. Se descarta
   al primer scroll/tap/X/ESC. Siempre oscuro, coherente con la galaxia.
   ════════════════════════════════════════════════════════════════════════ */

/* tiñe el HUD de azul (el .chud base usa --hud verde) */
.chud--intro .chud-frame { --hud: var(--cat-azure, #477AB3); }

/* el aparato del intro respira un poco más angosto y centrado */
.chud--intro .chud-frame { width: min(440px, 92vw); }

/* contenido centrado: copy arriba, haz al centro, hint abajo */
.chud--intro .chud-content {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(30px, 5vw, 44px) clamp(24px, 4.4vw, 40px) clamp(26px, 4vw, 36px);
}
.chud--intro .chud-title { text-align: center; }
.chud--intro .chud-sub { margin: 14px auto 0; max-width: 30ch; text-align: center; }

/* ── el haz que cae (copia de mt-beam/estelaFall, teñido --hud azul) ────── */
.si-beam-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: clamp(26px, 4.4vh, 40px) 0 clamp(20px, 3vh, 30px);
}
.si-beam {
  position: relative; width: 1px; height: clamp(54px, 9vh, 92px);
  --si-h: clamp(54px, 9vh, 92px);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--hud, #477AB3) 14%, transparent) 35%,
    color-mix(in srgb, var(--hud, #477AB3) 44%, transparent) 100%);
}
.si-bead {
  position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--hud, #477AB3);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--hud, #477AB3) 72%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .si-bead { animation: siFall 2.1s var(--ease-out, ease-out) infinite; }
}
@keyframes siFall {
  0%   { transform: translateY(-8px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(var(--si-h, 80px)); opacity: 0; }
}
/* reduced-motion: el punto se queda fijo a media altura (info, no decoración) */
@media (prefers-reduced-motion: reduce) {
  .si-bead { animation: none; opacity: 1; top: 50%; }
}
.si-lbl {
  font-family: var(--type-family-workhorse); font-weight: 600; font-size: 10px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hud, #477AB3) 75%, #fff 28%);
  text-shadow: 0 0 8px color-mix(in srgb, var(--hud, #477AB3) 45%, transparent);
}

/* micro-hint "baja para empezar / scroll to begin" con chevron que late */
.si-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  margin-top: clamp(4px, 1.4vh, 12px);
  font-family: var(--type-family-workhorse); font-weight: 500; font-size: 12px;
  letter-spacing: .04em; color: color-mix(in srgb, var(--hud, #477AB3) 40%, #fff 36%);
}
.si-chev {
  width: 11px; height: 11px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  .si-chev { animation: siChev 1.7s var(--ease-out, ease) infinite; }
}
@keyframes siChev {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; }
  50%      { transform: translateY(3px) rotate(45deg); opacity: 1; }
}

@media (max-width: 560px) {
  .chud--intro .chud-frame { width: 100%; }
}

/* ══ QuoteWizard — form multi-step (engagement) ══════════════════════ */
.qk-wiz{ --qkw: var(--cat-sienna); display:flex; flex-direction:column; gap:20px; container-type:inline-size; }
.qk-wiz-top{ display:flex; align-items:center; gap:14px; }
.qk-wiz-bar{ display:flex; gap:6px; flex:1; }
.qk-wiz-seg{ flex:1; height:3px; border-radius:2px; background:color-mix(in srgb, var(--mute) 30%, transparent); transition:background .3s ease, box-shadow .3s ease; }
.qk-wiz-seg.done{ background:var(--qkw); }
.qk-wiz-seg.on{ background:var(--qkw); box-shadow:0 0 0 1px color-mix(in srgb, var(--qkw) 45%, transparent); }
.qk-wiz-count{ font-family:var(--type-family-workhorse); font-size:11px; letter-spacing:.14em; color:var(--mute); white-space:nowrap; }
.qk-wiz-step{ min-height:140px; animation:qkWizIn .34s cubic-bezier(.4,0,.2,1) both; }
.qk-wiz-step[data-dir="back"]{ --qkw-dx:-10px; }
@keyframes qkWizIn{ from{ opacity:0; transform:translateX(var(--qkw-dx,10px)); } to{ opacity:1; transform:none; } }
.qk-wiz-eyebrow{ display:flex; align-items:center; gap:7px; font-family:var(--type-family-workhorse); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--qkw); margin:0; }
.qk-wiz-eyebrow .pip{ background:var(--qkw); }
.qk-wiz-title{ font-size:clamp(22px,3.2vw,28px); font-weight:700; letter-spacing:-.01em; margin:8px 0 4px; }
.qk-wiz-hint{ color:var(--mute); font-size:14px; margin:0 0 18px; }
.qk-wiz-trust{ display:flex; align-items:center; gap:11px; margin-top:18px; padding:12px 14px; border:1px solid #232323; border-radius:12px; background:#0e0e0e; }
.qk-wiz-av{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--qkw); }
.qk-wiz-trust span{ font-size:12.5px; color:var(--mute); line-height:1.4; }
.qk-wiz-trust b{ color:var(--invert); font-weight:600; }
.qk-wiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.qk-wiz-spacer{ display:block; width:1px; }
.qk-wiz-back{ background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:var(--mute); font-family:var(--type-family-workhorse); font-size:12.5px; letter-spacing:.04em; padding:8px 2px; transition:color .2s ease; }
.qk-wiz-back:hover{ color:var(--invert); }
.qk-wiz-next{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:0; border-radius:999px; padding:12px 22px; background:var(--qkw); color:#fff; font-family:var(--type-family-workhorse); font-weight:600; font-size:13.5px; letter-spacing:.02em; transition:transform .18s ease, opacity .2s ease; }
.qk-wiz-next:hover{ transform:translateY(-1px); }
.qk-wiz-next.is-off{ opacity:.4; cursor:not-allowed; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .qk-wiz-step{ animation:none; } .qk-wiz-next:hover{ transform:none; } }

/* ── QuoteWizard · paso 1: cards con orb punteado — layout por CONTAINER (robusto a cualquier ancho de panel) ── */
.qk-catcards{ display:flex; flex-direction:column; gap:10px; }
.qk-catcard{ position:relative; display:flex; flex-direction:row; align-items:center; text-align:left; gap:14px; padding:14px 16px; border:1px solid #262626; border-radius:16px; background:#0f0f0f; color:var(--invert); cursor:pointer; transition:border-color .2s ease, transform .2s ease, background .2s ease; }
.qk-catcard:hover{ border-color:var(--c); transform:translateY(-2px); }
.qk-catcard.on{ border-color:var(--c); background:color-mix(in srgb, var(--c) 10%, #0f0f0f); }
.qk-orb-wrap{ position:relative; width:60px; height:60px; flex:0 0 auto; display:grid; place-items:center; }
.qk-orb-ring{ position:absolute; inset:2px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--c) 42%, transparent); opacity:.7; animation:qkOrbit 26s linear infinite; }
.qk-orb{ width:42px; height:42px; border-radius:50%; background-image: radial-gradient(color-mix(in srgb, var(--c) 92%, #ffffff) 1px, transparent 1.3px); background-size: 5.5px 5.5px; background-position:center; -webkit-mask: radial-gradient(circle at 40% 36%, #000 40%, rgba(0,0,0,.4) 74%, transparent 100%); mask: radial-gradient(circle at 40% 36%, #000 40%, rgba(0,0,0,.4) 74%, transparent 100%); }
.qk-sat{ position:absolute; top:2px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--c); box-shadow:0 0 8px color-mix(in srgb,var(--c) 70%, transparent); transform-origin:3.5px 28px; animation:qkOrbit 26s linear infinite; }
.qk-catcard.on .qk-orb-ring{ opacity:1; }
.qk-catcard-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.qk-catcard-name{ font-weight:700; font-size:16px; letter-spacing:-.01em; text-transform:capitalize; color:#f5f4ef; }
.qk-catcard-tag{ font-size:12px; color:var(--mute); line-height:1.35; }
@container (min-width: 520px){
  .qk-catcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .qk-catcard{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:24px 14px 20px; }
  .qk-orb-wrap{ width:92px; height:92px; }
  .qk-orb-ring{ inset:4px; }
  .qk-orb{ width:64px; height:64px; }
  .qk-sat{ transform-origin:3.5px 44px; }
  .qk-catcard-name{ font-size:17px; }
}
@media (prefers-reduced-motion: reduce){ .qk-orb-ring, .qk-sat{ animation:none; } }
@container (max-width: 460px){ .qk-wiz .qk-field-row{ flex-direction:column; gap:12px; } .qk-wiz .qk-field-row > *{ width:100%; } }