/* StellaTV: estilos compartidos por todas las páginas públicas.
   Los tokens y las reglas de uso están en .claude/DESIGN.md: antes de sumar
   un color, un tamaño o un radio nuevo, fijate si ya existe acá.
   Orden: tokens · base · accesibilidad · botones · barra de arriba y menú ·
   pie · WhatsApp flotante · código copiable · secciones de la home ·
   plantilla de landings (.lp). */

/* ─── FUENTES ───
   Bebas Neue se sirve desde el sitio (licencia OFL, fuentes/OFL.txt) y se
   precarga en el <head>: con "optional" nunca mueve el layout y, al venir del
   mismo dominio, casi siempre llega a tiempo. Inter también se sirve desde el
   sitio (variable, pesos 400 a 800; licencia OFL en fuentes/Inter-OFL.txt). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fuentes/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fuentes/bebas-neue-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── TOKENS ─── */
:root {
  /* fondos */
  --negro: #070710;
  --oscuro: #0e0e1f;
  --card: #12122a;
  --card-alto: #14142c;
  /* marca */
  --rosa: #ff2d78;
  --violeta: #b820ff;
  --violeta-texto: #c05cff;
  --cyan: #00d4ff;
  --naranja: #ff6b00;
  /* estados */
  --dorado: #ffb800;
  --verde: #00e676;
  --rojo: #ff3d3d;
  --wa: #25d366;
  /* texto */
  --blanco: #fff;
  --texto: #e8e8ff;
  --suave: #9090b8;
  --tinta: #06240f;
  /* líneas */
  --linea-suave: rgba(255,255,255,0.05);
  --linea: rgba(255,255,255,0.08);
  --linea-fuerte: rgba(255,255,255,0.2);
  /* degradés */
  --grad-marca: linear-gradient(135deg, var(--rosa), var(--violeta));
  --grad-boton: linear-gradient(135deg, #e0115f, #a010e0);
  --grad-texto: linear-gradient(90deg, var(--rosa), var(--violeta), var(--cyan));
  --grad-dorado: linear-gradient(135deg, var(--dorado), var(--naranja));
  --grad-exito: linear-gradient(135deg, var(--verde), var(--cyan));
  /* sombras */
  --glow-rosa: 0 0 30px rgba(255,45,120,0.45);
  --glow-violeta: 0 0 30px rgba(184,32,255,0.4);
  --glow-cyan: 0 0 30px rgba(0,212,255,0.4);
  --glow-verde: 0 0 20px rgba(0,230,118,0.3);
  --glow-wa: 0 0 26px rgba(37,211,102,0.4);
  --sombra-elev: 0 12px 34px rgba(0,0,0,0.45);
  /* tipografía */
  /* Si Bebas no llegó a cargar, una condensada del sistema parecida. */
  --f-titulo: 'Bebas Neue', 'Arial Narrow', 'Roboto Condensed', sans-serif-condensed, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.35rem;
  --fs-h2: clamp(1.9rem, 5vw, 2.8rem);
  --fs-h1: clamp(2.4rem, 7vw, 4rem);
  /* espaciado */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --gutter: 24px;
  /* radios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* alto de la barra de arriba: lo usan el scroll a anclas y el menú */
  --alto-barra: 64px;
}
@media (max-width: 480px) { :root { --gutter: 16px; } }

/* ─── BASE ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-barra) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--negro); color: var(--texto); font-family: var(--f-texto); line-height: 1.65; overflow-x: hidden; }
img, video { max-width: 100%; }
a { color: inherit; }
/* Los h1 y h2 van en Bebas Neue, que tiene un solo peso: cualquier negrita
   es sintética y se ve borrosa. Los h3 van en Inter 700. */
h1, h2 { font-weight: 400; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
p, li, dd, td, summary { overflow-wrap: break-word; }
.grad { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.muted { color: var(--suave); }
.inline-link, .link { color: var(--cyan); }
.inline-link:hover, .link:hover { text-decoration-thickness: 2px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── ACCESIBILIDAD ─── */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--blanco); color: var(--negro); font-weight: 700; padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; transition: top .15s; }
.saltar:focus { top: 12px; }
:where(a, button, summary, [role="button"], input, select, textarea, video, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ─── BOTONES ───
   .btn-primary  la acción principal de la página (una por pantalla).
   .btn-secondary alternativas: ver precios, ver la guía, etc.
   .btn-wa       contacto directo por WhatsApp (flotante, soporte).
   Todos comparten alto, radio, peso y estados. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 13px 28px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--f-texto); font-weight: 800; font-size: var(--fs-base); line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s, background-color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); filter: brightness(.92); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: var(--grad-boton); color: var(--blanco); box-shadow: var(--glow-rosa); }
.btn-primary:hover { box-shadow: 0 0 44px rgba(255,45,120,0.6); }
.btn-wa { background: var(--wa); color: var(--tinta); box-shadow: var(--glow-wa); }
.btn-wa:hover { box-shadow: 0 0 40px rgba(37,211,102,0.55); }
.btn-secondary { background: rgba(255,255,255,0.06); color: var(--texto); border-color: var(--linea-fuerte); font-weight: 600; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--cyan); }
.btn-sm { min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; }
.btn-block { display: flex; width: 100%; }
.btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Etiqueta chica arriba de los títulos. Color por modificador. */
.eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--dorado); border: 1px solid rgba(255,184,0,0.35); border-radius: var(--r-pill); padding: 6px 16px; margin-bottom: 22px; }
.eyebrow.violeta { color: var(--violeta-texto); border-color: rgba(192,92,255,0.4); }
.eyebrow.verde { color: var(--verde); border-color: rgba(0,230,118,0.35); }

/* ─── BARRA DE ARRIBA Y MENÚ ─── */
.topbar { position: sticky; top: 0; z-index: 100; background: rgba(7,7,16,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
/* flex-wrap: con la letra agrandada del celular, el botón y el menú bajan a
   un segundo renglón en vez de salirse de la pantalla. */
.topbar-in { max-width: 1280px; min-height: var(--alto-barra); margin: 0 auto; padding: 8px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.marca { flex-shrink: 1; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; min-width: 0; font-family: var(--f-titulo); font-size: 1.5rem; letter-spacing: 1px; line-height: 1; color: var(--blanco); text-decoration: none; }
.marca img { height: 26px; width: auto; display: block; }
.marca em { font-style: normal; color: var(--rosa); }
.sello-oficial { font-family: var(--f-texto); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.5px; color: var(--dorado); border: 1px solid rgba(255,184,0,0.45); border-radius: var(--r-pill); padding: 2px 8px; text-transform: uppercase; white-space: nowrap; }
.topbar-links { list-style: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.topbar-links a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; white-space: nowrap; border-radius: var(--r-sm); color: var(--suave); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; transition: color .2s, background-color .2s; }
.topbar-links a:hover { color: var(--blanco); background: rgba(255,255,255,0.05); }
.topbar-links a[aria-current="page"] { color: var(--blanco); }
.topbar-cta { flex-shrink: 0; }
.menu-btn { display: none; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--linea-fuerte); background: rgba(255,255,255,0.04); color: var(--blanco); cursor: pointer; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s; }
.menu-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--cyan); }
.menu-btn:active { transform: scale(.96); }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s; }
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
/* Con los links a la vista, el sello no entra hasta pantallas bien anchas. */
@media (min-width: 1201px) and (max-width: 1440px) { .sello-oficial { display: none; } }
@media (max-width: 1200px) {
  .menu-btn { display: inline-flex; }
  .topbar-cta { margin-left: auto; }
  .topbar-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--e2) var(--gutter) var(--e5); background: rgba(7,7,16,0.98);
    border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-elev);
    max-height: calc(100vh - var(--alto-barra)); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    /* visible al instante al abrir (para poder darle el foco al primer link)
       y oculto recién cuando termina de desvanecerse al cerrar */
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  }
  .topbar.abierto .topbar-links { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
  .topbar-links a { min-height: 48px; padding: 0 var(--e3); font-size: var(--fs-base); color: var(--texto); border-bottom: 1px solid var(--linea-suave); border-radius: 0; }
}
@media (max-width: 420px) {
  .sello-oficial { display: none; }
  .marca { font-size: 1.3rem; }
  .topbar-in { gap: var(--e2); }
  .topbar-cta { padding: 8px 14px; }
}
body.menu-abierto { overflow: hidden; }

/* ─── PIE ─── */
.pie { border-top: 1px solid var(--linea); background: var(--negro); color: var(--suave); font-size: var(--fs-sm); padding: var(--e7) 0 var(--e6); }
.pie-in { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.2fr 3fr; gap: var(--e6); }
.pie-marca p { margin: var(--e3) 0 var(--e4); line-height: 1.5; }
/* Columnas de 10rem: con la letra agrandada pasan solas a una por fila. */
.pie-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--e5); }
.pie-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--blanco); margin-bottom: var(--e2); }
.pie ul { list-style: none; }
.pie ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--suave); text-decoration: none; transition: color .2s; }
.pie ul a:hover { color: var(--cyan); text-decoration: underline; }
.pie-oficial { color: var(--dorado); }
.pie-base { max-width: 1100px; margin: var(--e6) auto 0; padding: var(--e5) var(--gutter) 0; border-top: 1px solid var(--linea-suave); font-size: var(--fs-xs); color: var(--suave); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2); }
@media (max-width: 900px) {
  .pie-in { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* deja lugar para el botón flotante de WhatsApp */
  .pie { padding-bottom: 96px; }
  .pie ul a { min-height: 44px; }
}

/* ─── WHATSAPP FLOTANTE ─── */
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--wa); color: var(--tinta); font-weight: 800; font-size: 0.95rem; text-decoration: none; box-shadow: 0 6px 24px rgba(37,211,102,0.45); transition: transform .2s, box-shadow .2s; }
.wa-flotante:hover { transform: scale(1.05); box-shadow: 0 8px 32px rgba(37,211,102,0.6); }
.wa-flotante:active { transform: scale(.97); }
.wa-flotante svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 600px) {
  .wa-flotante { right: 16px; bottom: 16px; padding: 14px; }
  .wa-flotante .wf-txt { display: none; }
}

/* ─── CÓDIGO COPIABLE (Downloader / Unlinked) ─── */
.codigo { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.35); border-radius: var(--r-sm); padding: 6px 6px 6px 14px; }
.codigo code { font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 1.5px; color: var(--blanco); }
.codigo small { font-size: var(--fs-xs); font-weight: 700; color: var(--cyan); }
.copiar { min-height: 36px; padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--linea-fuerte); background: rgba(255,255,255,0.06); color: var(--texto); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.copiar:hover { background: rgba(255,255,255,0.12); border-color: var(--cyan); }
.copiar:active { transform: scale(.96); }
.copiar.ok { color: var(--verde); border-color: rgba(0,230,118,0.5); }

/* ─── SECCIONES DE LA HOME Y REVENDEDORES ─── */
.container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.section-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--violeta-texto); margin-bottom: var(--e3); }
.section-title { font-family: var(--f-titulo); font-size: var(--fs-h2); line-height: 1.05; letter-spacing: 0.5px; color: var(--blanco); margin-bottom: var(--e3); text-transform: uppercase; }
.section-sub { color: var(--suave); font-size: var(--fs-base); max-width: 560px; line-height: 1.6; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Pregunta desplegable (FAQ y "ver más"). Un solo estilo en todo el sitio. */
details.pregunta, .lp details { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r-md); margin-bottom: var(--e3); padding: 0 20px; transition: border-color .2s; }
details.pregunta[open], .lp details[open] { border-color: rgba(255,45,120,0.35); }
details.pregunta > summary, .lp details > summary { cursor: pointer; min-height: 56px; padding: 16px 0; font-weight: 700; color: var(--blanco); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); transition: color .2s; }
details.pregunta > summary:hover, .lp details > summary:hover { color: var(--rosa); }
details.pregunta > summary::-webkit-details-marker, .lp details > summary::-webkit-details-marker { display: none; }
details.pregunta > summary::after, .lp details > summary::after { content: '+'; flex-shrink: 0; color: var(--rosa); font-size: 1.4rem; line-height: 1; font-weight: 400; transition: transform .2s; }
details.pregunta[open] > summary::after, .lp details[open] > summary::after { content: '\2212'; }
details.pregunta > :not(summary), .lp details > :not(summary) { padding-bottom: 18px; color: var(--suave); }
@media (prefers-reduced-motion: no-preference) {
  details.pregunta[open] > :not(summary), .lp details[open] > :not(summary) { animation: abrir .2s ease; }
}
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } }

/* ─── PLANTILLA DE LANDINGS (body.lp) ─── */
.lp .wrap { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.lp h1, .lp h2 { font-family: var(--f-titulo); letter-spacing: 0.5px; line-height: 1.05; color: var(--blanco); text-transform: uppercase; }
.lp h3 { font-family: var(--f-texto); font-weight: 700; font-size: var(--fs-md); line-height: 1.3; color: var(--blanco); margin-bottom: var(--e2); }
.lp .hero { position: relative; padding: var(--e8) 0 var(--e7); text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184,32,255,0.18), transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 30%, rgba(0,212,255,0.12), transparent 60%); }
.lp .hero h1 { font-size: var(--fs-h1); margin-bottom: 18px; }
.lp .hero .lead { max-width: 660px; margin: 0 auto 26px; color: var(--texto); font-size: 1.05rem; }
.lp .updated { display: block; margin-top: 18px; font-size: var(--fs-xs); color: var(--suave); }

.lp section.block { padding: 56px 0; border-top: 1px solid var(--linea-suave); }
.lp section.block h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.lp section.block h2 span { color: var(--rosa); }
.lp section.block p { margin-bottom: var(--e4); }
.lp section.block p:last-child { margin-bottom: 0; }

.lp .tldr { background: linear-gradient(135deg, rgba(255,45,120,0.10), rgba(0,212,255,0.08)); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-lg); padding: 20px 22px; }
.lp .tldr b { color: var(--blanco); }
.lp .tldr ul { margin: 10px 0 0 20px; }
.lp .tldr li { margin-bottom: 6px; }

.lp .cards, .lp .feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-top: 22px; }
.lp .card, .lp .feats li { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 20px 22px; }
.lp .card p { margin-bottom: 0; color: var(--suave); font-size: 0.94rem; }
.lp .card p b { color: var(--texto); }
.lp .card .cita { color: var(--texto); font-size: var(--fs-base); }
.lp .card .cita-meta { margin-top: 10px; font-size: var(--fs-xs); }
.lp .feats { list-style: none; }
.lp .feats li b { color: var(--blanco); display: block; margin-bottom: 4px; font-size: 1.02rem; }
.lp .feats li span { font-size: 0.9rem; color: var(--suave); }

.lp .steps { counter-reset: s; margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lp .step, .lp .card, .lp .check li, .lp .feats li { overflow-wrap: anywhere; }
.lp .step { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 20px 22px 20px 64px; position: relative; }
.lp .step::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--grad-marca); color: var(--blanco); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.lp .step p { margin-bottom: var(--e2); }
.lp .step p:last-child { margin-bottom: 0; }
.lp .step b { color: var(--blanco); }
.lp .path { display: inline-block; font-size: 0.86rem; color: var(--cyan); background: rgba(0,212,255,0.07); border: 1px solid rgba(0,212,255,0.25); border-radius: var(--r-sm); padding: 2px 8px; }

.lp .tw { position: relative; overflow-x: auto; margin-top: 22px; border-radius: var(--r-lg); border: 1px solid var(--linea); -webkit-overflow-scrolling: touch; }
.lp table { width: 100%; border-collapse: collapse; min-width: 540px; }
.lp th, .lp td { padding: 13px 14px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; }
.lp th { background: var(--card-alto); font-family: var(--f-titulo); font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px; color: var(--blanco); }
.lp td:first-child, .lp th:first-child { text-align: left; position: sticky; left: 0; background: var(--card-alto); font-weight: 600; color: var(--texto); }
.lp .hl, .lp .col-stella { color: var(--rosa) !important; }
.lp .yes { color: var(--verde); font-weight: 800; }
.lp .no { color: var(--rojo); font-weight: 800; }
.lp .mid { color: var(--dorado); font-weight: 700; }
.lp .note { font-size: 0.82rem; color: var(--suave); margin-top: 10px; }
.lp .swipe, .lp .tw-hint { display: none; font-size: 0.8rem; color: var(--violeta-texto); font-weight: 600; margin-top: var(--e2); }
@media (max-width: 700px) { .lp .swipe, .lp .tw-hint { display: block; } }

.lp .warn, .lp .ok, .lp .vid-warn { border-radius: var(--r-lg); padding: 18px 22px; margin-top: 22px; }
.lp .warn, .lp .vid-warn { background: rgba(255,184,0,0.08); border: 1px solid rgba(255,184,0,0.35); }
.lp .warn b, .lp .vid-warn b { color: var(--dorado); }
.lp .ok { background: rgba(0,230,118,0.07); border: 1px solid rgba(0,230,118,0.3); }
.lp .ok b { color: var(--verde); }
.lp .warn p, .lp .ok p { margin: 0; }

.lp .check { list-style: none; margin-top: var(--e4); display: grid; gap: 10px; }
.lp .check li { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 14px 18px 14px 46px; position: relative; }
.lp .check li::before { content: '\2713'; position: absolute; left: 18px; top: 13px; color: var(--verde); font-weight: 800; }
.lp .check.bad li::before { content: '\2715'; color: var(--rojo); }
.lp .check li b { color: var(--blanco); }

.lp .comps, .lp .need { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--e3); margin-top: 22px; }
.lp .comps li, .lp .need li { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 14px 18px; }
.lp .comps li { font-weight: 700; color: var(--blanco); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.lp .comps li::before { content: '\26BD'; font-size: 1.1rem; }
.lp .comps li small { flex-basis: 100%; padding-left: calc(1.1rem + 10px); font-weight: 400; color: var(--suave); font-size: var(--fs-sm); }
.lp .need li { font-size: 0.92rem; }
.lp .need li b { color: var(--blanco); }
.lp .devtag { display: inline-block; font-family: var(--f-titulo); font-size: 1.05rem; letter-spacing: 0.5px; color: var(--tinta); background: var(--cyan); padding: 3px 14px; border-radius: var(--r-pill); margin-bottom: 14px; }

.lp .codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 22px; }
.lp .code-card { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 18px 20px; }
.lp .code-card .code-label { display: block; color: var(--suave); font-size: var(--fs-xs); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.lp .code-row { display: flex; flex-wrap: wrap; gap: var(--e2); }
.lp .code-card .code-help { display: block; color: var(--suave); font-size: var(--fs-sm); margin-top: var(--e2); }
.lp .dls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--e3); }

.lp .final { text-align: center; padding: 64px 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255,45,120,0.14), transparent 60%); border-top: 1px solid var(--linea-suave); }
.lp .final h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.lp .final p { max-width: 560px; margin: 0 auto 26px; color: var(--suave); }

@media (max-width: 600px) {
  .lp .hero { padding: var(--e7) 0 40px; }
  .lp section.block { padding: 40px 0; }
  .lp .final { padding: var(--e7) 0; }
}

/* Páginas de texto largo (legales) y cabeceras cortas. */
.lp .hero-corto { padding: var(--e7) 0 var(--e6); }
.lp .legal { max-width: 820px; }
.lp .legal ul { padding-left: 20px; margin-bottom: var(--e4); line-height: 1.8; }
.lp .legal li { margin-bottom: 6px; }
.lp .legal b { color: var(--blanco); }

/* Nota chica debajo de los botones principales: aclara el número de WhatsApp,
   que la demo no pide pago y la opción de preguntar por el chat de la web. */
p.cta-nota, .lp p.cta-nota, .lp .final p.cta-nota { max-width: 620px; margin: var(--e3) auto 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--suave); }
p.cta-nota a { color: var(--cyan); }
/* Tablas de texto (cronologías, listas de apps): alineadas a la izquierda. */
.lp table.texto th, .lp table.texto td { text-align: left; vertical-align: top; }
.lp table.texto td { font-size: var(--fs-sm); }
.lp table.texto.ancha { min-width: 760px; }
.lp .fuente { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--suave); }
.lp h3.grupo { margin-top: var(--e5); }