/* Tallery — componentes de la landing. Todos los valores vienen de tokens.css. */
.tl, .tl * { box-sizing: border-box; }
.tl { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.tl h1, .tl h2, .tl h3, .tl p { margin: 0; }

/* ---------- Botones ---------- */
.tl-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease; }
.tl-btn:hover { transform: translateY(-1px); }
.tl-btn:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; }
.tl-btn--primary { background: var(--panel-dark); color: var(--on-dark); }
.tl-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.tl-btn--light { background: var(--on-dark); color: #0e1a2b; }
.tl-btn--outline-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark-muted); }
.tl-btn svg { width: 18px; height: 18px; }

/* ---------- Etiqueta de sección ---------- */
.tl-tag { display: inline-flex; align-items: center; gap: 12px; font: 500 15px/1 var(--font-sans); }
.tl-tag__num { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--panel-dark); color: var(--on-dark); font: 600 12px/1 var(--font-sans); letter-spacing: .02em; }
.tl-dark .tl-tag__num, .tl-tag--on-dark .tl-tag__num { background: var(--on-dark); color: #0e1a2b; }

/* ---------- Paneles ---------- */
.tl-page { background: var(--surface-000); padding: 16px; display: grid; gap: 16px; }
.tl-panel { background: var(--surface-100); border-radius: var(--radius-xl); padding: var(--space-16); }
.tl-dark { background: var(--panel-dark); color: var(--on-dark); }
.tl-dark .tl-muted { color: var(--on-dark-muted); }
.tl-muted { color: var(--ink-muted); }
.tl-accent { color: var(--brand); }
.tl-dark .tl-accent, .tl-dark .tl-how__item b, .tl-price--hi .tl-checks svg { color: var(--brand-on-dark); }

/* ---------- Tipografía ---------- */
.tl-h1 { font: 700 66px/.95 var(--font-sans); letter-spacing: -0.045em; }
.tl-h2 { font: 700 56px/1 var(--font-sans); letter-spacing: -0.035em; }
.tl-h3 { font: 600 26px/1.1 var(--font-sans); letter-spacing: -0.02em; }
.tl-lead { font: 400 18px/1.5 var(--font-sans); }
.tl-body { font: 400 15px/1.5 var(--font-sans); }
.tl-cap { font: 500 12px/1.35 var(--font-sans); }

/* ---------- Nav ---------- */
.tl-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tl-logo { display: inline-flex; align-items: baseline; font: 700 30px/1 var(--font-sans); letter-spacing: -0.05em; color: var(--ink); text-decoration: none; }
.tl-logo i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-left: 3px; display: inline-block; }
.tl-logo small { display: block; font: 500 11px/1 var(--font-sans); letter-spacing: 0; color: var(--ink-muted); margin-top: 5px; }
.tl-nav__links { display: flex; gap: 28px; font: 500 14px/1 var(--font-sans); }
.tl-nav__links a { color: var(--ink-muted); text-decoration: none; }
.tl-nav__links a:hover { color: var(--ink); }
.tl-nav__links span { color: var(--line); }

/* ---------- Tarjeta de módulo ---------- */
.tl-mod { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.tl-mod--blue { background: var(--tint-blue); }
.tl-mod--lilac { background: var(--tint-lilac); }
.tl-mod--apricot { background: var(--tint-apricot); }
.tl-mod__shape { position: absolute; z-index: -1; border-radius: 50%; border: 34px solid rgba(255,255,255,.28); }
.tl-mod__icon { position: absolute; top: 16px; left: 16px; width: 46px; height: 46px; border-radius: var(--radius-pill); background: #0e1a2b; color: #f4f6fa; display: grid; place-items: center; }
.tl-mod__icon svg { width: 22px; height: 22px; }
.tl-mod__ui { position: absolute; left: 14px; right: 14px; top: 76px; }
.tl-mod__foot { padding: 90px 22px 22px; background: linear-gradient(to bottom, rgba(14,26,43,0) 0%, rgba(14,26,43,.88) 45%, #0e1a2b 100%); color: #f4f6fa; }
.tl-mod__foot h3 { font: 600 24px/1.08 var(--font-sans); letter-spacing: -0.02em; margin-bottom: 8px; }
.tl-mod__foot p { font: 400 14px/1.4 var(--font-sans); color: #c3ccd8; }

/* Tarjetas del hero: 9:19.5 fijo en todas las pantallas (video 1080×2340, igual que una grabación de pantalla de celular) */
.tl-hero__cards .tl-mod { aspect-ratio: 9 / 19.5; min-height: 0; }
.tl-mod__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.tl-hero__cards .tl-mod__foot { padding: 48px 16px 16px; }
.tl-hero__cards .tl-mod__foot h3 { font-size: 20px; margin-bottom: 4px; }
.tl-hero__cards .tl-mod__foot p { font-size: 13px; }
.tl-hero__cards .tl-mod__ui { top: 74px; left: 12px; right: 12px; }

/* mini UI dentro de tarjetas (siempre clara, como una pantalla) */
.tl-ui { background: #ffffff; color: #0e1a2b; border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-card); font: 500 12px/1.35 var(--font-sans); }
.tl-ui__row { white-space: nowrap; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-ui__muted { color: #556275; font-weight: 400; }
.tl-ui__chip { display: inline-block; padding: 4px 8px; white-space: nowrap; border-radius: var(--radius-pill); background: #e6eeff; color: #1d4ed8; font: 600 11px/1 var(--font-sans); }
.tl-ui__bar { height: 6px; border-radius: 99px; background: #e9edf3; overflow: hidden; }
.tl-ui__bar b { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.tl-bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px; font: 400 12px/1.35 var(--font-sans); }
.tl-bubble--in { background: #ffffff; color: #0e1a2b; border-bottom-left-radius: 4px; }
.tl-bubble--out { background: #e6eeff; color: #0e1a2b; border-bottom-right-radius: 4px; margin-left: auto; }

/* ---------- Hero ---------- */
.tl-hero { display: grid; grid-template-columns: 0.95fr 1.35fr; gap: 32px; margin-top: 56px; align-items: center; }
.tl-hero__copy { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.tl-hero__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tl-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-trust { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--surface-200); font: 500 13px/1 var(--font-sans); color: var(--ink); }
.tl-trust svg { width: 14px; height: 14px; color: var(--brand-strong); }


/* ---------- Hero escenario: frase · video · botón ---------- */
.tl-stage { display: grid; grid-template-columns: 1fr 1.15fr 0.75fr; gap: 48px; align-items: center; }
.tl-stage__copy .tl-stage__h1 { margin: 0; }
.tl-stage__copy { display: grid; gap: 28px; }
.tl-stage__h1 { font: 500 54px/1.02 var(--font-sans); letter-spacing: -0.045em; }
.tl-stage__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-xl); overflow: hidden; background: #f5f7f8; box-shadow: var(--shadow-card); }
.tl-stage__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-stage__play { position: absolute; right: 16px; bottom: 16px; display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; }
.tl-stage__chip { padding: 5px 10px; border-radius: var(--radius-pill); background: #0e1a2b; color: #f4f6fa; font: 600 12px/1 var(--font-sans); }
.tl-stage__btn { width: 44px; height: 44px; border-radius: var(--radius-pill); background: #0e1a2b; color: #f4f6fa; display: grid; place-items: center; }
.tl-stage__btn svg { width: 18px; height: 18px; }
.tl-stage__play:focus-visible .tl-stage__btn { outline: 3px solid var(--accent-blue); outline-offset: 3px; }
.tl-stage__cta { display: grid; justify-items: start; gap: 16px; }
.tl-btn--xl { height: 68px; padding: 0 34px; font-size: 20px; border-radius: var(--radius-lg); }
.tl-stage__link { font: 500 14px/1.3 var(--font-sans); color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.tl-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; margin-bottom: 48px; }
@media (max-width: 1080px) { .tl-stage, .tl-split { grid-template-columns: 1fr; } .tl-stage__media { max-width: 560px; } }
@media (max-width: 720px) { .tl-stage { margin-top: 32px; gap: 28px; } .tl-stage__h1 { font-size: 40px; } .tl-stage__cta { justify-items: stretch; } .tl-btn--xl { justify-content: center; } }

/* ---------- Sección: cabecera de dos columnas ---------- */
.tl-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.tl-head__left { display: grid; gap: 24px; }

/* ---------- Etapas (kanban) ---------- */
.tl-steps { display: grid; grid-template-columns: 1.15fr repeat(5, 1fr); gap: 12px; }
.tl-step { border-radius: var(--radius-lg); background: var(--panel-dark-raised); padding: 22px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; color: var(--on-dark); }
.tl-step__top { display: flex; justify-content: space-between; align-items: flex-start; }
.tl-step__n { font: 500 26px/1 var(--font-sans); color: var(--on-dark-muted); opacity: .6; }
.tl-step svg { width: 26px; height: 26px; }
.tl-step h3 { font: 600 20px/1.1 var(--font-sans); letter-spacing: -0.01em; margin-bottom: 8px; }
.tl-step p { font: 400 13px/1.4 var(--font-sans); color: var(--on-dark-muted); }
.tl-step--hi { background: var(--brand); color: #0e1a2b; }
.tl-step--hi p, .tl-step--hi .tl-step__n { color: #1a2940; }
.tl-step--photo { background: linear-gradient(160deg, var(--tint-blue), var(--tint-lilac)); position: relative; overflow: hidden; color: #0e1a2b; }


/* ---------- Flujo: recibes → trabajas → cobras → facturas ---------- */
.tl-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tl-flow__rail { position: absolute; left: 44px; right: 44px; top: 44px; height: 2px; background: repeating-linear-gradient(to right, var(--brand-on-dark) 0 10px, transparent 10px 18px); opacity: .55; }
.tl-fstep { position: relative; background: var(--panel-dark-raised); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 18px; min-height: 380px; }
.tl-fstep__top { display: flex; align-items: center; justify-content: space-between; }
.tl-fstep__n { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--panel-dark); border: 2px solid var(--brand-on-dark); color: var(--brand-on-dark); display: grid; place-items: center; font: 700 15px/1 var(--font-sans); position: relative; z-index: 1; }
.tl-fstep__ico { width: 40px; height: 40px; border-radius: var(--radius-pill); background: rgba(56,189,248,.14); color: var(--brand-on-dark); display: grid; place-items: center; }
.tl-fstep__ico svg { width: 20px; height: 20px; }
.tl-fstep h3 { font: 700 30px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--on-dark); }
.tl-fstep p { font: 400 14px/1.45 var(--font-sans); color: var(--on-dark-muted); }
.tl-fstep .tl-ui { margin-top: auto; box-shadow: none; min-height: 96px; align-content: center; }
.tl-fstep--last { background: linear-gradient(180deg, #123a5c 0%, var(--panel-dark-raised) 70%); outline: 1.5px solid rgba(56,189,248,.45); outline-offset: -1.5px; }
.tl-fstep--last .tl-fstep__n { background: var(--brand-on-dark); color: #0e1a2b; }
.tl-one { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 28px; border-radius: var(--radius-lg); background: var(--on-dark); color: #0e1a2b; }
.tl-one__lead { display: flex; align-items: center; gap: 14px; font: 600 18px/1.25 var(--font-sans); letter-spacing: -0.01em; }
.tl-one__lead small { display: block; font: 400 14px/1.4 var(--font-sans); color: #556275; letter-spacing: 0; }
.tl-one__mark { flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill); background: #0e1a2b; display: grid; place-items: center; }
.tl-one__mark i { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-on-dark); }
.tl-one__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-one__chips span { padding: 8px 12px; border-radius: var(--radius-pill); background: #e8f6fd; color: #0369a1; font: 600 13px/1 var(--font-sans); }
@media (max-width: 1080px) { .tl-flow { grid-template-columns: 1fr 1fr; } .tl-flow__rail { display: none; } }
@media (max-width: 720px) { .tl-flow { grid-template-columns: 1fr; } .tl-fstep { min-height: 0; } }

/* ---------- Rejilla de características ---------- */
.tl-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tl-feat { background: var(--surface-200); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 14px; align-content: start; }
.tl-feat__ico { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--panel-dark); color: var(--on-dark); display: grid; place-items: center; }
.tl-feat__ico svg { width: 20px; height: 20px; }
.tl-feat h3 { font: 600 20px/1.15 var(--font-sans); letter-spacing: -0.01em; }
.tl-feat p { font: 400 15px/1.5 var(--font-sans); color: var(--ink-muted); }

/* ---------- Precios ---------- */
.tl-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tl-price { background: var(--surface-200); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.tl-price__amt { font: 700 64px/1 var(--font-sans); letter-spacing: -0.04em; }
.tl-price__amt small { font: 500 16px/1 var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.tl-price--hi { background: var(--panel-dark); color: var(--on-dark); box-shadow: var(--shadow-card); }
.tl-price--hi .tl-price__amt small, .tl-price--hi .tl-muted { color: var(--on-dark-muted); }
.tl-badge { align-self: flex-start; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--brand); color: #0e1a2b; font: 600 12px/1 var(--font-sans); }
.tl-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font: 400 15px/1.35 var(--font-sans); }
.tl-checks li { display: flex; gap: 10px; align-items: flex-start; }
.tl-checks svg { flex: none; width: 18px; height: 18px; color: var(--brand-strong); margin-top: 1px; }
.tl-price--hi .tl-checks svg { color: var(--brand); }

/* ---------- Pasos para empezar ---------- */
.tl-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tl-how__item { border-top: 1.5px solid var(--on-dark-muted); padding-top: 22px; display: grid; gap: 10px; }
.tl-how__item b { font: 700 44px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--brand); }

/* ---------- FAQ ---------- */
.tl-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-q { background: var(--surface-200); border-radius: var(--radius-md); padding: 22px 24px; display: grid; gap: 8px; }
.tl-q h3 { font: 600 17px/1.25 var(--font-sans); }
.tl-q p { font: 400 14px/1.5 var(--font-sans); color: var(--ink-muted); }

/* ---------- CTA final y pie ---------- */
.tl-cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.tl-contact { display: grid; gap: 12px; }
.tl-contact a { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-radius: var(--radius-md); background: var(--panel-dark-raised); color: var(--on-dark); text-decoration: none; font: 500 15px/1.2 var(--font-sans); }
.tl-contact a span { color: var(--on-dark-muted); font-weight: 400; font-size: 13px; }
.tl-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 8px 24px 16px; font: 400 13px/1.5 var(--font-sans); color: var(--ink-muted); }
.tl-foot a { color: var(--ink-muted); text-decoration: none; margin-right: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .tl-hero, .tl-head, .tl-cta { grid-template-columns: 1fr; }
  .tl-steps { grid-template-columns: repeat(3, 1fr); }
  .tl-h1 { font-size: 68px; }
}
@media (max-width: 720px) {
  .tl-panel { padding: 28px 20px; border-radius: var(--radius-lg); }
  .tl-page { padding: 8px; gap: 8px; }
  .tl-nav__links { display: none; }
  .tl-h1 { font-size: 52px; }
  .tl-h2 { font-size: 38px; }
  .tl-feats, .tl-prices, .tl-how, .tl-faq { grid-template-columns: 1fr; }
  .tl-hero__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .tl-hero__cards .tl-mod { scroll-snap-align: start; }
  .tl-steps { grid-template-columns: 1fr 1fr; }
}


/* ── Puente de compatibilidad: los modales funcionales usan los nombres de
   variable anteriores; aquí se mapean a la paleta nueva de tokens.css ── */
:root{
  --text:#37445a; --muted:var(--ink-muted);
  --line-2:#eef1f5; --bg:#fff; --bg-alt:var(--surface-200);
  --accent:var(--brand-strong); --accent-d:#075985; --accent-b:var(--accent-blue);
  --accent-tint:#e8f2fb; --accent-glow:rgba(3,105,161,.35);
  --white:#fff; --r:var(--radius-sm); --r-lg:var(--radius-md); --r-xl:var(--radius-xl);
  --serif:var(--font-sans);
  --t:180ms cubic-bezier(.2,.7,.2,1); --t-slow:420ms cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(14,26,43,.05),0 1px 3px rgba(14,26,43,.06);
  --shadow-md:0 8px 24px -8px rgba(14,26,43,.14);
  --shadow-lg:0 28px 60px -20px rgba(14,26,43,.25);
}
/* botones heredados que aparecen dentro de los modales */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;
  border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;font-family:var(--font-sans);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#1a2940}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--surface-200);border-color:#cbd5e1}
.btn-white{background:#fff;color:var(--ink)}
.btn-lg{min-height:50px;padding:0 26px;font-size:15px}
/* el botón principal del modal sigue al primario del diseño nuevo */
.modal-submit{background:var(--ink)!important;border-radius:var(--radius-pill)!important}
.modal-submit:hover{background:#1a2940!important}
.modal-box{border-radius:var(--radius-lg)}
.modal-title{letter-spacing:-.02em}


/* ── Animaciones de entrada ──────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  [data-rv]{opacity:0;transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  [data-rv].rv-in{opacity:1;transform:none}
  [data-rv-stagger]>*{opacity:0;transform:translateY(22px);
    transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
  [data-rv-stagger].rv-in>*{opacity:1;transform:none}
  [data-rv-stagger].rv-in>*:nth-child(2){transition-delay:.07s}
  [data-rv-stagger].rv-in>*:nth-child(3){transition-delay:.14s}
  [data-rv-stagger].rv-in>*:nth-child(4){transition-delay:.21s}
  [data-rv-stagger].rv-in>*:nth-child(5){transition-delay:.28s}
  [data-rv-stagger].rv-in>*:nth-child(6){transition-delay:.35s}
  /* entrada del hero al cargar */
  .tl-hero__copy>*{opacity:0;transform:translateY(20px);animation:tlIn .85s cubic-bezier(.16,1,.3,1) forwards}
  .tl-hero__copy>*:nth-child(1){animation-delay:.05s}
  .tl-hero__copy>*:nth-child(2){animation-delay:.14s}
  .tl-hero__copy>*:nth-child(3){animation-delay:.23s}
  .tl-hero__copy>*:nth-child(4){animation-delay:.32s}
  .tl-hero__copy>*:nth-child(5){animation-delay:.41s}
  .tl-hero__cards>*{opacity:0;transform:translateY(28px) scale(.97);animation:tlInCard 1s cubic-bezier(.16,1,.3,1) forwards}
  .tl-hero__cards>*:nth-child(1){animation-delay:.34s}
  .tl-hero__cards>*:nth-child(2){animation-delay:.44s}
  .tl-hero__cards>*:nth-child(3){animation-delay:.54s}
  @keyframes tlIn{to{opacity:1;transform:none}}
  @keyframes tlInCard{to{opacity:1;transform:none}}
  .tl-mod{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
  .tl-mod:hover{transform:translateY(-6px)}
  .tl-feat,.tl-price,.tl-q{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
  .tl-feat:hover,.tl-q:hover{transform:translateY(-3px)}
  .tl-price:hover{transform:translateY(-4px)}
  .tl-btn{transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,color .2s,border-color .2s,box-shadow .25s}
  .tl-btn:hover{transform:translateY(-2px)}
}
/* nav: dos botones, más compactos */
.tl-nav__cta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.tl-btn--sm{height:40px;padding:0 16px;font-size:13.5px}
@media (max-width:720px){.tl-btn--sm{height:38px;padding:0 13px;font-size:12.5px}.tl-nav__cta{gap:6px}}

/* sección 05 · selector de módulo (base / con facturación) */
.tl-mods{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);
  background:var(--surface-200);border:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tl-mods__b{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font-sans);
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink-muted);
  padding:10px 18px;border-radius:var(--radius-pill);transition:background .22s,color .22s,box-shadow .22s}
.tl-mods__b:hover{color:var(--ink)}
.tl-mods__b.is-on{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(14,26,43,.5)}
.tl-mods a.tl-mods__b{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.tl-mods a.tl-mods__b svg{width:15px;height:15px}
.tl-mods__note{margin:0 0 30px;font-size:15px;line-height:1.55;color:var(--ink-muted);max-width:620px}
.tl-badge--soft{background:var(--surface-000);color:var(--ink)}
.tl-badge--tint{background:var(--tint-blue);color:#0e1a2b}
.tl-price__amt .js-amt{transition:opacity .2s}
.tl-price.is-pend .tl-price__amt{font-size:30px;color:var(--ink-muted)}
.tl-price.is-pend .js-cta{opacity:.95}
@media (max-width:720px){.tl-mods{width:100%}.tl-mods__b{flex:1;padding:10px 12px;font-size:13px}}

/* sección 03 · video de acceso (sustituye al párrafo) */
.tl-access{margin:0;display:grid;gap:12px}
.tl-access video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-200)}
.tl-access figcaption{font-size:15px;line-height:1.55;color:var(--ink-muted)}
/* el titular se centra con el video, no se pega abajo */
#producto .tl-head{align-items:center}
@media (max-width:1080px){.tl-access{max-width:620px}}

/* sección 03 · enlace a la lista completa */
.tl-verall{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:13px 22px;
  border-radius:var(--radius-pill);background:var(--surface-200);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  transition:background .2s,border-color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.tl-verall:hover{background:#fff;border-color:#cbd5e1;transform:translateY(-2px)}
.tl-verall svg{width:17px;height:17px}

/* línea de "para quién es", en lugar de los botones del hero */
.tl-hero__for{display:flex;gap:14px;align-items:stretch;max-width:430px;margin:0;
  font-size:17.5px;font-weight:500;line-height:1.5;letter-spacing:-.012em;color:var(--ink)}
.tl-hero__for::before{content:'';flex:0 0 3px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--accent-blue))}
@media (max-width:720px){.tl-hero__for{font-size:16px;gap:12px}}

/* página aparte · facturación electrónica (contenido pendiente) */
.tl-fe{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start;margin-top:26px}
.tl-fe__video{margin:0;display:grid;gap:12px}
.tl-fe__video video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-200)}
.tl-fe__video figcaption{font-size:15px;line-height:1.55;color:var(--ink-muted)}
.tl-fe__video{position:relative}
.tl-sound{position:absolute;right:14px;bottom:64px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 16px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:rgba(14,26,43,.82);color:#fff;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.tl-sound:hover{background:var(--ink);transform:translateY(-2px)}
.tl-sound svg{width:17px;height:17px}
@media (max-width:720px){.tl-sound{right:10px;bottom:70px;height:36px;padding:0 13px;font-size:12.5px}}
.tl-fe__box{display:grid;gap:14px;justify-items:start;padding:30px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.tl-fe__box .tl-price__amt{margin:0}
.tl-fe--solo{grid-template-columns:1fr}
@media (max-width:1080px){.tl-fe{grid-template-columns:1fr}}

/* el logo real sustituye al wordmark de texto */
.tl-logo{display:flex;align-items:center;text-decoration:none}
.tl-logo img{height:48px;width:auto;display:block}
.tl-dark .tl-logo img{filter:brightness(0) invert(1)}
@media (max-width:1080px){.tl-logo img{height:42px}}
@media (max-width:720px){.tl-logo img{height:34px}}

/* la sección 02 perdió la columna del CTA: el conjunto se centra */
#reto .tl-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);max-width:1100px;margin-inline:auto}
@media (max-width:1080px){#reto .tl-stage{grid-template-columns:1fr;justify-items:center}
  #reto .tl-stage__copy{text-align:center;justify-items:center}}

/* solo se cobra con tarjeta: fuera el selector de método */
#pay-method-sel{display:none!important}

/* en las páginas interiores el título no va pegado al menú */
.tl-nav + .tl-head{margin-top:44px}
@media (max-width:720px){.tl-nav + .tl-head{margin-top:26px}}

/* nav: separador y pestaña activa */
.tl-nav__sep{display:inline-block;width:2px;height:24px;background:#c3ccd9;border-radius:2px}
@media (max-width:1080px){
  /* en tablet los enlaces se acomodan bajo el logo, no se aprietan */
  .tl-nav{flex-wrap:wrap;row-gap:12px}
  .tl-nav__links{display:flex;flex-wrap:wrap;order:3;width:100%;gap:10px 16px;font-size:13px}
  .tl-nav__sep{display:none}
}
/* ── Celular: el menú se pliega detrás de un botón ─────────────────── */
.tl-nav__burger{display:none}
@media (max-width:720px){
  .tl-nav{column-gap:10px;row-gap:0}
  .tl-nav__burger{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:14px;
    background:#fff;color:var(--ink);cursor:pointer}
  .tl-nav__burger svg{width:20px;height:20px;display:block}
  .tl-nav__cta{order:1;margin-left:auto}
  .tl-nav__burger{order:2}
  .tl-nav__burger .x{display:none}
  .tl-nav__burger[aria-expanded="true"] .x{display:block}
  .tl-nav__burger[aria-expanded="true"] .m{display:none}
  .tl-nav__links{display:none;flex-direction:column;flex-wrap:nowrap;gap:0;width:100%;order:3;
    margin-top:14px;padding-top:4px;border-top:1px solid var(--line);font-size:15px}
  .tl-nav__links.is-open{display:flex}
  .tl-nav__links a{padding:13px 2px;color:var(--ink);border-bottom:1px solid var(--line)}
  .tl-nav__links a:last-child{border-bottom:0}
  /* en la barra solo queda la demo: suscribirse está en Precio */
  .tl-nav__cta .tl-btn--primary{display:none}
  .tl-logo img{height:30px}
}

/* ── Celular: las tarjetas de la sección 03, compactas ─────────────── */
@media (max-width:720px){
  .tl-feats{gap:8px}
  .tl-feat{grid-template-columns:38px minmax(0,1fr);
    grid-template-areas:"ico tit" "nada txt";gap:3px 12px;padding:14px 16px;
    border-radius:16px;align-items:center}
  .tl-feat__ico{grid-area:ico;width:38px;height:38px}
  .tl-feat__ico svg{width:17px;height:17px}
  .tl-feat h3{grid-area:tit;font-size:16px;line-height:1.1}
  .tl-feat p{grid-area:txt;font-size:13px;line-height:1.45}
  .tl-verall{width:100%;justify-content:center;margin-top:16px}
}

/* ── Celular: las tres tarjetas caben en pantalla, sin scroll ──────── */
@media (max-width:720px){
  .tl-hero__cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;
    grid-auto-columns:auto;overflow:visible;gap:8px}
  .tl-hero__cards .tl-mod{aspect-ratio:9/17;border-radius:18px}
  .tl-hero__cards .tl-mod__icon{top:8px;left:8px;width:30px;height:30px;border-radius:10px}
  .tl-hero__cards .tl-mod__icon svg{width:15px;height:15px}
  .tl-hero__cards .tl-mod__foot{padding:30px 9px 11px}
  .tl-hero__cards .tl-mod__foot h3{font-size:13px;line-height:1.08;letter-spacing:-.03em;margin-bottom:3px}
  .tl-hero__cards .tl-mod__foot p{font-size:10.5px;line-height:1.25}
}
@media (max-width:420px){
  .tl-hero__cards .tl-mod__foot p{display:none}
  .tl-hero__cards .tl-mod__foot{padding:26px 8px 10px}
  .tl-hero__cards .tl-mod__foot h3{font-size:12px}
}
}
.tl-nav__links a.is-here{color:var(--ink);font-weight:600}

/* el dato de respuesta no es enlace: mismo recuadro que los demás */
.tl-contact__static{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;border-radius:var(--radius-md);background:var(--panel-dark-raised);
  color:var(--on-dark);font:500 15px/1.2 var(--font-sans)}
.tl-contact__static span{color:var(--on-dark-muted);font-weight:400;font-size:13px}

/* capacidades: índice, tablas y etiquetas (funcionalidades y facturación) */
.tl-capnav{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 4px}
.tl-capnav a{display:inline-flex;padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--surface-200);border:1px solid var(--line);color:var(--ink-muted);
  text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s,border-color .2s}
.tl-capnav a:hover{color:var(--ink);border-color:#cbd5e1}
.tl-leg{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 0;font-size:13.5px;color:var(--ink-muted)}
.tl-cap{margin-top:40px;scroll-margin-top:16px}
.tl-cap__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:14px}
.tl-cap__h h2{margin:0;font-size:27px;font-weight:700;letter-spacing:-.032em;color:var(--ink)}
.tl-cap__h p{margin:0;font-size:14.5px;color:var(--ink-muted)}
.tl-cap__list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden}
.tl-cap__row{display:grid;grid-template-columns:270px 1fr;gap:6px 24px;padding:16px 20px;background:#fff}
.tl-cap__row>b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.tl-cap__row>p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-muted)}
.tl-cap__row>p b{color:var(--ink);font-weight:600}
.tl-cap__row--si{grid-template-columns:1fr auto;align-items:center}
.tl-tagc{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:0;white-space:nowrap;vertical-align:2px}
.t-op{background:#e7f3fb;color:#0369a1}
.t-suc{background:#efeafb;color:#5b46b0}
.t-adm{background:#fdeee4;color:#9a4a17}
.t-si{background:#e4f6ec;color:#15713f;margin:0}
.tl-nope{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tl-nope li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink-muted)}
.tl-nope li::before{content:'';flex:0 0 7px;height:7px;margin-top:8px;border-radius:50%;background:#cbd5e1}
@media (max-width:860px){.tl-cap__row{grid-template-columns:1fr;gap:4px}
  .tl-cap__row--si{grid-template-columns:1fr auto}.tl-cap__h h2{font-size:23px}}

/* página aparte · funcionalidades */
.tl-funcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.tl-func{display:grid;gap:10px;align-content:start;padding:26px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.tl-func__i{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;
  background:var(--surface-200);color:var(--brand-strong)}
.tl-func__i svg{width:22px;height:22px}
.tl-func h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.tl-func p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-muted)}
.tl-funcs__end{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}
@media (max-width:1080px){.tl-funcs{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.tl-funcs{grid-template-columns:1fr}.tl-func{padding:22px}}


/* ══ Páginas verticales ═══════════════════════════════════════════════ */
.tl-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;margin-bottom:20px;
  border-radius:var(--radius-pill);background:var(--tint-blue);color:var(--brand-strong);
  font:600 13px/1 var(--font-sans);letter-spacing:.01em}
.tl-shot{margin:0;display:grid;gap:12px}
.tl-shot__frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-200);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(14,26,43,.10)}
.tl-shot__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#f1f5f9;
  border-bottom:1px solid var(--line)}
.tl-shot__bar i{width:9px;height:9px;border-radius:50%;background:#cbd5e1;flex:none}
.tl-shot__url{margin-left:6px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--radius-pill);background:#fff;border:1px solid var(--line);
  font:500 11.5px/1 var(--font-sans);color:var(--ink-muted)}
.tl-shot__frame img{width:100%;display:block}
.tl-shot figcaption{font-size:14.5px;line-height:1.55;color:var(--ink-muted)}
.tl-pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tl-pain{padding:26px;border-radius:var(--radius-lg);background:var(--surface-200);
  border:1px solid var(--line);display:grid;gap:12px;align-content:start}
.tl-pain__ico{width:44px;height:44px;border-radius:var(--radius-pill);background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--brand-strong)}
.tl-pain__ico svg{width:21px;height:21px}
.tl-pain h3{font:600 20px/1.2 var(--font-sans);letter-spacing:-.01em;margin:0}
.tl-pain__dolor{margin:0;font:400 15px/1.55 var(--font-sans);color:var(--ink-muted);font-style:italic}
.tl-pain__sol{margin:0;padding-top:12px;border-top:1px solid var(--line);
  font:400 15px/1.6 var(--font-sans);color:var(--ink)}
.tl-pain__sol b{display:block;margin-bottom:4px;font:600 12.5px/1 var(--font-sans);
  text-transform:uppercase;letter-spacing:.06em;color:var(--brand-strong);font-style:normal}
.tl-big{font:600 clamp(30px,4vw,46px)/1.08 var(--font-sans);letter-spacing:-.025em;margin:0 0 16px}
.tl-vcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media (max-width:860px){
  .tl-pains{grid-template-columns:1fr}
  .tl-pain{padding:22px}
  .tl-big{font-size:28px}
}