/* StreamTalk — sistema de diseño de la web pública: portada, /precios, /descargar, /privacidad, /terminos y /codigos.
   Mismos tokens que la app de escritorio (desktop/design.css, bloque .st-app): fondos #07111F/#0B1728, superficies
   #101F34/#13243A, bordes y texto en tres niveles, violeta→azul, radios 14/10 px y controles de 44 px. El modo oscuro es
   el de la app y el claro sigue la preferencia del sistema (prefers-color-scheme). Fuentes del sistema (Segoe UI), sin
   librerías, sin imágenes data: (CSP img-src 'self') y sin estilos en línea (CSP style-src 'self').
   /cuenta NO carga este archivo: su panel MASTER y la vista de la app (?desktop=1) siguen con cuenta-base.css (el
   brand.css anterior, copia literal) y la parte pública de /cuenta se rediseña en cuenta-web.css con estos tokens. */

:root{
  color-scheme:dark;
  --st-bg:#07111f;--st-bg-2:#0b1728;--st-surface:#101f34;--st-surface-2:#13243a;--st-surface-3:#1a2e4a;
  --st-field:#0a1626;--st-overlay:rgba(3,8,18,.72);
  --st-border:rgba(125,155,205,.13);--st-border-2:rgba(125,155,205,.24);--st-border-3:rgba(150,175,225,.36);
  --st-text:#e8eef8;--st-text-2:#a7b5cc;--st-text-3:#71839f;
  --st-primary:#7c4dff;--st-primary-hi:#a88bff;--st-primary-rgb:124,77,255;--st-secondary:#2f80ff;--st-secondary-rgb:47,128,255;--st-accent:#e040fb;
  --st-grad:linear-gradient(100deg,#7c4dff 0%,#5b5cff 52%,#2f80ff 100%);
  --st-grad-soft:linear-gradient(135deg,rgba(var(--st-primary-rgb),.20),rgba(var(--st-secondary-rgb),.10));
  --st-success:#34d399;--st-success-rgb:52,211,153;--st-warning:#fbbf24;--st-warning-rgb:251,191,36;
  --st-danger:#fb7185;--st-danger-rgb:251,113,133;--st-info:#60a5fa;--st-neutral:#8a9bb5;
  --st-r-card:14px;--st-r-lg:18px;--st-r-ctl:10px;--st-r-sm:8px;--st-r-pill:999px;
  --st-s1:4px;--st-s2:8px;--st-s3:12px;--st-s4:16px;--st-s5:24px;--st-s6:32px;--st-s7:40px;--st-s8:48px;
  --st-pad:24px;--st-gap:16px;--st-ctl-h:44px;
  --st-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 10px 30px rgba(0,0,0,.22);
  --st-shadow-lg:0 28px 80px rgba(0,0,0,.55);
  --st-glow:0 8px 24px rgba(var(--st-primary-rgb),.32);
  --st-focus:0 0 0 3px rgba(var(--st-primary-rgb),.35);
  --st-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --st-font-display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --st-fast:150ms;--st-mid:220ms;--st-ease:cubic-bezier(.2,.8,.2,1);
  /* Solo de la web: cabecera de cristal, velo de los botones planos, ancho de página y márgenes laterales. */
  --st-header-bg:rgba(7,17,31,.74);--st-hover:rgba(255,255,255,.05);--st-tint:rgba(255,255,255,.025);
  --st-wrap:1180px;--st-gutter:clamp(16px,4vw,32px);
}
/* Modo claro: mismas formas y el mismo degradado de marca; superficies blancas y textos con contraste AA. */
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --st-bg:#f4f6fb;--st-bg-2:#eaeef6;--st-surface:#ffffff;--st-surface-2:#fbfcff;--st-surface-3:#eef2fa;
    --st-field:#ffffff;--st-overlay:rgba(15,23,42,.45);
    --st-border:rgba(20,40,80,.11);--st-border-2:rgba(20,40,80,.18);--st-border-3:rgba(20,40,80,.32);
    --st-text:#0e1a2f;--st-text-2:#44526a;--st-text-3:#5f6c84;
    --st-primary-hi:#5a2fe3;
    --st-success:#0b8a5f;--st-success-rgb:11,138,95;--st-warning:#a85406;--st-warning-rgb:217,119,6;
    --st-danger:#d9183f;--st-danger-rgb:225,29,72;--st-info:#2563eb;--st-neutral:#5f6f88;
    --st-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.07);
    --st-shadow-lg:0 24px 60px rgba(16,24,40,.14);
    --st-glow:0 8px 22px rgba(var(--st-primary-rgb),.26);
    --st-header-bg:rgba(244,246,251,.82);--st-hover:rgba(20,40,80,.06);--st-tint:rgba(20,40,80,.025);
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--st-font);font-size:15px;line-height:1.55;color:var(--st-text);
  background:radial-gradient(1100px 560px at 88% -140px,rgba(var(--st-primary-rgb),.13),transparent 62%) no-repeat,
    radial-gradient(900px 520px at -12% 380px,rgba(var(--st-secondary-rgb),.07),transparent 60%) no-repeat,var(--st-bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
main{flex:1 0 auto;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--st-primary-hi);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:is(h1,h2,h3,h4){font-family:var(--st-font-display);color:var(--st-text);letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:rgba(var(--st-primary-rgb),.40)}
:focus-visible{outline:2px solid var(--st-primary-hi);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(var(--st-wrap),100% - 2*var(--st-gutter));margin-inline:auto}
.muted{color:var(--st-text-2)}
.subtle{color:var(--st-text-3);font-size:13.5px}
.ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--st-r-ctl);background:var(--st-surface-3);color:var(--st-text);font-weight:600}
.skip-link:focus{top:12px}

/* ---------- Cabecera (todas las páginas; /codigos la genera scripts/codes.ts con .legal-header) ---------- */
.site-header,.legal-header{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;min-height:68px;
  padding:10px max(var(--st-gutter),(100% - var(--st-wrap))/2);border-bottom:1px solid var(--st-border);background:var(--st-header-bg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;color:var(--st-text);text-decoration:none;font-family:var(--st-font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px}
.site-nav,.legal-header nav{display:flex;align-items:center;gap:2px}
.site-nav a,.legal-header nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:var(--st-r-sm);color:var(--st-text-2);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:color var(--st-fast),background var(--st-fast)}
.site-nav a:hover,.legal-header nav a:hover{color:var(--st-text);background:var(--st-hover)}
.site-nav a[aria-current=page]{color:var(--st-text);background:var(--st-hover);box-shadow:inset 0 -2px 0 var(--st-primary)}
.site-actions{display:flex;align-items:center;gap:8px}

/* ---------- Botones (mismos nombres que antes en la web; aspecto de .btn de la app) ---------- */
.primary-btn,.secondary-btn,.ghost-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--st-ctl-h);padding:0 18px;
  border:1px solid var(--st-border-2);border-radius:var(--st-r-ctl);background:var(--st-surface-2);color:var(--st-text);font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background var(--st-fast) var(--st-ease),border-color var(--st-fast) var(--st-ease),box-shadow var(--st-mid) var(--st-ease),transform var(--st-fast) var(--st-ease),filter var(--st-fast)}
.primary-btn{background:var(--st-grad);border-color:transparent;color:#fff;box-shadow:var(--st-glow)}
.primary-btn:hover{filter:brightness(1.1);box-shadow:0 10px 30px rgba(var(--st-primary-rgb),.45);text-decoration:none}
.secondary-btn:hover{background:var(--st-surface-3);border-color:var(--st-border-3);text-decoration:none}
.ghost-btn{background:transparent;border-color:transparent;color:var(--st-text-2)}
.ghost-btn:hover{background:var(--st-hover);color:var(--st-text);text-decoration:none}
:is(.primary-btn,.secondary-btn,.ghost-btn):active{transform:translateY(1px)}
:is(.primary-btn,.secondary-btn,.ghost-btn).small{min-height:38px;padding:0 14px;font-size:13.5px;border-radius:var(--st-r-sm)}
:is(.primary-btn,.secondary-btn,.ghost-btn).large{min-height:52px;padding:0 26px;font-size:15.5px;border-radius:12px}
:is(.primary-btn,.secondary-btn,.ghost-btn).full{width:100%}
:is(.primary-btn,.secondary-btn,.ghost-btn):is(:disabled,[aria-disabled=true],.disabled){opacity:.55;cursor:not-allowed;box-shadow:none;filter:none;transform:none}
.primary-btn .ico,.secondary-btn .ico{width:18px;height:18px}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}
.text-link .ico{width:16px;height:16px;transition:transform var(--st-fast) var(--st-ease)}
.text-link:hover .ico{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- Tarjetas, fichas y etiquetas ---------- */
.card{position:relative;min-width:0;padding:var(--st-pad);border:1px solid var(--st-border);border-radius:var(--st-r-card);background:linear-gradient(180deg,var(--st-surface-2),var(--st-surface));box-shadow:var(--st-shadow)}
.card-hero{border-color:var(--st-border-2);background:radial-gradient(120% 160% at 0% 0%,rgba(var(--st-primary-rgb),.16),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(var(--st-secondary-rgb),.10),transparent 60%),linear-gradient(180deg,var(--st-surface-2),var(--st-surface))}
.icon-chip{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:var(--st-grad-soft);border:1px solid rgba(var(--st-primary-rgb),.25);color:var(--st-primary-hi)}
.icon-chip .ico{width:21px;height:21px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--st-primary-hi)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px;border:1px solid var(--st-border-2);border-radius:var(--st-r-pill);background:var(--st-tint);color:var(--st-text-2);font-size:13px;font-weight:600;white-space:nowrap}
.chip .ico{width:15px;height:15px}
.chip-primary{color:var(--st-primary-hi);border-color:rgba(var(--st-primary-rgb),.38);background:rgba(var(--st-primary-rgb),.10)}
.badge{--tone:var(--st-neutral);--tone-rgb:138,155,181;display:inline-flex;align-items:center;gap:7px;min-height:24px;padding:0 10px 0 9px;border-radius:var(--st-r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--tone);background:rgba(var(--tone-rgb),.12);border:1px solid rgba(var(--tone-rgb),.32)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.no-dot::before{display:none}
.badge[data-tone=success]{--tone:var(--st-success);--tone-rgb:var(--st-success-rgb)}
.badge[data-tone=warning]{--tone:var(--st-warning);--tone-rgb:var(--st-warning-rgb)}
.badge[data-tone=primary]{--tone:var(--st-primary-hi);--tone-rgb:var(--st-primary-rgb)}
.dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--st-success);box-shadow:0 0 0 3px rgba(var(--st-success-rgb),.18),0 0 12px rgba(var(--st-success-rgb),.5)}

/* ---------- Secciones ---------- */
.section{padding:clamp(56px,8vw,96px) 0}
.section-head{max-width:740px;margin:0 0 clamp(28px,4vw,40px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:10px 0 0;font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.025em}
.section-head p{margin:14px 0 0;color:var(--st-text-2);font-size:16.5px;line-height:1.65}
.page-hero{padding:clamp(40px,7vw,80px) 0 clamp(24px,4vw,40px)}
.page-hero h1{margin:12px 0 0;font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.035em}
.lead{margin:16px 0 0;max-width:680px;color:var(--st-text-2);font-size:clamp(16px,1.6vw,18px);line-height:1.65}
.grad-text{background:var(--st-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Listas con marca ---------- */
.check-list{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.check-list li{position:relative;padding-left:28px;color:var(--st-text-2);line-height:1.5}
.check-list li strong{color:var(--st-text);font-weight:600}
.check-list li::before{content:"";position:absolute;left:3px;top:.34em;width:11px;height:6px;border-left:2px solid var(--st-success);border-bottom:2px solid var(--st-success);transform:rotate(-45deg)}

/* ---------- Tarjetas de plan (portada y /precios) ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--st-gap);max-width:920px;margin-inline:auto}
.plan-card{display:flex;flex-direction:column;gap:18px;padding:28px}
.plan-card>.primary-btn,.plan-card>.secondary-btn,.plan-card>.plan-cta{margin-top:auto}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan-head :is(h2,h3){margin:0;font-size:22px;letter-spacing:-.01em}
.plan-price{display:grid;gap:4px;margin:0}
.plan-price strong{font-family:var(--st-font-display);font-size:clamp(34px,4vw,42px);font-weight:700;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan-price strong small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--st-text-2)}
.plan-price>span{color:var(--st-text-2);font-size:14px}
.plan-sum{margin:0;padding-bottom:18px;border-bottom:1px solid var(--st-border);color:var(--st-text-2)}
.plan-pro{border-color:rgba(var(--st-primary-rgb),.45);box-shadow:var(--st-shadow),0 24px 60px -24px rgba(var(--st-primary-rgb),.45)}
@media (max-width:760px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .plan-card{padding:22px}
}

/* ---------- Avisos ---------- */
.notice{display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border:1px solid rgba(var(--st-primary-rgb),.35);border-radius:12px;background:rgba(var(--st-primary-rgb),.08);color:var(--st-text);line-height:1.55}
.notice .ico{margin-top:1px;color:var(--st-primary-hi)}
.notice.warning{border-color:rgba(var(--st-warning-rgb),.42);background:rgba(var(--st-warning-rgb),.10)}
.notice.warning .ico{color:var(--st-warning)}

/* ---------- Preguntas frecuentes (acordeón de la app) ---------- */
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--st-border);border-radius:var(--st-r-card);background:linear-gradient(180deg,var(--st-surface-2),var(--st-surface));transition:border-color var(--st-mid)}
.faq details[open]{border-color:var(--st-border-2)}
.faq summary{display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;border-radius:var(--st-r-card)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid var(--st-text-2);border-bottom:2px solid var(--st-text-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--st-mid) var(--st-ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq summary:hover{background:var(--st-tint)}
.faq details>:not(summary){margin:0;padding:0 18px 16px;color:var(--st-text-2);line-height:1.65}
.faq details>p+p{padding-top:0;margin-top:-6px}

/* ---------- Pie ---------- */
.site-footer{margin-top:auto;border-top:1px solid var(--st-border);background:linear-gradient(180deg,transparent,rgba(var(--st-primary-rgb),.04))}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px 32px;padding:44px 0 28px}
.footer-about p{margin:12px 0 0;max-width:340px;color:var(--st-text-2);font-size:14px;line-height:1.6}
.footer-col h2{margin:0 0 10px;font-family:var(--st-font);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--st-text-3)}
.footer-col ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
/* El correo de soporte lleva <wbr> tras la @: en una columna estrecha corta ahí y no a mitad de palabra. */
.footer-col a,.footer-col span{display:inline-block;padding:3px 0;color:var(--st-text-2);font-size:14px;text-decoration:none;overflow-wrap:break-word}
.footer-col a:hover{color:var(--st-text);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:18px 0 28px;border-top:1px solid var(--st-border);color:var(--st-text-3);font-size:13px}
.footer-bottom p{margin:0}

/* ---------- Pantallas estrechas ---------- */
/* Cabecera en dos filas, sin JavaScript, por debajo de 900 px. La fila única (logo, 4 enlaces, «Mi cuenta» y «Descargar»)
   mide ≈740 px con Segoe UI más 64 px de márgenes, y más con fuentes anchas (San Francisco en iPad, Roboto): en una tableta
   vertical (768–834 px) se partía sola y la cabecera fija ocupaba 107 px y tapaba los títulos de los anclajes. */
@media (max-width:900px){
  html{scroll-padding-top:16px}
  .site-header,.legal-header{position:static;gap:8px 12px;padding-top:12px;padding-bottom:8px}
  /* Los enlaces van en su propia fila y, si no caben, siguen en otra: nunca quedan cortados ni escondidos. */
  .site-nav,.legal-header nav{order:3;flex-wrap:wrap;width:100%;margin:0 -6px;padding:0 0 2px}
  .site-nav a,.legal-header nav a{min-height:36px;padding:0 10px;font-size:13.5px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-about{grid-column:1/-1}
}
@media (max-width:760px){
  .brand{font-size:17px;gap:8px}
  .brand img{width:30px;height:30px}
  .site-actions{gap:6px}
  :is(.primary-btn,.secondary-btn,.ghost-btn).small{min-height:36px;padding:0 12px;font-size:13px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:36px}
}
/* Teléfonos: «Mi cuenta» y «Descargar» se ven siempre. Se compactan los botones y los enlaces (los 4 caben en una fila a
   360 px) y, por debajo de 360 px, el nombre junto al logo deja de verse (los lectores de pantalla lo siguen leyendo). */
@media (max-width:400px){
  :is(.site-header,.legal-header) .brand{font-size:16px}
  .site-actions :is(.primary-btn,.secondary-btn,.ghost-btn).small{padding:0 10px}
  .site-nav,.legal-header nav{gap:0}
  .site-nav a,.legal-header nav a{padding:0 8px;font-size:13px}
}
@media (max-width:359px){
  .site-header .brand span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}