/* =====================================================================
   STA — Hoja de estilos única (página pública + panel)
   Regla: todo el estilo vive aquí. Nada de <style> en los .php ni style="" nuevos.
   ===================================================================== */

:root {
  --fondo: #0B1628;
  --fondo-2: #081120;
  --panel: #12223B;
  --panel-2: #172A48;
  --borde: #243858;
  --borde-2: #33507F;
  --texto: #E8EEF7;
  --texto-2: #A9B8D0;
  --tenue: #8395B4;
  --acento: #F07A3E;
  --acento-2: #FF9A63;
  --acento-sombra: rgba(240, 122, 62, 0.35);
  --ok: #35C2A5;
  --alerta: #F2B84B;
  --error: #F2667A;

  --radio: 16px;
  --radio-chico: 10px;
  --ancho: 1180px;
  --sombra: 0 24px 60px rgba(0, 0, 0, 0.45);
  --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'DejaVu Sans Mono', ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--acento-2); text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--acento); color: var(--fondo); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.contenedor--angosto { max-width: 780px; }
.mono { font-family: var(--mono); font-size: .95em; }
.acento, p.acento { color: var(--acento) !important; }
.centro { text-align: center; }
.ico { flex-shrink: 0; vertical-align: middle; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--acento); color: var(--fondo); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 12px; border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--fuente); cursor: pointer; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn--primario { background: var(--acento); color: var(--fondo); }
.btn--primario:hover { background: var(--acento-2); color: var(--fondo); transform: translateY(-2px); box-shadow: 0 12px 30px var(--acento-sombra); }
.btn--linea { background: transparent; color: var(--texto); border-color: var(--borde-2); }
.btn--linea:hover { border-color: var(--acento); color: #fff; transform: translateY(-2px); }
.btn--chico { min-height: 40px; padding: 8px 16px; font-size: .92rem; }
.btn--ancho { width: 100%; }
.btn .ico { transition: transform .2s ease; }
.btn:hover .ico { transform: translateX(3px); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 22, 40, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.barra.con-sombra { border-bottom-color: var(--borde); background: rgba(11, 22, 40, 0.92); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 20px; }
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); }
.marca:hover { color: var(--texto); }
.marca__logo {
  width: 40px; height: 40px; border-radius: 11px; background: var(--acento); color: var(--fondo);
  display: inline-flex; align-items: center; justify-content: center;
}
.marca__logo .ico { stroke-width: 2.6; }
.marca__logo--grande { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 8px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__texto strong { font-size: 1.2rem; letter-spacing: .06em; }
.marca__texto small { font-size: .74rem; color: var(--texto-2); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.btn) { color: var(--texto-2); font-size: .95rem; font-weight: 500; position: relative; }
.nav a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--acento); transition: right .25s ease; }
.nav a:not(.btn):hover { color: #fff; }
.nav a:not(.btn):hover::after { right: 0; }
.barra__menu { display: none; background: none; border: 1.5px solid var(--borde-2); color: var(--texto); border-radius: 10px; width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; }

@media (max-width: 900px) {
  .barra__menu { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fondo-2); border-bottom: 1px solid var(--borde);
    padding: 8px 20px 20px; display: none;
  }
  .nav.abierto { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--borde); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 14px; }
  .marca__texto small { display: none; }
}

/* ---------- Rejilla de fondo ---------- */
.rejilla {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* ---------- Portada ---------- */
.hero { position: relative; padding: 72px 0 96px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; width: 620px; height: 620px; right: -160px; top: -120px;
  background: radial-gradient(circle, rgba(240, 122, 62, 0.16), transparent 65%); pointer-events: none;
}
.hero__fila { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__sub { font-size: 1.15rem; color: var(--texto-2); max-width: 540px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 22px; }
.hero__acciones--centro { justify-content: center; }
.hero__datos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--texto-2); font-size: .92rem; }
.hero__datos li { display: inline-flex; align-items: center; gap: 8px; }
.hero__datos .ico { color: var(--ok); }
.resalte { color: var(--acento); position: relative; white-space: nowrap; }
.resalte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .12em;
  background: var(--acento); opacity: .35; border-radius: 4px;
  transform-origin: left; animation: subrayar 1s .6s ease both;
}
@keyframes subrayar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cursor { display: inline-block; width: .55em; height: 1.1em; margin-left: 4px; background: var(--acento); vertical-align: -0.2em; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.hero__visual { position: relative; min-height: 420px; }
.ventana { background: var(--panel); border: 1px solid var(--borde-2); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.ventana__barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--borde); background: rgba(255, 255, 255, 0.02); }
.ventana__barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--borde-2); }
.ventana__barra i:nth-child(3) { background: var(--acento); }
.ventana__barra span { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--tenue); }
.terminal { position: relative; width: 88%; }
.terminal__cuerpo { margin: 0; padding: 18px 20px 22px; min-height: 290px; font: .88rem/1.75 var(--mono); color: var(--texto-2); white-space: pre-wrap; }
.terminal__cuerpo .t-prompt { color: var(--acento); }
.terminal__cuerpo .t-ok { color: var(--ok); }
.terminal__cuerpo .t-dato { color: #fff; }
.tablero { position: absolute; right: 0; bottom: -10px; width: 58%; animation: flotar 6s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
.tablero__cuerpo { padding: 16px 20px 18px; }
.tablero__cuerpo small { color: var(--tenue); font-size: .8rem; }
.tablero__cifra { display: block; font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin: 12px 0 10px; border-bottom: 1px solid var(--borde); }
.barras span { flex: 1; height: var(--h); background: var(--borde-2); border-radius: 5px 5px 0 0; transform-origin: bottom; animation: crecer .9s cubic-bezier(.2, .8, .2, 1) both; }
.barras span:nth-child(2) { animation-delay: .08s; } .barras span:nth-child(3) { animation-delay: .16s; }
.barras span:nth-child(4) { animation-delay: .24s; } .barras span:nth-child(5) { animation-delay: .32s; }
.barras span:nth-child(6) { animation-delay: .40s; } .barras span:nth-child(7) { animation-delay: .48s; }
.barras span.activa { background: var(--acento); }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tablero__pie { display: flex; justify-content: space-between; align-items: center; }
.tablero__pie b { color: var(--acento); }

@media (max-width: 900px) {
  .hero { padding: 40px 0 72px; }
  .hero__fila { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { min-height: 380px; }
  .terminal { width: 100%; }
  .tablero { width: 78%; bottom: -40px; }
}

/* ---------- Cinta de giros ---------- */
.cinta { border-block: 1px solid var(--borde); background: var(--fondo-2); overflow: hidden; padding: 18px 0; }
.cinta__pista { display: flex; gap: 48px; width: max-content; animation: desfile 38s linear infinite; }
.cinta__pista span { font-family: var(--mono); color: var(--tenue); white-space: nowrap; font-size: .95rem; }
.cinta__pista span::before { content: '◆'; color: var(--acento); margin-right: 48px; font-size: .6em; vertical-align: .2em; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes desfile { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.seccion { position: relative; padding: 104px 0; }
.seccion--oscura { background: var(--fondo-2); border-block: 1px solid var(--borde); }
.seccion__titulo { max-width: 680px; margin-bottom: 48px; }
.seccion__titulo p:last-child { color: var(--texto-2); font-size: 1.08rem; }
.subtitulo { margin-top: 64px; margin-bottom: 20px; }
@media (max-width: 700px) { .seccion { padding: 72px 0; } }

/* ---------- Tarjetas ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 28px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tarjeta:hover { transform: translateY(-6px); border-color: var(--borde-2); box-shadow: var(--sombra); }
.tarjeta--destacada { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), 0 24px 60px rgba(240, 122, 62, 0.12); }
.tarjeta p { color: var(--texto-2); }
.tarjeta .btn { margin-top: auto; }
.tarjeta__cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tarjeta__icono { color: var(--acento); }
.tarjeta__nota { font-size: .9rem; color: var(--tenue) !important; margin-bottom: 20px; }
.insignia { font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--acento); color: var(--fondo); padding: 6px 10px; border-radius: 6px; }
.insignia--suave { background: rgba(240, 122, 62, 0.14); color: var(--acento-2); }
.precio { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 4px; }
.precio strong { font-size: 2.3rem; line-height: 1; letter-spacing: -0.02em; }
.precio span { color: var(--tenue); font-size: .9rem; }
.precio--doble { gap: 22px; flex-wrap: wrap; }
.precio--doble div { display: flex; flex-direction: column; }
.precio--doble strong { font-size: 1.9rem; }
.precio--grande strong { font-size: 3.2rem; }
.lista-check { list-style: none; padding: 0; margin: 4px 0 22px; display: grid; gap: 8px; color: var(--texto-2); }
.lista-check li { display: flex; gap: 10px; align-items: center; }
.lista-check .ico { color: var(--ok); }
.lista-check--grande { gap: 12px; margin: 24px 0; }

/* Luz que sigue al cursor */
.foco { overflow: hidden; }
.foco::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(240, 122, 62, 0.12), transparent 60%);
}
.foco:hover::before { opacity: 1; }
.foco > * { position: relative; }

@media (max-width: 960px) { .tarjetas { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- Funciones del punto de venta ---------- */
.funciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.funcion { position: relative; padding: 24px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); transition: border-color .25s ease, transform .25s ease; }
.funcion:hover { border-color: var(--borde-2); transform: translateY(-4px); }
.funcion__icono { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(240, 122, 62, 0.12); color: var(--acento); margin-bottom: 14px; }
.funcion h3 { font-size: 1.05rem; margin-bottom: 6px; }
.funcion p { color: var(--texto-2); font-size: .92rem; margin: 0; }
@media (max-width: 960px) { .funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .funciones { grid-template-columns: 1fr; } }

.franja {
  margin-top: 36px; padding: 26px 30px; border-radius: var(--radio);
  background: var(--panel); border: 1px solid var(--acento);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.franja strong { display: block; font-size: 1.9rem; line-height: 1.1; }
.franja strong small { font-size: .9rem; color: var(--tenue); font-weight: 400; }
.franja span { color: var(--texto-2); }

/* ---------- Tabla de planes ---------- */
.tabla-planes { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--panel); }
.tabla-planes__fila { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--borde); }
.tabla-planes__fila:first-child { border-top: 0; }
.tabla-planes__fila > span { padding: 16px 22px; }
.tabla-planes__fila > span:first-child { color: var(--texto-2); }
.tabla-planes__fila--cabeza > span { display: flex; flex-direction: column; padding-block: 22px; }
.tabla-planes__fila--cabeza small { color: var(--tenue); font-size: .85rem; }
.tabla-planes__fila--cabeza strong { font-size: 2rem; line-height: 1.15; }
.tabla-planes__fila--cabeza em { font-style: normal; color: var(--tenue); font-size: .85rem; }
.tabla-planes .resaltada { background: rgba(240, 122, 62, 0.07); }
@media (max-width: 640px) {
  .tabla-planes__fila { grid-template-columns: 1fr 1fr; }
  .tabla-planes__fila > span:first-child { grid-column: 1 / -1; padding-bottom: 0; font-weight: 600; color: var(--texto); }
  .tabla-planes__fila--cabeza > span:first-child { display: none; }
  .tabla-planes__fila--cabeza strong { font-size: 1.5rem; }
}

.modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
.modulo { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 1px dashed var(--borde-2); border-radius: var(--radio-chico); transition: border-color .2s ease, background .2s ease; }
.modulo:hover { border-color: var(--acento); border-style: solid; background: rgba(240, 122, 62, 0.05); }
.modulo span { color: var(--texto-2); font-size: .92rem; }
@media (max-width: 800px) { .modulos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .modulos { grid-template-columns: 1fr; } }

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: paso; position: relative; }
.pasos::before { content: ''; position: absolute; top: 26px; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, var(--acento), var(--borde-2)); }
.paso { position: relative; }
.paso__num { position: relative; display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fondo-2); border: 1.5px solid var(--acento); color: var(--acento); font-weight: 500; margin-bottom: 16px; }
.paso p { color: var(--texto-2); }
@media (max-width: 800px) {
  .pasos { grid-template-columns: 1fr; gap: 8px; }
  .pasos::before { top: 26px; bottom: 26px; left: 26px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--acento), var(--borde-2)); }
  .paso { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; }
  .paso__num { grid-row: span 2; }
  .paso h3 { align-self: end; margin-bottom: 2px; }
}

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 12px; }
.preguntas details { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0 22px; transition: border-color .2s ease; }
.preguntas details[open] { border-color: var(--borde-2); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font-family: var(--mono); color: var(--acento); font-size: 1.3rem; line-height: 1; transition: transform .2s ease; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { color: var(--texto-2); padding-bottom: 18px; margin: 0; }

/* ---------- Cierre ---------- */
.cierre { position: relative; padding: 112px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--borde); }
.cierre__caja { position: relative; z-index: 1; max-width: 720px; }
.cierre p { color: var(--texto-2); font-size: 1.1rem; }

/* ---------- Pie ---------- */
.pie { background: var(--fondo-2); border-top: 1px solid var(--borde); padding: 48px 0 28px; }
.pie__fila { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pie__frase { margin: 12px 0 0; font-style: italic; color: var(--texto-2); }
.pie__contacto { display: flex; flex-direction: column; gap: 10px; }
.pie__contacto a { color: var(--texto-2); display: inline-flex; gap: 10px; align-items: center; }
.pie__contacto a:hover { color: #fff; }
.pie__legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--borde); color: var(--tenue); font-size: .85rem; }

.flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  background: var(--acento); color: var(--fondo); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px var(--acento-sombra); transition: transform .2s ease;
}
.flotante:hover { color: var(--fondo); transform: scale(1.08); }

/* ---------- Páginas de formulario ---------- */
.pagina { position: relative; padding: 64px 0 96px; overflow: hidden; }
.pagina--centro { min-height: 70vh; display: flex; align-items: center; }
.pagina__fila { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.pagina__lado h1 { font-size: clamp(2rem, 4vw, 3rem); }
.pagina__lado > p { color: var(--texto-2); }
@media (max-width: 900px) { .pagina__fila { grid-template-columns: 1fr; } .pagina { padding-top: 36px; } }

.nota-preventa { border: 1px solid var(--alerta); background: rgba(242, 184, 75, 0.07); border-radius: var(--radio-chico); padding: 16px 18px; margin: 18px 0; }
.nota-preventa strong { color: var(--alerta); font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.nota-preventa p { margin: 6px 0 0; color: var(--texto-2); font-size: .95rem; }

.pasos-compra { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.pasos-compra li { display: flex; gap: 14px; align-items: flex-start; }
.pasos-compra li > span { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--acento); color: var(--acento); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.pasos-compra p { margin: 0; color: var(--texto-2); font-size: .92rem; }

.datos-pago { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; }
.datos-pago h2 { font-size: 1.2rem; }
.datos-pago dl { margin: 0 0 16px; display: grid; gap: 10px; }
.datos-pago dl div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--borde); padding-bottom: 10px; }
.datos-pago dt { color: var(--tenue); font-size: .9rem; }
.datos-pago dd { margin: 0; text-align: right; font-weight: 500; word-break: break-all; }

.copiable { cursor: pointer; border-bottom: 1px dotted var(--acento); }
.copiable.copiado::after { content: ' ✓ copiado'; color: var(--ok); font-family: var(--fuente); font-size: .8rem; font-weight: 400; }

.enlace-whats { display: inline-flex; gap: 10px; align-items: center; color: var(--texto-2); }

/* ---------- Formularios ---------- */
.formulario { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 30px; box-shadow: var(--sombra); display: grid; gap: 18px; }
.formulario h2 { font-size: 1.4rem; margin: 0; }
.campo { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend, .campo .etiqueta { font-weight: 500; font-size: .94rem; padding: 0; }
.campo legend { margin-bottom: 8px; }
.opcional { color: var(--tenue); font-weight: 400; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .campos-2 { grid-template-columns: 1fr; } .formulario { padding: 22px; } }

input[type=text], input[type=tel], input[type=email], input[type=password], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--fondo); color: var(--texto);
  border: 1.5px solid var(--borde-2); border-radius: var(--radio-chico);
  font: 400 1rem/1.4 var(--fuente);
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: .8; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(240, 122, 62, 0.2); }

.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones--bloques { display: grid; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--borde-2); border-radius: var(--radio-chico); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.opcion:hover { border-color: var(--tenue); }
.opcion:has(input:checked) { border-color: var(--acento); background: rgba(240, 122, 62, 0.08); }
input[type=radio], input[type=checkbox] { accent-color: var(--acento); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.casilla { display: flex; gap: 10px; align-items: center; cursor: pointer; min-height: 44px; }

.subir { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px; text-align: center; border: 1.5px dashed var(--borde-2); border-radius: var(--radio-chico); cursor: pointer; color: var(--texto-2); transition: border-color .2s ease, background .2s ease; }
.subir:hover, .subir.con-archivo { border-color: var(--acento); background: rgba(240, 122, 62, 0.05); color: var(--texto); }
.subir .ico { color: var(--acento); }
.subir__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subir__input:focus-visible + .subir, .campo:focus-within .subir { border-color: var(--acento); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__nota { display: flex; gap: 8px; align-items: center; color: var(--tenue); font-size: .85rem; margin: 0; }

.alerta { border-radius: var(--radio-chico); padding: 14px 16px; font-size: .95rem; margin-bottom: 16px; }
.alerta ul { margin: 0; padding-left: 18px; }
.alerta--error { border: 1px solid var(--error); background: rgba(242, 102, 122, 0.1); color: #FFD3DA; }
.alerta--ok { border: 1px solid var(--ok); background: rgba(53, 194, 165, 0.1); color: #C9F5EA; }

/* ---------- Recibido / descarga ---------- */
.recibido { position: relative; z-index: 1; text-align: center; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 44px 28px; box-shadow: var(--sombra); }
.recibido__icono { display: inline-flex; width: 76px; height: 76px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(53, 194, 165, 0.12); color: var(--ok); margin-bottom: 16px; }
.recibido p { color: var(--texto-2); max-width: 540px; margin-inline: auto; }
.folio { display: inline-flex; flex-direction: column; gap: 4px; padding: 16px 28px; margin: 12px 0 8px; border: 1px dashed var(--borde-2); border-radius: var(--radio-chico); }
.folio small { color: var(--tenue); }
.folio strong { font-size: 1.4rem; color: var(--texto); }

/* ---------- Animación al hacer scroll ---------- */
.js .aparecer { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .aparecer.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .aparecer { opacity: 1; transform: none; }
}

/* =====================================================================
   PANEL
   ===================================================================== */
.panel .barra--panel { position: sticky; }
.nav--panel { gap: 22px; }
.nav__salir { margin: 0; }
@media (max-width: 900px) {
  .nav--panel { position: static; display: flex; flex-direction: row; flex-wrap: wrap; background: none; border: 0; padding: 0; gap: 14px; }
  .nav--panel a:not(.btn) { border: 0; padding: 0; }
  .barra--panel .barra__fila { flex-wrap: wrap; padding-block: 12px; }
}
.panel__contenido { padding: 36px 0 80px; min-height: 80vh; }
.panel__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 28px; }
.panel__titulo p { width: 100%; margin: 0; }
.panel__titulo h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; }
.panel__bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; margin-bottom: 24px; }
.panel__bloque h2 { font-size: 1.3rem; }
.panel__bloque h3 { font-size: 1rem; margin-top: 24px; color: var(--texto-2); }
.panel__bloque-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.panel__bloque-cabeza h2 { margin: 0; }
.panel .formulario { box-shadow: none; }

.contadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.contador { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto); transition: border-color .2s ease, transform .2s ease; }
a.contador:hover { color: var(--texto); border-color: var(--borde-2); transform: translateY(-3px); }
.contador strong { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.contador span { color: var(--texto-2); font-size: .9rem; }
.contador--alerta { border-color: var(--acento); }
.contador--alerta strong { color: var(--acento); }
@media (max-width: 900px) { .contadores { grid-template-columns: 1fr 1fr; } }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros a { padding: 6px 12px; border: 1px solid var(--borde-2); border-radius: 999px; color: var(--texto-2); font-size: .85rem; }
.filtros a.activo, .filtros a:hover { border-color: var(--acento); color: var(--texto); }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; color: var(--tenue); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--borde-2); white-space: nowrap; }
.tabla td { padding: 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { color: var(--tenue); margin: 0; }

.estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap; border: 1px solid var(--borde-2); color: var(--texto-2); }
.estado--nueva, .estado--pendiente { border-color: var(--acento); color: var(--acento-2); background: rgba(240, 122, 62, 0.1); }
.estado--contactado, .estado--cotizada { border-color: var(--alerta); color: var(--alerta); }
.estado--ganada, .estado--pagado { border-color: var(--ok); color: var(--ok); background: rgba(53, 194, 165, 0.08); }
.estado--perdida, .estado--rechazado { border-color: var(--error); color: #FF9FAE; }

.ficha { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.ficha .panel__bloque { margin: 0; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } }
.datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.datos div { display: flex; flex-direction: column; }
.datos dt { color: var(--tenue); font-size: .82rem; }
.datos dd { margin: 0; word-break: break-word; }
@media (max-width: 520px) { .datos { grid-template-columns: 1fr; } }
.texto-cliente { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 16px; color: var(--texto); margin-bottom: 20px; }
.comprobante { display: block; max-width: 100%; max-height: 520px; border-radius: var(--radio-chico); border: 1px solid var(--borde-2); background: #fff; }
.enlace { display: block; padding: 12px; background: var(--fondo); border-radius: var(--radio-chico); font: .8rem/1.5 var(--mono); word-break: break-all; color: var(--texto-2); }

.acceso { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.acceso__caja { width: 100%; max-width: 400px; }
.acceso__caja h1 { font-size: 1.8rem; margin: 0; }