/* ─── VIVIO landing ─ globals ──────────────────────────── */
/* Aquí había un @font-face 'Alata Local' apuntando al TTF de fonts/. Era la
misma tipografía que la Alata de Google, así que como respaldo no aportaba
nada, y sin embargo se descargaban sus 106 KB en toda visita: basta un glifo
que Alata no cubra (·, «», →) para que el navegador baje el siguiente
recurso de la pila. Si Google Fonts fallara, se cae a sans-serif, igual que
ya ocurre con Bebas Neue, DM Sans y DM Mono. */
/* Force Bebas Neue download — invisible 1px probe ensures the
browser requests the file before the headline first paints */
.font-probe {
position: fixed;
top: -100px; left: -100px;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
}
:root {
--display-font: 'Bebas Neue', sans-serif;
--ui-font: 'Alata', sans-serif;
--body-font: 'DM Sans', sans-serif;
--mono-font: 'DM Mono', monospace;
--zh-font: 'Noto Sans SC', sans-serif;
--y: #ffe600;
--y-mid: #f5c800;
--y-deep: #e6a800;
--y-glow: rgba(255, 230, 0, 0.18);
--y-soft: rgba(255, 230, 0, 0.08);
--bg-0: #050505;
--bg-1: #0a0a0a;
--bg-2: #111111;
--bg-3: #1a1a1a;
--bg-4: #232323;
--line: #2a2a2a;
--line-bright: #3a3a3a;
--fg-1: #ffffff;
--fg-2: #c4c4c4;
--fg-3: #909090;
--fg-4: #5a5a5a;
--maxw: 1280px;
--gutter: clamp(20px, 4vw, 80px);
}
[data-palette="subtle"] {
--y: #f5c800;
--y-glow: rgba(245, 200, 0, 0.10);
--y-soft: rgba(245, 200, 0, 0.04);
}
[data-bg="solid"] body {
background: var(--bg-1) !important;
}
[data-bg="solid"] .bg-gradient {
background: var(--bg-1) !important;
}
[data-display-font="archivo"] {
--display-font: 'Archivo', sans-serif;
}
[data-display-font="grotesk"] {
--display-font: 'Space Grotesk', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body {
background: var(--bg-1);
color: var(--fg-1);
font-family: var(--body-font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Clip horizontal overflow on body only — keeping it on (the scroll
root) breaks programmatic scrolling (window.scrollTo / scrollIntoView) in
Chromium, which we need for hash links like /#get-started. */
body {
overflow-x: clip;
}
body[data-lang="zh"] {
font-family: var(--zh-font);
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* Selection */
::selection { background: var(--y); color: #000; }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--y-deep); }
/* Display headings */
.display {
font-family: var(--display-font);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 0.95;
}
.display-archivo, [data-display-font="archivo"] .display,
[data-display-font="grotesk"] .display {
letter-spacing: -0.04em;
font-weight: 800;
}
.ui-font { font-family: var(--ui-font); }
.mono { font-family: var(--mono-font); }
.eyebrow {
font-family: var(--mono-font);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-3);
}
.eyebrow .dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--y);
box-shadow: 0 0 8px var(--y-glow);
margin-right: 8px;
vertical-align: middle;
}
/* Noise overlay */
.noise-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.04;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
[data-noise="false"] .noise-overlay { display: none; }
/* Background gradient */
.bg-gradient {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(1200px 700px at 80% -10%, rgba(255,230,0,0.10), transparent 60%),
radial-gradient(900px 600px at -10% 30%, rgba(255,230,0,0.06), transparent 60%),
radial-gradient(800px 500px at 50% 110%, rgba(255,230,0,0.05), transparent 60%),
linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-0) 100%);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 22px;
border-radius: 10px;
font-family: var(--ui-font);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid transparent;
cursor: pointer;
transition: all 200ms ease-out;
white-space: nowrap;
}
.btn-primary {
background: var(--y);
color: #0a0a0a;
box-shadow: 0 0 24px var(--y-glow), 0 0 1px var(--y);
}
.btn-primary:hover {
background: var(--y-mid);
transform: translateY(-1px);
box-shadow: 0 0 32px var(--y-glow), 0 0 1px var(--y);
}
.btn-primary:active {
background: var(--y-deep);
transform: translateY(0) scale(0.98);
}
.btn-ghost {
background: transparent;
color: var(--fg-1);
border-color: var(--line-bright);
}
.btn-ghost:hover {
border-color: var(--y);
color: var(--y);
}
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
/* Glowing Beam button — premium CTA with animated light traveling
the border + soft halo. Replaces .btn-primary on demo-call CTAs. */
@property --beam-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.btn-beam {
position: relative;
background: linear-gradient(180deg, #1a1408 0%, #0a0a0a 100%);
color: var(--y);
border: 1px solid rgba(255,230,0,0.22);
isolation: isolate;
font-weight: 600;
letter-spacing: 0.05em;
text-shadow: 0 0 14px rgba(255,230,0,0.55);
box-shadow:
0 0 24px rgba(255,230,0,0.18),
0 8px 28px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,230,0,0.08);
overflow: hidden;
}
.btn-beam::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.2px;
background: conic-gradient(from var(--beam-angle),
rgba(255,230,0,0) 0deg,
rgba(255,230,0,0) 70deg,
rgba(255,230,0,0.85) 88deg,
#fffce0 98deg,
rgba(255,230,0,0.85) 108deg,
rgba(255,230,0,0) 130deg,
rgba(255,230,0,0) 360deg);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: beam-rotate 3.6s linear infinite;
pointer-events: none;
}
.btn-beam::after {
/* Inner soft beam glow that follows the traveling head */
content: '';
position: absolute;
inset: -40%;
border-radius: 50%;
background: conic-gradient(from var(--beam-angle),
rgba(255,230,0,0) 0deg,
rgba(255,230,0,0) 78deg,
rgba(255,230,0,0.25) 96deg,
rgba(255,230,0,0) 120deg,
rgba(255,230,0,0) 360deg);
filter: blur(18px);
z-index: -1;
animation: beam-rotate 3.6s linear infinite;
pointer-events: none;
}
@keyframes beam-rotate {
to { --beam-angle: 360deg; }
}
.btn-beam:hover {
background: linear-gradient(180deg, #221a0c 0%, #100d04 100%);
border-color: rgba(255,230,0,0.42);
transform: translateY(-1px);
box-shadow:
0 0 40px rgba(255,230,0,0.32),
0 14px 36px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,230,0,0.14);
}
.btn-beam:active {
transform: translateY(0) scale(0.98);
}
.btn-beam > * {
position: relative;
z-index: 1;
}
/* Hairline divider */
.hairline {
height: 1px;
background: linear-gradient(90deg, transparent, var(--line-bright) 50%, transparent);
}
/* Reveal animations */
@keyframes vivio-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vivio-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes vivio-glow-pulse {
0%, 100% { box-shadow: 0 0 32px var(--y-glow), 0 0 1px var(--y); }
50% { box-shadow: 0 0 56px rgba(255,230,0,0.28), 0 0 1px var(--y); }
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 800ms ease-out, transform 800ms ease-out;
will-change: opacity, transform;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* Container */
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* The nine client marks share a single desktop row while retaining the
wrapped layout on narrower screens. */
@media (min-width: 1100px) {
.how3-client-logos {
width: calc(100% + (var(--gutter) * 2));
margin-inline: calc(var(--gutter) * -1);
}
}
/* Sections */
.section {
position: relative;
padding: clamp(80px, 12vw, 160px) 0;
}
/* Header */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 12px 0;
transition: background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease;
border-bottom: 1px solid transparent;
}
.site-logo { height: 56px; width: auto; display: block; }
@media (max-width: 540px) { .site-logo { height: 48px; } }
.site-header.scrolled {
background: rgba(10, 10, 10, 0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--line);
}
/* Hero phone */
.hero-phone-wrap {
position: relative;
perspective: 1600px;
}
.hero-phone {
position: relative;
width: 280px;
height: 580px;
border-radius: 46px;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border: 1px solid var(--line-bright);
padding: 7px;
box-shadow:
0 0 0 1px rgba(255,230,0,0.08),
0 40px 80px rgba(0,0,0,0.6),
0 0 80px var(--y-glow);
transform-style: preserve-3d;
}
[data-phone-glow="false"] .hero-phone {
box-shadow: 0 40px 80px rgba(0,0,0,0.6);
}
.hero-phone::after {
content: '';
position: absolute;
inset: 0;
border-radius: 42px;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 30%, transparent 70%, rgba(255,255,255,0.04));
}
.hero-phone-screen {
width: 100%;
height: 100%;
border-radius: 40px;
overflow: hidden;
background: var(--bg-2);
position: relative;
}
/* iPhone-17-style Dynamic Island */
.hero-phone-notch {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 86px;
height: 25px;
border-radius: 13px;
background: #000;
z-index: 3;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.hero-phone-notch::after {
/* camera lens dot inside the island */
content: '';
position: absolute;
top: 50%;
right: 11px;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #25313f 0%, #05080d 70%);
box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
/* Hero devices — mismo patrón que forma-parte-de-vivio en todos los anchos:
laptop a ancho completo + iPhone absoluto en esquina inferior izquierda. */
.hero-composition {
min-height: auto;
}
.hero-devices {
position: relative;
display: block;
width: min(92vw, 680px);
margin: 0 auto;
padding-bottom: clamp(36px, 5vw, 64px);
overflow: visible;
}
.hero-laptop-wrap {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
.hero-laptop-wrap .mockup-laptop {
width: 100% !important;
}
.hero-phone-wrap {
position: absolute;
right: 0;
left: auto;
bottom: clamp(28px, 4.5vw, 52px);
z-index: 3;
margin: 0;
perspective: none;
/* Un poco más dentro del laptop (no cortado a medias por el borde) */
transform: translateX(28%);
}
.hero-phone {
/* Escala del marco 280×580 (r≈46 → ~14% del ancho, look iPhone) */
width: clamp(112px, 11vw, 148px);
height: auto;
aspect-ratio: 280 / 580;
border-radius: 20px;
padding: 3px;
}
.hero-phone::after {
border-radius: 18px;
}
.hero-phone-screen {
border-radius: 17px;
}
.hero-phone-notch {
top: 6px;
width: 42px;
height: 12px;
border-radius: 6px;
}
.hero-phone-notch::after {
width: 3.5px;
height: 3.5px;
right: 6px;
}
/* Tablet: laptop un poco más contenido; phone proporcional */
@media (max-width: 920px) {
.hero-composition {
min-height: auto !important;
margin-top: 16px !important;
}
.hero-devices {
width: min(88vw, 400px);
padding-bottom: clamp(40px, 7vw, 58px);
}
.hero-laptop-wrap {
margin-right: 0 !important;
margin-bottom: 0 !important;
transform: none !important;
}
.hero-phone-wrap {
right: 0;
left: auto;
bottom: clamp(22px, 5vw, 40px);
transform: translateX(26%) !important;
}
.hero-phone {
transform: none !important;
width: clamp(100px, 16vw, 128px) !important;
border-radius: 17px !important;
padding: 2.5px !important;
}
.hero-phone::after {
border-radius: 15px !important;
}
.hero-phone-screen {
border-radius: 14px !important;
}
.hero-phone-notch {
top: 5px;
width: 36px;
height: 10px;
border-radius: 5px;
}
.hero-phone-notch::after {
width: 3px;
height: 3px;
right: 5px;
}
}
@media (max-width: 540px) {
.hero-devices {
width: min(94vw, 360px);
padding-bottom: 40px;
}
.hero-phone-wrap {
right: 0;
left: auto;
bottom: 28px;
transform: translateX(24%) !important;
}
.hero-phone {
width: 96px !important;
border-radius: 13px !important;
padding: 2px !important;
}
.hero-phone::after {
border-radius: 11.5px !important;
}
.hero-phone-screen {
border-radius: 11px !important;
}
.hero-phone-notch {
width: 28px;
height: 8px;
top: 4px;
border-radius: 4px;
}
.hero-phone-notch::after {
width: 2.5px;
height: 2.5px;
right: 4px;
}
}
@media (max-width: 360px) {
.hero-devices {
width: min(96vw, 300px);
padding-bottom: 34px;
}
.hero-phone {
width: 88px !important;
border-radius: 12px !important;
padding: 2px !important;
}
.hero-phone::after {
border-radius: 10.5px !important;
}
.hero-phone-screen {
border-radius: 10px !important;
}
}
/* Pop card */
.pop-card {
background: linear-gradient(180deg, rgba(35,35,35,0.85), rgba(20,20,20,0.85));
border: 1px solid var(--line-bright);
border-radius: 14px;
padding: 16px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
font-family: var(--ui-font);
}
.pop-card.accent {
border-color: rgba(255,230,0,0.35);
box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 24px var(--y-glow);
}
/* Tag */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: 999px;
background: var(--y-soft);
border: 1px solid rgba(255,230,0,0.3);
color: var(--y);
font-family: var(--mono-font);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tag-neutral {
background: rgba(255,255,255,0.04);
border-color: var(--line-bright);
color: var(--fg-2);
}
/* Scroll narrative scaffold */
.narrative {
position: relative;
/* 5 acts + buffer */
}
.narrative-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.narrative-stage {
position: absolute;
inset: 0;
}
/* Home: the two ways of consuming VIVIO, right after the three steps.
The managed one is tinted so the eye lands on it: it is the option most
visitors do not know exists. */
.how3-modes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(14px, 1.6vw, 20px);
max-width: 900px;
margin: clamp(30px, 3.6vw, 46px) auto 0;
}
.how3-mode {
background: var(--bg-2);
border: 1px solid var(--line-bright);
border-radius: 16px;
padding: clamp(18px, 2vw, 26px);
text-align: left;
transition: border-color 240ms ease, background 240ms ease;
}
.how3-mode-managed {
background: linear-gradient(160deg, rgba(255,230,0,0.07), rgba(255,230,0,0.012));
border-color: rgba(255,230,0,0.3);
}
.how3-mode:hover { border-color: rgba(255,230,0,0.42); }
.how3-mode-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.how3-mode-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 27px; height: 27px; flex-shrink: 0;
border-radius: 8px;
color: var(--y);
background: rgba(255,230,0,0.07);
border: 1px solid rgba(255,230,0,0.22);
}
.how3-mode-tag {
font-family: var(--mono-font);
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--fg-3);
}
.how3-mode-managed .how3-mode-tag { color: var(--y); }
.how3-mode-title {
font-family: var(--ui-font);
font-size: clamp(15px, 1.25vw, 17.5px);
font-weight: 700;
color: var(--fg-1);
line-height: 1.25;
margin-bottom: 7px;
}
.how3-mode-body {
font-family: var(--body-font);
font-size: 13.5px;
color: var(--fg-3);
line-height: 1.6;
margin: 0;
text-wrap: pretty;
}
@media (max-width: 720px) {
.how3-modes { grid-template-columns: 1fr; }
}
/* ── Cookie consent (CMP) ─────────────────────────────────────────────
El diálogo inicial es central y bloqueante: navegar no puede valer como
consentimiento tácito, así que hay que elegir. Aceptar es la acción
destacada, pero rechazar está en la misma fila, con el mismo tamaño y a un
solo clic — que es lo que exige la AEPD: igual de fácil, no igual de
llamativo. */
.cc-overlay-gate { z-index: 9200; background: rgba(0,0,0,0.82); }
.cc-gate {
width: 100%;
max-width: 620px;
margin: auto;
background: var(--bg-1);
border: 1px solid var(--line-bright);
border-radius: 20px;
padding: clamp(26px, 3.4vw, 40px);
text-align: center;
box-shadow: 0 32px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,230,0,0.06);
animation: cc-pop 300ms cubic-bezier(.22,.61,.36,1);
}
@keyframes cc-pop { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc-gate { animation: none; } }
.cc-gate-mark { margin-bottom: 16px; }
/* display:block global en img obliga a centrar con margen, no con text-align. */
.cc-gate-mark img { height: 40px; width: auto; margin: 0 auto; filter: drop-shadow(0 0 18px var(--y-glow)); }
.cc-gate-title {
font-family: var(--ui-font);
font-size: clamp(19px, 2vw, 24px);
font-weight: 700;
color: var(--fg-1);
margin-bottom: 12px;
}
.cc-gate-text {
font-family: var(--body-font);
font-size: 13.5px;
color: var(--fg-3);
line-height: 1.7;
margin: 0 auto 24px;
max-width: 56ch;
}
/* Lo primero que engancha la vista en una lectura rápida. Es una afirmación
cerrada y cierta sobre lo que hace VIVIO, no una condición sobre el clic:
no dice ni sugiere que haya que aceptar para que la web funcione. */
.cc-gate-hl { color: var(--y); font-weight: 700; }
.cc-gate-legal {
font-family: var(--body-font);
font-size: 11.5px;
color: var(--fg-4);
line-height: 1.6;
margin: 18px 0 0;
}
.cc-link { color: var(--y); text-decoration: underline; text-underline-offset: 2px; }
.cc-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* En el diálogo inicial los tres reparten el ancho a partes iguales, para que
ninguno quede relegado a un segundo plano por tamaño o posición. */
.cc-actions-gate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cc-btn {
font-family: var(--mono-font);
font-size: 12px;
letter-spacing: 0.05em;
padding: 11px 20px;
border-radius: 10px;
border: 1px solid var(--line-bright);
background: var(--bg-2);
color: var(--fg-1);
cursor: pointer;
white-space: nowrap;
transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.cc-btn:hover { border-color: rgba(255,230,0,0.45); background: var(--bg-3); color: var(--y); }
/* Acción recomendada. Mismo tamaño y misma fila que las otras dos: solo cambia
el relleno, que es la jerarquía visual permitida. */
.cc-btn-primary {
background: var(--y);
border-color: var(--y);
color: #0a0a0a;
font-weight: 700;
box-shadow: 0 0 24px var(--y-glow);
}
.cc-btn-primary:hover { background: #fff04d; border-color: #fff04d; color: #0a0a0a; }
/* Acción más apagada. El apagado se hace con el borde y el fondo, que no
afectan a la legibilidad; el texto solo baja un paso, de #fff a #c4c4c4, que
sobre este fondo sigue en 10,8:1 — muy por encima del 4,5:1 que exige la AA
y del 7:1 de la AAA. Bajar más el texto (a #5a5a5a se queda en 2,7:1) haría
el botón difícil de percibir, que es justo lo que la EDPB señala como patrón
oscuro. En hover recupera el aspecto normal para que no parezca desactivado. */
.cc-btn-muted { background: transparent; border-color: var(--line); color: var(--fg-2); }
/* Sin recompensa visual al pasar por encima: ni relleno, ni amarillo, ni halo.
Solo se aclara el borde, lo justo para que no parezca desactivado —el cursor
de mano sigue siendo la señal principal de que se puede pulsar—. Un botón que
parece inhabilitado no sería una opción rechazable con la misma facilidad. */
.cc-btn-muted:hover { background: transparent; border-color: var(--line-bright); color: var(--fg-2); }
.cc-btn-quiet { border-color: transparent; background: transparent; color: var(--fg-3); }
.cc-btn-quiet:hover { color: var(--fg-1); background: transparent; border-color: var(--line); }
.cc-overlay {
position: fixed; inset: 0; z-index: 9100;
background: rgba(0,0,0,0.72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: clamp(12px, 3vw, 32px);
overflow-y: auto;
}
.cc-panel {
width: 100%; max-width: 860px;
max-height: min(88vh, 900px);
display: flex; flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line-bright);
border-radius: 18px;
overflow: hidden;
}
.cc-panel-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: clamp(20px, 2.4vw, 28px);
border-bottom: 1px solid var(--line);
}
.cc-panel-title { font-family: var(--ui-font); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: var(--fg-1); }
.cc-panel-sub { font-family: var(--body-font); font-size: 13px; color: var(--fg-3); line-height: 1.6; margin: 6px 0 0; max-width: 62ch; }
.cc-close {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--line-bright); color: var(--fg-2); cursor: pointer;
transition: color 160ms ease, border-color 160ms ease;
}
.cc-close:hover { color: var(--y); border-color: rgba(255,230,0,0.4); }
.cc-panel-body { padding: clamp(18px, 2.2vw, 26px); overflow-y: auto; }
.cc-cat { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cc-cat:first-child { padding-top: 0; }
.cc-cat:last-of-type { border-bottom: none; }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.cc-cat-name { font-family: var(--ui-font); font-size: 15px; font-weight: 700; color: var(--fg-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-always {
font-family: var(--mono-font); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--y); background: var(--y-soft); border: 1px solid rgba(255,230,0,0.32);
border-radius: 999px; padding: 3px 9px;
}
.cc-cat-desc { font-family: var(--body-font); font-size: 13px; color: var(--fg-3); line-height: 1.6; margin: 0 0 12px; max-width: 74ch; }
.cc-switch {
position: relative; width: 46px; height: 26px; flex-shrink: 0;
border-radius: 999px; border: none; padding: 0; cursor: pointer;
background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-bright);
transition: background 200ms ease, box-shadow 200ms ease;
}
.cc-switch-on { background: var(--y); box-shadow: 0 0 14px var(--y-glow); }
.cc-switch-locked { cursor: not-allowed; opacity: 0.55; }
.cc-switch-dot {
position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
background: var(--fg-2); transition: transform 200ms cubic-bezier(.4,0,.2,1), background 200ms ease;
}
.cc-switch-on .cc-switch-dot { background: #0a0a0a; transform: translateX(20px); }
.cc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.cc-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cc-table th, .cc-table td { text-align: left; padding: 9px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }
.cc-table tr:last-child td { border-bottom: none; }
.cc-table th {
font-family: var(--mono-font); font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase;
color: var(--fg-4); background: var(--bg-2); font-weight: 500; white-space: nowrap;
}
.cc-table td { font-family: var(--body-font); font-size: 12px; color: var(--fg-3); line-height: 1.5; }
.cc-mono { font-family: var(--mono-font) !important; font-size: 11px !important; color: var(--fg-2) !important; word-break: break-all; }
.cc-empty { font-family: var(--body-font); font-size: 12.5px; color: var(--fg-4); line-height: 1.6; margin: 0; font-style: italic; }
.cc-legal { font-family: var(--body-font); font-size: 12.5px; color: var(--fg-3); line-height: 1.6; margin: 20px 0 0; }
.cc-panel-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
border-top: 1px solid var(--line);
background: var(--bg-2);
}
.cc-panel-foot-main { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
/* Marcador de contenido de terceros bloqueado. */
.cc-placeholder {
display: flex; align-items: center; justify-content: center;
min-height: 200px; height: 100%;
background: var(--bg-2);
border: 1px dashed var(--line-bright);
border-radius: 12px;
padding: 22px;
}
.cc-placeholder-inner { max-width: 42ch; text-align: center; }
.cc-placeholder-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 11px; margin-bottom: 11px;
color: var(--y); background: rgba(255,230,0,0.07); border: 1px solid rgba(255,230,0,0.22);
}
.cc-placeholder-text { font-family: var(--body-font); font-size: 12.5px; color: var(--fg-3); line-height: 1.6; margin: 0 0 13px; }
.cc-placeholder-btn {
font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.05em;
padding: 8px 16px; border-radius: 9px; cursor: pointer;
border: 1px solid rgba(255,230,0,0.4); background: var(--y-soft); color: var(--y);
transition: background 180ms ease;
}
.cc-placeholder-btn:hover { background: rgba(255,230,0,0.14); }
@media (max-width: 860px) {
/* Los tres botones reparten el ancho a partes iguales: ninguno destaca. */
.cc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-btn { padding: 12px 8px; text-align: center; font-size: 11.5px; }
.cc-panel { max-height: 92vh; }
.cc-panel-foot { flex-direction: column; align-items: stretch; }
.cc-panel-foot-main { display: grid; grid-template-columns: 1fr; margin-left: 0; }
}
@media (max-width: 560px) {
/* En pantallas estrechas «Aceptar todas» no cabe en un tercio de ancho, así
que los tres pasan a columna: mismo ancho, mismo alto, mismo peso visual. */
.cc-actions-gate { grid-template-columns: 1fr; gap: 9px; }
.cc-gate { padding: 24px 20px; border-radius: 16px; }
.cc-gate-mark img { height: 34px; }
.cc-gate-text { font-size: 13px; margin-bottom: 20px; }
}
/* Audience cards */
.aud-card {
position: relative;
background: var(--bg-3);
border: 1px solid var(--line-bright);
border-radius: 16px;
padding: 28px 24px;
overflow: hidden;
transition: all 300ms ease-out;
cursor: pointer;
}
.aud-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at var(--mx, 50%) var(--my, 0%), var(--y-glow), transparent 50%);
opacity: 0;
transition: opacity 300ms ease-out;
pointer-events: none;
}
.aud-card:hover {
border-color: rgba(255,230,0,0.4);
background: var(--bg-4);
transform: translateY(-2px);
}
.aud-card:hover::before {
opacity: 1;
}
/* Vertical silhouette watermark. Sits behind everything, tinted with the brand
yellow and blurred to the edge of perception: it should register as texture,
never as an icon competing with the real one. */
.aud-watermark {
position: absolute;
right: -34px;
bottom: -46px;
color: var(--y);
opacity: 0.028;
filter: blur(3px);
pointer-events: none;
z-index: 0;
line-height: 0;
transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.aud-card:hover .aud-watermark {
opacity: 0.055;
transform: translate(-4px, -4px);
}
/* Cards with a logo wall reserve their lower strip for it. */
.aud-card[data-has-logos="true"] .aud-watermark {
bottom: 24px;
}
@media (prefers-reduced-motion: reduce) {
.aud-card:hover .aud-watermark { transform: none; }
}
/* Client logo watermark wall inside audience cards */
.aud-card[data-has-logos="true"] {
padding-bottom: 88px;
}
.aud-logos {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: clamp(18px, 2.4vw, 36px);
padding: 0 88px 22px 24px;
height: 68px;
pointer-events: none;
z-index: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
}
.aud-logo {
flex: 0 0 auto;
height: 28px;
display: flex;
align-items: center;
}
.aud-logo img {
height: 100%;
width: auto;
max-width: 110px;
object-fit: contain;
opacity: 0.2;
filter: none;
transition: opacity 320ms ease-out;
}
.aud-card:hover .aud-logo img {
opacity: 0.45;
}
@media (max-width: 920px) {
.aud-logos { gap: 16px; padding: 0 72px 18px 20px; height: 60px; }
.aud-logo { height: 22px; }
.aud-logo img { max-width: 90px; }
}
/* Persistent floating CTA */
.sticky-cta {
position: fixed;
z-index: 95;
bottom: 24px;
right: 26px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border-radius: 999px;
background: var(--y);
color: #0a0a0a;
font-family: var(--ui-font);
font-weight: 700;
font-size: 14px;
letter-spacing: -0.01em;
text-decoration: none;
box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 26px var(--y-glow);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 300ms ease, transform 300ms ease, box-shadow 200ms ease;
}
.sticky-cta.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sticky-cta:hover {
box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 0 36px var(--y-glow);
transform: translateY(-2px);
}
@media (max-width: 600px) {
.sticky-cta { left: 14px; right: 14px; bottom: 14px; justify-content: center; padding: 15px; font-size: 15px; }
}
/* Form */
.field {
position: relative;
}
.field input,
.field select {
width: 100%;
height: 52px;
padding: 0 16px;
background: var(--bg-3);
border: 1px solid var(--line-bright);
border-radius: 10px;
color: var(--fg-1);
font-family: var(--ui-font);
font-size: 14px;
outline: none;
transition: all 200ms ease-out;
}
.field input::placeholder { color: var(--fg-4); }
.field input:focus,
.field select:focus {
border-color: var(--y);
box-shadow: 0 0 0 3px var(--y-soft);
}
.field input[aria-invalid="true"] {
border-color: #f06060;
box-shadow: 0 0 0 3px rgba(240,96,96,0.12);
}
.field-error {
display: block;
margin-top: 6px;
font-size: 12px;
color: #f06060;
font-family: var(--ui-font);
}
.field-success {
font-size: 13px;
color: #3dd68c;
font-family: var(--ui-font);
}
.field-label {
display: block;
margin-bottom: 8px;
font-size: 12px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--mono-font);
}
/* Static logo wall — full roster, small */
/* Las hairlines las dibuja cada celda con su borde, no el hueco de la rejilla.
Con el hueco, una última fila incompleta pintaba el fondo del contenedor
(--line) y se veía como una franja gris; así el sobrante queda del color del
panel y el muro aguanta cualquier numero de logos a cualquier ancho. */
.logo-wall {
display: grid;
grid-template-columns: repeat(8, 1fr);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
.logo-wall-cell {
background: var(--bg-2);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
height: 88px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
transition: background 200ms ease;
text-decoration: none;
}
.logo-wall-cell img {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.6;
transition: opacity 200ms ease;
}
.logo-wall-cell:hover {
background: var(--bg-3);
}
.logo-wall-cell:hover img {
opacity: 1;
}
/* Muro filtrado (landings de sector): pocas marcas, así que celdas más
grandes. En flex y no en rejilla, porque con 19 logos una rejilla de columnas
fijas deja huecos en la última fila; así las últimas celdas se estiran. */
.logo-wall--roomy {
display: flex;
flex-wrap: wrap;
/* Alineado a la izquierda: la última fila se completa con celdas vacías
(SocialProof las cuenta midiendo), así que no queda sobrante que centrar
y todas las columnas quedan a plomo. */
justify-content: flex-start;
}
/* Última celda de una fila incompleta: sin borde derecho, para que el sobrante
sea panel liso en lugar de un cuadro vacío enmarcado. */
.logo-wall--roomy .logo-wall-cell.is-row-end { border-right: none; }
.logo-wall--roomy .logo-wall-cell {
/* Celdas de ancho fijo y última fila centrada: si se estiraran, con un número
que no cuadre saldrían dos celdas gigantes. El sobrante no se ve porque el
fondo del muro es el del panel. --lp-wall-cols lo fija cada landing. */
flex: 0 0 calc(100% / var(--lp-wall-cols, 5) - 1px);
min-width: 150px;
height: 118px;
padding: 10px 14px;
}
.logo-wall--roomy .logo-wall-cell img { opacity: 0.72; }
@media (max-width: 720px) {
.logo-wall--roomy .logo-wall-cell { min-width: 120px; height: 96px; padding: 8px 10px; }
}
@media (max-width: 420px) {
.logo-wall--roomy .logo-wall-cell { min-width: 104px; height: 84px; }
}
@media (max-width: 1100px) {
.logo-wall { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
.logo-wall { grid-template-columns: repeat(4, 1fr); }
.logo-wall-cell { height: 72px; padding: 3px 4px; }
}
@media (max-width: 420px) {
.logo-wall { grid-template-columns: repeat(3, 1fr); }
}
/* Phone variants for narrative */
.mini-phone {
position: relative;
width: 320px;
height: 660px;
border-radius: 52px;
background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
border: 1px solid var(--line-bright);
padding: 9px;
box-shadow:
0 0 0 1px rgba(255,230,0,0.08),
0 30px 60px rgba(0,0,0,0.6),
0 0 60px var(--y-glow);
}
[data-phone-glow="false"] .mini-phone {
box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.mini-phone-screen {
width: 100%;
height: 100%;
border-radius: 44px;
overflow: hidden;
background: var(--bg-2);
position: relative;
}
/* ── Laptop / desktop mockup (web app) ──────────────────── */
.mockup-laptop { position: relative; display: inline-block; }
.mockup-laptop-lid {
width: 100%;
background: linear-gradient(135deg, #1c1c1c 0%, #0c0c0c 100%);
border: 1px solid var(--line-bright);
border-radius: 16px 16px 6px 6px;
padding: 11px 11px 12px;
box-shadow:
0 0 0 1px rgba(255,230,0,0.08),
0 40px 80px rgba(0,0,0,0.6),
0 0 80px var(--y-glow);
position: relative;
}
[data-phone-glow="false"] .mockup-laptop-lid { box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
.mockup-laptop-lid::after {
content: '';
position: absolute;
inset: 0;
border-radius: 16px 16px 6px 6px;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 32%, transparent 70%, rgba(255,255,255,0.03));
}
.mockup-laptop-screen {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 7px;
overflow: hidden;
background: var(--bg-2);
position: relative;
}
.mockup-laptop-deck {
position: relative;
width: 118%;
margin-left: -9%;
height: 14px;
background: linear-gradient(180deg, #2c2c2c 0%, #141414 70%, #0c0c0c 100%);
border-radius: 3px 3px 12px 12px;
box-shadow: 0 22px 40px rgba(0,0,0,0.55);
}
.mockup-laptop-deck::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 16%; height: 5px;
background: #070707;
border-radius: 0 0 7px 7px;
}
/* Spec / progress strip */
.spec-strip {
display: flex;
flex-wrap: wrap;
gap: 4px;
font-family: var(--mono-font);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--fg-4);
text-transform: uppercase;
}
.spec-strip span { display: inline-flex; align-items: center; gap: 6px; }
/* Footer */
.site-footer {
background: var(--bg-0);
border-top: 1px solid var(--line);
padding: 80px 0 40px;
/* Force a stable, painted compositing layer. Without this, deep on a very
tall page Chromium can skip the initial paint of these elements and they
only appear once a :hover invalidates the layer. */
position: relative;
z-index: 1;
transform: translateZ(0);
}
/* Store download badges */
.store-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px 10px 16px;
background: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
border: 2px solid var(--y);
border-radius: 12px;
color: #ffffff;
min-width: 180px;
height: 56px;
box-sizing: border-box;
text-decoration: none;
box-shadow: 0 0 0 1px rgba(255,230,0,0.12), 0 0 24px rgba(255,230,0,0.22), 0 6px 18px rgba(0,0,0,0.5);
transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.store-badge:hover {
background: linear-gradient(180deg, #2e2e2e 0%, #202020 100%);
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(255,230,0,0.25), 0 0 32px rgba(255,230,0,0.3), 0 10px 28px rgba(0,0,0,0.5);
}
.store-badge-ico { flex-shrink: 0; }
.store-badge-txt {
display: flex;
flex-direction: column;
line-height: 1.15;
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
text-align: left;
}
.store-badge-tag {
font-size: 9px;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
}
.store-badge-name {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: #ffffff;
margin-top: 1px;
}
/* ── Smooth custom cursor (desktop / fine pointer only) ─── */
.smooth-cursor {
position: fixed;
top: 0; left: 0;
width: 30px; height: 30px;
pointer-events: none;
z-index: 100000;
opacity: 0;
transition: opacity 220ms ease, width 160ms ease, height 160ms ease;
will-change: transform;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.smooth-cursor img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.smooth-cursor.is-hover { width: 42px; height: 42px; }
.smooth-cursor.is-down { width: 24px; height: 24px; }
/* Hide the native cursor everywhere only when the custom one is active */
html.has-smooth-cursor,
html.has-smooth-cursor * { cursor: none !important; }
/* Footer social card buttons */
.soc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 760px;
margin: 0 auto;
}
.soc-card {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 14px;
background: var(--bg-2);
border: 1px solid var(--line-bright);
text-decoration: none;
transition: border-color 200ms ease, transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.soc-card:hover {
border-color: var(--y);
transform: translateY(-3px);
background: var(--bg-3);
box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.soc-ico {
width: 42px; height: 42px;
border-radius: 11px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
display: flex; align-items: center; justify-content: center;
color: var(--fg-1);
flex-shrink: 0;
transition: transform 200ms ease;
}
.soc-card:hover .soc-ico { transform: scale(1.07); }
.soc-ico--instagram { color: #e4405f; }
.soc-ico--youtube { color: #ff0033; }
.soc-ico--linkedin { color: #0a66c2; }
.soc-net {
font-family: var(--ui-font);
font-size: 14px; font-weight: 700;
color: var(--fg-1);
line-height: 1.2;
}
.soc-handle {
font-family: var(--mono-font);
font-size: 11px;
color: var(--fg-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Footer nav links */
.footer-link {
font-family: var(--ui-font);
font-size: 14px;
color: var(--fg-2);
text-decoration: none;
transition: color 200ms ease;
display: block;
}
.footer-link:hover { color: var(--y); }
@media (max-width: 920px) {
.footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
.soc-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
}
@media (max-width: 540px) {
.footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 430px) {
.soc-grid { grid-template-columns: 1fr; max-width: 320px; }
}
/* Media */
@media (max-width: 768px) {
.display { font-size: clamp(48px, 14vw, 96px) !important; }
/* Headings holding a non-wrapping run (the typewriter words) can't rely on
the blanket size above: the longest word overflows the container and gives
the page horizontal scroll. Sized so the widest word still fits at 320px. */
.display.display-nowrap { font-size: clamp(32px, 12vw, 96px) !important; }
.narrative-sticky { height: 100vh; }
}
/* Lang switcher */
.lang-switch {
display: inline-flex;
border: 1px solid var(--line-bright);
border-radius: 9999px;
padding: 3px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
}
.lang-switch button {
background: transparent;
border: none;
color: var(--fg-3);
font-family: var(--ui-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
padding: 6px 12px;
border-radius: 9999px;
transition: all 200ms ease;
cursor: pointer;
text-transform: uppercase;
}
.lang-switch button.active {
background: var(--y);
color: #050505;
}
.lang-switch button:hover:not(.active) {
color: var(--fg-1);
}
/* utility flex */
.flex { display: flex; }
.col { flex-direction: column; }
.row { flex-direction: row; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
/* For tweaks panel — keep it usable on this dark site */
[data-tweaks-panel] {
font-family: var(--ui-font) !important;
}
/* ── Vídeo con carátula (VideoEmbed) ──────────────────────────────────
El iframe de YouTube solo entra al pulsar: hasta entonces esto es una
imagen local. Ahorra ~1 MB por visita y evita contactar con un tercero
antes de tener consentimiento. */
.ve-section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.ve-head { max-width: 760px; margin: 0 0 clamp(28px, 3.4vw, 44px); }
.ve-title {
font-family: var(--display-font);
font-size: clamp(34px, 5vw, 64px);
line-height: 0.98;
letter-spacing: -0.01em;
color: var(--fg-1);
margin: 18px 0 0;
}
.ve-sub {
font-family: var(--body-font);
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.65;
color: var(--fg-3);
margin: 16px 0 0;
max-width: 62ch;
}
.ve-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: clamp(14px, 1.6vw, 22px);
overflow: hidden;
border: 1px solid var(--line-bright);
background: var(--bg-2);
box-shadow: 0 28px 70px rgba(0,0,0,0.5);
}
.ve-iframe, .ve-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ve-poster { object-fit: cover; }
/* Botón de reproducción: cubre todo el marco para que valga cualquier clic. */
.ve-play {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 16px;
background: linear-gradient(to bottom, rgba(5,5,5,0.10), rgba(5,5,5,0.40));
border: 0; cursor: pointer;
transition: background 220ms ease;
}
.ve-play:hover { background: linear-gradient(to bottom, rgba(5,5,5,0.04), rgba(5,5,5,0.30)); }
.ve-play-dot {
display: grid; place-items: center;
width: clamp(64px, 7vw, 88px); height: clamp(64px, 7vw, 88px);
border-radius: 999px;
background: var(--y); color: #0a0a0a;
box-shadow: 0 0 0 10px rgba(255,230,0,0.14), 0 14px 40px rgba(0,0,0,0.5);
transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms ease;
/* El triángulo de play pesa a la izquierda; se compensa ópticamente. */
padding-left: 4px;
}
.ve-play:hover .ve-play-dot {
transform: scale(1.07);
box-shadow: 0 0 0 14px rgba(255,230,0,0.18), 0 18px 48px rgba(0,0,0,0.55);
}
.ve-play:focus-visible .ve-play-dot { outline: 3px solid var(--y); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
.ve-play-dot, .ve-play:hover .ve-play-dot { transition: none; transform: none; }
}
/* Duración abajo a la derecha, como en cualquier reproductor: no compite
con el texto de la carátula ni con el titular de la sección. */
.ve-play-dur {
position: absolute; right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.08em;
color: #fff; background: rgba(10,10,10,0.68);
border: 1px solid rgba(255,255,255,0.2);
padding: 5px 10px; border-radius: 999px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
white-space: nowrap;
}
/* Sin consentimiento: se ve la carátula pero atenuada y sin botón de play. */
.ve-locked {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: clamp(20px, 4vw, 40px);
text-align: center;
background: rgba(5,5,5,0.86);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ve-locked-icon {
display: grid; place-items: center; width: 44px; height: 44px;
border-radius: 999px; background: rgba(255,230,0,0.1);
border: 1px solid rgba(255,230,0,0.28); color: var(--y);
}
.ve-locked-text {
font-family: var(--body-font); font-size: 13px; line-height: 1.6;
color: var(--fg-2); margin: 0; max-width: 46ch;
}
.ve-locked-btn {
font-family: var(--mono-font); font-size: 11.5px; letter-spacing: 0.05em;
padding: 10px 18px; border-radius: 9px;
background: rgba(255,230,0,0.1); border: 1px solid rgba(255,230,0,0.34);
color: var(--y); cursor: pointer;
transition: background 180ms ease;
}
.ve-locked-btn:hover { background: rgba(255,230,0,0.18); }
@media (max-width: 600px) {
.ve-frame { border-radius: 14px; }
}