/* TIKLIVEauto — estilo de la web (neón celeste + rosa, como el programa) */
:root {
  --cel: #22e5ff; --rosa: #ff2d95; --violeta: #8a7dff;
  --fondo: #060913; --caja: #0c1424; --caja2: #101a2e; --borde: #1d3550;
  --texto: #e8f7ff; --suave: #8fb3c9; --verde: #1bf29a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif; color: var(--texto); line-height: 1.55;
  background:
    radial-gradient(1000px 600px at 5% -10%, rgba(34,229,255,.14), transparent 60%),
    radial-gradient(1000px 600px at 95% -10%, rgba(255,45,149,.14), transparent 60%),
    linear-gradient(rgba(34,229,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(34,229,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--fondo);
  background-attachment: fixed;
}
a { color: var(--cel); }
.ancho { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Barra de arriba */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(6,9,19,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.barra .ancho { display: flex; align-items: center; gap: 18px; height: 64px; }
.barra .marca img { height: 44px; display: block; }
.barra nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.barra nav a { color: var(--texto); text-decoration: none; font-size: 15px; opacity: .85; }
.barra nav a:hover { opacity: 1; color: var(--cel); }
@media (max-width: 760px) { .barra nav a.opcional { display: none; } }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 14px; font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 1px solid var(--borde); color: var(--texto); background: var(--caja2); transition: transform .15s, box-shadow .15s, border-color .15s; }
.boton:hover { transform: translateY(-2px); border-color: var(--cel); box-shadow: 0 0 18px rgba(34,229,255,.3); }
.boton.principal { border: 0; color: #061018; background: linear-gradient(135deg, var(--cel), var(--violeta) 55%, var(--rosa)); box-shadow: 0 0 22px rgba(255,45,149,.35); }
.boton.chico { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Portada */
.portada { padding: 70px 20px 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.portada h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin-bottom: 16px; }
.portada h1 .grad { background: linear-gradient(90deg, var(--cel), var(--violeta), var(--rosa)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada p.baja { font-size: 19px; color: var(--suave); margin-bottom: 26px; }
.portada .acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada .nota { margin-top: 14px; font-size: 14px; color: var(--suave); }
.portada .imagen img { width: 100%; border-radius: 18px; border: 1px solid var(--borde); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(34,229,255,.15); }
.logo-grande { width: min(420px, 90%); filter: drop-shadow(0 0 22px rgba(34,229,255,.4)) drop-shadow(0 0 26px rgba(255,45,149,.3)); margin-bottom: 10px; }
@media (max-width: 860px) { .portada { grid-template-columns: 1fr; padding-top: 40px; } }

/* Secciones */
section { padding: 60px 0; }
section h2 { font-size: clamp(26px, 3.5vw, 36px); margin-bottom: 8px; }
section .sub { color: var(--suave); margin-bottom: 30px; font-size: 17px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tarjeta { background: rgba(12,20,36,.85); border: 1px solid var(--borde); border-radius: 16px; padding: 20px; }
.tarjeta .ico { font-size: 30px; margin-bottom: 8px; }
.tarjeta h3 { font-size: 18px; margin-bottom: 6px; }
.tarjeta p { color: var(--suave); font-size: 15px; }

/* Capturas */
.capturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.capturas figure { background: var(--caja); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.capturas img { width: 100%; display: block; }
.capturas figcaption { padding: 12px 16px; color: var(--suave); font-size: 14px; }

/* Pasos */
.pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pasos .tarjeta { position: relative; padding-top: 44px; }
.pasos .tarjeta::before { counter-increment: paso; content: counter(paso); position: absolute; top: 14px; left: 20px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #061018; background: linear-gradient(135deg, var(--cel), var(--rosa)); }

/* Planes */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }
.plan { background: rgba(12,20,36,.9); border: 1px solid var(--borde); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
.plan.destacado { border-color: var(--rosa); box-shadow: 0 0 30px rgba(255,45,149,.25); }
.plan .etiqueta { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: rgba(255,45,149,.18); color: #ffb3d6; margin-bottom: 12px; }
.plan h3 { font-size: 22px; }
.plan .precio { font-size: 40px; font-weight: 800; margin: 8px 0 2px; }
.plan .precio small { font-size: 16px; color: var(--suave); font-weight: 500; }
.plan ul { list-style: none; margin: 16px 0 22px; display: grid; gap: 8px; flex: 1; }
.plan li { color: var(--suave); font-size: 15px; padding-left: 26px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.plan li.no::before { content: '—'; color: #5a6d80; }

/* Preguntas */
details { background: rgba(12,20,36,.85); border: 1px solid var(--borde); border-radius: 14px; padding: 16px 20px; margin-bottom: 10px; }
details summary { cursor: pointer; font-weight: 700; }
details p { color: var(--suave); margin-top: 10px; }

/* Llamado final y pie */
.llamado { text-align: center; padding: 70px 20px; }
.llamado h2 { margin-bottom: 14px; }
footer { border-top: 1px solid var(--borde); padding: 28px 0; color: var(--suave); font-size: 14px; }
footer .ancho { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--suave); }
footer .der { margin-left: auto; }

/* Cuenta */
.caja-cuenta { max-width: 460px; margin: 60px auto; background: rgba(12,20,36,.92); border: 1px solid var(--borde); border-radius: 20px; padding: 30px; }
.caja-cuenta h1 { font-size: 26px; margin-bottom: 6px; text-align: center; }
.caja-cuenta .sub { color: var(--suave); text-align: center; margin-bottom: 22px; }
.caja-cuenta label { display: block; font-size: 14px; color: var(--suave); margin: 12px 0 6px; }
.caja-cuenta input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); background: #070d19; color: var(--texto); font-size: 16px; }
.caja-cuenta input:focus { outline: none; border-color: var(--cel); }
.caja-cuenta .boton { width: 100%; justify-content: center; margin-top: 16px; }
.boton.google { background: #fff; color: #1f1f1f; border: 0; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 13px; margin: 20px 0 4px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.cambiar { text-align: center; margin-top: 16px; font-size: 14px; color: var(--suave); }
.cambiar a { cursor: pointer; }
.aviso { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; display: none; }
.aviso.mal { display: block; background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.5); color: #ffd0da; }
.aviso.bien { display: block; background: rgba(27,242,154,.1); border: 1px solid rgba(27,242,154,.4); color: #c7ffe8; }
.legal { font-size: 12px; color: var(--suave); text-align: center; margin-top: 16px; }

.zona { padding: 40px 0 60px; }
.zona .hola { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.zona .hola h1 { font-size: 30px; }
.zona .hola .der { margin-left: auto; display: flex; gap: 10px; }
.zona .grilla2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
@media (max-width: 860px) { .zona .grilla2 { grid-template-columns: 1fr; } }
.descarga { text-align: center; padding: 34px 24px; }
.descarga .boton { font-size: 19px; padding: 16px 28px; }
.descarga small { display: block; color: var(--suave); margin-top: 12px; }
.estado-plan .fila { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 15px; }
.estado-plan .fila:last-child { border-bottom: 0; }
.estado-plan .fila span:first-child { color: var(--suave); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.chip.prueba { background: rgba(34,229,255,.15); color: var(--cel); }
.chip.premium { background: rgba(255,200,60,.15); color: #ffd772; }
.chip.gratis { background: rgba(143,179,201,.15); color: var(--suave); }
.guia ol { padding-left: 22px; display: grid; gap: 10px; color: var(--suave); }
.guia ol b { color: var(--texto); }
.demo { background: rgba(255,200,60,.12); border: 1px solid rgba(255,200,60,.5); color: #ffe3a3; padding: 10px 16px; border-radius: 12px; font-size: 14px; margin: 16px auto 0; max-width: 1120px; }
.oculto { display: none !important; }

/* Pago de Premium */
.caja-pago { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde); display: grid; gap: 10px; }
.caja-pago h4 { font-size: 16px; }
.caja-pago .boton { justify-content: center; width: 100%; }
.caja-pago small { color: var(--suave); font-size: 13px; }

/* Textos legales */
.texto-legal { max-width: 820px; margin: 40px auto 60px; background: rgba(12,20,36,.9); border: 1px solid var(--borde); border-radius: 18px; padding: 32px; }
.texto-legal h1 { margin-bottom: 6px; }
.texto-legal h2 { font-size: 20px; margin: 24px 0 8px; }
.texto-legal p, .texto-legal li { color: var(--suave); }
.texto-legal ul { padding-left: 22px; }