/* inicio, servicio técnico y 404 */
.destacados, .consulta { background: var(--crema); color: var(--navy); }
.destacados { padding-top: 0; }

/* ---------- servicio técnico: el celu 3D saca la pieza que elegís ---------- */
.tecnico { position: relative; height: 360vh; background: #05051F; color: var(--crema); }
.tecnico .fijo { position: sticky; top: 0; height: 100svh; overflow: clip; }
.lienzo-tec { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tec-grilla { position: relative; height: 100%; display: grid; align-items: center; pointer-events: none; }
.tecnico .texto { max-width: 500px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; pointer-events: auto; }
.tecnico .kicker { color: var(--celeste); }
.tecnico h1 { font-size: clamp(40px, 5.2vw, 76px); font-weight: 850; text-shadow: 0 2px 30px rgb(5 5 31 / .6); }
.tecnico .bajada { margin: 0; color: var(--gris); font-size: clamp(16px, 1.4vw, 19px); }
.tecnico .partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.tecnico .partes a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 3px; padding: 11px 18px; border-radius: 20px;
  color: #9a99c4; text-decoration: none; transition: color .35s, background-color .35s, padding .35s; }
.tecnico .partes a::before { content: ""; grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: transform .35s, background-color .35s; }
.tecnico .partes b { font: 700 19px/1 var(--display); font-stretch: 112%; }
.tecnico .partes small { font-size: 13px; color: #8a89b3; }
.tecnico .partes a.activa, .tecnico .partes a:hover { color: var(--crema); background: rgb(169 167 255 / .12); padding-left: 24px; }
.tecnico .partes a.activa::before { background: var(--celeste); transform: scale(1.4); }
.tecnico .partes a.activa small { color: var(--gris); }
.tecnico .nota { margin: 0; color: var(--gris); }
/* sin WebGL o con movimiento reducido: la lista sigue llevando al formulario */
body:not(.con-3d) .tecnico { height: auto; }
body:not(.con-3d) .tecnico .fijo { position: relative; height: auto; padding: 130px 0 70px; }
body:not(.con-3d) .lienzo-tec { display: none; }
@media (max-width: 859px) {
  .tecnico { height: 320vh; }
  .tec-grilla { align-items: start; padding-top: 86px; }
  .tecnico .texto { gap: 12px; max-width: none; }
  .tecnico h1 { font-size: clamp(34px, 9.6vw, 52px); }
  .tecnico .bajada { font-size: 15px; }
  .tecnico .partes { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tecnico .partes a { padding: 9px 12px; column-gap: 10px; border-radius: 16px; }
  .tecnico .partes a.activa, .tecnico .partes a:hover { padding-left: 12px; }
  .tecnico .partes b { font-size: 16px; }
  .tecnico .partes small { font-size: 12px; }
  .tecnico .nota { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tecnico .partes a { transition: none; } }

/* ---------- manifiesto ---------- */
.manifiesto-sec { background: var(--navy); padding: 140px 0 40px; }
.manifiesto { font: 800 clamp(30px, 4.6vw, 64px)/1.12 var(--display); font-stretch: 112%; letter-spacing: -.02em; max-width: 1080px; }
.manifiesto b { color: var(--celeste); font-weight: inherit; }

/* ---------- formulario del técnico ---------- */
.consulta { scroll-margin-top: 20px; }
.consulta-grilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.consulta .kicker { color: var(--azul); margin-bottom: 16px; }
.consulta h2 { font-size: clamp(36px, 5vw, 68px); font-weight: 850; }
.bajada-clara { margin-top: 20px; color: var(--gris-osc); max-width: 420px; }
.form-tec { display: grid; gap: 20px; background: #fff; border-radius: var(--radio); padding: 28px; }
.campo { display: grid; gap: 8px; font-weight: 600; font-size: 15px; }
.campo small { font-weight: 400; color: var(--gris-osc); }
.campo input, .campo textarea, .campo select { font: 400 16px/1.4 var(--texto); color: var(--navy); padding: 12px 16px; border: 1.5px solid var(--crema-2); border-radius: 16px; background: var(--crema); }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid var(--celeste); outline-offset: 1px; border-color: var(--azul); }
.fallas { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.fallas legend { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.fallas label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--crema-2); background: var(--crema); cursor: pointer; font-size: 15px; }
.fallas input { accent-color: var(--azul); }
.fallas label:has(input:checked) { border-color: var(--azul); background: #ecebff; }
.form-tec .boton { justify-self: start; }
@media (max-width: 860px) { .consulta-grilla { grid-template-columns: 1fr; gap: 32px; } .form-tec { padding: 20px; } }

/* ---------- 404 ---------- */
.error404 { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 140px 0 60px; }
.error404 h1 { font-size: clamp(56px, 12vw, 160px); font-weight: 900; margin-top: 30px; }
.error404 p { margin-top: 16px; color: var(--gris); font-size: 19px; }
.error404 .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.logo-404 { display: block; width: min(300px, 70vw); height: auto; margin: 0 auto 36px; transform-origin: 50% 120%; animation: buscar 3.2s ease-in-out infinite; }
@keyframes buscar { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.sin-senal { display: inline-flex; align-items: end; gap: 10px; height: 110px; }
.sin-senal i { width: 26px; border-radius: 8px; background: var(--celeste); opacity: .2; animation: senal 2.4s infinite; }
.sin-senal i:nth-child(1) { height: 25%; } .sin-senal i:nth-child(2) { height: 50%; animation-delay: .2s; } .sin-senal i:nth-child(3) { height: 75%; animation-delay: .4s; } .sin-senal i:nth-child(4) { height: 100%; animation-delay: .6s; }
@keyframes senal { 0%, 100% { opacity: .15; } 20% { opacity: 1; } 45% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .sin-senal i { animation: none; opacity: .6; } .logo-404 { animation: none; } }