/* =========================================================
   sss-tik.com — Diseño TikTok Downloader (tema morado)
   La mayor parte del estilo es inline en el HTML (diseño base).
   Aquí van: reset, animaciones, responsive y utilidades de estado.
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff; -webkit-font-smoothing: antialiased; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif; color: #0f1729; overflow-x: hidden; }
::selection { background: #e2d4ff; }
img { max-width: 100%; }
a { color: inherit; }
strong { color: #0f1729; font-weight: 700; }

@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes barFill { from { width: 0; } }

/* ---- Selector de idioma ---- */
.lang-menu { display: none; }
.lang-switch.open .lang-menu { display: block; animation: fadeUp .16s ease; }
.lang-chev { transition: transform .15s ease; }
.lang-switch.open .lang-chev { transform: rotate(180deg); }

/* ---- Acordeón FAQ ---- */
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-sign::after { content: "+"; }
.faq-item.open .faq-sign::after { content: "–"; }

/* ---- Botón con hover (opciones de descarga / nav) ---- */
.dl-go:hover { filter: brightness(1.05); }
.opt-hd:hover { background: #ece0ff !important; border-color: #7c3aed !important; }
.opt-alt:hover { border-color: #cfd6e4 !important; background: #fafbfe !important; }
.nav-links a:hover { color: #7c3aed !important; }
.foot-link:hover { color: #fff !important; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .nav-links { display: none !important; }
    .nav-bar { gap: 10px !important; padding-left: 16px !important; padding-right: 16px !important; }
    .dl-bar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 12px !important; border-radius: 16px !important; }
    .dl-ico { display: none !important; }
    .dl-bar input { width: 100% !important; padding: 6px 4px !important; text-align: center; }
    .dl-go { width: 100% !important; justify-content: center !important; }
    .dl-trust { flex-direction: column !important; gap: 8px !important; }
    .result-card { flex-direction: column !important; }
    .result-thumb { width: 100% !important; height: 220px !important; }
}