/* ═══════════════════════════════════════════════════════════════════════════
   Equipos 2M · tema (26-oct-2026)
   Marca de 2M & Ospina (naranja #D66833 → #E8692E en pantalla oscura, gris #6B6B6B) sobre grafito.
   Lenguaje de plano técnico: retícula, cotas, visor con barrido y datos en mono.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0B0C0E; --bg-2:#121317; --bg-3:#1A1C21;
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.085); --panel-solido:#141519;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.2);
  --text:#F3F3F1; --text-2:rgba(243,243,241,.70); --text-3:rgba(243,243,241,.46);
  --acc:#E8692E; --acc-2:#FFB089; --acc-ink:#1C0A02; --glow:rgba(232,105,46,.36);
  --f-display:'Space Grotesk',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --r:16px; --r-lg:24px;
}
body{ background:radial-gradient(1100px 700px at 85% -10%, rgba(232,105,46,.12), transparent 60%), var(--bg) }
.marca-link{ color:var(--text) }
.marca-link svg{ height:38px }
.t-xl,.t-l,.t-m{ letter-spacing:-.04em }
.btn{ border-radius:12px }
.btn--prim{ color:#fff; background:linear-gradient(180deg, #F07A3C, #D9581D) }
.mas-btn{ border-radius:12px; color:#fff }
.chip{ border-radius:10px }
.chip[aria-pressed="true"]{ background:var(--acc); color:#fff; border-color:var(--acc) }
.tarjeta-p{ border-radius:18px }
.tarjeta-p__media{ background:radial-gradient(70% 60% at 50% 58%, rgba(232,105,46,.14), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.04) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.04) 31px 32px) }
.precio--cot{ color:var(--acc-2) }
.paso__num{ border-radius:10px; color:#fff }
.contador{ color:#fff }
.ojo{ color:var(--acc-2) }

/* ═══ Portada ═══ */
.heroe{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--barra) + 34px) 0 70px; isolation:isolate }
.plano{ position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.heroe__velo{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 70% at 20% 50%, rgba(11,12,14,.86), transparent 70%), linear-gradient(180deg, transparent 75%, var(--bg)) }
.heroe__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center }
.heroe h1{ margin:22px 0 0; max-width:11ch }
.heroe .entrada{ margin:24px 0 30px }
.consola-reserva{ display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:6px; padding:8px; border-radius:18px; background:color-mix(in srgb, var(--panel-solido) 80%, transparent); border:1px solid var(--line-2); backdrop-filter:blur(16px); box-shadow:0 30px 80px -30px rgba(0,0,0,.8); max-width:760px }
.cr-campo{ display:flex; flex-direction:column; justify-content:center; padding:8px 14px; border-radius:12px; transition:background .2s; min-width:0 }
.cr-campo:hover,.cr-campo:focus-within{ background:var(--panel-2) }
.cr-campo small{ font:500 10.5px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3) }
.cr-campo select,.cr-campo input{ border:0; outline:0; background:transparent; font:600 15px var(--f-body); color:var(--text); padding:2px 0; min-width:0; width:100%; color-scheme:dark }
.cr-campo select option{ background:var(--panel-solido) }
.consola-reserva .btn{ height:auto; min-height:58px }

/* visor técnico */
.visor{ position:relative; aspect-ratio:1/1.02; border-radius:26px; border:1px solid var(--line-2); overflow:hidden; isolation:isolate; background:radial-gradient(60% 55% at 50% 50%, rgba(232,105,46,.14), transparent 70%), linear-gradient(160deg, #17191E, #0B0C0F) }
.visor::after{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(232,105,46,.14), transparent 50%) }
.visor__rejilla{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px; mask-image:radial-gradient(75% 70% at 50% 50%, #000 40%, transparent 85%) }
.visor__barrido{ position:absolute; left:0; right:0; height:2px; top:0; z-index:3; background:linear-gradient(90deg, transparent, var(--acc), transparent); box-shadow:0 0 24px 4px rgba(232,105,46,.5); animation:barrido 4.2s var(--ease-in-out) infinite }
@keyframes barrido{ 0%{ top:8% } 50%{ top:92% } 100%{ top:8% } }
.visor__esq{ position:absolute; width:28px; height:28px; border:2px solid var(--acc); z-index:3 }
.visor__esq--a{ top:16px; left:16px; border-right:0; border-bottom:0 } .visor__esq--b{ top:16px; right:16px; border-left:0; border-bottom:0 }
.visor__esq--c{ bottom:16px; left:16px; border-right:0; border-top:0 } .visor__esq--d{ bottom:16px; right:16px; border-left:0; border-top:0 }
.visor__cab{ position:absolute; z-index:3; top:24px; left:56px; right:56px; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.18em; color:var(--text-2) }
.visor__cab i{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#3DDC97; box-shadow:0 0 10px #3DDC97; margin-right:8px; animation:pulso 1.8s infinite }
.visor__item{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .7s var(--ease-out); pointer-events:none }
.visor__item.activo{ opacity:1; pointer-events:auto }
.visor__item img{ width:64%; transform:scale(.92); transition:transform 1.2s var(--ease-out); filter:drop-shadow(0 40px 50px rgba(0,0,0,.6)) }
.visor__item img.foto{ width:100%; height:100%; object-fit:cover }
.visor__item.activo img{ transform:none }
.visor__dato{ position:absolute; z-index:2; display:flex; flex-direction:column; gap:3px; font-size:11.5px; letter-spacing:.06em; color:var(--text); padding:8px 12px; border-radius:10px; background:rgba(11,12,14,.72); border:1px solid var(--line-2); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(8px); transition:opacity .5s, transform .6s var(--ease-out) }
.visor__dato b{ font-size:9.5px; letter-spacing:.2em; color:var(--acc-2); font-weight:600 }
.visor__item.activo .visor__dato{ opacity:1; transform:none }
.visor__item.activo .visor__dato--1{ transition-delay:.25s } .visor__item.activo .visor__dato--2{ transition-delay:.4s } .visor__item.activo .visor__dato--3{ transition-delay:.55s }
.visor__dato--1{ top:18%; left:8% } .visor__dato--2{ top:30%; right:7% } .visor__dato--3{ bottom:20%; right:9% }
.visor__dato::before{ content:''; position:absolute; width:30px; height:1px; background:var(--acc); top:50% }
.visor__dato--1::before{ right:-30px } .visor__dato--2::before,.visor__dato--3::before{ left:-30px }
.visor__pie{ position:absolute; z-index:3; left:56px; right:56px; bottom:26px; display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2) }
.visor__puntos{ display:flex; gap:6px }
.visor__puntos i{ width:18px; height:3px; border-radius:2px; background:var(--line-2); transition:background .3s, width .4s var(--ease-out) }
.visor__puntos i.activo{ background:var(--acc); width:34px }

/* datos */
.datos{ position:relative; z-index:2; padding:6px 0 30px }
.datos__grid{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden }
.datos__grid div{ padding:24px 26px; border-right:1px solid var(--line) }
.datos__grid div:last-child{ border-right:0 }
.datos__grid b{ display:block; font:700 clamp(36px,3.6vw,54px)/1 var(--f-display); letter-spacing:-.04em; color:var(--acc) }
.datos__grid span{ font-size:14px; color:var(--text-2) }

/* líneas */
.lineas{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.linea{ min-height:320px; border-radius:22px; justify-content:space-between; background:linear-gradient(160deg, #181A1F, #0F1013) }
.linea img{ position:absolute; right:-6%; top:6%; width:62%; opacity:.95; transition:transform .8s var(--ease-out) }
.linea:hover img{ transform:translateY(-8px) rotate(-2deg) }
.linea__n{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-2) }
.linea h3{ font:700 26px/1.05 var(--f-display); letter-spacing:-.03em; margin-bottom:6px; max-width:12ch }
.linea p{ color:var(--text-2); font-size:14.5px; max-width:24ch }
.linea div{ position:relative; z-index:1 }
.linea__ir{ position:absolute; right:22px; bottom:22px; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--line-2); transition:background .3s, transform .4s var(--ease-out) }
.linea__ir svg{ width:18px; height:18px }
.linea:hover .linea__ir{ background:var(--acc); transform:translateX(4px) }

/* cómo funciona */
.ruta{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative }
.ruta::before{ content:''; position:absolute; top:52px; left:4%; right:4%; height:2px; background:linear-gradient(90deg, var(--acc), rgba(232,105,46,.1)); z-index:-1 }
.ruta li{ padding:24px 22px; border-radius:20px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 70%, #000); position:relative }
.ruta__n{ font-size:11px; letter-spacing:.16em; color:var(--text-3) }
.ruta__ic{ display:grid; place-items:center; width:56px; height:56px; border-radius:14px; background:linear-gradient(180deg, #F07A3C, #C24E17); color:#fff; margin:14px 0 18px; box-shadow:0 14px 40px -12px var(--glow) }
.ruta__ic svg{ width:26px; height:26px }
.ruta h3{ font:700 22px var(--f-display); letter-spacing:-.02em; margin-bottom:6px }
.ruta p{ color:var(--text-2); font-size:14.5px }

/* cierre */
.cierre{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(100px,13vw,190px) 0; text-align:center; border-top:1px solid var(--line) }
.cierre .t-xl{ margin:20px auto 18px; max-width:14ch }
.cierre__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px }

/* catálogo */
.cat-cab{ padding:calc(var(--barra) + 56px) 0 30px; position:relative; z-index:2 }
.cat-cab .t-l{ margin:16px 0 32px; max-width:16ch }
.cat-herramientas{ display:grid; gap:16px }
.cat-buscar{ display:flex; align-items:center; gap:12px; height:60px; padding:0 22px; border-radius:14px; background:var(--panel); border:1px solid var(--line-2); max-width:620px; transition:border-color .25s, box-shadow .25s }
.cat-buscar:focus-within{ border-color:var(--acc); box-shadow:0 0 0 5px color-mix(in srgb, var(--acc) 14%, transparent) }
.cat-buscar svg{ width:20px; height:20px; color:var(--text-3) }
.cat-buscar input{ flex:1; height:100%; border:0; outline:0; background:transparent; font-size:16px }
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap }
.escenario{ background:radial-gradient(60% 55% at 50% 52%, rgba(232,105,46,.18), transparent 70%), var(--panel) }
.escenario__escaneo{ background:linear-gradient(180deg, transparent, rgba(232,105,46,.14), transparent) }
.pie__gigante{ letter-spacing:-.05em }

@media (max-width:1000px){
  .heroe__grid{ grid-template-columns:1fr }
  .visor{ max-width:560px; width:100%; margin:0 auto }
  .consola-reserva{ grid-template-columns:1fr 1fr }
  .consola-reserva .cr-campo:first-child{ grid-column:1 / -1 }
  .consola-reserva .btn{ grid-column:1 / -1 }
  .lineas{ grid-template-columns:1fr 1fr }
  .ruta{ grid-template-columns:1fr 1fr }
  .ruta::before{ display:none }
  .datos__grid{ grid-template-columns:1fr 1fr }
  .datos__grid div:nth-child(2){ border-right:0 }
  .datos__grid div:nth-child(-n+2){ border-bottom:1px solid var(--line) }
}
@media (max-width:640px){
  .heroe{ min-height:auto; padding-top:calc(var(--barra) + 20px) }
  .lineas,.ruta{ grid-template-columns:1fr }
  .linea{ min-height:240px }
  .linea img{ width:48%; top:auto; bottom:4% }
  .visor__dato{ font-size:10.5px; padding:6px 9px }
  .visor__cab,.visor__pie{ left:40px; right:40px }
  .datos__grid b{ font-size:34px }
}

/* ── ajustes tras la revisión visual (26-oct) ── */
.heroe .t-xl{ font-size:clamp(44px,6.6vw,104px) }
.consola-reserva{ grid-template-columns:1.25fr 1fr 1fr }
.consola-reserva .btn{ grid-column:1 / -1; min-height:54px }
@media (max-width:1000px){ .consola-reserva{ grid-template-columns:1fr 1fr } }
.datos .datos__grid{ padding:0; width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--max) - 2 * var(--gutter)) }
/* 27-oct · fotos reales: visor y líneas de equipo */
.visor__item img.foto{ width:100%; height:100%; object-fit:cover; filter:none }
.visor__item:has(img.foto)::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,12,14,.45), transparent 30%, transparent 60%, rgba(11,12,14,.75)); pointer-events:none }
.linea--foto .linea__foto{ position:absolute; inset:0; width:100%; height:100%; top:0; right:0; object-fit:cover; opacity:1; z-index:0 }
.linea--foto:hover .linea__foto{ transform:scale(1.06) }
.linea--foto::before{ content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(11,12,14,.35), rgba(11,12,14,.9)) }
.linea--foto .linea__n,.linea--foto div,.linea--foto .linea__ir{ z-index:1 }