/* ==========================================================================
uStreamers — Official Design System & Stylesheet
Identity: Pure Black (#000000) & Pure White (#ffffff)
Brand Accent: Neon Pink (#ff68c8) ➔ Neon Coral (#ff5071)
Platforms: Twitch (#9146FF), Kick (#53FC18), TikTok (#00F2FE / #FE2C55)
========================================================================== */
/* Las fuentes se cargan con +
desde el de cada pagina: el @import las encadenaba detras de este CSS. */
:root {
color-scheme: dark;
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Brand Accents */
--brand-pink: #ff68c8;
--brand-coral: #ff5071;
--brand-gradient: linear-gradient(135deg, #ff68c8 0%, #ff5071 100%);
--brand-gradient-hover: linear-gradient(135deg, #ff7ecc 0%, #ff6281 100%);
--brand-glow: rgba(255, 104, 200, 0.28);
--brand-glow-subtle: rgba(255, 104, 200, 0.12);
/* Platforms */
--twitch-color: #9146FF;
--kick-color: #53FC18;
--tiktok-cyan: #00F2FE;
--tiktok-red: #FE2C55;
/* Pantalla del telefono de la demo. No se redefine en el tema claro: es una
captura de la app corriendo, y el chat de la app se usa en oscuro. */
--ph-bg: #0b0b10;
--ph-surface: #14141c;
--ph-surface-alt: #1b1b26;
--ph-border: rgba(255, 255, 255, 0.09);
--ph-text: #f4f4f7;
--ph-muted: #8b8b99;
/* Dark Theme (Default) */
--bg: #000000;
--bg-gradient: radial-gradient(circle at 50% -10%, rgba(255, 104, 200, 0.18) 0%, rgba(255, 80, 113, 0.06) 35%, transparent 65%);
--surface: #0a0a0d;
--surface-card: #0e0e13;
--surface-hover: #14141c;
--surface-elevated: #161620;
--border: #22232c;
--border-card: #282834;
--border-hover: rgba(255, 104, 200, 0.45);
--text: #ffffff;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--header-bg: rgba(0, 0, 0, 0.75);
--badge-bg: rgba(255, 255, 255, 0.06);
--shadow-card: 0 12px 36px -8px rgba(0, 0, 0, 0.7);
--shadow-glow: 0 0 32px -4px rgba(255, 104, 200, 0.3);
}
[data-theme="light"] {
color-scheme: light;
--bg: #ffffff;
--bg-gradient: radial-gradient(circle at 50% -10%, rgba(255, 104, 200, 0.1) 0%, rgba(255, 80, 113, 0.04) 35%, transparent 65%);
--surface: #f8f9fc;
--surface-card: #ffffff;
--surface-hover: #f3f4f8;
--surface-elevated: #ffffff;
--border: #e2e8f0;
--border-card: #e5e7eb;
--border-hover: rgba(255, 104, 200, 0.6);
--text: #09090b;
--text-secondary: #4b5563;
--text-muted: #6b7280;
--header-bg: rgba(255, 255, 255, 0.82);
--badge-bg: rgba(0, 0, 0, 0.05);
--shadow-card: 0 12px 36px -8px rgba(0, 0, 0, 0.08);
--shadow-glow: 0 0 32px -4px rgba(255, 104, 200, 0.2);
}
/* ==========================================================================
Base & Reset
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--bg);
background-image: var(--bg-gradient);
background-attachment: fixed;
color: var(--text);
font-family: var(--font-body);
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.25s ease, color 0.25s ease;
}
/* Page Layout */
.page {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* ==========================================================================
Header / Navbar
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--header-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
transition: background 0.25s ease, border-color 0.25s ease;
}
.header-inner {
max-width: 1180px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--text);
font-family: var(--font-heading);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
transition: opacity 0.15s ease;
}
.brand:hover {
opacity: 0.9;
}
.site-logo-img {
width: 36px;
height: 36px;
display: block;
border-radius: 8px;
object-fit: contain;
filter: drop-shadow(0 2px 8px var(--brand-glow-subtle));
transition: transform 0.2s ease;
}
.brand:hover .site-logo-img {
transform: scale(1.05);
}
/* Que logo se ve lo decide el tema desde el CSS y no app.js: theme-init.js fija
data-theme antes del primer pintado, asi que en modo claro ya no aparece el
logo oscuro durante un instante. */
.site-logo-img--light {
display: none;
}
[data-theme="light"] .site-logo-img--dark {
display: none;
}
[data-theme="light"] .site-logo-img--light {
display: block;
}
.brand-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.site-nav {
display: flex;
align-items: center;
gap: 24px;
}
.nav-link {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: color 0.15s ease;
position: relative;
padding: 4px 0;
}
.nav-link:hover,
.nav-link.active {
color: var(--text);
}
.nav-link.active::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 2px;
background: var(--brand-gradient);
border-radius: 999px;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Theme Toggle Button */
.theme-toggle {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-secondary);
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.theme-toggle:hover {
color: var(--brand-pink);
border-color: var(--brand-pink);
background: var(--surface-hover);
transform: translateY(-1px);
}
.theme-toggle svg {
width: 20px;
height: 20px;
}
/* Language Switcher */
.lang-switch {
display: flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
padding: 2px;
}
.lang-switch a {
padding: 6px 12px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
transition: all 0.15s ease;
}
.lang-switch a:hover {
color: var(--text);
}
.lang-switch a.active {
color: #ffffff;
background: var(--brand-gradient);
box-shadow: 0 2px 8px var(--brand-glow-subtle);
}
/* ==========================================================================
Hero Section
========================================================================== */
.hero {
padding: 72px 0 60px;
text-align: center;
position: relative;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: var(--surface-card);
border: 1px solid var(--border-card);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--text);
box-shadow: var(--shadow-card);
margin-bottom: 28px;
animation: fadeInDown 0.6s ease;
}
.hero-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand-coral);
box-shadow: 0 0 10px var(--brand-coral);
animation: pulse 2s infinite;
}
.hero h1 {
font-family: var(--font-heading);
font-size: clamp(38px, 6.5vw, 76px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.035em;
margin-bottom: 24px;
color: var(--text);
}
.hero-gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline;
}
.hero p.lead {
font-size: clamp(17px, 2.2vw, 21px);
color: var(--text-secondary);
max-width: 680px;
margin: 0 auto 36px;
line-height: 1.6;
}
.hero-cta-group {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary {
background: var(--brand-gradient);
color: #ffffff;
box-shadow: 0 6px 24px -4px var(--brand-glow);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
background: var(--brand-gradient-hover);
transform: translateY(-2px);
box-shadow: 0 10px 30px -2px var(--brand-glow);
}
.btn-secondary {
background: var(--surface-card);
color: var(--text);
border: 1px solid var(--border-card);
box-shadow: var(--shadow-card);
}
.btn-secondary:hover {
background: var(--surface-hover);
border-color: var(--border-hover);
transform: translateY(-2px);
}
/* Supported Platforms Banner */
.hero-platforms {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.platform-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--text);
transition: all 0.2s ease;
}
.platform-tag:hover {
transform: translateY(-2px);
}
.platform-tag.twitch:hover {
border-color: var(--twitch-color);
box-shadow: 0 0 16px rgba(145, 70, 255, 0.25);
}
.platform-tag.kick:hover {
border-color: var(--kick-color);
box-shadow: 0 0 16px rgba(83, 252, 24, 0.25);
}
.platform-tag.tiktok:hover {
border-color: var(--tiktok-cyan);
box-shadow: 0 0 16px rgba(0, 242, 254, 0.25);
}
.plat-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.platform-tag.twitch .plat-icon { color: var(--twitch-color); }
.platform-tag.kick .plat-icon { color: var(--kick-color); }
.platform-tag.tiktok .plat-icon { color: var(--tiktok-cyan); }
/* ==========================================================================
Demo Interactiva: el chat fusionado corriendo en un telefono
--------------------------------------------------------------------------
La pantalla del telefono NO sigue el tema del sitio: es una captura de la
app, y la app de chat se usa en oscuro. En modo claro se ve un telefono
oscuro, que es exactamente lo que se veria en la mano de alguien.
Las insignias y los logos son los MISMOS archivos que la app y el overlay
(assets/badges/), no dibujos aparte que puedan discrepar de lo que se ve
al abrir la app.
========================================================================== */
.demo-section {
padding: 30px 0 70px;
}
.demo-stage {
display: flex;
align-items: center;
justify-content: center;
gap: 56px;
flex-wrap: wrap;
}
/* --- Carcasa del dispositivo --- */
.phone-shell {
position: relative;
width: min(344px, 100%);
/* min-width:0 explicito: sin esto el telefono no puede achicarse por debajo
del ancho minimo de su contenido y, en una pantalla de 320 px, se sale de
la pagina y arrastra a todo lo demas con el. */
min-width: 0;
flex-shrink: 0;
padding: 11px;
border-radius: 46px;
background: linear-gradient(160deg, #2c2c35 0%, #0c0c11 42%, #26262f 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.85), 0 0 70px -14px var(--brand-glow);
}
.phone-shell::before {
content: "";
position: absolute;
inset: -34px 0 10px;
border-radius: 60px;
background: radial-gradient(circle at 50% 30%, var(--brand-glow) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
}
/* El boton lateral: un trazo sobre el marco, lo justo para que se lea como un
telefono y no como un rectangulo redondeado. */
.phone-shell::after {
content: "";
position: absolute;
right: -2px;
top: 150px;
width: 3px;
height: 58px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #3a3a45, #16161c);
}
.phone-screen {
position: relative;
height: min(620px, 74vh);
min-height: 480px;
border-radius: 36px;
overflow: hidden;
background: var(--ph-bg);
color: var(--ph-text);
display: flex;
flex-direction: column;
font-family: var(--font-body);
}
.phone-notch {
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 21px;
border-radius: 999px;
background: #000000;
z-index: 6;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 9px;
}
.phone-notch span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #1d2733;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px 6px;
font-size: 11px;
font-weight: 700;
color: var(--ph-text);
flex-shrink: 0;
}
.phone-status-icons {
display: flex;
align-items: center;
gap: 5px;
color: var(--ph-text);
}
.phone-status-icons svg {
width: 15px;
height: 11px;
fill: currentColor;
}
/* --- Cabecera del canal --- */
.app-topbar {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 12px 9px;
border-bottom: 1px solid var(--ph-border);
flex-shrink: 0;
}
.app-back {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--ph-muted);
}
.app-back svg {
width: 100%;
height: 100%;
}
.channel-avatar {
position: relative;
width: 34px;
height: 34px;
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
font-family: var(--font-heading);
font-weight: 800;
font-size: 15px;
color: #ffffff;
background: var(--brand-gradient);
box-shadow: 0 0 0 2px var(--ph-bg), 0 0 0 3.5px var(--brand-coral);
}
.channel-meta {
min-width: 0;
flex: 1;
}
.channel-name {
display: block;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.channel-sub {
display: block;
font-size: 10.5px;
color: var(--ph-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.live-chip {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ff8fa3;
background: rgba(255, 80, 113, 0.14);
border: 1px solid rgba(255, 80, 113, 0.38);
border-radius: 999px;
padding: 3px 7px;
}
.live-pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-coral);
box-shadow: 0 0 8px var(--brand-coral);
animation: pulse 1.5s infinite;
flex-shrink: 0;
}
/* --- Contadores de audiencia --- */
.app-viewers {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
padding: 8px 12px;
border-bottom: 1px solid var(--ph-border);
flex-shrink: 0;
}
.viewer-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: var(--ph-muted);
background: var(--ph-surface);
border: 1px solid var(--ph-border);
border-radius: 999px;
padding: 3px 7px;
}
.viewer-pill img {
width: 12px;
height: 12px;
border-radius: 3px;
}
.viewer-pill.total {
margin-left: auto;
color: #ffffff;
background: rgba(255, 80, 113, 0.12);
border-color: rgba(255, 80, 113, 0.4);
}
/* --- Barra de filtros: los mismos logos y el acento en el borde que la app --- */
.mockup-filters {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-bottom: 1px solid var(--ph-border);
flex-shrink: 0;
}
.chat-filter-btn {
width: 38px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
border-radius: 9px;
background: var(--ph-surface-alt);
border: 1px solid transparent;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.chat-filter-btn img {
width: 18px;
height: 18px;
border-radius: 4px;
}
.chat-filter-btn:hover {
opacity: 0.85;
}
.chat-filter-btn.active {
opacity: 1;
}
.chat-filter-btn.active[data-platform="all"] { border-color: rgba(255, 255, 255, 0.75); }
.chat-filter-btn.active[data-platform="twitch"] { border-color: var(--twitch-color); }
.chat-filter-btn.active[data-platform="kick"] { border-color: var(--kick-color); }
.chat-filter-btn.active[data-platform="tiktok"] { border-color: var(--tiktok-cyan); }
/* --- Lista de mensajes --- */
.mock-chat-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mock-chat-body::-webkit-scrollbar {
display: none;
}
/* Una fila con una linea de pelo abajo, como en la app: con burbujas separadas
entraba la mitad de mensajes en la misma altura de pantalla. */
.mock-msg {
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.mock-msg-new {
animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.msg-author-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 3px;
}
.plat-chip {
width: 20px;
height: 20px;
border-radius: 5px;
background: var(--ph-surface);
display: grid;
place-items: center;
flex-shrink: 0;
}
.plat-chip img {
width: 14px;
height: 14px;
border-radius: 3px;
}
.user-badge {
width: 16px;
height: 16px;
border-radius: 3px;
flex-shrink: 0;
object-fit: contain;
}
/* Escalon 3 de la app: la insignia sin imagen propia (sub con meses, fundador,
sub_gifter) se dibuja como glifo sobre color. */
.badge-glyph {
height: 16px;
min-width: 16px;
padding: 0 3px;
border-radius: 3px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
line-height: 1;
}
.glyph-sub-twitch { background: var(--twitch-color); color: #ffffff; }
.glyph-sub-kick { background: var(--kick-color); color: #000000; }
.glyph-founder { background: #e58e26; color: #ffffff; }
.glyph-gifter { background: #20bf6b; color: #ffffff; }
.msg-user {
flex: 1;
min-width: 0;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Nombre dorado de uStreamers Plus+. En la app es un texto con brillo animado;
aca es el mismo degradado recortado sobre las letras. */
.msg-user--gold {
background: linear-gradient(100deg, #f7d27a 0%, #fff6d0 25%, #d99a2b 50%, #fff6d0 75%, #f7d27a 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: goldShimmer 3.4s linear infinite;
}
.msg-time {
font-size: 10px;
color: var(--ph-muted);
flex-shrink: 0;
}
.msg-text {
font-size: 13.5px;
line-height: 1.5;
color: #e8e8ee;
word-break: break-word;
}
/* El GIF, bloque propio debajo del texto y con el ancho de la rendicion
liviana (200 px), igual que ChatGifAttachmentView en la app. */
.msg-gif {
position: relative;
display: block;
width: 200px;
max-width: 100%;
margin-top: 6px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.msg-gif img {
display: block;
width: 100%;
height: auto;
}
.gif-tag {
position: absolute;
top: 6px;
left: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
color: #ffffff;
background: rgba(0, 0, 0, 0.62);
border-radius: 4px;
padding: 2px 5px;
}
/* Acuse de envio: un chip por plataforma que confirmo el mensaje propio. */
.msg-sendstate {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.sendstate-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9.5px;
font-weight: 700;
color: var(--ph-muted);
background: var(--ph-surface);
border: 1px solid var(--ph-border);
border-radius: 999px;
padding: 2px 7px;
}
.sendstate-chip img {
width: 11px;
height: 11px;
border-radius: 2px;
}
.sendstate-chip svg {
width: 10px;
height: 10px;
}
.sendstate-chip.twitch { border-color: rgba(145, 70, 255, 0.55); color: #c4a2ff; }
.sendstate-chip.kick { border-color: rgba(83, 252, 24, 0.5); color: #9bf07a; }
.sendstate-chip.tiktok { border-color: rgba(0, 242, 254, 0.5); color: #8ceff8; }
/* --- Barra de entrada --- */
.app-input-row {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
background: var(--ph-surface);
border-top: 1px solid var(--ph-border);
flex-shrink: 0;
}
.input-icon-btn {
width: 30px;
height: 30px;
flex-shrink: 0;
display: grid;
place-items: center;
border: 1px solid var(--ph-border);
border-radius: 8px;
background: var(--ph-surface-alt);
color: var(--ph-muted);
cursor: pointer;
font-family: var(--font-heading);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.04em;
}
.input-icon-btn svg {
width: 16px;
height: 16px;
}
.mock-input {
flex: 1;
min-width: 0;
background: var(--ph-bg);
border: 1px solid var(--ph-border);
border-radius: 999px;
padding: 8px 12px;
font-size: 11.5px;
color: var(--ph-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
.mock-send-btn {
width: 32px;
height: 32px;
flex-shrink: 0;
display: grid;
place-items: center;
border: none;
border-radius: 50%;
background: var(--brand-gradient);
color: #ffffff;
cursor: pointer;
box-shadow: 0 2px 10px var(--brand-glow-subtle);
}
.mock-send-btn svg {
width: 15px;
height: 15px;
}
.phone-home {
height: 18px;
display: grid;
place-items: center;
background: var(--ph-surface);
flex-shrink: 0;
}
.phone-home span {
width: 108px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
}
/* --- Columna de apuntes, al costado del telefono --- */
.demo-side {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 330px;
}
.demo-notes {
list-style: none;
display: flex;
flex-direction: column;
gap: 24px;
}
.demo-note {
display: flex;
gap: 12px;
}
.demo-note-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--badge-bg);
border: 1px solid var(--border);
color: var(--brand-pink);
}
.demo-note-icon svg {
width: 18px;
height: 18px;
}
.demo-note h3 {
font-family: var(--font-heading);
font-size: 15px;
margin-bottom: 4px;
}
.demo-note p {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.demo-caption {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
@keyframes goldShimmer {
to { background-position: -300% 0; }
}
/* ==========================================================================
Features Section
========================================================================== */
.features-section {
padding: 70px 0;
}
.section-header {
text-align: center;
max-width: 640px;
margin: 0 auto 48px;
}
.section-subtitle {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand-pink);
margin-bottom: 8px;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 14px;
}
.section-lead {
font-size: 16px;
color: var(--text-secondary);
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 960px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.feature-card {
background: var(--surface-card);
border: 1px solid var(--border-card);
border-radius: 16px;
padding: 30px 24px;
box-shadow: var(--shadow-card);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand-gradient);
opacity: 0;
transition: opacity 0.25s ease;
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--border-hover);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-icon-wrap {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--brand-pink);
box-shadow: 0 4px 12px var(--brand-glow-subtle);
}
.feature-icon-wrap svg {
width: 24px;
height: 24px;
}
.feature-card h3 {
font-family: var(--font-heading);
font-size: 19px;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
}
.feature-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ==========================================================================
Store Downloads Section
========================================================================== */
.store-section {
padding: 60px 0 80px;
text-align: center;
}
/* Mismo ancho y misma separacion que .features-grid: las dos filas de tarjetas
arrancan y terminan en la misma linea, y cada tienda gana los ~25px que le
faltaban al nombre.
Las columnas van fijas (4 / 2 / 1) y no con auto-fit: son cuatro tiendas, y
con auto-fit los anchos intermedios dejaban tres arriba y una sola huerfana
abajo. */
.store-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1100px) {
.store-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.store-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon label"
". pill";
align-items: center;
gap: 14px 16px;
background: var(--surface-card);
border: 1px solid var(--border-card);
border-radius: 16px;
padding: 20px;
text-decoration: none;
color: var(--text);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.store-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
transition: width 0.2s ease;
}
.store-card.google::before { background: linear-gradient(180deg, #00D9FF, #34A853, #FBBC05, #EA4335); }
.store-card.apple::before { background: linear-gradient(180deg, #a9a9b3, #ffffff); }
.store-card.chrome::before { background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0 100%); }
.store-card.firefox::before { background: linear-gradient(180deg, #FF9500, #FF3B30); }
.store-card:hover {
border-color: var(--border-hover);
}
.store-card .store-icon-box {
grid-area: icon;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text);
}
.store-card .store-icon-box svg {
width: 24px;
height: 24px;
}
.store-card .label {
grid-area: label;
display: flex;
flex-direction: column;
text-align: left;
gap: 3px;
/* Sin esto una columna estrecha no deja que el nombre se acomode y la
tarjeta se ensancha por dentro. */
min-width: 0;
}
.store-card .store-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
color: var(--text);
}
.store-card .store-hint {
font-size: 12px;
color: var(--text-secondary);
}
.store-card .pill-soon {
grid-area: pill;
justify-self: start;
}
.pill-soon {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-pink);
background: var(--brand-glow-subtle);
border: 1px solid rgba(255, 104, 200, 0.3);
padding: 4px 8px;
border-radius: 999px;
white-space: nowrap;
animation: pulseSlow 3s infinite ease-in-out;
}
/* ==========================================================================
Streamer Call to Action Banner
========================================================================== */
.cta-banner-section {
padding: 30px 0 80px;
}
.cta-banner {
background: var(--surface-card);
border: 1px solid var(--border-card);
border-radius: 20px;
padding: 48px 32px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card), var(--shadow-glow);
}
.cta-banner::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(255, 104, 200, 0.12) 0%, transparent 60%);
pointer-events: none;
}
.cta-banner h2 {
font-family: var(--font-heading);
font-size: clamp(26px, 3.8vw, 36px);
font-weight: 800;
margin-bottom: 14px;
}
.cta-banner p {
font-size: 16px;
color: var(--text-secondary);
max-width: 580px;
margin: 0 auto 28px;
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
max-width: 1180px;
margin: 0 auto;
border-top: 1px solid var(--border);
padding: 48px 24px 54px;
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
.footer-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.footer-nav a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: color 0.15s ease;
}
.footer-nav a:hover {
color: var(--brand-pink);
text-decoration: underline;
}
.footer-disclaimer {
max-width: 720px;
margin: 0 auto 12px;
line-height: 1.6;
}
.footer-copyright {
color: var(--text-muted);
font-size: 12px;
}
/* ==========================================================================
Animations
========================================================================== */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.7; }
}
@keyframes pulseSlow {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.55; }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
Responsive Adjustments
========================================================================== */
@media (max-width: 768px) {
.site-nav {
display: none;
}
.hero {
padding: 48px 0 40px;
}
.header-inner {
padding: 12px 16px;
}
.demo-stage {
gap: 36px;
}
.demo-side {
max-width: 440px;
}
.features-grid {
grid-template-columns: 1fr;
}
.store-grid {
grid-template-columns: 1fr;
}
.footer-nav {
gap: 16px;
}
}
@media (max-width: 480px) {
.page {
padding: 0 16px;
}
/* En un telefono real la demo ya no necesita marco: el marco es la pantalla.
Se achica el bisel y la altura para que entre sin obligar a hacer scroll. */
.phone-shell {
padding: 8px;
border-radius: 38px;
}
.phone-screen {
height: min(560px, 72vh);
border-radius: 30px;
}
.app-viewers {
gap: 4px;
}
.viewer-pill {
font-size: 9.5px;
padding: 3px 6px;
}
.hero-cta-group {
flex-direction: column;
align-items: stretch;
}
.hero-cta-group .btn {
justify-content: center;
}
.site-footer {
padding: 40px 16px 48px;
}
}
/* ==========================================================================
Accesibilidad: respetar la preferencia de movimiento reducido
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Preguntas Frecuentes (FAQ)
========================================================================== */
.faq-page-main {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 80px;
}
.faq-header {
text-align: center;
margin-bottom: 36px;
}
.faq-search-wrapper {
position: relative;
margin-bottom: 24px;
}
.faq-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
width: 18px;
height: 18px;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.faq-search-icon svg {
width: 18px;
height: 18px;
}
.faq-search-input {
width: 100%;
background: var(--surface-card);
border: 1px solid var(--border-card);
border-radius: 14px;
padding: 14px 18px 14px 44px;
font-size: 15px;
font-family: var(--font-body);
color: var(--text);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.faq-search-input:focus {
border-color: var(--brand-pink);
box-shadow: 0 0 0 3px var(--brand-glow-subtle);
background: var(--surface-elevated);
}
.faq-search-input::placeholder {
color: var(--text-muted);
}
/* Filtros de Categoría */
.faq-filter-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.faq-filter-btn {
background: var(--surface-card);
border: 1px solid var(--border-card);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
padding: 7px 16px;
border-radius: 9999px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.faq-filter-btn:hover {
color: var(--text);
border-color: var(--text-muted);
background: var(--surface-hover);
}
.faq-filter-btn.active {
background: var(--brand-gradient);
color: #ffffff;
border-color: transparent;
box-shadow: 0 2px 10px var(--brand-glow-subtle);
}
/* Acordeón de Preguntas */
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 48px;
}
.faq-item {
background: var(--surface-card);
border: 1px solid var(--border-card);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-card);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.faq-item:hover {
border-color: var(--border-hover);
}
.faq-item[open] {
border-color: var(--brand-pink);
box-shadow: 0 4px 20px -4px var(--brand-glow-subtle);
background: var(--surface-elevated);
}
.faq-question {
padding: 18px 20px;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--text);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
user-select: none;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::after {
content: "";
width: 9px;
height: 9px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg);
transition: transform 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
margin-right: 4px;
}
.faq-question:hover::after {
border-color: var(--brand-pink);
}
.faq-item[open] > .faq-question::after {
transform: rotate(-135deg);
border-color: var(--brand-pink);
}
.faq-answer {
padding: 0 20px 20px 20px;
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.65;
border-top: 1px solid transparent;
}
.faq-item[open] > .faq-answer {
border-top: 1px solid var(--border);
padding-top: 16px;
}
.faq-answer p {
margin: 0;
}
.faq-answer p + p {
margin-top: 10px;
}
.faq-answer a {
color: var(--brand-pink);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.faq-answer a:hover {
color: var(--brand-coral);
}
/* Estado Vacío */
.faq-empty-state {
text-align: center;
padding: 44px 20px;
color: var(--text-muted);
font-size: 15px;
background: var(--surface-card);
border: 1px dashed var(--border-card);
border-radius: 14px;
margin: 20px 0 36px;
}
.faq-empty-state[hidden] {
display: none !important;
}
.faq-support-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
@media (max-width: 640px) {
.faq-filter-bar {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 8px;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
gap: 8px;
}
.faq-filter-btn {
white-space: nowrap;
font-size: 12.5px;
padding: 6px 14px;
}
.faq-question {
font-size: 15px;
padding: 16px 16px;
}
.faq-answer {
padding: 0 16px 16px;
font-size: 14px;
}
}