:root {
/* ============================================================
PALETA V7 · "SILVER PREMIUM" · 2026-05-22
Decisión Nico: plateado dominante · estilo video Apple-keynote
Negro fondo · plateado texto · copper SOLO rim sutil (5% max)
Tipografía: Inter dominando · Cormorant Italic OUT
============================================================ */
/* === Tokens V7 NUEVOS (dominantes) === */
--yl-ink-black: #050B17; /* fondo principal */
--yl-ink-deep: #0A1426; /* cards · sections más densas */
--yl-silver-mirror: #C7CDD4; /* PROTAGONISTA · texto principal · UI */
--yl-silver-light: #E8EAED; /* headlines display · hover states */
--yl-silver-dim: #969FAB; /* captions · text secundario */
--yl-silver-shadow: #4A525C; /* text terciario · borders enfatizados */
--yl-silver-trace: rgba(199, 205, 212, 0.08); /* borders ghost */
--yl-silver-line: rgba(199, 205, 212, 0.16); /* borders visibles */
--yl-copper-rim: #9FE4EE; /* SOLO rim · 2-3 elementos por página · NUNCA dominante */
--yl-copper-faint: rgba(159, 228, 238, 0.15); /* fondo apenas perceptible · CTAs hover */
/* === Aliases legacy redirigidos a V7 (cero rotura del CSS existente) === */
--yl-platinum-official: #C7CDD4;
--yl-soft-ivory: #E8EAED;
--yl-night-navy: #0A1426;
--yl-ink: #050B17;
--yl-midnight: #0A1426;
--yl-platinum: #C7CDD4; /* legacy → silver-mirror V7 */
--yl-titanium: #969FAB; /* legacy → silver-dim V7 */
--yl-silver: #969FAB; /* legacy → silver-dim V7 */
--yl-electric: #3D6BFF; /* legacy · uso casi nulo · NO usar nuevo */
--yl-violet: #7A5BFF; /* legacy · uso casi nulo · NO usar nuevo */
--yl-cyan: #5BD6FF; /* legacy · uso casi nulo · NO usar nuevo */
--yl-copper: #9FE4EE; /* legacy → copper-rim V7 · más apagado */
--yl-copper-light: #C9F2F7; /* legacy · rim hover */
--yl-copper-deep: #6FD8E8; /* legacy · pressed states */
--yl-warm-glow: #C9F2F7; /* legacy redirigido · cero warm glow real V7 */
--yl-navy-hover: #0A1A30;
--yl-line: rgba(199, 205, 212, 0.08);
--yl-line-strong: rgba(199, 205, 212, 0.16);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
/* === Tipografía V7 · Inter dominando · Cormorant Italic OUT === */
/* Decisión Nico 2026-05-22: Cormorant era editorial fashion · no aplica a
target PYME tech. Inter para todo display + body · JetBrains Mono labels. */
--yl-display-serif: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--yl-display-weight: 900; /* Inter en max weight para H1/H2 (display) */
--yl-ui-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--yl-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
/* === Shadow scale V7 · más frío · menos warm glow === */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-md: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 24px rgba(199, 205, 212, 0.12); /* silver glow · no copper */
--shadow-glow-strong: 0 0 32px rgba(199, 205, 212, 0.22);
--shadow-rim: 0 0 1px rgba(159, 228, 238, 0.6); /* SOLO 2-3 detalles por página */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
overflow-x: hidden;
/* Notch / safe-area · soporte iOS PWA y mobile */
padding-left: env(safe-area-inset-left, 0);
padding-right: env(safe-area-inset-right, 0);
}
body {
background: var(--yl-ink);
color: var(--yl-platinum);
font-family: 'Inter', system-ui, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.55;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
/* Evita pinch-to-zoom rebotes en iOS pero sin matar accesibilidad zoom user */
text-rendering: optimizeLegibility;
}
/* Imágenes/videos NUNCA escapan del viewport · guarda mobile */
img, video, iframe { max-width: 100%; height: auto; }
/* Touch targets CTAs principales · iOS HIG 44px */
@media (max-width: 768px) {
.btn-primary, .btn-secondary, .btn-cta, .hero-cta, .nav-cta { min-height: 44px; }
.hablemos-btn, .wp-fab, .cta-wp { min-height: 44px; }
}
/* Atmospheric depth layer · gradient sutil fijo que vive debajo del contenido
Crea sensación de "espacio" en vez de rectángulos apilados (cinematic) */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(159, 228, 238,0.06), transparent 60%),
radial-gradient(ellipse 60% 40% at 20% 70%, rgba(89,120,255,0.04), transparent 65%),
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(159, 228, 238,0.05), transparent 65%);
pointer-events: none;
z-index: 0;
}
/* Asegurar que el contenido vive ARRIBA de la atmósfera */
main, nav, footer { position: relative; z-index: 1; }
@media (max-width: 768px) {
body { font-size: 16px; line-height: 1.55; }
}
::selection {
background: rgba(159, 228, 238, 0.32);
color: var(--yl-soft-ivory);
}
/* Premium · hanging-punctuation (Safari/Firefox · progressive enhancement) */
body {
hanging-punctuation: first last;
}
:focus-visible {
outline: 2px solid var(--yl-platinum);
outline-offset: 2px;
border-radius: 2px;
}
a, button { -webkit-tap-highlight-color: transparent; }
/* Utility · .platinum-text usado en H1 hero de subpáginas --- */
.platinum-text {
color: var(--yl-platinum, #D1D3D6);
display: block;
}
/* Reuse · page-hero lede shared en 5 subpáginas ------------- */
.page-hero-lede {
font-size: 18px;
color: var(--yl-titanium, #B8B8BE);
max-width: 660px;
margin-top: 20px;
line-height: 1.55;
}
/* A11y · reveal-up fallback con prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-up, .reveal-up.d1, .reveal-up.d2,
.reveal-up.d3, .reveal-up.d4, .reveal-up.d5, .reveal-up.d6 {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Premium · scrollbar dark theme (Firefox + WebKit) -------- */
html {
scrollbar-color: var(--yl-line-strong, #2A2F3A) transparent;
scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--yl-line-strong, #2A2F3A);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--yl-copper, #BFEAF2); background-clip: padding-box; border: 2px solid transparent; }
/* Premium · optical kerning + ligatures + swashes Cormorant -- */
.display {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "swsh" 1, "onum" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: balance;
}
/* Premium · headings con text-wrap balance (Linear/Apple feel) */
h1, h2, h3, .section-title {
text-wrap: balance;
}
/* Premium · tabular nums en mono + precios para alineación perfecta */
.mono, .vamt, .aura-kpi-val, .offsw-kpi b, .sld-kpi b,
[class*="-price"], [class*="-amount"] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Legal · consent notice en lead form (Ley 25.326 AR) ------ */
.legal-consent {
font-size: 11px;
line-height: 1.5;
color: var(--yl-titanium-soft, #8B8B92);
margin: 18px 0 10px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--yl-line, #1F242F);
border-radius: 8px;
letter-spacing: 0.01em;
}
.legal-consent a {
color: var(--yl-platinum, #D1D3D6);
text-decoration: underline;
text-decoration-color: var(--yl-copper, #BFEAF2);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.legal-consent a:hover {
color: var(--yl-warm-glow, #F0C9A6);
text-decoration-color: var(--yl-warm-glow, #F0C9A6);
}
/* A11y · skip-link visible on keyboard focus only ----------- */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 10000;
padding: 12px 20px;
background: var(--yl-ink, #050B17);
color: var(--yl-platinum, #D1D3D6);
border: 1px solid var(--yl-copper, #BFEAF2);
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: top 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.skip-link:focus {
top: 12px;
outline: 2px solid var(--yl-warm-glow, #F0C9A6);
outline-offset: 2px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Type system ------------------------------------------------- */
.display {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--yl-platinum);
}
.display-xl { font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -0.024em; line-height: 1.02; }
.display-lg { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -0.018em; line-height: 1.06; }
.display-md { font-size: clamp(1.5rem, 2.6vw, 2.5rem); letter-spacing: -0.012em; line-height: 1.1; }
.mono {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 400;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--yl-silver);
}
.mono-sm { font-size: 10px; }
.mono-lg { font-size: 12px; letter-spacing: 0.16em; }
/* Mono kicker with the 24px prefix line */
.mono-kicker {
display: inline-flex; align-items: center; gap: 12px;
}
.mono-kicker::before {
content: '';
width: 24px; height: 1px;
background: var(--yl-line-strong);
}
.body { font-size: 16px; color: var(--yl-titanium); line-height: 1.62; }
.body-lg { font-size: 18px; color: var(--yl-titanium); line-height: 1.6; letter-spacing: -0.005em; }
strong { font-weight: 500; color: #E5E4DF; }
/* Layout primitives ------------------------------------------- */
.container {
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }
section {
position: relative;
border-bottom: 1px solid var(--yl-line);
}
/* Section header pattern — refined mono kicker */
.kicker-row {
display: flex;
align-items: center;
gap: 14px;
padding: 0;
border-bottom: none;
margin-bottom: 80px;
}
.kicker-row .dot {
width: 24px; height: 1px;
background: var(--yl-line-strong);
border-radius: 0;
box-shadow: none;
flex-shrink: 0;
}
.kicker-row .idx {
color: var(--yl-platinum);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
flex-shrink: 0;
}
.kicker-row .spacer {
flex: 1; height: 1px;
background: linear-gradient(90deg, var(--yl-line) 0%, var(--yl-line-strong) 50%, var(--yl-line) 100%);
}
.kicker-row .mono:last-child {
flex-shrink: 0;
}
@media (max-width: 768px) {
.kicker-row .mono:last-child { display: none; }
}
/* NAV ---------------------------------------------------------- */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
background: rgba(5, 11, 23, 0.55);
border-bottom: 1px solid var(--yl-line);
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 32px;
max-width: 1360px; margin: 0 auto;
}
.nav-brand {
display: flex; align-items: center; gap: 12px;
color: var(--yl-platinum);
text-decoration: none;
}
.nav-brand .mk {
width: 34px; height: 34px;
background-image: url('yl-mark-transparent.png');
background-size: contain; background-repeat: no-repeat; background-position: center;
filter:
drop-shadow(0 0 8px rgba(159, 228, 238,0.35))
drop-shadow(0 2px 4px rgba(0,0,0,0.4))
contrast(1.08) brightness(1.05);
transition: transform 500ms cubic-bezier(0.22,1,0.36,1), filter 500ms;
}
.nav-brand:hover .mk {
transform: rotate(8deg) scale(1.06);
filter:
drop-shadow(0 0 14px rgba(159, 228, 238,0.55))
drop-shadow(0 4px 8px rgba(0,0,0,0.45))
contrast(1.1) brightness(1.1);
}
.nav-brand .name {
/* V7 · Space Grotesk · personalidad geométrica · letter-spacing tight · sin serif */
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 19px;
letter-spacing: -0.025em;
color: var(--yl-silver-light);
transition: color 300ms, letter-spacing 300ms;
}
.nav-brand:hover .name {
color: #fff;
letter-spacing: -0.02em;
}
/* Detalle de brand: el · entre Yusta y Labs en copper-rim sutil */
.nav-brand .name::before { content: ""; }
.nav-brand:hover .name { color: #fff; }
.nav-links {
display: flex; gap: 36px;
list-style: none;
}
.nav-links a {
color: var(--yl-titanium);
text-decoration: none;
font-size: 13px;
letter-spacing: 0.02em;
transition: color 200ms var(--ease);
}
.nav-links a:hover { color: var(--yl-platinum); }
.nav-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
border: 1px solid var(--yl-line-strong);
border-radius: 999px;
color: var(--yl-platinum);
text-decoration: none;
font-size: 13px;
transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
white-space: nowrap;
}
.nav-cta:hover { border-color: var(--yl-platinum); background: rgba(209,211,214,0.04); transform: translateY(-1px); }
.nav-cta .pulse {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
flex-shrink: 0;
}
.nav-cta .wa-ic {
display: none;
color: #4ade80;
flex-shrink: 0;
}
/* Nav · hamburger toggle (desktop hidden, mobile visible) ------ */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
margin-left: 8px;
padding: 0;
background: transparent;
border: 1px solid var(--yl-line-strong);
border-radius: 12px;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
flex-shrink: 0;
transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.nav-toggle:hover, .nav-toggle:active {
border-color: var(--yl-copper);
background: rgba(159, 228, 238, 0.06);
}
.nav-toggle-bar {
display: block;
width: 20px;
height: 1.5px;
background: var(--yl-platinum);
border-radius: 999px;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms;
transform-origin: center;
}
.nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Nav · overlay mobile drawer backdrop ------------------------ */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(5, 11, 23, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
body.nav-open { overflow: hidden; }
/* Mobile · 768px y menos · drawer + hamburger ------------------ */
@media (max-width: 768px) {
.nav-toggle { display: inline-flex; }
.nav-links {
position: fixed;
top: 0;
right: 0;
width: min(82vw, 320px);
height: 100vh;
height: 100dvh; /* dynamic viewport · respeta barras iOS */
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 88px 28px 32px;
background: var(--yl-ink);
border-left: 1px solid var(--yl-line-strong);
transform: translateX(100%);
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 999;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.nav.is-open .nav-links { transform: translateX(0); }
.nav-links li {
width: 100%;
border-bottom: 1px solid var(--yl-line);
}
.nav-links li:last-child { border-bottom: none; }
.nav-links a {
display: block;
padding: 18px 4px;
font-size: 16px;
color: var(--yl-platinum);
letter-spacing: 0.01em;
}
.nav-links a:hover, .nav-links a:active { color: var(--yl-warm-glow); }
.nav-links a[data-active="active"] {
color: var(--yl-copper);
font-weight: 600;
}
.nav-cta {
padding: 8px 14px;
background: rgba(74, 222, 128, 0.06);
border-color: rgba(74, 222, 128, 0.35);
}
.nav-cta:hover, .nav-cta:active {
background: rgba(74, 222, 128, 0.12);
border-color: rgba(74, 222, 128, 0.6);
}
.nav-cta .pulse { display: none; }
.nav-cta .wa-ic { display: inline-block; }
.nav-cta .ctxt { display: inline; font-weight: 500; }
}
/* Phones muy chicos · <380px · iconos solo si hace falta espacio ------- */
@media (max-width: 380px) {
.nav-cta { padding: 8px 12px; gap: 6px; font-size: 12px; }
.nav-toggle { width: 40px; height: 40px; margin-left: 4px; }
}
/* HERO -------------------------------------------------------- */
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh; /* dynamic viewport · respeta barras navegador iOS */
display: flex; align-items: center;
padding: clamp(96px, 18vw, 140px) 0 clamp(64px, 12vw, 100px);
overflow: hidden;
background: var(--yl-ink);
isolation: isolate;
}
/* Studio environment — replaces basic grid -------------------- */
.hero-env {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
}
/* Key light — warm copper from upper-left */
.hero-env .light-key {
position: absolute;
width: 70vmax; height: 70vmax;
left: 18%; top: 12%;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(255, 220, 195, 0.10) 0%,
rgba(159, 228, 238, 0.06) 22%,
transparent 55%);
filter: blur(20px);
}
/* Fill light — cool blue from lower-right */
.hero-env .light-fill {
position: absolute;
width: 60vmax; height: 60vmax;
right: 8%; bottom: -15%;
background: radial-gradient(circle,
rgba(61, 107, 255, 0.12) 0%,
rgba(122, 91, 255, 0.05) 30%,
transparent 60%);
filter: blur(30px);
}
/* Rim light — soft violet behind subject */
.hero-env .light-rim {
position: absolute;
width: 800px; height: 800px;
left: 65%; top: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(122, 91, 255, 0.18) 0%,
rgba(91, 214, 255, 0.05) 25%,
transparent 55%);
filter: blur(40px);
}
/* Studio floor — perspective ground plane */
.hero-env .floor {
position: absolute;
left: -10%; right: -10%; bottom: 0;
height: 50%;
perspective: 1200px;
transform-style: preserve-3d;
opacity: 0.55;
}
.hero-env .floor::before {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(90deg,
transparent 0 80px,
rgba(209, 211, 214, 0.045) 80px 81px),
repeating-linear-gradient(0deg,
transparent 0 80px,
rgba(209, 211, 214, 0.045) 80px 81px);
transform: rotateX(74deg);
transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(180deg,
transparent 0%,
rgba(0,0,0,0.7) 35%,
rgba(0,0,0,0.4) 80%,
transparent 100%);
mask-image: linear-gradient(180deg,
transparent 0%,
rgba(0,0,0,0.7) 35%,
rgba(0,0,0,0.4) 80%,
transparent 100%);
}
/* Horizon halo — thin bright band at the vanishing line */
.hero-env .horizon {
position: absolute;
left: 0; right: 0; top: 58%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(159, 228, 238, 0.25) 30%,
rgba(209, 211, 214, 0.35) 50%,
rgba(91, 214, 255, 0.2) 70%,
transparent 100%);
filter: blur(0.4px);
}
.hero-env .horizon::before {
content: '';
position: absolute;
left: 0; right: 0; top: -40px;
height: 80px;
background: radial-gradient(ellipse 60% 100% at 50% 50%,
rgba(209, 211, 214, 0.06) 0%, transparent 70%);
}
/* Particulate atmosphere */
.hero-env .dust {
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 12% 23%, rgba(209,211,214,0.4), transparent),
radial-gradient(1px 1px at 78% 14%, rgba(209,211,214,0.3), transparent),
radial-gradient(1px 1px at 34% 67%, rgba(159, 228, 238,0.4), transparent),
radial-gradient(1px 1px at 88% 81%, rgba(209,211,214,0.3), transparent),
radial-gradient(1px 1px at 22% 88%, rgba(209,211,214,0.25), transparent),
radial-gradient(1px 1px at 65% 42%, rgba(91,214,255,0.3), transparent),
radial-gradient(1px 1px at 52% 18%, rgba(209,211,214,0.3), transparent),
radial-gradient(1px 1px at 8% 56%, rgba(209,211,214,0.25), transparent),
radial-gradient(1px 1px at 95% 38%, rgba(159, 228, 238,0.3), transparent),
radial-gradient(1px 1px at 44% 91%, rgba(209,211,214,0.2), transparent);
opacity: 0.85;
animation: drift 22s linear infinite;
}
@keyframes drift {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-30px, -20px, 0); }
}
/* Drafting registration marks — corners */
.hero-env .reg {
position: absolute;
width: 18px; height: 18px;
opacity: 0.35;
}
.hero-env .reg::before, .hero-env .reg::after {
content: ''; position: absolute;
background: var(--yl-titanium);
}
.hero-env .reg::before { left: 0; right: 0; top: 50%; height: 1px; }
.hero-env .reg::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.hero-env .reg.tl { top: 96px; left: 32px; }
.hero-env .reg.tr { top: 96px; right: 32px; }
.hero-env .reg.bl { bottom: 32px; left: 32px; }
.hero-env .reg.br { bottom: 32px; right: 32px; }
/* Subject orbital rings — slow rotation */
.hero-env .orbital-svg {
position: absolute;
width: min(80vh, 780px);
aspect-ratio: 1;
left: calc(50% + 18vw); top: 50%;
transform: translate(-50%, -50%);
opacity: 0.45;
pointer-events: none;
}
@media (max-width: 900px) {
.hero-env .orbital-svg { left: 50%; top: 60%; width: min(90vw, 600px); }
}
.hero-inner {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 64px;
align-items: center;
width: 100%;
}
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
}
/* HERO SLUG — architectural marker replacing the chunky pill -- */
.hero-copy .hero-slug {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 56px;
padding: 0;
}
.hero-copy .slug-rule {
width: 42px;
height: 1px;
background: linear-gradient(90deg,
rgba(209, 211, 214, 0) 0%,
rgba(209, 211, 214, 0.35) 50%,
rgba(209, 211, 214, 0.9) 100%);
flex-shrink: 0;
}
.hero-copy .slug-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--yl-copper);
box-shadow: 0 0 8px var(--yl-copper);
flex-shrink: 0;
animation: slug-pulse 3.2s ease-in-out infinite;
}
@keyframes slug-pulse {
0%, 100% { opacity: 0.55; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.hero-copy .slug-text {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--yl-titanium);
line-height: 1;
}
.hero-copy .slug-sep {
color: rgba(154, 154, 160, 0.45);
margin: 0 2px;
}
.hero-copy .slug-text em {
color: var(--yl-platinum);
font-style: normal;
}
@media (max-width: 600px) {
.hero-copy .hero-slug { gap: 10px; margin-bottom: 40px; }
.hero-copy .slug-rule { width: 24px; }
.hero-copy .slug-text { font-size: 10px; letter-spacing: 0.18em; }
}
/* KICKER HUD ------------------------------------------------- */
.hero-copy .kicker {
display: inline-flex; align-items: stretch;
margin-bottom: 48px;
border: 1px solid var(--yl-line-strong);
border-radius: 999px;
background: linear-gradient(180deg, rgba(7,19,38,0.7), rgba(7,19,38,0.4));
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
overflow: hidden;
position: relative;
box-shadow:
inset 0 1px 0 rgba(209,211,214,0.04),
0 4px 24px rgba(0,0,0,0.4);
}
.hero-copy .kicker::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(209,211,214,0.08), transparent);
animation: kicker-sweep 6s ease-in-out infinite;
}
@keyframes kicker-sweep {
0%, 100% { left: -100%; }
50% { left: 100%; }
}
.hero-copy .kicker .seg {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px;
position: relative;
z-index: 1;
}
.hero-copy .kicker .seg + .seg {
border-left: 1px solid var(--yl-line);
}
.hero-copy .kicker .label {
color: var(--yl-platinum);
font-size: 11px;
letter-spacing: 0.14em;
white-space: nowrap;
}
.hero-copy .kicker .meta {
color: var(--yl-silver);
font-size: 11px;
letter-spacing: 0.1em;
white-space: nowrap;
}
/* Animated radar indicator */
.hero-copy .kicker .radar {
width: 12px; height: 12px;
position: relative;
flex-shrink: 0;
}
.hero-copy .kicker .radar::before {
content: ''; position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--yl-electric);
box-shadow: 0 0 8px var(--yl-electric);
}
.hero-copy .kicker .radar::after {
content: ''; position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--yl-electric);
animation: radar-pulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes radar-pulse {
0% { transform: scale(0.5); opacity: 0.9; }
100% { transform: scale(2.4); opacity: 0; }
}
/* Signal-bars indicator (alt segment) */
.hero-copy .kicker .bars {
display: inline-flex; align-items: flex-end; gap: 2px;
height: 10px;
}
.hero-copy .kicker .bars i {
width: 2px; background: var(--yl-platinum);
border-radius: 1px;
display: block;
}
.hero-copy .kicker .bars i:nth-child(1) { height: 30%; opacity: 0.5; }
.hero-copy .kicker .bars i:nth-child(2) { height: 55%; opacity: 0.7; }
.hero-copy .kicker .bars i:nth-child(3) { height: 80%; opacity: 0.9; }
.hero-copy .kicker .bars i:nth-child(4) { height: 100%; }
@media (max-width: 600px) {
.hero-copy .kicker .seg.hide-sm { display: none; }
}
/* TITLE ------------------------------------------------------- */
.hero-title {
margin-bottom: 32px;
position: relative;
}
.hero-title .l1, .hero-title .l2 {
display: block;
white-space: nowrap;
background: linear-gradient(180deg,
#ffffff 0%,
#E8E6E1 35%,
#D9D7D2 60%,
#9A9AA0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@media (max-width: 600px) {
.hero-title .l1, .hero-title .l2 { white-space: normal; }
}
/* Hero title — tipografía como protagonista
El "." final es copper estático (sin animación) — confidence sin gritar */
.hero-title-clean .l2 { position: relative; }
.hero-dot {
color: var(--yl-copper);
text-shadow: 0 0 24px rgba(159, 228, 238,0.5);
display: inline-block;
}
/* ═══════════════════════════════════════════════════════════════
PAGE HERO SPLIT · copy izquierda · live ticker derecha
═══════════════════════════════════════════════════════════════ */
.page-hero-split { padding: clamp(80px, 12vw, 140px) 0 clamp(48px, 6vw, 80px); }
.page-hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 1000px) {
.page-hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
.page-hero-ticker {
background:
radial-gradient(ellipse at top, rgba(159, 228, 238,0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid var(--yl-line);
border-radius: 14px;
padding: 20px;
box-shadow:
0 30px 80px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-ticker-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid var(--yl-line);
}
.hero-ticker-head .mono {
font-size: 10px; letter-spacing: 0.16em;
color: var(--yl-silver); text-transform: uppercase;
}
.ticker-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 10px #4ADE80;
animation: ticker-pulse 2s ease-in-out infinite;
}
@keyframes ticker-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.25); }
}
.hero-ticker-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.hero-ticker-item {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--yl-line);
border-radius: 10px;
transition: all 350ms cubic-bezier(0.22,1,0.36,1);
}
.hero-ticker-item:hover {
transform: translateX(4px);
border-color: rgba(159, 228, 238,0.3);
background: rgba(255,255,255,0.04);
}
.ticker-logo {
width: 44px; height: 44px;
border-radius: 9px;
overflow: hidden;
background: rgba(0,0,0,0.3);
display: grid; place-items: center;
flex-shrink: 0;
}
.ticker-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticker-logo-sc { background: transparent; }
.ticker-logo-sc svg { width: 100%; height: 100%; }
.ticker-info b {
display: block;
color: var(--yl-platinum);
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.ticker-info span {
display: block;
color: var(--yl-titanium);
font-size: 11.5px;
}
.ticker-metric {
text-align: right;
display: flex; flex-direction: column; align-items: flex-end;
padding-left: 12px;
border-left: 1px solid var(--yl-line);
}
.ticker-metric em {
font-style: normal;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 28px;
font-weight: 700;
color: var(--yl-copper);
line-height: 1;
}
.ticker-metric small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
margin-top: 4px;
}
.hero-ticker-foot {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--yl-line);
display: flex; align-items: center; gap: 8px;
}
.hero-ticker-foot .mono {
font-size: 9.5px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════
FOOTER · legal section + bottom layout
═══════════════════════════════════════════════════════════════ */
.foot-bottom {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
padding-top: 24px;
border-top: 1px solid var(--yl-line);
margin-top: 48px;
}
.foot-bottom > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-bottom span {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--yl-silver);
letter-spacing: 0.06em;
}
.foot-sep { color: var(--yl-copper); opacity: 0.6; }
.foot-legal-mini span:last-child { color: var(--yl-titanium); }
/* ═══════════════════════════════════════════════════════════════
VERIFICATION CARDS · negocios reales chequeables en Google
Layout: izq info / der map · trust ribbon abajo
═══════════════════════════════════════════════════════════════ */
.verify {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--yl-line);
}
.verify-head { max-width: 720px; margin-bottom: 56px; }
.verify-head h2 { margin-bottom: 16px; }
.verify-card {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
grid-template-areas:
"head map"
"rating map"
"meta map"
"actions map";
gap: 0 32px;
padding: 32px;
margin-bottom: 24px;
background:
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
border: 1px solid var(--yl-line);
border-radius: 14px;
transition: transform 600ms cubic-bezier(0.22,1,0.36,1),
border-color 500ms;
will-change: transform;
}
.verify-card:hover {
border-color: rgba(159, 228, 238,0.3);
transform: translateY(-3px);
}
@media (max-width: 980px) {
.verify-card {
grid-template-columns: 1fr;
grid-template-areas:
"head"
"rating"
"meta"
"actions"
"map";
gap: 24px;
}
}
/* Head · logo + brand text + google */
.verify-card-head {
grid-area: head;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding-bottom: 24px;
border-bottom: 1px solid var(--yl-line);
margin-bottom: 8px;
}
.verify-brand { display: flex; align-items: center; gap: 16px; }
.verify-logo {
width: 56px; height: 56px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.verify-logo svg { width: 100%; height: 100%; display: block; }
.verify-logo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.verify-logo-sle { background: #FFFFFF; padding: 4px; }
.verify-logo-sle img { object-fit: contain; }
.verify-logo-oro { background: #FFD600; }
.verify-logo-oro img { object-fit: cover; object-position: center; transform: scale(1.05); }
/* Moto SLE recortada (sin texto) en card proof · solo el vehículo, wordmark abajo */
.sle-real-logo {
width: clamp(280px, 78%, 440px);
height: auto;
margin: 14px auto 26px;
display: block;
filter: drop-shadow(0 20px 44px rgba(61,211,217,0.38)) drop-shadow(0 0 22px rgba(251,192,45,0.18));
z-index: 2; position: relative;
transition: transform 600ms var(--ease), filter 600ms var(--ease);
}
.sle-real-logo:hover {
transform: translateY(-3px) scale(1.02);
filter: drop-shadow(0 28px 56px rgba(61,211,217,0.5)) drop-shadow(0 0 28px rgba(251,192,45,0.25));
}
/* En el ticker mini · moto centrada con fondo dark (object-fit contain) */
.ticker-logo-sle {
background: linear-gradient(135deg, #0E1A2C, #050B17);
border: 1px solid rgba(61,211,217,0.2);
}
.ticker-logo-sle img {
object-fit: contain !important;
padding: 4px;
}
.verify-brand-text h3 {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--yl-platinum);
margin: 0 0 4px;
line-height: 1.1;
}
.verify-brand-text span {
font-size: 13px;
color: var(--yl-titanium);
letter-spacing: -0.005em;
}
.verify-google { opacity: 0.85; flex-shrink: 0; }
/* Rating row · 5,0 ★★★★★ · link reseñas */
.verify-rating {
grid-area: rating;
display: flex; align-items: baseline; gap: 16px;
margin-bottom: 24px;
padding: 8px 0;
flex-wrap: wrap;
}
.verify-rating-num {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 48px;
font-weight: 700;
color: var(--yl-platinum);
line-height: 1;
letter-spacing: -0.02em;
}
.verify-rating-stars {
display: inline-flex; align-items: center; gap: 3px;
}
.verify-rating-stars svg {
width: 18px; height: 18px;
filter: drop-shadow(0 2px 6px rgba(251,192,45,0.45));
}
.verify-rating-link {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--yl-copper);
text-decoration: none;
border-bottom: 1px dashed rgba(159, 228, 238,0.4);
padding-bottom: 1px;
transition: color 200ms, border-color 200ms;
}
.verify-rating-link:hover {
color: #C9F2F7;
border-color: var(--yl-copper);
}
/* Meta list · address, website, status */
.verify-meta {
grid-area: meta;
list-style: none; padding: 0; margin: 0 0 28px;
display: flex; flex-direction: column; gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--yl-line);
}
.verify-meta li {
display: flex; align-items: center; gap: 12px;
font-size: 14px;
color: var(--yl-titanium);
line-height: 1.4;
}
.verify-meta li svg {
width: 15px; height: 15px;
color: var(--yl-silver);
flex-shrink: 0;
}
.verify-meta li a {
color: var(--yl-copper);
text-decoration: none;
transition: color 200ms;
}
.verify-meta li a:hover { color: #C9F2F7; }
/* Actions row · 3 buttons */
.verify-actions {
grid-area: actions;
display: flex; gap: 10px;
flex-wrap: wrap;
}
.verify-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--yl-line-strong);
border-radius: 8px;
color: var(--yl-platinum);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.verify-btn:hover {
background: rgba(159, 228, 238,0.08);
border-color: rgba(159, 228, 238,0.4);
transform: translateY(-1px);
}
.verify-btn svg { color: var(--yl-titanium); transition: color 200ms; }
.verify-btn:hover svg { color: var(--yl-copper); }
.verify-btn-primary {
background: linear-gradient(135deg, var(--yl-copper), #8B6347);
border-color: var(--yl-copper);
color: var(--yl-ink);
box-shadow: 0 8px 20px rgba(159, 228, 238,0.2);
}
.verify-btn-primary svg { color: var(--yl-ink); }
.verify-btn-primary:hover {
background: linear-gradient(135deg, #C9F2F7, var(--yl-copper));
box-shadow: 0 12px 28px rgba(159, 228, 238,0.35);
}
.verify-btn-primary:hover svg { color: var(--yl-ink); }
/* Map aside · derecha */
.verify-map {
grid-area: map;
display: flex; flex-direction: column;
background: rgba(0,0,0,0.25);
border: 1px solid var(--yl-line);
border-radius: 12px;
overflow: hidden;
}
.verify-map-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--yl-line);
}
.verify-map-head h4 {
font-size: 14px;
font-weight: 700;
color: var(--yl-platinum);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.verify-map-head span {
font-size: 11.5px;
color: var(--yl-silver);
line-height: 1.4;
display: block;
}
.verify-live {
flex-shrink: 0;
padding: 5px 10px;
background: rgba(74,222,128,0.1);
border: 1px solid rgba(74,222,128,0.3);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
color: #4ADE80;
letter-spacing: 0.06em;
white-space: nowrap;
}
.verify-map-frame {
position: relative;
height: 280px;
background: #0B0F1A;
}
.verify-map-frame iframe {
width: 100%; height: 100%;
border: 0;
filter: invert(0.92) hue-rotate(180deg) brightness(0.96) contrast(0.92);
}
.verify-map-open {
position: absolute;
top: 12px; left: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 11px;
background: rgba(11,15,26,0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(159, 228, 238,0.3);
border-radius: 6px;
color: var(--yl-platinum);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.04em;
transition: all 200ms;
}
.verify-map-open:hover {
border-color: var(--yl-copper);
color: var(--yl-copper);
}
.verify-callout {
display: flex; align-items: flex-start; gap: 10px;
padding: 14px 18px;
background: rgba(74,222,128,0.04);
border-top: 1px solid var(--yl-line);
}
.verify-callout svg { flex-shrink: 0; margin-top: 2px; }
.verify-callout p {
font-size: 12.5px;
color: var(--yl-titanium);
line-height: 1.5;
margin: 0;
}
.verify-callout strong { color: var(--yl-platinum); font-weight: 600; }
/* Trust ribbon "100% real chequeable" */
.verify-ribbon {
margin-top: 28px;
padding: 18px 24px;
background:
linear-gradient(90deg, rgba(74,222,128,0.06), rgba(74,222,128,0.02) 60%, transparent);
border: 1px solid rgba(74,222,128,0.2);
border-left: 3px solid #4ADE80;
border-radius: 8px;
display: flex; align-items: center; gap: 14px;
}
.verify-ribbon svg { flex-shrink: 0; }
.verify-ribbon p {
font-size: 14px;
color: var(--yl-titanium);
line-height: 1.5;
margin: 0;
}
.verify-ribbon strong {
color: #4ADE80;
font-weight: 700;
margin-right: 6px;
}
/* ═══════════════════════════════════════════════════════════════
HERO ATMOSPHERE · particles sparse + light sweep cinematográfico
═══════════════════════════════════════════════════════════════ */
.hero-particles {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
}
.hp {
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: var(--yl-copper);
box-shadow: 0 0 6px rgba(159, 228, 238,0.6);
opacity: 0;
animation: hp-drift 24s linear infinite;
}
.hp-1 { top: 18%; left: 12%; animation-delay: 0s; animation-duration: 22s; }
.hp-2 { top: 35%; left: 78%; animation-delay: -4s; animation-duration: 26s; }
.hp-3 { top: 62%; left: 28%; animation-delay: -10s; animation-duration: 28s; }
.hp-4 { top: 22%; left: 62%; animation-delay: -15s; animation-duration: 24s; }
.hp-5 { top: 78%; left: 48%; animation-delay: -7s; animation-duration: 30s; }
.hp-6 { top: 48%; left: 88%; animation-delay: -19s; animation-duration: 26s; }
@keyframes hp-drift {
0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
8% { opacity: 0.85; }
50% { transform: translate(-30px, -40px) scale(1.2); opacity: 1; }
92% { opacity: 0.6; }
100% { transform: translate(-60px, -80px) scale(0.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hp { animation: none; opacity: 0.4; }
}
/* Light sweep cinematográfico · pasa por el mark cada 14s */
.hero-mark::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255,255,255,0.06) 47%,
rgba(255,255,255,0.12) 50%,
rgba(255,255,255,0.06) 53%,
transparent 70%
);
pointer-events: none;
z-index: 4;
transform: translateX(-100%);
animation: light-sweep 14s cubic-bezier(0.65, 0, 0.35, 1) infinite;
animation-delay: 3s;
}
@keyframes light-sweep {
0% { transform: translateX(-100%); }
18% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-mark::before { animation: none; opacity: 0; }
}
/* Orbital ring premium · 1 sola línea elegante con dashed copper acentos */
.hero-mark::after {
content: '';
position: absolute;
inset: 4%;
border-radius: 50%;
border: 1px solid transparent;
background:
conic-gradient(
from 0deg,
transparent 0deg,
rgba(159, 228, 238,0.25) 30deg,
rgba(209,211,214,0.18) 90deg,
transparent 180deg,
rgba(159, 228, 238,0.15) 270deg,
transparent 360deg
);
-webkit-mask: radial-gradient(transparent 64%, #000 65%, #000 66%, transparent 67%);
mask: radial-gradient(transparent 64%, #000 65%, #000 66%, transparent 67%);
animation: ring-rotate 60s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes ring-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-mark::after { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════
PAGE LOAD CHOREOGRAPHY · entrada cinematográfica del hero
Curve premium · stagger entre líneas · respeta reduced motion
═══════════════════════════════════════════════════════════════ */
@keyframes hero-rise {
from {
opacity: 0;
transform: translateY(28px);
filter: blur(8px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes hero-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.hero-title .l1 {
animation: hero-rise 1100ms cubic-bezier(0.22,1,0.36,1) 200ms both;
}
.hero-title .l2 {
animation: hero-rise 1100ms cubic-bezier(0.22,1,0.36,1) 380ms both;
}
.hero-sub {
animation: hero-rise 1000ms cubic-bezier(0.22,1,0.36,1) 720ms both;
}
.hero .cta-row {
animation: hero-rise 900ms cubic-bezier(0.22,1,0.36,1) 920ms both;
}
.hero-mark .art {
animation: hero-fade 1600ms cubic-bezier(0.22,1,0.36,1) 600ms both;
}
.hero-corner {
animation: hero-fade 1200ms cubic-bezier(0.22,1,0.36,1) 1400ms both;
}
@media (prefers-reduced-motion: reduce) {
.hero-title .l1, .hero-title .l2,
.hero-sub, .hero .cta-row,
.hero-mark .art, .hero-corner {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════
PROCESS TIMELINE · horizontal con línea conectora (editorial)
═══════════════════════════════════════════════════════════════ */
.process-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding-top: 56px;
}
/* línea horizontal base que conecta los 4 nodos */
.process-timeline-line {
position: absolute;
top: 76px;
left: 12.5%; right: 12.5%;
height: 1px;
background: var(--yl-line);
}
.process-timeline-line-fill {
position: absolute;
top: 76px;
left: 12.5%;
height: 1px;
width: 0;
background: linear-gradient(90deg, var(--yl-copper), transparent);
box-shadow: 0 0 12px rgba(159, 228, 238,0.4);
transition: width 1600ms cubic-bezier(0.22,1,0.36,1);
}
.process-timeline.in .process-timeline-line-fill { width: 75%; }
.ptl-step {
position: relative;
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 0 8px;
}
.ptl-node {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--yl-ink);
border: 1px solid var(--yl-line-strong);
display: grid; place-items: center;
margin-bottom: 32px;
position: relative;
z-index: 2;
transition: all 600ms cubic-bezier(0.22,1,0.36,1);
}
.ptl-node-inner {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
color: var(--yl-silver);
letter-spacing: 0.04em;
transition: color 400ms;
}
.ptl-step:hover .ptl-node {
border-color: var(--yl-copper);
box-shadow: 0 0 0 6px rgba(159, 228, 238,0.08), 0 0 24px rgba(159, 228, 238,0.25);
}
.ptl-step:hover .ptl-node-inner {
color: var(--yl-copper);
}
.ptl-body { max-width: 240px; }
.ptl-meta {
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-copper);
text-transform: uppercase;
margin-bottom: 12px;
opacity: 0.85;
}
.ptl-title {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 26px;
font-weight: 500;
color: var(--yl-platinum);
line-height: 1.1;
margin-bottom: 10px;
}
.ptl-desc {
font-size: 13.5px;
color: var(--yl-titanium);
line-height: 1.55;
}
/* Stagger reveal de cada step */
.ptl-step {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.ptl-step:nth-child(3) { transition-delay: 120ms; }
.ptl-step:nth-child(4) { transition-delay: 240ms; }
.ptl-step:nth-child(5) { transition-delay: 360ms; }
.ptl-step:nth-child(6) { transition-delay: 480ms; }
.process-timeline.in .ptl-step { opacity: 1; transform: translateY(0); }
/* Mobile · stack vertical con línea izquierda */
@media (max-width: 900px) {
.process-timeline {
grid-template-columns: 1fr;
gap: 48px;
padding-left: 60px;
}
.process-timeline-line {
top: 0; bottom: 0; left: 80px; right: auto;
width: 1px; height: auto;
}
.process-timeline-line-fill {
top: 0; left: 80px; bottom: 0;
width: 1px; height: 0;
}
.process-timeline.in .process-timeline-line-fill { height: 75%; width: 1px; }
.ptl-step {
flex-direction: row; align-items: flex-start; gap: 24px;
text-align: left;
padding: 0;
}
.ptl-node { margin-bottom: 0; margin-left: -40px; flex-shrink: 0; }
.ptl-body { max-width: 100%; }
}
/* (flourish animations removed — replaced by .hero-dot pulse) */
/* ═══════════════════════════════════════════════════════════════
SHOWCASE BENTO · home pillars preview (Apple-bento style)
═══════════════════════════════════════════════════════════════ */
.showcase { padding: clamp(80px, 12vw, 160px) 0; border-top: 1px solid var(--yl-line); }
.showcase-head { max-width: 720px; margin-bottom: 56px; }
.showcase-head h2 { margin-bottom: 0; }
.showcase-bento {
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px;
min-height: 640px;
}
@media (max-width: 900px) {
.showcase-bento {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
min-height: 0;
}
}
.show-card {
position: relative;
display: flex; flex-direction: column;
padding: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--yl-line);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 600ms cubic-bezier(0.22,1,0.36,1),
border-color 500ms,
box-shadow 500ms;
will-change: transform;
}
.show-card:hover {
transform: translateY(-6px);
border-color: rgba(159, 228, 238,0.3);
box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(159, 228, 238,0.2);
}
.show-card-systems { grid-row: span 2; }
.show-card-meta {
position: absolute;
top: 24px; right: 24px;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
z-index: 2;
}
.show-card-mockup {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: 32px 0;
min-height: 220px;
}
.show-card-systems .show-card-mockup { padding: 48px 0 32px; }
.show-card-text { padding-top: 24px; border-top: 1px solid var(--yl-line); }
.show-card-text h3 {
font-family: 'Inter', system-ui, sans-serif;
font-size: 28px;
font-weight: 500;
color: var(--yl-platinum);
margin-bottom: 10px;
line-height: 1.1;
}
.show-card-systems .show-card-text h3 { font-size: 34px; }
.show-card-tag {
display: inline-block;
margin-left: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--yl-copper);
text-transform: uppercase;
vertical-align: middle;
opacity: 0.9;
}
.show-card-text p {
font-size: 14.5px;
color: var(--yl-titanium);
line-height: 1.55;
margin-bottom: 16px;
}
.show-card-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--yl-copper);
text-transform: uppercase;
transition: gap 300ms;
}
.show-card-cta em { font-style: normal; transition: transform 300ms; }
.show-card:hover .show-card-cta em { transform: translateX(4px); }
/* MINI LAPTOP mockup (Sistemas) */
.sm-laptop {
width: 92%;
background: linear-gradient(180deg, #1A1A24 0%, #0B0B14 100%);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.sm-chrome {
display: flex; gap: 6px;
padding: 9px 14px;
background: linear-gradient(180deg, #20202A 0%, #15151E 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sm-chrome span { width: 9px; height: 9px; border-radius: 50%; }
.sm-chrome span:nth-child(1) { background: #FF5F57; }
.sm-chrome span:nth-child(2) { background: #FEBC2E; }
.sm-chrome span:nth-child(3) { background: #28C940; }
.sm-panel { display: grid; grid-template-columns: 50px 1fr; min-height: 200px; }
.sm-side {
background: rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.05);
background-image:
linear-gradient(rgba(255,255,255,0.04) 7px, transparent 7px, transparent 22px);
background-size: 100% 28px;
background-position: 0 16px;
}
.sm-main { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sm-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sm-kpi {
padding: 8px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
border-top: 2px solid;
}
.sm-kpi-grn { border-top-color: #22C55E; }
.sm-kpi-blu { border-top-color: #3B82F6; }
.sm-kpi-org { border-top-color: #F97316; }
.sm-kpi b {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 14px;
color: var(--yl-platinum);
font-weight: 600;
}
.sm-chart {
display: flex; align-items: flex-end; gap: 4px;
height: 56px;
padding: 8px;
background: rgba(255,255,255,0.02);
border-radius: 4px;
}
.sm-chart div {
flex: 1;
background: linear-gradient(180deg, var(--yl-copper), rgba(159, 228, 238,0.3));
border-radius: 2px 2px 0 0;
}
.sm-rows { display: flex; flex-direction: column; gap: 4px; }
.sm-rows div {
height: 14px;
background: rgba(255,255,255,0.04);
border-left: 2px solid rgba(159, 228, 238,0.3);
border-radius: 2px;
}
/* MINI WEB mockup */
.sm-web {
width: 90%;
background: linear-gradient(180deg, #0F1224 0%, #050B17 100%);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.05);
}
.sm-web-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sm-web-logo {
width: 28px; height: 10px;
background: var(--yl-platinum);
border-radius: 2px;
}
.sm-web-links { display: flex; gap: 8px; }
.sm-web-links span {
width: 24px; height: 4px;
background: var(--yl-silver);
opacity: 0.4;
border-radius: 2px;
}
.sm-web-hero {
padding: 24px 16px;
background:
radial-gradient(ellipse at 70% 50%, rgba(159, 228, 238,0.15), transparent 70%);
}
.sm-web-h1 {
width: 70%;
height: 14px;
background: linear-gradient(90deg, var(--yl-platinum), var(--yl-titanium));
border-radius: 3px;
margin-bottom: 8px;
}
.sm-web-h2 {
width: 50%;
height: 8px;
background: var(--yl-silver);
opacity: 0.5;
border-radius: 2px;
margin-bottom: 12px;
}
.sm-web-cta {
display: inline-block;
width: 80px; height: 22px;
background: var(--yl-copper);
border-radius: 11px;
box-shadow: 0 4px 12px rgba(159, 228, 238,0.3);
}
.sm-web-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
padding: 0 16px 16px;
}
.sm-web-grid div {
aspect-ratio: 1;
background: rgba(255,255,255,0.04);
border-radius: 4px;
}
/* MINI CHAT mockup (Agentes) */
.sm-chat {
width: 88%;
background: linear-gradient(180deg, #0a1d18 0%, #061410 100%);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
border: 1px solid rgba(34,197,94,0.15);
}
.sm-chat-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sm-chat-av {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #4ADE80, #16A34A);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.sm-chat-name {
height: 8px; width: 80px;
background: var(--yl-platinum);
opacity: 0.7;
border-radius: 2px;
}
.sm-chat-msgs {
padding: 14px;
display: flex; flex-direction: column; gap: 8px;
}
.sm-chat-in, .sm-chat-out {
height: 22px;
border-radius: 10px;
}
.sm-chat-in {
width: 70%;
background: #1F2937;
border-bottom-left-radius: 3px;
align-self: flex-start;
}
.sm-chat-out {
width: 75%;
background: #054D40;
border-bottom-right-radius: 3px;
align-self: flex-end;
}
.sm-chat-out-short { width: 40%; }
.sm-chat-msgs > div:nth-child(2) { width: 60%; }
.sm-chat-msgs > div:nth-child(3) { width: 50%; }
/* Card-specific glow accents */
.show-card-systems {
background:
radial-gradient(ellipse at top right, rgba(159, 228, 238,0.06), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
}
.show-card-web {
background:
radial-gradient(ellipse at top, rgba(159, 228, 238,0.05), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
}
.show-card-agents {
background:
radial-gradient(ellipse at bottom right, rgba(159, 228, 238,0.05), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
}
/* ═══════════════════════════════════════════════════════════════
AURA COMMERCE DEMO · live POS mockup
═══════════════════════════════════════════════════════════════ */
.aura-demo { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--yl-line); }
.aura-demo-head { max-width: 720px; margin-bottom: 48px; }
.aura-demo-head h2 { margin-bottom: 16px; }
.aura-demo-foot {
text-align: center;
margin-top: 28px;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--yl-silver);
text-transform: uppercase;
}
.aura-demo-frame {
background: linear-gradient(180deg, #1A1A24 0%, #0B0B14 100%);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 50px 100px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.05),
inset 0 1px 0 rgba(255,255,255,0.08);
transition: transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.aura-live-tag {
margin-left: 12px;
font-size: 10px;
color: #4ADE80;
letter-spacing: 0.14em;
}
.aura-app {
background: #F7F7F4;
font-family: 'Inter', sans-serif;
color: #0F172A;
min-height: 580px;
display: flex; flex-direction: column;
}
/* Top bar */
.aura-top {
display: flex; align-items: center; gap: 24px;
padding: 14px 20px;
background: #FFFFFF;
border-bottom: 1px solid #E5E7EB;
}
.aura-brand { display: flex; align-items: center; gap: 12px; }
.aura-brand-mk {
width: 32px; height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #BFEAF2, #8B6347);
box-shadow: 0 4px 12px rgba(159, 228, 238,0.3);
}
.aura-brand b {
display: block;
font-size: 12px;
letter-spacing: 0.06em;
color: #0F172A;
font-weight: 800;
}
.aura-brand span {
display: block;
font-size: 10px;
color: #64748B;
margin-top: 1px;
}
.aura-search {
flex: 1;
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
background: #F1F5F9;
border-radius: 8px;
color: #94A3B8;
font-size: 13px;
}
.aura-user { display: flex; align-items: center; gap: 8px; }
.aura-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #93C5FD, #1E40AF);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: 800;
}
.aura-user span {
font-size: 12px;
font-weight: 700;
color: #0F172A;
}
/* Body grid */
.aura-body {
flex: 1;
display: grid;
grid-template-columns: 200px 1fr 320px;
min-height: 480px;
}
@media (max-width: 1100px) {
.aura-body { grid-template-columns: 160px 1fr 280px; }
}
@media (max-width: 800px) {
.aura-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
.aura-side { display: flex; overflow-x: auto; gap: 4px; padding: 10px; }
.aura-nav { flex-shrink: 0; }
}
/* Sidebar */
.aura-side {
background: #FFFFFF;
border-right: 1px solid #E5E7EB;
padding: 16px 12px;
display: flex; flex-direction: column; gap: 4px;
}
.aura-nav {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
color: #64748B;
cursor: default;
transition: all 200ms;
}
.aura-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.aura-nav.active {
background: linear-gradient(135deg, #BFEAF2, #8B6347);
color: #fff;
box-shadow: 0 4px 12px rgba(159, 228, 238,0.3);
}
.aura-nav:not(.active):hover { background: #F1F5F9; color: #0F172A; }
/* Products grid */
.aura-grid {
padding: 18px;
background: #F7F7F4;
overflow: hidden;
display: flex; flex-direction: column;
}
.aura-grid-head {
display: flex; gap: 6px; margin-bottom: 14px;
overflow-x: auto;
}
.aura-cat {
padding: 7px 14px;
background: #FFFFFF;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
color: #64748B;
white-space: nowrap;
border: 1px solid #E5E7EB;
}
.aura-cat.active {
background: #0F172A;
color: #fff;
border-color: #0F172A;
}
.aura-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 1100px) { .aura-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .aura-products { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.aura-prod {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
overflow: hidden;
padding: 10px;
position: relative;
transition: all 200ms;
}
.aura-prod:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
border-color: var(--yl-copper);
}
.aura-prod-img {
aspect-ratio: 1.2 / 1;
border-radius: 6px;
margin-bottom: 10px;
}
.aura-prod b {
display: block;
font-size: 12.5px;
font-weight: 700;
color: #0F172A;
line-height: 1.25;
margin-bottom: 3px;
}
.aura-prod span {
display: block;
font-size: 10px;
color: #64748B;
margin-bottom: 4px;
}
.aura-prod em {
display: block;
font-style: normal;
font-size: 14px;
font-weight: 800;
color: var(--yl-copper);
}
.aura-prod-warn {
position: absolute;
top: 8px; right: 8px;
background: #FEF3C7;
color: #92400E;
font-size: 9px;
font-weight: 800;
padding: 3px 7px;
border-radius: 4px;
letter-spacing: 0.04em;
}
.aura-prod-low .aura-prod-img { border: 2px solid #F59E0B; }
/* Cart */
.aura-cart {
background: #FFFFFF;
border-left: 1px solid #E5E7EB;
display: flex; flex-direction: column;
}
.aura-cart-head {
padding: 14px 16px;
border-bottom: 1px solid #E5E7EB;
display: flex; justify-content: space-between; align-items: baseline;
}
.aura-cart-head b { font-size: 13px; font-weight: 800; color: #0F172A; }
.aura-cart-head span { font-size: 11px; color: #64748B; }
.aura-cart-items {
flex: 1;
padding: 8px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 4px;
}
.aura-cart-item {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px;
border-radius: 6px;
}
.aura-cart-item:hover { background: #F7F7F4; }
.aura-cart-thumb {
width: 36px; height: 36px;
border-radius: 5px;
}
.aura-cart-info b {
display: block;
font-size: 11.5px;
font-weight: 700;
color: #0F172A;
line-height: 1.25;
}
.aura-cart-info span {
display: block;
font-size: 10px;
color: #64748B;
margin-top: 1px;
}
.aura-cart-item em {
font-style: normal;
font-size: 12px;
font-weight: 800;
color: #0F172A;
}
.aura-cart-foot {
border-top: 1px solid #E5E7EB;
padding: 14px 16px;
background: #FAFAF7;
}
.aura-cart-line {
display: flex; justify-content: space-between;
padding: 4px 0;
font-size: 11.5px;
color: #64748B;
}
.aura-cart-line b { color: #0F172A; font-weight: 700; }
.aura-cart-total {
display: flex; justify-content: space-between; align-items: baseline;
padding: 10px 0 12px;
border-top: 1px solid #E5E7EB;
margin-top: 6px;
}
.aura-cart-total span {
font-size: 10px;
font-weight: 800;
color: #64748B;
letter-spacing: 0.08em;
}
.aura-cart-total b {
font-size: 22px;
font-weight: 900;
color: #0F172A;
letter-spacing: -0.01em;
}
.aura-cart-cta {
width: 100%;
padding: 13px;
background: linear-gradient(135deg, #BFEAF2, #8B6347);
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 8px 20px rgba(159, 228, 238,0.3);
transition: all 200ms;
}
.aura-cart-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(159, 228, 238,0.4); }
.aura-cart-methods {
display: flex; justify-content: space-between; gap: 6px;
margin-top: 10px;
}
.aura-cart-methods span {
flex: 1;
text-align: center;
padding: 6px 4px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 5px;
font-size: 10.5px;
font-weight: 700;
color: #64748B;
}
/* Bottom stats */
.aura-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #0F172A;
color: #fff;
}
.aura-stats > div {
padding: 14px 18px;
border-right: 1px solid rgba(255,255,255,0.06);
}
.aura-stats > div:last-child { border-right: none; }
.aura-stats span {
display: block;
font-size: 9px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
margin-bottom: 4px;
}
.aura-stats b {
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 22px;
font-weight: 600;
color: #fff;
line-height: 1;
}
@media (max-width: 700px) {
.aura-stats { grid-template-columns: repeat(2, 1fr); }
.aura-stats > div { border-bottom: 1px solid rgba(255,255,255,0.06); }
}
/* ═══════════════════════════════════════════════════════════════
CINEMA WEB PREVIEW · stunning brand example
═══════════════════════════════════════════════════════════════ */
.web-cinema { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--yl-line); }
.web-cinema-head { max-width: 720px; margin-bottom: 48px; }
.web-cinema-head h2 { margin-bottom: 16px; }
.web-cinema-foot {
text-align: center;
margin-top: 28px;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--yl-silver);
text-transform: uppercase;
}
.web-cinema-frame {
background: linear-gradient(180deg, #1A1A24 0%, #0B0B14 100%);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 50px 100px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.05),
inset 0 1px 0 rgba(255,255,255,0.08);
transition: transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.cinema-app {
position: relative;
background:
radial-gradient(ellipse at 80% 0%, rgba(159, 228, 238,0.18), transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(89,120,255,0.10), transparent 50%),
linear-gradient(180deg, #0E0907 0%, #060403 100%);
color: #F5F0E8;
min-height: 640px;
padding: 28px 36px 0;
overflow: hidden;
}
.cinema-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.cinema-orb-1 {
top: -15%; right: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, #BFEAF2, transparent 70%);
animation: cinema-float 12s ease-in-out infinite alternate;
}
.cinema-orb-2 {
bottom: -20%; left: -15%;
width: 600px; height: 600px;
background: radial-gradient(circle, #5978FF, transparent 70%);
animation: cinema-float 16s ease-in-out 2s infinite alternate-reverse;
}
@keyframes cinema-float {
from { transform: translate(0,0) scale(1); }
to { transform: translate(40px,-30px) scale(1.15); }
}
.cinema-noise {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 15% 25%, rgba(255,255,255,0.04) 0%, transparent 1%),
radial-gradient(circle at 75% 60%, rgba(255,255,255,0.03) 0%, transparent 1%),
radial-gradient(circle at 45% 85%, rgba(255,255,255,0.04) 0%, transparent 1%);
background-size: 24px 24px;
opacity: 0.4;
pointer-events: none;
z-index: 1;
}
/* Nav */
.cinema-nav {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 4px 0 36px;
border-bottom: 1px solid rgba(245,240,232,0.08);
margin-bottom: 64px;
}
.cinema-logo { display: flex; align-items: center; gap: 12px; }
.cinema-logo-mk {
width: 26px; height: 26px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #E8C593, #8B6347);
box-shadow: 0 4px 16px rgba(232,197,147,0.4);
}
.cinema-logo span {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 22px;
font-weight: 700;
color: #E8C593;
letter-spacing: 0.1em;
}
.cinema-nav-links { display: flex; gap: 32px; }
.cinema-nav-links span {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(245,240,232,0.65);
text-transform: uppercase;
transition: color 200ms;
}
.cinema-nav-links span:hover { color: #E8C593; }
@media (max-width: 700px) { .cinema-nav-links { display: none; } }
.cinema-nav-cta {
padding: 8px 18px;
background: rgba(232,197,147,0.1);
border: 1px solid rgba(232,197,147,0.3);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
color: #E8C593;
text-transform: uppercase;
}
/* Hero */
.cinema-hero {
position: relative; z-index: 2;
max-width: 720px;
margin-bottom: 80px;
}
.cinema-hero-meta {
display: flex; align-items: center; gap: 12px;
font-size: 10px;
letter-spacing: 0.24em;
color: rgba(232,197,147,0.85);
text-transform: uppercase;
margin-bottom: 32px;
}
.cinema-hero-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: #E8C593;
box-shadow: 0 0 8px #E8C593;
}
.cinema-hero-h1 {
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(40px, 7vw, 84px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.02em;
margin-bottom: 28px;
color: #F5F0E8;
}
.cinema-hero-h1 span { display: block; }
.cinema-hero-italic {
font-style: normal;
color: #E8C593;
text-shadow: 0 4px 24px rgba(232,197,147,0.3);
}
.cinema-hero-sub {
font-size: 16.5px;
line-height: 1.65;
color: rgba(245,240,232,0.65);
max-width: 540px;
margin-bottom: 40px;
}
.cinema-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.cinema-cta-primary {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
background: #E8C593;
color: #0E0907;
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 12px 40px rgba(232,197,147,0.25);
cursor: default;
}
.cinema-cta-ghost {
display: inline-flex; align-items: center;
padding: 14px 22px;
color: rgba(245,240,232,0.85);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-bottom: 1px solid rgba(245,240,232,0.3);
border-radius: 0;
}
/* Featured products */
.cinema-features {
position: relative; z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 48px;
}
@media (max-width: 800px) {
.cinema-features { grid-template-columns: 1fr; }
}
.cinema-feat {
background: rgba(245,240,232,0.03);
border: 1px solid rgba(245,240,232,0.08);
border-radius: 8px;
overflow: hidden;
transition: transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.cinema-feat:hover { transform: translateY(-4px); }
.cinema-feat-img {
aspect-ratio: 4 / 5;
position: relative;
background-blend-mode: overlay;
overflow: hidden;
}
.cinema-feat-img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
mix-blend-mode: luminosity;
opacity: 0.78;
filter: contrast(1.05) saturate(0.85);
transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 800ms cubic-bezier(0.22,1,0.36,1);
}
.cinema-feat:hover .cinema-feat-img img {
opacity: 0.95;
transform: scale(1.04);
}
/* Vignette superpuesto para integrar con el dark theme */
.cinema-feat-img::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(14,9,7,0.55) 100%);
pointer-events: none;
z-index: 1;
}
.cinema-feat-tag {
position: absolute;
top: 14px; left: 14px;
padding: 4px 8px;
background: rgba(14,9,7,0.8);
backdrop-filter: blur(8px);
border-radius: 3px;
font-size: 9px;
letter-spacing: 0.14em;
color: #E8C593;
text-transform: uppercase;
}
.cinema-feat-body { padding: 18px 18px 20px; }
.cinema-feat-body span.mono {
font-size: 10px;
letter-spacing: 0.16em;
color: rgba(232,197,147,0.7);
text-transform: uppercase;
}
.cinema-feat-body b {
display: block;
margin: 6px 0 8px;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 22px;
font-weight: 500;
color: #F5F0E8;
line-height: 1.1;
}
.cinema-feat-body em {
font-style: normal;
font-size: 14px;
color: #E8C593;
font-weight: 700;
}
/* Foot ribbon */
.cinema-foot {
position: relative; z-index: 2;
display: flex; justify-content: space-between; align-items: center;
padding: 20px 0;
border-top: 1px solid rgba(245,240,232,0.08);
flex-wrap: wrap; gap: 14px;
}
.cinema-foot span {
font-size: 10px;
letter-spacing: 0.2em;
color: rgba(232,197,147,0.7);
text-transform: uppercase;
}
.hero-sub {
font-size: 19px;
color: var(--yl-titanium);
max-width: 540px;
line-height: 1.55;
margin-bottom: 28px;
}
.hero-sub strong { color: var(--yl-platinum); font-weight: 500; }
/* Hero · 4 ofertas chips · enlaces directos a cada vertical -------------- */
.hero-offers {
list-style: none;
margin: 0 0 36px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 600px;
}
.hero-offers li { margin: 0; padding: 0; }
.hero-offers a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(209,211,214,0.12);
background: rgba(209,211,214,0.025);
color: var(--yl-platinum);
text-decoration: none;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
transition: border-color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
backdrop-filter: blur(4px);
}
.hero-offers a:hover {
border-color: rgba(200,169,107,0.55);
background: rgba(200,169,107,0.06);
transform: translateY(-1px);
}
.hero-offers .idx {
color: var(--yl-copper);
font-size: 10px;
letter-spacing: 0.1em;
opacity: 0.85;
}
@media (max-width: 560px) {
.hero-offers { gap: 6px; }
.hero-offers a { padding: 7px 11px; font-size: 12px; }
.hero-offers .idx { display: none; }
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* Honeypot anti-spam · invisible para humanos, accesible para readers --- */
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 999px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 200ms var(--ease);
cursor: pointer;
border: 1px solid transparent;
}
.btn-primary {
background: var(--yl-platinum);
color: var(--yl-ink);
}
.btn-primary:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 16px 40px -12px rgba(209,211,214,0.3);
}
.btn-ghost {
color: var(--yl-platinum);
border-color: var(--yl-line-strong);
background: transparent;
}
.btn-ghost:hover { border-color: var(--yl-platinum); background: rgba(209,211,214,0.03); }
.btn .arr { transition: transform 200ms var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
/* Hero mark — sculpted, polished, lit ------------------------- */
.hero-mark {
position: relative;
aspect-ratio: 1;
display: grid; place-items: center;
}
/* Soft volumetric halo behind the mark */
.hero-mark .halo {
position: absolute;
inset: -5%;
border-radius: 50%;
background:
radial-gradient(circle at 38% 32%, rgba(255, 235, 215, 0.18) 0%, transparent 45%),
radial-gradient(circle at 65% 70%, rgba(91, 214, 255, 0.10) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(159, 228, 238, 0.12) 0%, transparent 60%);
filter: blur(40px);
animation: halo-pulse 9s ease-in-out infinite;
}
@keyframes halo-pulse {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
/* The art stack · 3D breathing · combines float + Y-axis wobble + Z float
transform-style: preserve-3d para sentido de profundidad real */
.hero-mark .art {
position: relative;
width: 92%;
max-width: 600px;
aspect-ratio: 1;
perspective: 1400px;
transform-style: preserve-3d;
will-change: transform;
animation: mark-alive 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* La imagen propia tiene su propio breathing breath sutil para layering 3D */
.hero-mark .art img {
animation: mark-breath 6s ease-in-out infinite;
}
.hero-mark .art img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
filter:
drop-shadow(0 30px 50px rgba(0,0,0,0.55))
drop-shadow(0 0 24px rgba(159, 228, 238,0.10));
image-rendering: -webkit-optimize-contrast;
}
/* Inner specular highlight — soft white glow on the upper-left of the mark */
.hero-mark .spec {
position: absolute; inset: 0;
-webkit-mask-image: url('assets/yl-mark-transparent.png');
mask-image: url('assets/yl-mark-transparent.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background:
radial-gradient(ellipse 50% 40% at 35% 28%, rgba(255, 255, 255, 0.45) 0%, transparent 70%),
radial-gradient(ellipse 35% 25% at 70% 45%, rgba(255, 248, 230, 0.20) 0%, transparent 70%);
mix-blend-mode: screen;
pointer-events: none;
opacity: 0.9;
}
/* Polishing sheen — animated diagonal sweep across the silver */
.hero-mark .sheen {
position: absolute; inset: 0;
-webkit-mask-image: url('assets/yl-mark-transparent.png');
mask-image: url('assets/yl-mark-transparent.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background: linear-gradient(105deg,
transparent 35%,
rgba(255, 255, 255, 0.08) 44%,
rgba(255, 255, 255, 0.28) 50%,
rgba(255, 255, 255, 0.08) 56%,
transparent 65%);
background-size: 240% 240%;
background-position: 120% 120%;
mix-blend-mode: screen;
pointer-events: none;
animation: sheen-sweep 7s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes sheen-sweep {
0% { background-position: 120% 120%; }
55% { background-position: -20% -20%; }
100% { background-position: -20% -20%; }
}
/* Copper rim warm-glow accent */
.hero-mark .rim {
position: absolute; inset: 0;
-webkit-mask-image: url('assets/yl-mark-transparent.png');
mask-image: url('assets/yl-mark-transparent.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background:
radial-gradient(ellipse 45% 60% at 18% 78%, rgba(232, 175, 130, 0.45) 0%, transparent 55%),
radial-gradient(ellipse 35% 45% at 82% 22%, rgba(159, 228, 238, 0.35) 0%, transparent 55%);
mix-blend-mode: screen;
pointer-events: none;
opacity: 0.85;
animation: rim-glow 10s ease-in-out infinite;
}
@keyframes rim-glow {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Mark cast shadow on the studio floor */
.hero-mark .cast {
position: absolute;
left: 8%; right: 8%; bottom: -2%;
height: 60px;
background: radial-gradient(ellipse 60% 100% at 50% 50%,
rgba(0, 0, 0, 0.55) 0%, transparent 70%);
filter: blur(20px);
transform: scaleY(0.4);
z-index: -1;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-14px) rotate(1deg); }
}
/* Mark alive · 3D wobble + flotación vertical + rotación leve Y-axis
14 segundos full loop · curva senoidal para movimiento orgánico */
@keyframes mark-alive {
0% {
transform: translateY(0) translateZ(0) rotateY(0deg) rotateX(0deg);
}
25% {
transform: translateY(-10px) translateZ(8px) rotateY(4deg) rotateX(-1.5deg);
}
50% {
transform: translateY(-16px) translateZ(0) rotateY(0deg) rotateX(0deg);
}
75% {
transform: translateY(-10px) translateZ(8px) rotateY(-4deg) rotateX(1.5deg);
}
100% {
transform: translateY(0) translateZ(0) rotateY(0deg) rotateX(0deg);
}
}
/* Breath del logo en sí · respiración micro de scale (1.0 → 1.018) */
@keyframes mark-breath {
0%, 100% {
transform: scale(1);
filter:
drop-shadow(0 30px 50px rgba(0,0,0,0.55))
drop-shadow(0 0 24px rgba(159, 228, 238,0.10));
}
50% {
transform: scale(1.018);
filter:
drop-shadow(0 36px 60px rgba(0,0,0,0.55))
drop-shadow(0 0 36px rgba(159, 228, 238,0.20));
}
}
@media (prefers-reduced-motion: reduce) {
.hero-mark .art, .hero-mark .art img { animation: none; }
}
/* Orbital indicator ring around mark */
.hero-mark .orbit {
position: absolute;
inset: -8%;
border: 1px dashed rgba(209, 211, 214, 0.10);
border-radius: 50%;
animation: spin-slow 80s linear infinite;
pointer-events: none;
}
.hero-mark .orbit::before, .hero-mark .orbit::after {
content: '';
position: absolute;
width: 6px; height: 6px; border-radius: 50%;
background: var(--yl-copper);
box-shadow: 0 0 12px var(--yl-copper);
}
.hero-mark .orbit::before { top: -3px; left: 50%; transform: translateX(-50%); }
.hero-mark .orbit::after { bottom: -3px; left: 50%; transform: translateX(-50%); background: var(--yl-platinum); box-shadow: 0 0 10px rgba(209,211,214,0.6); }
.hero-mark .orbit.r2 {
inset: -22%;
border-style: solid;
border-color: rgba(209, 211, 214, 0.06);
animation-duration: 120s;
animation-direction: reverse;
}
.hero-mark .orbit.r2::before { background: var(--yl-electric); box-shadow: 0 0 12px var(--yl-electric); }
.hero-mark .orbit.r2::after { display: none; }
/* Third orbit — a faint outermost ring */
.hero-mark .orbit.r3 {
inset: -38%;
border: 1px dotted rgba(209, 211, 214, 0.05);
border-radius: 50%;
animation: spin-slow 220s linear infinite;
}
.hero-mark .orbit.r3::before, .hero-mark .orbit.r3::after { display: none; }
/* Mark frame SVG — ticks, arcs, calligraphy of measurement */
.hero-mark .mark-frame {
position: absolute;
inset: -14%;
width: 128%; height: 128%;
pointer-events: none;
overflow: visible;
}
/* Radar sweep — slow conic light cone behind the logo */
.hero-mark .radar-sweep {
position: absolute;
inset: -28%;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(159, 228, 238, 0.0) 4deg,
rgba(159, 228, 238, 0.10) 18deg,
rgba(209, 211, 214, 0.18) 28deg,
rgba(209, 211, 214, 0.06) 38deg,
transparent 60deg,
transparent 360deg);
-webkit-mask-image: radial-gradient(circle at center,
transparent 35%,
rgba(0,0,0,0.6) 50%,
rgba(0,0,0,1) 70%,
transparent 100%);
mask-image: radial-gradient(circle at center,
transparent 35%,
rgba(0,0,0,0.6) 50%,
rgba(0,0,0,1) 70%,
transparent 100%);
filter: blur(8px);
animation: spin-slow 18s linear infinite;
pointer-events: none;
opacity: 0.9;
mix-blend-mode: screen;
}
/* Satellites — three small bodies orbiting at the orbit-ring radii */
.hero-mark .sat {
position: absolute;
border-radius: 50%;
pointer-events: none;
transform-origin: 50% 50%;
will-change: transform;
}
.hero-mark .sat i {
position: absolute;
display: block;
border-radius: 50%;
top: -4px;
left: 50%;
transform: translateX(-50%);
}
.hero-mark .sat-a { inset: -8%; animation: spin-slow 16s linear infinite; }
.hero-mark .sat-a i {
width: 7px; height: 7px;
background: var(--yl-copper);
box-shadow:
0 0 12px rgba(232, 175, 130, 0.95),
0 0 28px rgba(159, 228, 238, 0.55);
}
.hero-mark .sat-b { inset: -22%; animation: spin-slow 30s linear infinite reverse; }
.hero-mark .sat-b i {
width: 5px; height: 5px;
background: var(--yl-electric);
box-shadow:
0 0 10px rgba(91, 144, 255, 0.95),
0 0 22px rgba(61, 107, 255, 0.5);
}
.hero-mark .sat-c { inset: -38%; animation: spin-slow 48s linear infinite; }
.hero-mark .sat-c i {
width: 4px; height: 4px;
background: var(--yl-platinum);
box-shadow:
0 0 10px rgba(242, 240, 235, 0.9),
0 0 22px rgba(209, 211, 214, 0.35);
}
/* Vertical scanline — occasional sweep across the logo art */
.hero-mark .art { overflow: visible; }
.hero-mark .scan {
position: absolute;
top: -8%; bottom: -8%;
left: 0; width: 2px;
background: linear-gradient(180deg,
transparent 0%,
rgba(255, 248, 230, 0.0) 10%,
rgba(255, 248, 230, 0.55) 50%,
rgba(255, 248, 230, 0.0) 90%,
transparent 100%);
box-shadow: 0 0 14px rgba(255, 248, 230, 0.5);
filter: blur(0.5px);
transform: translateX(-100%);
animation: scan-sweep 9s cubic-bezier(0.7, 0, 0.3, 1) infinite;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.85;
}
@keyframes scan-sweep {
0% { transform: translateX(0); opacity: 0; }
8% { opacity: 0.85; }
45% { opacity: 0.85; }
50% { transform: translateX(min(100% + 600px, 36vw)); opacity: 0; }
100% { transform: translateX(min(100% + 600px, 36vw)); opacity: 0; }
}
/* HUD callouts — leader line + micro label */
.hero-mark .hud {
position: absolute;
pointer-events: none;
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
animation: hud-fade 1200ms var(--ease) 2400ms forwards;
}
@keyframes hud-fade {
from { opacity: 0; transform: translate(0, 0); }
to { opacity: 1; transform: translate(0, 0); }
}
.hero-mark .hud-leader {
display: block;
width: 64px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(209,211,214,0.5) 50%, rgba(209,211,214,0.9));
flex-shrink: 0;
position: relative;
}
.hero-mark .hud-leader::before,
.hero-mark .hud-leader::after {
content: '';
position: absolute;
width: 5px; height: 5px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.hero-mark .hud-leader::before {
left: -3px;
background: var(--yl-platinum);
box-shadow: 0 0 8px rgba(209,211,214,0.7);
}
.hero-mark .hud-leader::after {
right: -2px;
width: 3px; height: 3px;
background: rgba(209,211,214,0.4);
}
.hero-mark .hud-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--yl-silver);
line-height: 1.5;
white-space: nowrap;
}
.hero-mark .hud-label b {
color: var(--yl-platinum);
font-weight: 400;
letter-spacing: 0.2em;
}
.hero-mark .hud-tl {
top: 8%; left: -2%;
flex-direction: row-reverse;
text-align: right;
}
.hero-mark .hud-tl .hud-leader {
background: linear-gradient(90deg, rgba(209,211,214,0.9), rgba(209,211,214,0.5) 50%, transparent);
}
.hero-mark .hud-tl .hud-leader::before { left: auto; right: -3px; }
.hero-mark .hud-tl .hud-leader::after { right: auto; left: -2px; }
.hero-mark .hud-br {
bottom: 4%; right: -2%;
}
@media (max-width: 900px) {
.hero-mark .hud { display: none; }
}
/* Flow lines — horizontal drafting beams sliding through the hero */
.hero-env .flow-lines {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.hero-env .fl {
position: absolute;
left: -25%; right: -25%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
transparent 15%,
rgba(209, 211, 214, 0.35) 32%,
rgba(255, 250, 240, 0.7) 48%,
rgba(159, 228, 238, 0.4) 64%,
transparent 82%,
transparent 100%);
will-change: transform, opacity;
animation: fl-drift 18s linear infinite;
}
.hero-env .fl-1 { top: 18%; animation-duration: 22s; animation-delay: -2s; opacity: 0.30; }
.hero-env .fl-2 { top: 33%; animation-duration: 17s; animation-delay: -7s; opacity: 0.18; height: 0.5px; }
.hero-env .fl-3 { top: 47%; animation-duration: 28s; animation-delay: -12s; opacity: 0.42; }
.hero-env .fl-4 { top: 62%; animation-duration: 20s; animation-delay: -4s; opacity: 0.22; height: 0.5px; }
.hero-env .fl-5 { top: 76%; animation-duration: 24s; animation-delay: -15s; opacity: 0.32; }
.hero-env .fl-6 { top: 89%; animation-duration: 30s; animation-delay: -9s; opacity: 0.16; height: 0.5px; }
@keyframes fl-drift {
0% { transform: translateX(-25%); }
100% { transform: translateX(25%); }
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Axis ticks at the mark center */
.hero-mark .axis {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
opacity: 0.6;
}
.hero-mark .axis.top { top: -28px; left: 50%; transform: translateX(-50%); }
.hero-mark .axis.bottom { bottom: -28px; left: 50%; transform: translateX(-50%); }
.hero-mark .axis.left { left: -52px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.hero-mark .axis.right { right: -52px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
@media (max-width: 900px) {
.hero-mark .axis.left, .hero-mark .axis.right { display: none; }
}
.hero-corner {
position: absolute;
bottom: 32px;
left: 32px; right: 32px;
display: flex; justify-content: space-between;
align-items: flex-end;
z-index: 3;
pointer-events: none;
}
.hero-corner > div { display: flex; flex-direction: column; gap: 6px; }
.hero-corner .v { color: var(--yl-platinum); }
@media (max-width: 768px) { .hero-corner { display: none; } }
/* MANIFESTO --------------------------------------------------- */
.manifesto {
padding: clamp(72px, 12vw, 160px) 0 clamp(80px, 14vw, 180px);
background:
radial-gradient(ellipse at 100% 0%, rgba(7,19,38,0.8) 0%, transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(159, 228, 238,0.04) 0%, transparent 40%),
var(--yl-ink);
position: relative;
}
.manifesto::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--yl-line-strong) 50%, transparent 100%);
}
.manifesto-inner {
display: grid;
grid-template-columns: 0.3fr 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) {
.manifesto-inner { grid-template-columns: 1fr; gap: 40px; }
}
.manifesto-side { position: sticky; top: 120px; }
@media (max-width: 900px) {
.manifesto-side { position: static; top: auto; display: flex; align-items: baseline; gap: 16px; }
.manifesto-side .mono { line-height: 1; }
}
.manifesto-side .sect-num {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 88px;
color: var(--yl-platinum);
line-height: 1;
margin-bottom: 12px;
background: linear-gradient(180deg, #fff 0%, #D9D7D2 60%, #9A9AA0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 900px) {
.manifesto-side .sect-num { font-size: 56px; margin-bottom: 0; }
}
.manifesto-body p {
margin-bottom: 56px;
max-width: 820px;
position: relative;
padding-left: 0;
}
.manifesto-body p::before {
content: '';
position: absolute;
left: -32px; top: 0.55em;
width: 16px; height: 1px;
background: var(--yl-copper);
opacity: 0.6;
}
@media (max-width: 900px) {
.manifesto-body p::before { display: none; }
.manifesto-body p { margin-bottom: 32px; }
}
.manifesto-body p:last-child { margin-bottom: 0; }
.manifesto-body .accent { color: var(--yl-platinum); }
/* WHAT WE BUILD (rotator) ------------------------------------- */
.rotator {
padding: clamp(72px, 12vw, 140px) 0 clamp(80px, 14vw, 160px);
text-align: center;
position: relative;
overflow: hidden;
}
.rotator::before {
content: '';
position: absolute;
left: 50%; top: 30%;
width: 60vmax; height: 30vmax;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse, rgba(159, 228, 238,0.08) 0%, transparent 60%);
pointer-events: none;
}
/* v2 · breathing copper underline subtle bajo todo el statement */
.rotator-v2::after {
content: '';
position: absolute;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--yl-copper), transparent);
opacity: 0.35;
margin-top: 80px;
pointer-events: none;
}
.rotator .label {
margin-bottom: 56px;
display: inline-flex; align-items: center; gap: 12px;
}
.rotator .label::before, .rotator .label::after {
content: '';
width: 24px; height: 1px;
background: var(--yl-line-strong);
}
.rotator-line {
display: inline-flex; align-items: baseline;
gap: 22px;
flex-wrap: wrap; justify-content: center;
position: relative;
z-index: 1;
}
.rotator-static {
background: linear-gradient(180deg, #fff 0%, #D9D7D2 60%, #9A9AA0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Odometer-style slot: clip-rect with a vertically-translating track */
.rotator-slot {
display: inline-flex; align-items: center;
position: relative;
gap: 14px;
line-height: 1;
vertical-align: baseline;
}
.rotator-slot .bracket {
position: relative;
flex-shrink: 0;
width: 14px;
height: 1.25em;
pointer-events: none;
}
.rotator-slot .bracket::before, .rotator-slot .bracket::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: var(--yl-electric);
box-shadow: 0 0 8px rgba(61, 107, 255, 0.6);
}
.rotator-slot .bracket::before { top: 0; }
.rotator-slot .bracket::after { bottom: 0; }
.rotator-slot .bracket.l { border-left: 1.5px solid var(--yl-electric); box-shadow: -2px 0 8px -2px rgba(61,107,255,0.5); }
.rotator-slot .bracket.r { border-right: 1.5px solid var(--yl-electric); box-shadow: 2px 0 8px -2px rgba(61,107,255,0.5); }
/* The clip viewport for the word track — width adjusts via JS
CRITICAL: usa mask-image fade arriba+abajo para clipar descenders ("p", "y") sin
que se vea la "patita" de la palabra siguiente asomando al cambiar */
.rotator-window {
position: relative;
height: 1.1em;
overflow: hidden;
min-width: 280px;
display: inline-block;
text-align: center;
transition: min-width 520ms var(--ease);
/* Soft fade arriba + abajo · mata las "patitas" perfectamente */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
@media (max-width: 600px) { .rotator-window { min-width: 200px; } }
.rotator-track {
display: flex;
flex-direction: column;
align-items: center;
/* Curve premium: anticipate + overshoot natural · 1100ms para sentir Apple */
transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1),
filter 1100ms cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform, filter;
}
/* Blur transitorio DURANTE el shift (clase 'shifting' agregada por JS) */
.rotator-track.shifting {
filter: blur(6px);
}
.rotator-track > span {
display: block;
height: 1.1em;
line-height: 1.1;
white-space: nowrap;
color: var(--yl-platinum);
padding: 0 6px;
/* gradient sutil platinum → copper en el punto final */
background: linear-gradient(180deg, #FFFFFF 0%, #E8E6E1 35%, #D9D7D2 60%, #9A9AA0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* La palabra activa (la visible centrada) recibe un acento copper en el final.
Como cada span termina en "." aplico copper a través de pseudo. */
.rotator-track > span::after {
content: '';
}
/* Caret pulse — copper en vez de electric blue (unificación de paleta) */
.rotator-caret {
display: block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--yl-copper);
box-shadow: 0 0 12px var(--yl-copper);
margin: 36px auto 0;
animation: caret-pulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes caret-pulse {
0%, 100% { opacity: 0.35; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.15); }
}
.rotator-sub {
margin-top: 48px;
color: var(--yl-silver);
font-size: 14px;
letter-spacing: 0.02em;
}
/* Progress dots subtle bajo el rotator — indica cuántas palabras hay */
.rotator-progress {
margin: 48px auto 0;
width: 200px;
height: 1px;
background: var(--yl-line);
position: relative;
overflow: hidden;
}
.rotator-progress-fill {
display: block;
position: absolute;
left: 0; top: 0; bottom: 0;
width: 12.5%; /* 1/8 palabras */
background: var(--yl-copper);
box-shadow: 0 0 8px var(--yl-copper);
transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1);
transform-origin: left;
}
/* Static "Construimos" — micro-shimmer en cada cambio */
.rotator-v2 .rotator-static {
transition: text-shadow 700ms cubic-bezier(0.22,1,0.36,1);
}
.rotator-v2.active-shift .rotator-static {
text-shadow: 0 0 28px rgba(159, 228, 238,0.35);
}
/* PROCESS ----------------------------------------------------- */
.process {
padding: clamp(96px, 12vw, 160px) 0;
background: var(--yl-midnight);
position: relative;
}
.process::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 0% 0%, rgba(61,107,255,0.05) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(159, 228, 238,0.04) 0%, transparent 45%);
pointer-events: none;
}
.process .container { position: relative; z-index: 1; }
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--yl-line);
border: 1px solid var(--yl-line-strong);
border-radius: 2px;
overflow: hidden;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; } }
.step {
background: var(--yl-midnight);
padding: 40px 28px 36px;
min-height: 380px;
display: flex; flex-direction: column;
position: relative;
transition: background 400ms var(--ease);
overflow: hidden;
}
.step::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--yl-copper), transparent);
opacity: 0;
transform: translateY(-2px);
transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.step::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(159, 228, 238,0.06) 0%, transparent 60%);
opacity: 0;
transition: opacity 400ms var(--ease);
pointer-events: none;
}
.step:hover { background: #0a1a30; }
.step:hover::before { opacity: 1; transform: translateY(0); }
.step:hover::after { opacity: 1; }
.step-num {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--yl-platinum);
letter-spacing: 0.18em;
margin-bottom: 28px;
display: flex; align-items: center; gap: 10px;
}
.step-num::before {
content: '';
width: 18px; height: 1px;
background: var(--yl-copper);
}
.step-icon {
width: 40px; height: 40px;
border: 1px solid var(--yl-line-strong);
border-radius: 8px;
display: grid; place-items: center;
margin-bottom: 36px;
color: var(--yl-platinum);
background: linear-gradient(180deg, rgba(209,211,214,0.04), transparent);
position: relative;
z-index: 1;
}
.step-icon svg { width: 20px; height: 20px; }
.step-title {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 34px;
color: var(--yl-platinum);
margin-bottom: 16px;
line-height: 1.02;
letter-spacing: -0.018em;
position: relative;
z-index: 1;
}
.step-desc {
color: var(--yl-titanium);
font-size: 14px;
line-height: 1.6;
position: relative;
z-index: 1;
}
.step-meta {
margin-top: auto;
padding-top: 32px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
border-top: 1px solid var(--yl-line);
display: flex; align-items: center; gap: 8px;
position: relative;
z-index: 1;
}
.step-meta::before {
content: '·';
color: var(--yl-copper);
font-size: 14px;
line-height: 1;
}
/* PROOF — SLE ------------------------------------------------- */
.proof { padding: clamp(96px, 12vw, 160px) 0; }
.proof-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) { .proof-inner { grid-template-columns: 1fr; gap: 48px; } }
.proof-visual {
position: relative;
aspect-ratio: 1;
border: 1px solid var(--yl-line);
border-radius: 4px;
overflow: hidden;
background:
radial-gradient(ellipse at center, rgba(7,19,38,1) 0%, var(--yl-ink) 80%);
}
.proof-visual::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(var(--yl-line) 1px, transparent 1px),
linear-gradient(90deg, var(--yl-line) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.4;
}
.proof-placeholder {
position: absolute; inset: 12%;
display: grid; place-items: center;
border: 1px dashed var(--yl-line-strong);
border-radius: 2px;
color: var(--yl-silver);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
padding: 24px;
background:
repeating-linear-gradient(
45deg,
transparent 0 8px,
rgba(209,211,214,0.02) 8px 16px
);
}
.proof-placeholder span { display: block; max-width: 220px; line-height: 1.6; }
/* SLE case CARD — integrated with brand (no white box) ============== */
.proof-sle-card {
background:
radial-gradient(ellipse at 30% 0%, rgba(61,211,217,0.10), transparent 60%),
radial-gradient(ellipse at 100% 100%, rgba(251,192,45,0.08), transparent 55%),
linear-gradient(180deg, #0B1628 0%, #050B17 100%);
border: 1px solid rgba(61,211,217,0.18);
border-radius: 6px;
box-shadow:
0 40px 80px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.03),
inset 0 1px 0 rgba(61,211,217,0.15);
display: flex; align-items: center; justify-content: center;
padding: 36px 32px;
overflow: hidden;
transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sle-card-glow {
position: absolute; inset: -20%;
background: radial-gradient(circle at 50% 50%, rgba(61,211,217,0.18), transparent 50%);
filter: blur(40px);
animation: sle-glow 8s ease-in-out infinite alternate;
z-index: 1;
}
@keyframes sle-glow {
from { transform: translate(0,0) scale(1); opacity: 0.6; }
to { transform: translate(20px,-10px) scale(1.1); opacity: 0.95; }
}
.sle-card-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(61,211,217,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,211,217,0.05) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
z-index: 1;
}
.sle-card-body {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 28px;
text-align: center;
width: 100%;
}
.sle-card-logo svg {
width: clamp(140px, 50%, 220px);
height: auto;
filter: drop-shadow(0 12px 30px rgba(61,211,217,0.35));
display: block; margin: 0 auto 14px;
}
.sle-card-wordmark {
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
color: #3DD3D9;
letter-spacing: -0.01em;
line-height: 1;
text-shadow: 0 4px 24px rgba(61,211,217,0.35);
}
.sle-card-wordmark em {
font-style: normal;
color: #FBC02D;
text-shadow: 0 4px 24px rgba(251,192,45,0.4);
}
.sle-card-sub {
margin-top: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(209,211,214,0.55);
text-transform: uppercase;
}
.sle-card-rating {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding-top: 22px;
border-top: 1px solid rgba(61,211,217,0.15);
width: 80%;
}
.sle-rating-row { display: flex; align-items: center; gap: 14px; }
.sle-rating-num {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 44px;
font-weight: 700;
color: #FBC02D;
line-height: 1;
text-shadow: 0 4px 16px rgba(251,192,45,0.4);
}
.sle-rating-stars { display: inline-flex; align-items: center; gap: 3px; }
.sle-rating-stars svg { width: 18px; height: 18px; filter: drop-shadow(0 2px 6px rgba(251,192,45,0.5)); }
.sle-rating-link {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: rgba(61,211,217,0.85);
text-decoration: none;
letter-spacing: 0.06em;
border-bottom: 1px dashed rgba(61,211,217,0.3);
padding-bottom: 2px;
transition: color 200ms, border-color 200ms;
}
.sle-rating-link:hover { color: #3DD3D9; border-color: rgba(61,211,217,0.7); }
@media (max-width: 640px) {
.proof-sle-card { padding: 28px 20px; }
.sle-card-body { gap: 20px; }
.sle-card-rating { width: 100%; padding-top: 16px; }
.sle-rating-num { font-size: 36px; }
}
.proof-corner {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--yl-silver);
text-transform: uppercase;
}
.pc-tl { top: 16px; left: 16px; }
.pc-tr { top: 16px; right: 16px; }
.pc-bl { bottom: 16px; left: 16px; }
.pc-br { bottom: 16px; right: 16px; color: var(--yl-platinum); }
.proof-body .kicker {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--yl-electric);
text-transform: uppercase;
margin-bottom: 24px;
}
.proof-quote {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
line-height: 1.15;
color: var(--yl-platinum);
margin-bottom: 32px;
}
.proof-attr {
display: flex; align-items: center; gap: 14px;
margin-bottom: 48px;
}
.proof-attr .av {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #29384d, #0c1828);
border: 1px solid var(--yl-line-strong);
display: grid; place-items: center;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
color: var(--yl-platinum);
}
.proof-attr .who { font-size: 14px; color: var(--yl-platinum); }
.proof-attr .who small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--yl-silver);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 2px;
}
.proof-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-top: 28px;
border-top: 1px solid var(--yl-line);
}
.stat .v {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 40px;
color: var(--yl-platinum);
line-height: 1;
margin-bottom: 8px;
}
.stat .l {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--yl-silver);
text-transform: uppercase;
}
/* SHOWROOM ---------------------------------------------------- */
.showroom { padding: clamp(96px, 12vw, 160px) 0; background: var(--yl-midnight); overflow: hidden; }
.showroom-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; }
.showroom-head h2 { max-width: 700px; }
.showroom-rail {
display: flex; gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0 32px 24px;
margin: 0 -32px;
scrollbar-width: thin;
scrollbar-color: var(--yl-line-strong) transparent;
}
.showroom-rail::-webkit-scrollbar { height: 4px; }
.showroom-rail::-webkit-scrollbar-thumb { background: var(--yl-line-strong); }
.aura-card {
flex: 0 0 320px;
height: 400px;
background: var(--yl-ink);
border: 1px solid var(--yl-line);
border-radius: 14px;
padding: 20px;
display: flex; flex-direction: column;
scroll-snap-align: start;
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
--accent: rgba(209,211,214,0.5);
}
.aura-card:hover {
border-color: color-mix(in srgb, var(--accent) 60%, var(--yl-line-strong));
transform: translateY(-3px);
box-shadow: 0 18px 40px -12px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.aura-card .aura-badge {
position: absolute;
top: 14px; right: 14px;
z-index: 4;
padding: 4px 8px;
border: 1px solid var(--yl-line-strong);
border-radius: 999px;
font-size: 9px;
letter-spacing: 0.16em;
color: var(--yl-silver);
background: rgba(0,0,0,0.4);
backdrop-filter: blur(4px);
}
.aura-mockup {
flex: 1;
border: 1px solid var(--yl-line);
border-radius: 2px;
background:
linear-gradient(180deg, transparent 0%, rgba(7,19,38,0.4) 100%),
repeating-linear-gradient(
45deg,
transparent 0 10px,
rgba(209,211,214,0.02) 10px 20px
);
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.aura-mockup .browser {
position: absolute; top: 8px; left: 8px; right: 8px;
height: 16px;
border-bottom: 1px solid var(--yl-line);
display: flex; align-items: center; gap: 4px;
padding-bottom: 6px;
}
.aura-mockup .browser i {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--yl-line-strong);
}
.aura-mockup .ui {
position: absolute;
top: 32px; left: 14px; right: 14px; bottom: 14px;
display: grid;
grid-template-columns: 60px 1fr;
gap: 8px;
}
.aura-mockup .sidebar {
border-right: 1px solid var(--yl-line);
padding-right: 6px;
display: flex; flex-direction: column; gap: 6px;
}
.aura-mockup .sidebar i {
height: 6px;
background: var(--yl-line-strong);
border-radius: 1px;
display: block;
}
.aura-mockup .sidebar i:first-child { background: var(--yl-electric); }
.aura-mockup .content {
display: flex; flex-direction: column; gap: 6px;
}
.aura-mockup .content i {
height: 6px;
background: var(--yl-line-strong);
border-radius: 1px;
}
.aura-mockup .content i.big { height: 14px; width: 60%; background: var(--yl-titanium); }
.aura-mockup .content i.row { height: 22px; background: rgba(209,211,214,0.04); border: 1px solid var(--yl-line); }
/* URL pill en el browser */
.aura-browser-url {
flex: 1;
margin-left: 6px;
font-size: 7.5px;
color: rgba(209,211,214,0.4);
letter-spacing: 0.04em;
text-align: center;
line-height: 1;
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sidebar active row */
.aura-mockup .sidebar i.active {
height: 8px;
border-radius: 2px;
}
/* KPI mini en cada card · headline del rubro */
.aura-kpi {
padding: 8px 10px;
background: rgba(5,11,23,0.5);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.aura-kpi-lbl {
font-size: 7px;
color: rgba(209,211,214,0.5);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.aura-kpi-val {
font-size: 14px;
font-weight: 700;
color: var(--yl-platinum);
letter-spacing: -0.005em;
}
.aura-kpi-delta {
font-style: normal;
font-size: 8px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Rows mini · 3 datos representativos del rubro */
.aura-rows-mini {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 2px;
}
.aura-row-mini {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: rgba(209,211,214,0.018);
border-radius: 4px;
font-size: 8.5px;
color: rgba(209,211,214,0.7);
line-height: 1.15;
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aura-row-dot {
width: 5px; height: 5px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 6px currentColor;
}
.aura-foot {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 10px;
}
.aura-rubro {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10.5px;
color: var(--yl-silver);
letter-spacing: 0.1em;
text-transform: capitalize;
margin-bottom: 8px;
}
.aura-dot {
width: 7px; height: 7px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
box-shadow: 0 0 8px currentColor;
}
.aura-name {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: 0.01em;
color: var(--yl-platinum);
line-height: 1;
text-transform: uppercase;
}
.aura-cta {
font-size: 11px;
color: var(--accent, var(--yl-silver));
letter-spacing: 0.04em;
transition: transform 200ms var(--ease);
}
.aura-card:hover .aura-cta { transform: translateX(4px); }
/* OWNERSHIP --------------------------------------------------- */
.ownership { padding: clamp(96px, 12vw, 160px) 0; }
.ownership-inner {
text-align: center;
max-width: 920px;
margin: 0 auto;
}
.ownership-line {
font-size: clamp(1.75rem, 3.5vw, 3rem);
margin-bottom: 80px;
}
.ownership-line em { color: var(--yl-silver); font-style: normal; }
.ownership-diagram {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
align-items: center;
margin-bottom: 64px;
position: relative;
}
@media (max-width: 768px) { .ownership-diagram { grid-template-columns: 1fr; gap: 24px; } }
.own-node {
border: 1px solid var(--yl-line);
padding: 28px 20px;
text-align: left;
background: linear-gradient(180deg, rgba(7,19,38,0.4), transparent);
}
.own-node.core {
border-color: var(--yl-line-strong);
background: linear-gradient(180deg, rgba(61,107,255,0.06), transparent);
text-align: center;
padding: 36px 24px;
}
.own-node .lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 12px;
}
.own-node .core-name {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 28px;
color: var(--yl-platinum);
line-height: 1.1;
}
.own-node .ttl {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 22px;
color: var(--yl-platinum);
margin-bottom: 8px;
}
.own-node .desc {
font-size: 12px;
color: var(--yl-titanium);
}
.ownership-tagline {
font-size: clamp(1.5rem, 3vw, 2.5rem);
line-height: 1.15;
}
.ownership-tagline .accent { color: var(--yl-platinum); }
.ownership-tagline .dim { color: var(--yl-silver); }
/* PRICING ----------------------------------------------------- */
.pricing { padding: clamp(96px, 12vw, 160px) 0; background: var(--yl-midnight); position: relative; }
.pricing::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(122,91,255,0.05) 0%, transparent 50%);
pointer-events: none;
}
.pricing .container { position: relative; z-index: 1; }
.pricing-head { margin-bottom: 80px; max-width: 820px; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--yl-line);
border: 1px solid var(--yl-line-strong);
border-radius: 14px;
overflow: hidden;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-grid .tier .ars {
display: block;
margin-top: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--yl-silver);
letter-spacing: 0.06em;
}
.tier {
background: var(--yl-midnight);
padding: 44px 32px 40px;
display: flex; flex-direction: column;
min-height: 480px;
position: relative;
transition: background 400ms var(--ease);
}
.tier:hover { background: #0a1a30; }
.tier .tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 28px;
display: flex; align-items: center; gap: 10px;
}
.tier .tag::before {
content: '';
width: 18px; height: 1px;
background: var(--yl-line-strong);
}
.tier h3 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 44px;
color: var(--yl-platinum);
margin-bottom: 14px;
line-height: 1;
letter-spacing: -0.02em;
}
.tier .desc { color: var(--yl-titanium); font-size: 14px; margin-bottom: 36px; line-height: 1.6; max-width: 320px; }
.tier .value-row {
padding: 22px 0;
border-top: 1px solid var(--yl-line);
border-bottom: 1px solid var(--yl-line);
margin-bottom: 32px;
display: flex; align-items: baseline; gap: 8px;
}
.tier .vlbl {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--yl-silver);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.tier .vamt {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 32px;
color: var(--yl-platinum);
margin-left: auto;
letter-spacing: -0.01em;
background: linear-gradient(180deg, #fff 0%, #D9D7D2 60%, #B8B8BE 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tier ul { list-style: none; margin-bottom: 36px; }
.tier ul li {
font-size: 13px;
color: var(--yl-titanium);
padding: 10px 0;
border-bottom: 1px solid var(--yl-line);
display: flex; align-items: center; gap: 12px;
line-height: 1.4;
}
.tier ul li:last-child { border-bottom: none; }
.tier ul li::before {
content: '';
width: 14px; height: 1px;
background: var(--yl-copper);
flex-shrink: 0;
opacity: 0.7;
}
.tier .tier-cta {
margin-top: auto;
display: inline-flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border: 1px solid var(--yl-line-strong);
border-radius: 4px;
color: var(--yl-platinum);
text-decoration: none;
font-size: 13px;
transition: all 300ms var(--ease);
position: relative;
overflow: hidden;
}
.tier .tier-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(61,107,255,0.08), transparent);
opacity: 0;
transition: opacity 300ms var(--ease);
}
.tier .tier-cta:hover {
border-color: var(--yl-platinum);
background: rgba(209,211,214,0.03);
}
.tier .tier-cta:hover::before { opacity: 1; }
.tier .tier-cta span { position: relative; z-index: 1; transition: transform 300ms var(--ease); }
.tier .tier-cta:hover span:last-child { transform: translateX(4px); }
.tier.featured {
background: linear-gradient(180deg, #0a1a30 0%, #071326 100%);
position: relative;
}
.tier.featured::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--yl-electric) 30%, var(--yl-violet) 50%, var(--yl-cyan) 70%, transparent);
opacity: 0.7;
}
.tier.featured::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(61,107,255,0.06) 0%, transparent 60%);
pointer-events: none;
}
.tier.featured > * { position: relative; z-index: 1; }
.pricing-foot {
margin-top: 32px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--yl-silver);
text-transform: uppercase;
}
/* LEAD FORM --------------------------------------------------- */
.lead { padding: clamp(96px, 12vw, 160px) 0; position: relative; }
.lead::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--yl-line-strong) 50%, transparent);
}
.lead-inner {
display: grid;
grid-template-columns: 0.6fr 1fr;
gap: 96px;
align-items: start;
}
@media (max-width: 900px) { .lead-inner { grid-template-columns: 1fr; gap: 48px; } }
.lead-side h2 { margin-bottom: 32px; }
.lead-side .lh {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: clamp(2rem, 3.5vw, 2.75rem);
color: var(--yl-platinum);
line-height: 1.04;
letter-spacing: -0.02em;
margin-bottom: 28px;
}
.lead-side .lp {
color: var(--yl-titanium);
font-size: 16px;
max-width: 360px;
margin-bottom: 40px;
line-height: 1.6;
}
.lead-side .contact-list {
display: flex; flex-direction: column; gap: 4px;
padding-top: 32px;
border-top: 1px solid var(--yl-line);
}
.contact-row {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--yl-line);
transition: padding 200ms var(--ease);
}
.contact-row:last-child { border-bottom: none; }
.contact-row .l {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--yl-silver);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact-row .v { color: var(--yl-platinum); font-size: 14px; transition: color 200ms var(--ease); }
.lead-form {
border: 1px solid var(--yl-line-strong);
padding: 48px;
background:
linear-gradient(180deg, rgba(7,19,38,0.6), rgba(5,11,23,0.4)),
radial-gradient(ellipse at 100% 0%, rgba(61,107,255,0.08) 0%, transparent 50%);
position: relative;
border-radius: 2px;
overflow: hidden;
}
.lead-form::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--yl-line-strong) 30%, var(--yl-line-strong) 70%, transparent);
}
@media (max-width: 600px) { .lead-form { padding: 32px 24px; } }
.lead-form .form-head {
display: flex; justify-content: space-between;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--yl-line);
}
.lead-form .form-head .mono { font-size: 10px; letter-spacing: 0.16em; }
.lead-form .form-head #formStatus {
display: inline-flex; align-items: center; gap: 8px;
}
.lead-form .form-head #formStatus::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 0;
}
@media (max-width: 600px) {
.field-row { grid-template-columns: 1fr; gap: 0; }
}
.field-row .field { margin-bottom: 32px; }
/* Custom select · dark, copper chevron on hover */
.field select {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--yl-line-strong);
color: var(--yl-platinum);
font-family: 'Inter', sans-serif;
font-size: 16px;
padding: 12px 32px 12px 0;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 16px;
cursor: pointer;
transition: border-color 300ms var(--ease);
letter-spacing: -0.005em;
}
.field select:focus {
outline: none;
border-color: var(--yl-platinum);
}
.field select option {
background: var(--yl-ink);
color: var(--yl-platinum);
padding: 8px;
}
.field { margin-bottom: 32px; position: relative; }
.field label {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
transition: color 300ms var(--ease), letter-spacing 300ms var(--ease);
}
.field:focus-within label {
color: var(--yl-copper);
letter-spacing: 0.18em;
}
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label {
color: var(--yl-platinum);
}
/* Hidden state to anchor for label-after-input variant (kept for future) */
.field label.hidden-anchor {
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 12px;
}
.field input, .field textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--yl-line-strong);
padding: 10px 0 14px;
color: var(--yl-platinum);
font-family: 'Inter', sans-serif;
font-size: 18px;
outline: none;
transition: border-color 300ms var(--ease);
letter-spacing: -0.005em;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(154,154,160,0.45); }
.field input:focus, .field textarea:focus { border-color: var(--yl-platinum); }
.field::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 1px; width: 0;
background: var(--yl-copper);
box-shadow: 0 0 12px rgba(159, 228, 238,0.5);
transition: width 500ms cubic-bezier(0.22,1,0.36,1);
}
.field:focus-within::after { width: 100%; }
/* Hover sutil en field — preview de la linea copper */
.field:hover::after { width: 24px; opacity: 0.5; }
.field:focus-within:hover::after { width: 100%; opacity: 1; }
.field textarea { resize: none; min-height: 80px; line-height: 1.5; }
.lead-form .submit-row {
display: flex; justify-content: space-between; align-items: center;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--yl-line);
gap: 24px;
}
.lead-form .submit-row .note {
font-size: 12px;
color: var(--yl-silver);
max-width: 280px;
line-height: 1.5;
}
.lead-form .submit {
background: var(--yl-platinum);
color: var(--yl-ink);
border: none;
border-radius: 999px;
padding: 15px 24px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 10px;
transition: all 300ms var(--ease);
flex-shrink: 0;
}
.lead-form .submit:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 12px 32px -8px rgba(209,211,214,0.25);
}
/* FOOTER ------------------------------------------------------ */
footer { padding: 80px 0 40px; background: var(--yl-ink); }
.foot-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 64px;
border-bottom: 1px solid var(--yl-line);
}
@media (max-width: 900px) {
.foot-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
.foot-top { grid-template-columns: 1fr; }
}
.foot-brand .mk {
width: 48px; height: 48px;
background-image: url('assets/yl-mark-transparent.png');
background-size: contain; background-repeat: no-repeat; background-position: center;
margin-bottom: 24px;
}
.foot-brand .tag {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 24px;
color: var(--yl-platinum);
margin-bottom: 16px;
line-height: 1.15;
max-width: 280px;
}
.foot-brand p {
color: var(--yl-silver);
font-size: 13px;
max-width: 320px;
}
.foot-col h4 {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 20px;
font-weight: 400;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col a {
color: var(--yl-titanium);
text-decoration: none;
font-size: 14px;
transition: color 200ms var(--ease);
}
.foot-col a:hover { color: var(--yl-platinum); }
.foot-bottom {
margin-top: 40px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--yl-silver);
text-transform: uppercase;
}
.foot-bottom a { color: var(--yl-silver); text-decoration: none; }
/* WHATSAPP FAB ------------------------------------------------ */
.fab {
position: fixed;
bottom: 24px; right: 24px;
z-index: 60;
width: 56px; height: 56px;
border-radius: 50%;
background: #25D366;
color: white;
display: grid; place-items: center;
text-decoration: none;
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35);
transition: transform 200ms var(--ease);
}
.fab:hover { transform: scale(1.06); }
.fab svg { width: 26px; height: 26px; }
/* Section title helpers */
h2.section-title {
font-size: clamp(2rem, 4.5vw, 4rem);
}
/* Scroll-reveal utility ---------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms var(--ease), transform 900ms var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.rotator-track { transition: none !important; }
.hero-title .flourish svg path { stroke-dashoffset: 0 !important; }
.reveal, .sle-app { opacity: 1 !important; transform: none !important; }
.grain { display: none; }
}
/* Mobile: bracket size más chico en tabla SLE */
@media (max-width: 480px) {
.sle-tbl { min-width: 480px; font-size: 10px; }
.sle-tbl th, .sle-tbl td { padding: 6px 8px; }
.kicker-row { margin-bottom: 36px !important; }
}
/* ─── TOUR VISUAL SLE — réplica del panel real (light theme + navy header) ─── */
.tour-section { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--yl-line); }
.tour-head { max-width: 640px; margin-bottom: 36px; }
.tour-head h2 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.05; color: var(--yl-platinum);
letter-spacing: -0.02em;
margin-bottom: 14px;
}
.tour-head p { color: var(--yl-titanium); font-size: 16px; line-height: 1.6; }
.tour-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .tour-grid { grid-template-columns: 1fr; } }
.sle-app {
background: #F5F8FB; border-radius: 14px; overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02);
color: #1F2937; font-family: 'Inter', sans-serif;
transform: translateY(20px); opacity: 0;
transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .9s;
}
.sle-app.in { transform: translateY(0); opacity: 1; }
.sle-nav {
background: #0E1A2C; color: #fff;
display: flex; align-items: center; gap: 14px;
padding: 12px 18px; font-size: 12px; font-weight: 600;
}
.sle-nav-brand { display: flex; align-items: center; gap: 10px; }
.sle-nav-brand-mark {
width: 26px; height: 26px; border-radius: 6px;
background: radial-gradient(circle at 30% 30%, #FFD166, #F59E0B);
display: inline-flex; align-items: center; justify-content: center;
color: #7C2D12; font-weight: 900; font-size: 14px; line-height: 1;
box-shadow: 0 0 10px rgba(245,158,11,0.4);
}
.sle-nav-brand-text { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 800; letter-spacing: 0.5px; }
.sle-nav-brand-sub { font-size: 8px; color: #94A3B8; letter-spacing: 0.16em; font-weight: 600; margin-top: 1px; }
.sle-nav-items { display: flex; gap: 12px; flex: 1; justify-content: center; flex-wrap: wrap; }
.sle-nav-item { color: #CBD5E1; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sle-nav-item.active { background: #F59E0B; color: #0E1A2C; padding: 5px 10px; border-radius: 6px; font-weight: 800; }
.sle-nav-meta { font-size: 10px; color: #94A3B8; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sle-nav-meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 6px #22C55E; }
.sle-body { padding: 18px 20px 22px; }
.sle-h1 { font-size: 16px; font-weight: 800; color: #0F172A; letter-spacing: -0.01em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #E2E8F0; }
.sle-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.sle-kpi { background: #fff; border: 1.5px solid #E2E8F0; border-radius: 10px; padding: 12px; }
.sle-kpi-l { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: #475569; margin-bottom: 6px; }
.sle-kpi-v { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; line-height: 1; color: #0F172A; }
.sle-kpi-sub { font-size: 10px; color: #64748B; margin-top: 4px; }
.sle-kpi-green { background: #F0FDF4; border-color: #86EFAC; }
.sle-kpi-green .sle-kpi-v { color: #16A34A; }
.sle-kpi-red { background: #FEF2F2; border-color: #FCA5A5; }
.sle-kpi-red .sle-kpi-v { color: #DC2626; }
.sle-kpi-gold { background: #FFFBEB; border-color: #FCD34D; }
.sle-kpi-gold .sle-kpi-v { color: #D97706; }
.sle-tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; font-size: 11px; }
.sle-tbl th { padding: 9px 10px; text-align: left; background: #F8FAFC; font-size: 9px; font-weight: 800; color: #475569; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid #E2E8F0; }
.sle-tbl td { padding: 8px 10px; border-bottom: 1px solid #F1F5F9; color: #1E293B; font-weight: 600; }
.sle-tbl tr:last-child td { border-bottom: none; }
.sle-tbl tr:nth-child(even) td { background: #FAFBFC; }
.sle-tbl td.amt { color: #D97706; font-weight: 800; text-align: right; }
.sle-badge { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
.sle-badge-moto { background: #FFEDD5; color: #9A3412; }
.sle-badge-cami { background: #DBEAFE; color: #1E40AF; }
.sle-badge-transf { background: #EDE9FE; color: #6D28D9; }
.sle-badge-efec { background: #DCFCE7; color: #166534; }
.sle-badge-cc { background: #FEF3C7; color: #92400E; }
.tour-foot {
margin-top: 28px; padding: 18px 22px;
border: 1px solid var(--yl-line); border-radius: 12px;
font-size: 13px; color: var(--yl-titanium); line-height: 1.5;
display: flex; align-items: center; gap: 12px;
}
.tour-foot::before { content:''; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 10px #22C55E; flex-shrink: 0; }
/* ─── SHOWROOM WEB · 9 mockups ────────────────────────────── */
.web-showroom { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--yl-line); }
.web-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.web-card {
position: relative;
aspect-ratio: 4/5;
background: var(--yl-ink);
border: 1px solid var(--yl-line);
border-radius: 14px;
padding: 24px 22px 20px;
display: flex; flex-direction: column;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform 320ms cubic-bezier(.16,1,.3,1), border-color 240ms;
}
.web-card:hover {
transform: translateY(-3px);
border-color: rgba(209,211,214,0.25);
}
.web-card-thumb {
position: absolute; inset: 0;
opacity: 0.18;
pointer-events: none;
mix-blend-mode: screen;
transition: opacity 320ms;
}
.web-card:hover .web-card-thumb { opacity: 0.32; }
.web-card-mood {
position: relative; z-index: 1;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--yl-copper);
display: inline-flex; align-items: center; gap: 8px;
}
.web-card-mood::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--yl-copper); box-shadow: 0 0 8px var(--yl-copper);
opacity: 0.8;
}
.web-card-title {
position: relative; z-index: 1;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 34px;
line-height: 1;
margin-top: 16px;
letter-spacing: -0.02em;
color: var(--yl-platinum);
}
.web-card-desc {
position: relative; z-index: 1;
font-size: 13px; line-height: 1.55;
color: var(--yl-titanium);
margin-top: 14px; flex-grow: 1;
}
.web-card-cta {
position: relative; z-index: 1;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--yl-platinum);
margin-top: 14px;
display: inline-flex; align-items: center; gap: 8px;
transition: gap 200ms;
}
.web-card:hover .web-card-cta { gap: 14px; }
/* mood thumbnails — pure CSS, one per slug */
.wt-cosmic { background: radial-gradient(ellipse 60% 50% at 30% 30%, rgba(122,91,255,0.5), transparent 60%), radial-gradient(ellipse 50% 40% at 70% 70%, rgba(91,214,255,0.4), transparent 65%); }
.wt-editorial { background: linear-gradient(135deg, rgba(209,211,214,0.22) 0%, rgba(159, 228, 238,0.14) 100%); }
.wt-frame { background: conic-gradient(from 220deg, rgba(159, 228, 238,0.45), rgba(209,211,214,0.18), rgba(159, 228, 238,0.45)); }
.wt-precision { background: repeating-linear-gradient(90deg, rgba(209,211,214,0.05), rgba(209,211,214,0.05) 1px, transparent 1px, transparent 24px), repeating-linear-gradient(0deg, rgba(209,211,214,0.05), rgba(209,211,214,0.05) 1px, transparent 1px, transparent 24px); }
.wt-travel { background: linear-gradient(180deg, rgba(91,214,255,0.22) 0%, rgba(159, 228, 238,0.26) 100%); }
.wt-character { background: radial-gradient(circle at 50% 50%, rgba(209,211,214,0.30), transparent 70%); }
.wt-aviation { background: linear-gradient(180deg, rgba(240,239,235,0.22) 0%, rgba(240,239,235,0.04) 100%); }
.wt-productivity { background: linear-gradient(135deg, rgba(11,20,38,0.6), rgba(7,19,38,0.3)), repeating-linear-gradient(45deg, rgba(209,211,214,0.04) 0 10px, transparent 10px 20px); }
.wt-analytics { background: linear-gradient(180deg, rgba(34,197,94,0.22) 0%, rgba(34,197,94,0.04) 100%); }
.wt-calc { background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(245,158,11,0.04) 100%); }
/* ─── AGENTES IA · chat WhatsApp interactivo ────────────── */
.agents-section { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--yl-line); }
.agents-explainer {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px; margin-top: 32px; margin-bottom: 56px;
}
@media (max-width: 800px) { .agents-explainer { grid-template-columns: 1fr; } }
.agents-step {
padding: 22px 22px 24px;
border: 1px solid var(--yl-line);
border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
}
.agents-step-num {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(159, 228, 238,0.18);
color: var(--yl-copper);
display: inline-flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 800;
margin-bottom: 14px;
}
.agents-step-title {
font-size: 17px; font-weight: 700; color: var(--yl-platinum);
margin-bottom: 8px; letter-spacing: -0.005em;
}
.agents-step-desc { font-size: 13.5px; line-height: 1.55; color: var(--yl-titanium); }
.wademo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px; align-items: center;
}
@media (max-width: 880px) { .wademo { grid-template-columns: 1fr; } }
.wademo-side h3 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.1;
color: var(--yl-platinum);
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.wademo-side p { font-size: 14.5px; line-height: 1.6; color: var(--yl-titanium); margin-bottom: 14px; }
.wademo-side p strong { color: var(--yl-platinum); }
.wademo-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-copper);
padding: 5px 10px;
border: 1px solid rgba(159, 228, 238,0.4);
border-radius: 999px;
margin-bottom: 18px;
text-transform: uppercase;
}
.wademo-phone {
background: #0B141F;
border-radius: 22px;
padding: 14px 12px 14px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02);
position: relative;
max-width: 380px;
margin: 0 auto;
}
.wademo-head {
display: flex; align-items: center; gap: 10px;
padding: 10px 6px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
margin-bottom: 10px;
}
.wademo-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, #25D366, #128C7E);
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.wademo-title { font-size: 13px; font-weight: 700; color: var(--yl-platinum); }
.wademo-status {
font-size: 11px; color: #22C55E;
display: inline-flex; align-items: center; gap: 6px;
}
.wademo-status::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22C55E;
box-shadow: 0 0 6px #22C55E;
}
.wademo-stream {
min-height: 340px;
max-height: 460px;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 4px;
display: flex; flex-direction: column; gap: 8px;
scroll-behavior: smooth;
/* Soft fade arriba para que los mensajes "salgan" suaves del top */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
}
/* Scrollbar oculto pero funcional */
.wademo-stream::-webkit-scrollbar { width: 0; }
.wademo-row {
opacity: 0;
transform: translateY(10px) scale(0.96);
transform-origin: bottom center;
transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
display: flex; flex-direction: column;
}
.wademo-row[data-role="out"] { transform-origin: bottom right; }
.wademo-row[data-role="in"] { transform-origin: bottom left; }
.wademo-row.show { opacity: 1; transform: translateY(0) scale(1); }
.wademo-row[data-role="in"] { align-items: flex-start; }
.wademo-row[data-role="out"] { align-items: flex-end; }
.wademo-msg {
max-width: 80%;
padding: 9px 12px;
border-radius: 12px;
font-size: 13px; line-height: 1.4;
word-wrap: break-word;
}
.wademo-msg.in {
background: #1F2937;
color: #F1F5F9;
border-bottom-left-radius: 4px;
}
.wademo-msg.out {
background: #054D40;
color: #F1F5F9;
border-bottom-right-radius: 4px;
}
.wademo-time {
font-size: 9.5px;
color: rgba(255,255,255,0.4);
margin-top: 3px;
padding: 0 4px;
}
.wademo-time.out { color: #4ADE80; }
.wademo-typing { display: inline-flex; gap: 3px; padding: 10px 14px; background: #1F2937; border-radius: 12px; border-bottom-left-radius: 4px; }
.wademo-typing span {
width: 6px; height: 6px; border-radius: 50%;
background: #94A3B8;
animation: typing-bounce 1.2s infinite;
}
.wademo-typing span:nth-child(2) { animation-delay: 0.15s; }
.wademo-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.wademo-replay {
position: absolute; bottom: 14px; right: 16px;
background: rgba(34, 197, 94, 0.16);
color: #22C55E;
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 999px;
padding: 6px 12px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background 200ms, transform 200ms;
}
.wademo-replay:hover { background: rgba(34, 197, 94, 0.28); transform: translateY(-1px); }
.wademo-replay svg { width: 12px; height: 12px; }
/* ─── REVEAL universal · stagger on scroll ────────────────── */
.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.reveal-up.in { opacity: 1; transform: translateY(0); }
.reveal-up.d1 { transition-delay: 60ms; }
.reveal-up.d2 { transition-delay: 120ms; }
.reveal-up.d3 { transition-delay: 180ms; }
.reveal-up.d4 { transition-delay: 240ms; }
.reveal-up.d5 { transition-delay: 300ms; }
.reveal-up.d6 { transition-delay: 360ms; }
/* ─── Stats counter (proof SLE + más clientes) ────────────── */
.counter-stat {
transition: transform 400ms cubic-bezier(.16,1,.3,1);
}
.counter-stat.in { transform: scale(1); }
/* ─── Process timeline · stagger reveal ────────────────────── */
.process-grid { position: relative; }
.process-grid .step {
opacity: 0;
transform: translateY(20px);
transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
}
.process-grid.in .step { opacity: 1; transform: translateY(0); }
.process-grid.in .step:nth-child(1) { transition-delay: 0ms; }
.process-grid.in .step:nth-child(2) { transition-delay: 120ms; }
.process-grid.in .step:nth-child(3) { transition-delay: 240ms; }
.process-grid.in .step:nth-child(4) { transition-delay: 360ms; }
/* ─── MÁS CLIENTES · mini cards ────────────────────────────── */
.more-clients {
padding: clamp(40px, 6vw, 70px) 0;
border-top: 1px solid var(--yl-line);
}
.more-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(2, 1fr);
margin-top: 28px;
}
@media (max-width: 760px) { .more-grid { grid-template-columns: 1fr; } }
.mini-client {
padding: 28px 28px 24px;
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
border: 1px solid var(--yl-line);
border-radius: 16px;
display: flex; flex-direction: column; gap: 14px;
position: relative; overflow: hidden;
transition: transform 320ms cubic-bezier(.16,1,.3,1), border-color 240ms;
}
.mini-client:hover {
transform: translateY(-3px);
border-color: rgba(209,211,214,0.22);
}
.mini-client::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--mc-accent, var(--yl-copper)), transparent);
opacity: 0.85;
}
.mini-head { display: flex; align-items: center; gap: 14px; }
.mini-avatar {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--mc-accent, var(--yl-copper)), rgba(0,0,0,0.4));
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700; font-size: 22px;
color: #0A0B0F;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.mini-name { font-size: 18px; font-weight: 700; color: var(--yl-platinum); letter-spacing: -0.01em; }
.mini-role { font-size: 12.5px; color: var(--yl-silver); margin-top: 3px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.mini-quote {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 17px;
line-height: 1.5;
color: var(--yl-titanium);
border-left: 2px solid var(--mc-accent, var(--yl-copper));
padding-left: 14px;
}
.mini-tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mc-accent, var(--yl-copper));
margin-top: auto;
}
.mini-tag::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--mc-accent, var(--yl-copper));
box-shadow: 0 0 8px var(--mc-accent, var(--yl-copper));
}
/* ─── FAQ · acordeón sutil ──────────────────────────────────── */
.faq-section {
padding: clamp(60px, 8vw, 100px) 0;
border-top: 1px solid var(--yl-line);
}
.faq-head { max-width: 580px; margin-bottom: 36px; }
.faq-head h2 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.05; color: var(--yl-platinum);
letter-spacing: -0.02em;
margin-bottom: 14px;
}
.faq-head p { font-size: 16px; line-height: 1.6; color: var(--yl-titanium); }
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--yl-line); border: 1px solid var(--yl-line-strong); border-radius: 14px; overflow: hidden; }
.faq-item {
background: var(--yl-midnight);
transition: background 200ms;
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 22px 26px;
display: flex; align-items: center; justify-content: space-between;
gap: 20px;
font-size: 17px; font-weight: 500;
color: var(--yl-platinum);
letter-spacing: -0.005em;
user-select: none;
transition: color 200ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item:hover summary { color: #fff; }
.faq-item summary::after {
content: '+';
font-family: 'JetBrains Mono', monospace;
font-size: 22px; font-weight: 400;
color: var(--yl-copper);
transition: transform 240ms cubic-bezier(.16,1,.3,1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { background: rgba(255,255,255,0.025); }
.faq-body {
padding: 0 26px 24px;
font-size: 15px; line-height: 1.65;
color: var(--yl-titanium);
max-width: 720px;
}
.faq-body strong { color: var(--yl-platinum); font-weight: 600; }
/* ─── CTA primary glow micro-interaction ─────────────────────── */
.btn-primary {
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.35) 0%, transparent 40%);
opacity: 0;
transition: opacity 200ms;
pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }
/* ─── Noise grain overlay (premium feel) ────────────────── */
.grain {
position: fixed; inset: 0; pointer-events: none; z-index: 1;
opacity: 0.035; mix-blend-mode: overlay;
background: url("data:image/svg+xml;utf8,");
}
/* ─── Page Hero (rutas /casos /sistemas etc.) ────────────── */
.page-hero {
padding: clamp(120px, 14vw, 180px) 0 clamp(50px, 7vw, 80px);
border-bottom: 1px solid var(--yl-line);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 20% 30%, rgba(159, 228, 238,0.08), transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(61,107,255,0.06), transparent 60%);
pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.03em;
margin-top: 32px;
max-width: 920px;
}
.page-hero h1 span { display: block; }
/* ─── CTA block · final de cada página ───────────────────── */
.cta-block {
padding: clamp(60px, 8vw, 100px) 0;
border-top: 1px solid var(--yl-line);
background: linear-gradient(180deg, transparent 0%, rgba(159, 228, 238,0.04) 100%);
}
.cta-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.cta-inner h2 { margin-bottom: 18px; }
.cta-inner p { font-size: 18px; color: var(--yl-titanium); margin-bottom: 32px; line-height: 1.55; }
.cta-block .btn-primary { padding: 16px 28px; font-size: 15px; }
/* ═══════════════════════════════════════════════════════════════
LEGAL PAGES · Términos · Privacidad · Cookies
Layout editorial · max-width estrecho · tipografía cómoda lectura
═══════════════════════════════════════════════════════════════ */
.legal-page {
padding: clamp(80px, 12vw, 140px) 0 clamp(48px, 8vw, 96px);
}
.container-narrow {
max-width: 760px;
margin: 0 auto;
padding: 0 28px;
}
.legal-page h1 {
margin: 24px 0 20px;
}
.legal-lede {
font-size: 18px;
line-height: 1.6;
color: var(--yl-titanium);
margin-bottom: 56px;
max-width: 640px;
}
.legal-body {
color: var(--yl-titanium);
font-size: 15.5px;
line-height: 1.7;
}
.legal-body h2 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 600;
font-size: clamp(24px, 3vw, 30px);
color: var(--yl-platinum);
margin: 56px 0 16px;
line-height: 1.2;
padding-top: 28px;
border-top: 1px solid var(--yl-line);
}
.legal-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h3 {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--yl-platinum);
margin: 32px 0 12px;
letter-spacing: -0.005em;
}
.legal-body p {
margin: 0 0 18px;
}
.legal-body p strong { color: var(--yl-platinum); font-weight: 500; }
.legal-body ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex; flex-direction: column;
gap: 10px;
}
.legal-body ul li {
position: relative;
padding-left: 22px;
line-height: 1.55;
}
.legal-body ul li::before {
content: '';
position: absolute;
left: 0; top: 0.6em;
width: 8px; height: 1px;
background: var(--yl-copper);
}
.legal-body a {
color: var(--yl-copper);
text-decoration: none;
border-bottom: 1px dashed rgba(159, 228, 238,0.4);
transition: color 200ms, border-color 200ms;
}
.legal-body a:hover {
color: #C9F2F7;
border-bottom-color: var(--yl-copper);
}
/* ─── Nav active state via data-active ────────────────────── */
.nav-links a[data-active="active"] { color: var(--yl-platinum); }
.nav-links a[data-active="active"]::after {
content: '';
display: block;
height: 1px;
background: var(--yl-copper);
margin-top: 4px;
box-shadow: 0 0 8px var(--yl-copper);
}
/* ─── Scroll progress bar premium ─────────────────────────── */
.nav-progress {
position: absolute;
bottom: 0; left: 0;
height: 1px;
width: 0;
background: linear-gradient(90deg, transparent, var(--yl-copper) 30%, var(--yl-copper));
box-shadow: 0 0 12px rgba(159, 228, 238,0.6);
transition: width 120ms linear;
pointer-events: none;
will-change: width;
}
/* ═══════════════════════════════════════════════════════════════
CASE SECTIONS (Oro Gym mobile + Solo Cuotas desktop)
═══════════════════════════════════════════════════════════════ */
.case-section {
padding: clamp(80px, 12vw, 160px) 0;
border-top: 1px solid var(--yl-line);
position: relative;
overflow: hidden;
}
.case-oro {
background:
radial-gradient(ellipse at 80% 0%, rgba(255,214,0,0.05), transparent 50%),
var(--yl-ink);
}
.case-solo {
background:
radial-gradient(ellipse at 20% 100%, rgba(89,120,255,0.06), transparent 55%),
var(--yl-ink);
}
.case-head { max-width: 720px; margin-bottom: 64px; }
.case-badge {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
padding: 6px 12px;
border-radius: 4px;
margin-bottom: 24px;
text-transform: uppercase;
}
.case-badge-mobile {
background: rgba(255,214,0,0.12);
color: #FFD600;
border: 1px solid rgba(255,214,0,0.3);
}
.case-badge-desktop {
background: rgba(89,120,255,0.12);
color: #93B0FF;
border: 1px solid rgba(89,120,255,0.3);
}
.case-lede {
margin-top: 18px;
color: var(--yl-titanium);
line-height: 1.6;
font-size: 17px;
}
.case-lede strong { color: var(--yl-platinum); font-weight: 500; }
/* ─── Phone frames (mobile screenshots) ──────────────────── */
.phones-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 80px;
align-items: end;
}
@media (max-width: 1100px) { .phones-row { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 540px) { .phones-row { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.phone-frame {
position: relative;
background: linear-gradient(180deg, #181820 0%, #0A0A12 100%);
border-radius: 36px;
padding: 8px;
box-shadow:
0 30px 60px rgba(0,0,0,0.55),
0 0 0 1.5px rgba(255,255,255,0.06),
inset 0 1px 0 rgba(255,255,255,0.10);
transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 600ms;
will-change: transform;
}
.phone-frame:hover {
transform: translateY(-6px);
box-shadow:
0 40px 80px rgba(0,0,0,0.6),
0 0 0 1.5px rgba(255,214,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.14);
}
.phone-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 28px;
aspect-ratio: 9 / 19.5;
object-fit: cover;
object-position: top center;
}
/* ═══════════════════════════════════════════════════════════════
ORO GYM mockup recreation (HTML/CSS, mobile app)
═══════════════════════════════════════════════════════════════ */
.org-app {
background: #F4F4F0;
border-radius: 28px;
aspect-ratio: 9 / 19.5;
width: 100%;
overflow: hidden;
display: flex; flex-direction: column;
font-family: 'Inter', system-ui, sans-serif;
color: #0F172A;
position: relative;
}
.org-status {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 18px 4px;
font-size: 8px;
font-weight: 700;
color: #0F172A;
height: 20px;
flex-shrink: 0;
}
.org-status .org-sig { letter-spacing: 1px; }
.org-topbar {
padding: 8px 12px 10px;
background: #FFFFFF;
border-bottom: 1px solid #E2E8F0;
display: flex; align-items: center; justify-content: space-between;
gap: 6px;
flex-shrink: 0;
}
.org-brand {
display: flex; align-items: center; gap: 6px;
}
.org-logo-mini {
width: 28px; height: 28px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.org-logo-mini svg { width: 100%; height: 100%; display: block; }
.org-brand-name {
font-weight: 900;
font-size: 10px;
letter-spacing: 0.04em;
color: #0F172A;
}
.org-userbar { display: flex; align-items: center; gap: 4px; }
.org-user {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 7px;
background: #fff;
border: 1px solid #3B82F6;
border-radius: 12px;
color: #3B82F6;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.04em;
}
.org-user i {
width: 4px; height: 4px;
background: #3B82F6;
border-radius: 50%;
}
.org-icon {
width: 18px; height: 18px;
background: #F1F5F9;
border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px;
}
.org-body {
flex: 1; padding: 10px 12px;
overflow: hidden;
display: flex; flex-direction: column;
}
.org-h {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 900;
letter-spacing: -0.01em;
color: #0F172A;
margin: 4px 0 2px;
}
.org-sub {
font-size: 9px;
color: #64748B;
margin-bottom: 8px;
}
.org-search {
padding: 7px 10px;
background: #fff;
border-radius: 8px;
font-size: 9px;
color: #94A3B8;
margin-bottom: 7px;
}
.org-chips {
display: flex; gap: 4px;
padding: 3px;
background: #fff;
border-radius: 8px;
margin-bottom: 7px;
}
.org-chip {
flex: 1;
padding: 5px 4px;
text-align: center;
font-size: 8.5px;
font-weight: 700;
color: #0F172A;
border-radius: 6px;
}
.org-chip.active {
background: #F97316;
color: #fff;
}
.org-btn {
padding: 9px;
background: #F97316;
color: #fff;
border: none;
border-radius: 8px;
font-size: 10px;
font-weight: 800;
margin-bottom: 9px;
box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.org-kpi-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
margin-bottom: 9px;
}
.org-kpi {
background: #fff;
border-radius: 7px;
padding: 7px 4px;
text-align: center;
border-top: 2px solid;
}
.org-kpi.kpi-red { border-color: #EF4444; }
.org-kpi.kpi-yel { border-color: #F59E0B; }
.org-kpi.kpi-grn { border-color: #22C55E; }
.org-kpi b {
display: block;
font-size: 18px;
font-weight: 900;
color: #0F172A;
line-height: 1;
}
.org-kpi span {
display: block;
font-size: 6.5px;
color: #64748B;
margin-top: 2px;
letter-spacing: 0.04em;
font-weight: 700;
}
.org-list {
flex: 1;
overflow: hidden;
display: flex; flex-direction: column; gap: 4px;
}
.org-li {
background: #fff;
border-radius: 8px;
padding: 6px 8px;
display: flex; align-items: center; gap: 6px;
}
.org-av {
width: 22px; height: 22px;
border-radius: 50%;
flex-shrink: 0;
}
.org-av.av1 { background: linear-gradient(135deg, #FCA5A5, #DC2626); }
.org-av.av2 { background: linear-gradient(135deg, #FCD34D, #D97706); }
.org-av.av3 { background: linear-gradient(135deg, #6EE7B7, #059669); }
.org-av.av4 { background: linear-gradient(135deg, #93C5FD, #2563EB); }
.org-av.av5 { background: linear-gradient(135deg, #C4B5FD, #7C3AED); }
.org-li-body { flex: 1; min-width: 0; }
.org-li-body b {
display: block;
font-size: 9px;
font-weight: 800;
color: #0F172A;
line-height: 1.2;
}
.org-li-body span {
display: block;
font-size: 7px;
color: #64748B;
margin-top: 1px;
}
.org-tag {
font-size: 6.5px;
font-weight: 800;
padding: 2px 5px;
border-radius: 4px;
letter-spacing: 0.04em;
}
.org-tag.active {
background: #D1FAE5;
color: #065F46;
}
.org-vence {
font-size: 7px;
font-weight: 800;
padding: 2px 4px;
border-radius: 4px;
letter-spacing: 0.04em;
}
.org-vence.vence-red { background: #FEE2E2; color: #991B1B; }
.org-vence.vence-yel { background: #FEF3C7; color: #92400E; }
.org-wa {
width: 18px; height: 18px;
background: #22C55E;
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-size: 9px;
flex-shrink: 0;
}
/* CAJA + NÚMEROS specific */
.org-tabs-2 {
display: flex; gap: 3px;
padding: 3px;
background: #fff;
border-radius: 8px;
margin-bottom: 7px;
}
.org-tab2 {
flex: 1;
text-align: center;
padding: 6px;
font-size: 9.5px;
font-weight: 700;
color: #0F172A;
border-radius: 6px;
}
.org-tab2.active { background: #F97316; color: #fff; }
.org-date {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 10px;
background: #fff;
border-radius: 8px;
margin-bottom: 7px;
}
.org-date > span { font-weight: 800; font-size: 12px; color: #64748B; }
.org-date b { font-size: 10px; font-weight: 800; color: #0F172A; display: block; }
.org-date div span { font-size: 8px; color: #64748B; }
.org-big-card {
background: #fff;
border-radius: 8px;
padding: 9px 11px;
margin-bottom: 7px;
border-top: 3px solid #F97316;
}
.org-big-lbl {
display: block;
font-size: 7px;
color: #64748B;
font-weight: 800;
letter-spacing: 0.06em;
margin-bottom: 2px;
}
.org-big-val {
display: block;
font-family: 'Inter', sans-serif;
font-size: 26px;
font-weight: 900;
color: #0F172A;
line-height: 1;
letter-spacing: -0.02em;
}
.org-big-sub {
display: block;
font-size: 8px;
color: #64748B;
margin-top: 3px;
}
.org-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
margin-bottom: 8px;
}
.org-split-card {
background: #fff;
border-radius: 8px;
padding: 7px 9px;
border-top: 2px solid;
}
.org-split-card.grn { border-color: #22C55E; }
.org-split-card.blu { border-color: #3B82F6; }
.org-split-card > span:first-child { font-size: 11px; }
.org-split-lbl {
display: block;
font-size: 6.5px;
color: #64748B;
font-weight: 800;
letter-spacing: 0.06em;
margin-top: 2px;
}
.org-split-val {
display: block;
font-size: 13px;
font-weight: 900;
color: #0F172A;
line-height: 1.1;
}
.org-split-pct {
display: block;
font-size: 7px;
color: #64748B;
}
.org-mini-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.org-mini {
background: #fff;
border-radius: 6px;
padding: 5px;
text-align: center;
}
.org-mini b { display: block; font-size: 13px; font-weight: 900; line-height: 1; color: #F97316; }
.org-mini span { display: block; font-size: 6px; color: #64748B; margin-top: 1px; font-weight: 800; letter-spacing: 0.04em; }
.org-donut {
background: #fff;
border-radius: 8px;
padding: 10px;
display: flex; align-items: center; gap: 10px;
}
.org-donut svg { width: 70px; height: 70px; }
.org-donut-legend { flex: 1; font-size: 8.5px; color: #0F172A; }
.org-donut-legend > div { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.org-donut-legend b { font-weight: 900; }
.org-donut-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.org-donut-legend .dot.blu { background: #3D6BFF; }
.org-donut-legend .dot.grn { background: #22C55E; }
/* Bottom tabbar */
.org-tabbar {
background: #fff;
border-top: 1px solid #E2E8F0;
display: grid; grid-template-columns: repeat(4, 1fr);
padding: 7px 0 12px;
flex-shrink: 0;
}
.org-tab {
text-align: center;
font-size: 6.5px;
font-weight: 800;
color: #94A3B8;
letter-spacing: 0.04em;
line-height: 1.4;
}
.org-tab.active { color: #F97316; }
/* ═══════════════════════════════════════════════════════════════
SOLO CUOTAS mockup recreation (HTML/CSS, desktop app)
═══════════════════════════════════════════════════════════════ */
.sc-app {
background: #FBF8F1;
font-family: 'Inter', system-ui, sans-serif;
color: #1E293B;
min-height: 320px;
}
.sc-nav {
background: #FBF8F1;
border-bottom: 1px solid #E2D5B8;
padding: 8px 14px;
display: flex; align-items: center; gap: 16px;
}
.sc-brand { display: flex; align-items: center; gap: 6px; }
.sc-brand-logo { width: 24px; height: 24px; }
.sc-brand-logo svg { width: 100%; height: 100%; display: block; }
.sc-brand-text { display: flex; flex-direction: column; line-height: 1; }
.sc-brand-text b {
font-size: 11px;
font-weight: 900;
color: #0F172A;
letter-spacing: 0.03em;
}
.sc-brand-text em {
font-size: 9px;
font-style: normal;
font-weight: 700;
color: #F59E0B;
letter-spacing: 0.05em;
}
.sc-nav-items { display: flex; gap: 12px; flex: 1; }
.sc-nav-item {
font-size: 10px;
font-weight: 700;
color: #64748B;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
}
.sc-nav-item.active {
background: #F59E0B;
color: #fff;
}
.sc-nav-meta {
font-size: 9px;
color: #16A34A;
font-weight: 700;
display: inline-flex; align-items: center; gap: 4px;
}
.sc-nav-meta::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 6px #16A34A;
}
.sc-body { padding: 14px 16px; }
.sc-h {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1E293B;
margin-bottom: 10px;
}
.sc-kpi-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.sc-kpi {
background: #fff;
border: 1px solid #E2D5B8;
border-radius: 4px;
padding: 8px 10px;
}
.sc-kpi span {
display: block;
font-size: 7px;
font-weight: 800;
color: #92400E;
letter-spacing: 0.08em;
margin-bottom: 2px;
}
.sc-kpi b {
display: block;
font-size: 14px;
font-weight: 800;
color: #1E293B;
line-height: 1.1;
}
.sc-charts {
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.sc-chart-box {
background: #fff;
border: 1px solid #E2D5B8;
border-radius: 4px;
padding: 10px;
}
.sc-chart-h {
display: block;
font-size: 7px;
font-weight: 800;
color: #92400E;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.sc-bars {
display: flex; align-items: flex-end; gap: 6px;
height: 70px;
padding-bottom: 4px;
border-bottom: 1px dashed #E2D5B8;
}
.sc-bar {
flex: 1;
background: linear-gradient(180deg, #22C55E, #16A34A);
border-radius: 2px 2px 0 0;
min-height: 1px;
}
.sc-donut-wrap { display: flex; align-items: center; gap: 8px; }
.sc-donut-wrap svg { width: 60px; height: 60px; }
.sc-donut-legend { font-size: 8px; color: #1E293B; }
.sc-donut-legend span { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.sc-donut-legend i {
width: 8px; height: 8px; border-radius: 50%;
display: inline-block;
}
.sc-donut-legend .grn { background: #22C55E; }
.sc-donut-legend .yel { background: #FBBF24; }
.sc-bottom-tables {
display: grid; grid-template-columns: 1fr 1.2fr;
gap: 8px;
}
.sc-tbl-box {
background: #fff;
border: 1px solid #E2D5B8;
border-radius: 4px;
padding: 10px;
}
.sc-tbl-row {
display: flex; align-items: baseline; justify-content: space-between;
padding: 4px 0;
border-bottom: 1px solid #FEF3C7;
font-size: 9.5px;
}
.sc-tbl-row:last-child { border-bottom: none; }
.sc-tbl-row b { font-weight: 800; color: #1E293B; flex: 1; }
.sc-tbl-row span { color: #64748B; font-size: 8px; }
.sc-tbl-row .amt { color: #DC2626; font-weight: 800; font-size: 9.5px; }
.sc-tbl-foot {
margin-top: 4px;
font-size: 8px;
color: #92400E;
letter-spacing: 0.06em;
}
/* Planilla */
.sc-filter-bar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
font-size: 10px;
font-weight: 700;
color: #1E293B;
}
.sc-btn-y {
background: #F59E0B;
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
}
.sc-tbl {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid #E2D5B8;
border-radius: 4px;
overflow: hidden;
font-size: 9px;
}
.sc-tbl th {
padding: 6px 7px;
background: #FEF3C7;
text-align: left;
color: #92400E;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid #E2D5B8;
}
.sc-tbl td {
padding: 6px 7px;
color: #1E293B;
font-weight: 600;
border-bottom: 1px solid #FEF3C7;
}
.sc-tbl tr:last-child td { border-bottom: none; }
.sc-st {
padding: 2px 6px;
border-radius: 3px;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.04em;
}
.sc-st.done { background: #D1FAE5; color: #065F46; }
.sc-st.pend { background: #FEF3C7; color: #92400E; }
.sc-st.mora { background: #FEE2E2; color: #991B1B; }
/* Ficha cliente */
.sc-client-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #E2D5B8;
margin-bottom: 12px;
}
.sc-client-head h4 {
font-size: 16px;
font-weight: 900;
color: #1E293B;
margin-bottom: 2px;
}
.sc-clbl {
font-size: 7.5px;
color: #92400E;
letter-spacing: 0.08em;
}
.sc-risk { text-align: right; min-width: 110px; }
.sc-risk-lbl {
display: block;
font-size: 7px;
color: #DC2626;
font-weight: 800;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.sc-risk-bar {
height: 4px;
background: #FEE2E2;
border-radius: 2px;
overflow: hidden;
margin-bottom: 4px;
}
.sc-risk-bar div {
height: 100%;
background: linear-gradient(90deg, #22C55E, #FBBF24, #EF4444);
}
.sc-risk b {
font-size: 9px;
font-weight: 900;
color: #16A34A;
letter-spacing: 0.04em;
}
.sc-credits {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sc-credit {
background: #fff;
border: 1px solid #E2D5B8;
border-radius: 4px;
padding: 9px 10px;
position: relative;
}
.sc-cr-tag {
font-size: 7px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 3px;
display: inline-block;
margin-bottom: 4px;
}
.sc-cr-tag.green { background: #D1FAE5; color: #065F46; }
.sc-cr-tag.yellow { background: #FEF3C7; color: #92400E; }
.sc-credit > b {
display: block;
font-size: 10px;
color: #1E293B;
font-weight: 800;
margin-bottom: 6px;
}
.sc-cr-row {
display: flex; justify-content: space-between;
font-size: 8.5px;
padding: 2px 0;
border-bottom: 1px solid #FEF3C7;
}
.sc-cr-row:last-child { border-bottom: none; }
.sc-cr-row span { color: #64748B; }
.sc-cr-row b { font-weight: 800; color: #1E293B; }
.phone-notch {
position: absolute;
top: 14px; left: 50%;
transform: translateX(-50%);
width: 32%;
max-width: 90px;
height: 18px;
background: #000;
border-radius: 0 0 14px 14px;
z-index: 3;
}
.phone-label {
position: absolute;
bottom: -32px;
left: 0; right: 0;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-silver);
text-transform: uppercase;
}
.phone-label span {
display: inline-block;
color: #FFD600;
margin-right: 6px;
font-weight: 700;
}
/* ─── Laptop frames (desktop screenshots) ────────────────── */
.laptops-row {
display: grid;
gap: 32px;
margin-bottom: 80px;
}
.laptop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .laptop-row { grid-template-columns: 1fr; gap: 32px; } }
.laptop-frame {
position: relative;
background: linear-gradient(180deg, #1A1A24 0%, #0B0B14 100%);
border-radius: 10px;
overflow: hidden;
box-shadow:
0 30px 70px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.05),
inset 0 1px 0 rgba(255,255,255,0.08);
transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 600ms;
will-change: transform;
}
.laptop-frame:hover {
transform: translateY(-6px);
box-shadow:
0 40px 90px rgba(0,0,0,0.65),
0 0 0 1px rgba(89,120,255,0.3),
inset 0 1px 0 rgba(255,255,255,0.12);
}
.laptop-frame.featured { /* dashboard grande arriba */ }
.laptop-chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 16px;
background: linear-gradient(180deg, #20202A 0%, #15151E 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.laptop-chrome .dot {
width: 11px; height: 11px; border-radius: 50%;
background: var(--c, #666);
}
.laptop-chrome .dot.r { --c: #FF5F57; }
.laptop-chrome .dot.y { --c: #FEBC2E; }
.laptop-chrome .dot.g { --c: #28C940; }
.laptop-url {
margin-left: 14px;
font-size: 10.5px;
color: var(--yl-silver);
letter-spacing: 0.06em;
flex: 1;
text-align: center;
padding-right: 60px;
}
.laptop-frame img {
display: block;
width: 100%;
height: auto;
}
.laptop-label {
padding: 12px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-silver);
text-transform: uppercase;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.3);
}
.laptop-label span {
display: inline-block;
color: #93B0FF;
margin-right: 8px;
font-weight: 700;
}
/* ─── Case body (quote + modules + stats) ────────────────── */
.case-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
@media (max-width: 900px) { .case-body { grid-template-columns: 1fr; gap: 40px; } }
.case-quote-block {
padding: 32px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 4px;
}
.case-quote-block .proof-attr { margin-bottom: 24px; }
.case-quote-block .proof-quote { margin-bottom: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.case-modules {
padding: 32px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 4px;
}
.case-modules-head {
display: block;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 20px;
}
.case-mod-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 24px;
}
@media (max-width: 600px) { .case-mod-grid { grid-template-columns: 1fr; } }
.case-mod {
padding: 14px 0;
border-top: 1px solid rgba(255,255,255,0.04);
}
.case-mod:first-child, .case-mod:nth-child(2) { border-top: none; padding-top: 0; }
.case-mod b {
display: block;
color: var(--yl-platinum);
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.case-mod span {
display: block;
color: var(--yl-titanium);
font-size: 13px;
line-height: 1.45;
}
.case-section .proof-stats {
grid-column: 1 / -1;
margin-top: 40px;
}
/* ═══════════════════════════════════════════════════════════════
SISTEMAS · expansiones
═══════════════════════════════════════════════════════════════ */
.sis-what, .sis-how, .sis-modules {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--yl-line);
}
.sis-what-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
margin-top: 40px;
}
@media (max-width: 1000px) { .sis-what-grid { grid-template-columns: 1fr; gap: 48px; } }
.sis-what-copy h2 { margin-bottom: 18px; }
.sis-what-copy p { margin-bottom: 28px; }
.sis-what-copy p strong { color: var(--yl-platinum); font-weight: 500; }
.sis-what-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sis-what-list li {
position: relative;
padding: 14px 16px 14px 32px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 4px;
color: var(--yl-titanium);
font-size: 14.5px;
line-height: 1.5;
}
.sis-what-list li::before {
content: '';
position: absolute;
left: 14px; top: 22px;
width: 6px; height: 6px;
background: var(--yl-copper);
border-radius: 50%;
box-shadow: 0 0 12px var(--yl-copper);
}
.sis-what-list b { color: var(--yl-platinum); font-weight: 500; }
/* Anatomy mockup */
.sis-anatomy {
background: linear-gradient(180deg, #0E1828 0%, #050B17 100%);
border-radius: 8px;
border: 1px solid var(--yl-line);
overflow: hidden;
box-shadow: 0 40px 80px rgba(0,0,0,0.55);
transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1);
will-change: transform;
}
.anat-body {
display: grid; grid-template-columns: 130px 1fr; min-height: 380px;
}
.anat-side {
background: rgba(0,0,0,0.3);
padding: 14px 12px;
display: flex; flex-direction: column; gap: 4px;
border-right: 1px solid rgba(255,255,255,0.05);
}
.anat-brand {
display: flex; align-items: center; gap: 8px;
padding: 4px 0 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 12px;
}
.anat-brand-mk {
width: 22px; height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, var(--yl-copper), #6FD8E8);
}
.anat-brand span {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.06em;
color: var(--yl-platinum); font-weight: 700;
}
.anat-nav {
padding: 7px 10px;
border-radius: 6px;
font-size: 11px;
color: rgba(209,211,214,0.6);
cursor: default;
}
.anat-nav.active {
background: rgba(159, 228, 238,0.15);
color: var(--yl-platinum);
}
.anat-main {
padding: 20px;
display: flex; flex-direction: column; gap: 18px;
}
.anat-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.anat-kpi {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
padding: 10px;
}
.anat-kpi span {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 4px;
}
.anat-kpi b {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 18px;
color: var(--yl-platinum);
font-weight: 600;
}
.anat-kpi.a b { color: #4ade80; }
.anat-kpi.b b { color: #fbbf24; }
.anat-kpi.c b { color: #93B0FF; }
.anat-kpi.d b { color: #ef4444; }
.anat-chart {
display: flex; align-items: flex-end; gap: 6px;
height: 100px;
padding: 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 6px;
}
.anat-bar {
flex: 1;
background: linear-gradient(180deg, var(--yl-copper), rgba(159, 228, 238,0.3));
border-radius: 2px 2px 0 0;
transition: height 600ms cubic-bezier(0.2,0.8,0.2,1);
}
.anat-list {
display: flex; flex-direction: column; gap: 6px;
}
.anat-li {
padding: 8px 10px;
background: rgba(255,255,255,0.02);
border-left: 2px solid transparent;
font-size: 11px;
color: var(--yl-titanium);
display: flex; align-items: center; gap: 8px;
}
.anat-li .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c, #666);
}
.anat-li .dot.g { --c: #4ade80; box-shadow: 0 0 6px #4ade80; }
.anat-li .dot.y { --c: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
/* Sis how grid */
.sis-how-head { max-width: 720px; margin-bottom: 56px; }
.sis-how-head h2 { margin-bottom: 16px; }
.sis-how-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1000px) { .sis-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sis-how-grid { grid-template-columns: 1fr; } }
.sis-how-card {
padding: 28px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 4px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1), border-color 500ms;
}
.sis-how-card:hover {
transform: translateY(-4px);
border-color: rgba(159, 228, 238,0.3);
}
.sis-how-num {
display: inline-block;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-copper);
margin-bottom: 18px;
}
.sis-how-card h3 {
font-family: 'Inter', system-ui, sans-serif;
font-size: 24px;
font-weight: 500;
color: var(--yl-platinum);
margin-bottom: 12px;
line-height: 1.15;
}
.sis-how-card p {
font-size: 14px;
color: var(--yl-titanium);
line-height: 1.55;
}
.sis-how-card p b { color: var(--yl-platinum); font-weight: 500; }
/* Sis modules grid */
.sis-modules-head { max-width: 640px; margin-bottom: 48px; }
.sis-modules-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1100px) { .sis-modules-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .sis-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .sis-modules-grid { grid-template-columns: 1fr; } }
.sis-mod {
padding: 22px 20px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 4px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1), background 500ms, border-color 500ms;
}
.sis-mod:hover {
transform: translateY(-3px);
background: rgba(159, 228, 238,0.04);
border-color: rgba(159, 228, 238,0.25);
}
.sis-mod-ic {
width: 40px; height: 40px;
margin-bottom: 14px;
display: flex; align-items: center; justify-content: center;
color: var(--yl-copper);
background: rgba(159, 228, 238,0.08);
border: 1px solid rgba(159, 228, 238,0.18);
border-radius: 8px;
transition: color 400ms, background 400ms, border-color 400ms;
}
.sis-mod:hover .sis-mod-ic {
color: var(--yl-warm-glow, #F0C9A6);
background: rgba(240,201,166,0.10);
border-color: rgba(159, 228, 238,0.36);
}
.sis-mod-ic svg { display: block; }
.sis-mod b {
display: block;
color: var(--yl-platinum);
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
}
.sis-mod p {
font-size: 12.5px;
color: var(--yl-titanium);
line-height: 1.45;
}
/* ═══════════════════════════════════════════════════════════════
PÁGINAS WEB · expansiones
═══════════════════════════════════════════════════════════════ */
.web-from-zero, .web-includes {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--yl-line);
}
.web-fz-head, .web-inc-head { max-width: 720px; margin-bottom: 56px; }
.web-fz-head h2, .web-inc-head h2 { margin-bottom: 16px; }
.web-fz-compare {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 1000px) { .web-fz-compare { grid-template-columns: 1fr; } }
.web-fz-col {
position: relative;
padding: 32px 28px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 6px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1);
}
.web-fz-col.good {
background:
radial-gradient(ellipse at top, rgba(74,222,128,0.06), transparent 60%),
rgba(255,255,255,0.025);
border-color: rgba(74,222,128,0.3);
box-shadow: 0 30px 60px rgba(74,222,128,0.06);
}
.web-fz-col.bad { opacity: 0.7; }
.web-fz-col.mid { opacity: 0.85; }
.web-fz-col:hover { transform: translateY(-4px); opacity: 1; }
.web-fz-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 14px;
}
.web-fz-col.good .web-fz-tag { color: #4ade80; }
.web-fz-name {
font-family: 'Inter', system-ui, sans-serif;
font-size: 26px;
font-weight: 500;
color: var(--yl-platinum);
margin-bottom: 6px;
}
.web-fz-price {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--yl-titanium);
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--yl-line);
}
.web-fz-col.good .web-fz-price { color: #4ade80; }
.web-fz-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.web-fz-col li {
font-size: 13.5px;
color: var(--yl-titanium);
line-height: 1.5;
}
.web-fz-tick {
margin-top: 24px;
padding: 10px 14px;
background: rgba(74,222,128,0.08);
border: 1px solid rgba(74,222,128,0.25);
border-radius: 4px;
display: inline-flex; align-items: center; gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: #4ade80;
text-transform: uppercase;
}
/* Includes grid */
.web-inc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1100px) { .web-inc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .web-inc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .web-inc-grid { grid-template-columns: 1fr; } }
/* Variante 6 cards · 3+3 prolijo (FIX iter-web: clase faltante causaba 4+2 desbalanceado) */
.web-inc-grid-6 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .web-inc-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .web-inc-grid-6 { grid-template-columns: 1fr; } }
.web-inc {
padding: 22px 20px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 4px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1), border-color 500ms;
}
.web-inc:hover {
transform: translateY(-3px);
border-color: rgba(159, 228, 238,0.3);
}
.web-inc-ic {
width: 40px; height: 40px;
margin-bottom: 14px;
display: flex; align-items: center; justify-content: center;
color: var(--yl-copper);
background: rgba(159, 228, 238,0.08);
border: 1px solid rgba(159, 228, 238,0.18);
border-radius: 8px;
transition: color 400ms, background 400ms, border-color 400ms;
}
.web-inc:hover .web-inc-ic {
color: var(--yl-warm-glow, #F0C9A6);
background: rgba(240,201,166,0.10);
border-color: rgba(159, 228, 238,0.36);
}
.web-inc-ic svg { display: block; }
.web-inc b {
display: block;
color: var(--yl-platinum);
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
}
.web-inc p {
font-size: 12.5px;
color: var(--yl-titanium);
line-height: 1.45;
}
/* ═══════════════════════════════════════════════════════════════
AGENTES IA · expansiones
═══════════════════════════════════════════════════════════════ */
.ag-what, .ag-marketing {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--yl-line);
}
.ag-what-head, .ag-mkt-head { max-width: 720px; margin-bottom: 56px; }
.ag-what-head h2, .ag-mkt-head h2 { margin-bottom: 16px; }
.ag-types-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 900px) { .ag-types-grid { grid-template-columns: 1fr; } }
.ag-type {
padding: 32px 28px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--yl-line);
border-radius: 6px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1), border-color 500ms;
}
.ag-type:hover {
transform: translateY(-5px);
border-color: rgba(159, 228, 238,0.3);
}
.ag-type.featured {
background:
radial-gradient(ellipse at top, rgba(159, 228, 238,0.08), transparent 60%),
rgba(255,255,255,0.03);
border-color: rgba(159, 228, 238,0.35);
}
.ag-type-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-copper);
text-transform: uppercase;
margin-bottom: 14px;
}
.ag-type-icon {
width: 56px; height: 56px;
margin-bottom: 18px;
display: flex; align-items: center; justify-content: center;
color: var(--yl-copper);
background: rgba(159, 228, 238,0.08);
border: 1px solid rgba(159, 228, 238,0.22);
border-radius: 12px;
}
.ag-type-icon svg { width: 32px; height: 32px; display: block; }
.ag-type.featured .ag-type-icon {
color: var(--yl-warm-glow, #F0C9A6);
background: rgba(240,201,166,0.10);
border-color: rgba(159, 228, 238,0.40);
}
.ag-type h3 {
font-family: 'Inter', system-ui, sans-serif;
font-size: 28px;
font-weight: 500;
color: var(--yl-platinum);
margin-bottom: 12px;
line-height: 1.1;
}
.ag-type > p {
font-size: 14.5px;
color: var(--yl-titanium);
line-height: 1.55;
margin-bottom: 20px;
}
.ag-type > p b { color: var(--yl-platinum); font-weight: 500; }
.ag-type-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
padding-top: 18px;
border-top: 1px solid var(--yl-line);
}
.ag-type-list li {
position: relative;
padding-left: 18px;
font-size: 13px;
color: var(--yl-titanium);
line-height: 1.4;
}
.ag-type-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--yl-copper);
}
/* WhatsApp demo meta */
.wademo-meta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--yl-line);
display: grid; gap: 10px;
}
.wademo-meta-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
padding: 6px 0;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
}
.wademo-meta-row span { color: var(--yl-silver); letter-spacing: 0.06em; }
.wademo-meta-row b { color: var(--yl-platinum); font-weight: 600; }
/* AGENCIA MARKETING · pipeline */
.ag-pipeline {
margin-bottom: 64px;
padding: 28px 20px;
background:
radial-gradient(ellipse at top, rgba(61,211,217,0.04), transparent 60%),
rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 8px;
overflow-x: auto;
}
.pipe-track {
display: flex; align-items: stretch; gap: 18px;
min-width: max-content;
}
.pipe-stage {
min-width: 260px;
display: flex; flex-direction: column; gap: 12px;
}
.pipe-stage-label {
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-copper);
padding: 6px 10px;
background: rgba(159, 228, 238,0.08);
border: 1px solid rgba(159, 228, 238,0.2);
border-radius: 4px;
text-transform: uppercase;
align-self: flex-start;
}
.pipe-cards { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pipe-agent {
position: relative;
padding: 14px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--yl-line);
border-left: 3px solid var(--c, var(--yl-copper));
border-radius: 4px;
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1), background 400ms;
}
.pipe-agent:hover {
transform: translateX(4px);
background: rgba(255,255,255,0.04);
}
.pipe-agent.featured {
background: rgba(159, 228, 238,0.06);
box-shadow: 0 0 20px rgba(159, 228, 238,0.15);
}
.pipe-agent-num {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
color: var(--c, var(--yl-copper));
opacity: 0.8;
margin-bottom: 4px;
display: block;
}
.pipe-agent b {
display: block;
color: var(--yl-platinum);
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
.pipe-agent p {
font-size: 11.5px;
color: var(--yl-titanium);
line-height: 1.4;
margin: 0;
}
.pipe-arrow {
align-self: center;
font-size: 22px;
color: var(--yl-copper);
opacity: 0.5;
}
@media (max-width: 800px) {
.pipe-arrow { display: none; }
.pipe-stage { min-width: 220px; }
}
/* Output del día */
.ag-mkt-output {
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 8px;
overflow: hidden;
}
.ag-mkt-output-head {
padding: 14px 22px;
background: rgba(159, 228, 238,0.06);
border-bottom: 1px solid var(--yl-line);
}
.ag-mkt-output-head .mono {
font-size: 11px;
letter-spacing: 0.14em;
color: var(--yl-copper);
text-transform: uppercase;
}
.ag-mkt-output-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
@media (max-width: 800px) { .ag-mkt-output-grid { grid-template-columns: 1fr; } }
.ag-mkt-card {
padding: 22px;
border-right: 1px solid var(--yl-line);
border-bottom: 1px solid var(--yl-line);
}
.ag-mkt-card:nth-child(2n) { border-right: none; }
.ag-mkt-card:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 800px) {
.ag-mkt-card { border-right: none; }
.ag-mkt-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--yl-line); }
.ag-mkt-card:last-child { border-bottom: none; }
}
.ag-mkt-card-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
margin-bottom: 12px;
}
.ag-mkt-card-content b {
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 19px;
color: var(--yl-platinum);
margin-bottom: 8px;
}
.ag-mkt-card-content p {
font-size: 13px;
color: var(--yl-titanium);
line-height: 1.5;
}
.ag-mkt-foot {
padding: 18px 22px;
text-align: center;
background: rgba(159, 228, 238,0.06);
border-top: 1px solid var(--yl-line);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--yl-titanium);
}
.ag-mkt-foot b { color: var(--yl-platinum); }
/* ═══════════════════════════════════════════════════════════════
AG MKT · VISUAL MOCKUPS (IG · Reel · X · Mail)
Cada uno simula la plataforma con look real, contenidos editoriales
═══════════════════════════════════════════════════════════════ */
.ag-mkt-output-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ag-mkt-live {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 10px;
background: rgba(74,222,128,0.1);
border: 1px solid rgba(74,222,128,0.25);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
color: #4ADE80;
text-transform: uppercase;
}
.ag-mkt-live .dot {
width: 6px; height: 6px;
background: #4ADE80;
border-radius: 50%;
box-shadow: 0 0 8px #4ADE80;
animation: ticker-pulse 2s ease-in-out infinite;
}
.ag-mkt-output-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 24px;
}
@media (max-width: 900px) { .ag-mkt-output-grid { grid-template-columns: 1fr; gap: 24px; padding: 20px; } }
.ag-mkt-mockup {
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
border: 1px solid var(--yl-line);
border-radius: 12px;
overflow: hidden;
transition: transform 500ms cubic-bezier(0.22,1,0.36,1), border-color 500ms;
}
.ag-mkt-mockup:hover {
transform: translateY(-4px);
border-color: rgba(159, 228, 238,0.3);
}
.mockup-platform-tag {
padding: 12px 16px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid var(--yl-line);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
color: var(--yl-silver);
text-transform: uppercase;
}
/* ─── Instagram Post Frame ─── */
.ig-frame {
background: #FFFFFF;
color: #0F172A;
font-family: 'Inter', sans-serif;
}
.ig-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
}
.ig-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #BFEAF2, #8B6347);
color: #fff;
display: grid; place-items: center;
font-size: 10px; font-weight: 800;
flex-shrink: 0;
}
.ig-user { flex: 1; min-width: 0; }
.ig-user b { display: block; font-size: 13px; font-weight: 700; color: #0F172A; }
.ig-user span { display: block; font-size: 11px; color: #64748B; }
.ig-more { font-size: 18px; color: #0F172A; }
.ig-image {
position: relative;
aspect-ratio: 1;
background: linear-gradient(135deg, #1F2937 0%, #050B17 60%, #BFEAF2 130%);
overflow: hidden;
}
.ig-image-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(159, 228, 238,0.4), transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(89,120,255,0.3), transparent 55%);
}
.ig-overlay-text {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center;
padding: 0 24px;
z-index: 2;
}
.ig-quote {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 28px;
font-weight: 700;
color: #F5F0E8;
line-height: 1;
text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.ig-quote-2 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 28px;
font-weight: 700;
color: #E8C593;
line-height: 1.1;
margin-top: 4px;
text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.ig-byline {
margin-top: 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: rgba(245,240,232,0.7);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ig-carousel-dots {
position: absolute;
bottom: 14px; left: 50%; transform: translateX(-50%);
display: flex; gap: 4px;
z-index: 2;
}
.ig-carousel-dots i {
display: block;
width: 5px; height: 5px;
background: rgba(255,255,255,0.4);
border-radius: 50%;
}
.ig-carousel-dots i.active { background: #fff; }
.ig-actions {
display: flex; gap: 14px;
padding: 10px 14px 4px;
font-size: 22px;
}
.ig-actions .ig-bm { margin-left: auto; }
.ig-meta { padding: 4px 14px 14px; }
.ig-meta b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.ig-meta p { font-size: 13px; line-height: 1.35; color: #0F172A; }
.ig-meta p b { display: inline; font-size: 13px; margin-right: 6px; }
.ig-time {
display: block;
font-size: 11px;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-top: 6px;
}
/* ─── Reels Frame · aspect 4:5 (no se corta) ─── */
.reel-frame {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, #1A1F2E 0%, #050B17 100%);
overflow: hidden;
}
.reel-video {
position: relative;
width: 100%; height: 100%;
}
.reel-thumbnail {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 25%, rgba(159, 228, 238,0.5), transparent 55%),
radial-gradient(ellipse at 70% 75%, rgba(74,222,128,0.20), transparent 60%),
linear-gradient(180deg, #0F1228 0%, #050B17 80%);
display: grid; place-items: center;
}
.reel-play {
width: 56px; height: 56px;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 2px solid rgba(255,255,255,0.7);
border-radius: 50%;
display: grid; place-items: center;
font-size: 18px; color: #fff;
padding-left: 5px;
position: absolute;
top: 58%; left: 50%; transform: translate(-50%, -50%);
z-index: 2;
}
.reel-overlay {
position: absolute;
top: 14%; left: 18px; right: 18px;
z-index: 3;
text-align: center;
}
.reel-text-big {
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 42px;
font-weight: 700;
color: #E8C593;
line-height: 1;
text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
.reel-text-mid {
display: block;
margin-top: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
color: #fff;
text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
line-height: 1.4;
}
.reel-bottom {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 12px 56px 12px 12px;
z-index: 3;
color: #fff;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75) 60%);
}
.reel-user-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.reel-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, #BFEAF2, #8B6347);
color: #fff;
display: grid; place-items: center;
font-size: 9px; font-weight: 800;
border: 1.5px solid #fff;
flex-shrink: 0;
}
.reel-user-info { flex: 1; min-width: 0; }
.reel-user-info b {
display: block;
font-size: 11.5px; font-weight: 700; line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-user-info span {
display: block;
font-size: 9.5px; opacity: 0.85; margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-follow {
background: #fff; color: #0F172A; border: none;
padding: 4px 10px; border-radius: 4px;
font-size: 10.5px; font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
.reel-caption {
font-size: 11px; line-height: 1.4;
color: rgba(255,255,255,0.9);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.reel-side-actions {
position: absolute;
right: 6px; bottom: 72px;
display: flex; flex-direction: column; gap: 14px;
color: #fff;
text-align: center;
z-index: 4;
}
.reel-side-actions span {
font-size: 18px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
line-height: 1;
}
.reel-side-actions small {
font-size: 9px;
display: block;
margin-top: 2px;
font-weight: 700;
}
/* ─── X (Twitter) Frame ─── */
.x-frame {
background: #000000;
color: #E7E9EA;
font-family: 'Inter', sans-serif;
}
.x-tweet { padding: 14px 16px 12px; }
.x-tweet-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.x-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #BFEAF2, #8B6347);
color: #fff;
display: grid; place-items: center;
font-size: 13px; font-weight: 800;
flex-shrink: 0;
}
.x-user-line {
display: flex; align-items: center; gap: 5px;
flex-wrap: wrap;
font-size: 13.5px;
}
.x-user-line b { font-weight: 700; color: #E7E9EA; }
.x-verified { width: 16px; height: 16px; }
.x-handle { color: #71767B; }
.x-time { color: #71767B; }
.x-content {
font-size: 15px;
line-height: 1.4;
color: #E7E9EA;
margin-bottom: 14px;
}
.x-content b { color: #E8C593; font-weight: 600; }
.x-thread-indicator {
display: flex; align-items: center; gap: 8px;
padding: 8px 0;
margin-bottom: 12px;
border-top: 1px solid #2F3336;
border-bottom: 1px solid #2F3336;
}
.x-thread-line {
width: 18px; height: 1px;
background: #71767B;
}
.x-thread-tag {
font-size: 12px;
color: #1D9BF0;
font-weight: 600;
}
.x-actions {
display: flex; justify-content: space-between;
color: #71767B;
font-size: 12.5px;
}
/* ─── Newsletter / Mail Frame ─── */
.mail-frame {
background: #F7F7F4;
color: #0F172A;
padding: 16px 18px 18px;
font-family: 'Inter', sans-serif;
}
.mail-head {
display: flex; justify-content: space-between; align-items: flex-start;
padding-bottom: 12px;
border-bottom: 1px solid #E2E8F0;
margin-bottom: 14px;
}
.mail-sender b { display: block; font-size: 13.5px; font-weight: 700; color: #0F172A; }
.mail-sender span { display: block; font-size: 11.5px; color: #64748B; margin-top: 2px; }
.mail-time { font-size: 11px; color: #94A3B8; }
.mail-subject {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 22px;
font-weight: 600;
color: #0F172A;
line-height: 1.2;
margin: 0 0 10px;
}
.mail-preview {
font-size: 13px;
color: #475569;
line-height: 1.5;
margin: 0 0 12px;
}
.mail-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #BFEAF2, transparent);
opacity: 0.4;
margin: 12px 0 14px;
}
.mail-bullets {
list-style: none; padding: 0; margin: 0 0 16px;
display: flex; flex-direction: column; gap: 8px;
}
.mail-bullets li {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: #1E293B;
}
.mail-bullet-dot {
width: 5px; height: 5px;
background: #BFEAF2;
border-radius: 50%;
flex-shrink: 0;
}
.mail-cta {
display: inline-block;
padding: 9px 16px;
background: #0F172A;
color: #fff;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
margin-bottom: 12px;
}
.mail-foot {
display: flex; gap: 6px;
font-size: 10px;
color: #94A3B8;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Override old ag-mkt-card grid to use new mockups */
.ag-mkt-output {
border: 1px solid var(--yl-line);
}
/* ═══════════════════════════════════════════════════════════════
MKT LIVE · Marketing Agency Demo (interactive console)
═══════════════════════════════════════════════════════════════ */
.mkt-live {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--yl-line);
}
.mkt-console {
margin-top: 24px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 0;
background: #0A1424;
border: 1px solid rgba(61,211,217,0.18);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 90px rgba(0,0,0,0.55);
}
@media (max-width: 900px) { .mkt-console { grid-template-columns: 1fr; } }
.mkt-console-left {
background: linear-gradient(180deg, #08111F 0%, #050B17 100%);
border-right: 1px solid rgba(61,211,217,0.15);
padding: 0;
display: flex; flex-direction: column;
}
@media (max-width: 900px) { .mkt-console-left { border-right: none; border-bottom: 1px solid rgba(61,211,217,0.15); } }
.mkt-console-head {
padding: 14px 18px;
background: rgba(61,211,217,0.05);
border-bottom: 1px solid rgba(61,211,217,0.12);
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.mkt-clock {
font-size: 22px;
font-weight: 700;
color: #3DD3D9;
letter-spacing: 0.04em;
line-height: 1;
text-shadow: 0 0 16px rgba(61,211,217,0.4);
}
.mkt-day {
font-size: 9px;
color: var(--yl-silver);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.mkt-agents {
padding: 16px;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
.mkt-agent {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-left: 2px solid rgba(255,255,255,0.1);
border-radius: 6px;
transition: all 500ms cubic-bezier(0.22,1,0.36,1);
opacity: 0.45;
}
.mkt-agent.active {
opacity: 1;
background: rgba(61,211,217,0.06);
border-left-color: #3DD3D9;
box-shadow: 0 0 24px rgba(61,211,217,0.12);
transform: translateX(2px);
}
.mkt-agent.done {
opacity: 0.7;
border-left-color: #4ADE80;
}
.mkt-agent-status {
width: 12px; height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
flex-shrink: 0;
transition: all 400ms;
position: relative;
}
.mkt-agent.active .mkt-agent-status {
background: #3DD3D9;
box-shadow: 0 0 0 0 rgba(61,211,217,0.6);
animation: mkt-pulse 1.4s ease-in-out infinite;
}
@keyframes mkt-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(61,211,217,0.6); }
50% { box-shadow: 0 0 0 8px rgba(61,211,217,0); }
}
.mkt-agent.done .mkt-agent-status {
background: #4ADE80;
box-shadow: 0 0 12px rgba(74,222,128,0.4);
}
.mkt-agent-body { flex: 1; min-width: 0; }
.mkt-agent-body b {
display: block;
color: var(--yl-platinum);
font-size: 13px;
font-weight: 600;
margin-bottom: 3px;
}
.mkt-agent-body span {
display: block;
font-size: 11.5px;
color: var(--yl-titanium);
line-height: 1.35;
}
.mkt-agent-eta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--yl-silver);
letter-spacing: 0.08em;
}
.mkt-agent.active .mkt-agent-eta,
.mkt-agent.done .mkt-agent-eta {
color: var(--yl-platinum);
}
/* Stream right pane */
.mkt-console-right {
background: #050B17;
display: flex; flex-direction: column;
min-height: 460px;
position: relative;
}
.mkt-stream-head {
padding: 14px 18px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(61,211,217,0.12);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.mkt-stream-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: #3DD3D9;
letter-spacing: 0.08em;
}
.mkt-stream-meta {
font-size: 9.5px;
letter-spacing: 0.18em;
color: #4ADE80;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 6px;
}
.mkt-stream-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 8px #4ADE80;
animation: mkt-pulse 1.6s ease-in-out infinite;
}
.mkt-stream {
flex: 1;
padding: 16px 18px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 14px;
font-family: 'JetBrains Mono', monospace;
/* Soft fade arriba */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 100%);
}
.mkt-stream::-webkit-scrollbar { width: 4px; }
.mkt-stream::-webkit-scrollbar-thumb { background: rgba(61,211,217,0.2); border-radius: 2px; }
.mkt-stream-line {
opacity: 0;
transform: translateY(8px);
transition: opacity 500ms cubic-bezier(0.22,1,0.36,1),
transform 500ms cubic-bezier(0.22,1,0.36,1);
display: grid;
grid-template-columns: auto auto 1fr;
gap: 10px;
align-items: baseline;
}
.mkt-stream-line.show { opacity: 1; transform: translateY(0); }
.mkt-stream-time {
font-size: 10px;
color: #3DD3D9;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.mkt-stream-tag-mini {
font-size: 9.5px;
color: var(--yl-silver);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 6px;
background: rgba(255,255,255,0.04);
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
}
.mkt-stream-tag-mini.cqo {
color: var(--yl-copper);
background: rgba(159, 228, 238,0.1);
}
.mkt-stream-body {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
line-height: 1.5;
color: var(--yl-titanium);
word-wrap: break-word;
}
.mkt-stream-body b { color: var(--yl-platinum); font-weight: 600; }
.mkt-stream-body em { color: var(--yl-silver); font-style: normal; }
.mkt-replay {
position: absolute;
bottom: 14px; right: 14px;
padding: 8px 14px;
background: rgba(61,211,217,0.1);
border: 1px solid rgba(61,211,217,0.3);
color: #3DD3D9;
border-radius: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
transition: all 200ms;
z-index: 2;
}
.mkt-replay:hover {
background: rgba(61,211,217,0.2);
border-color: #3DD3D9;
}
.mkt-replay svg { width: 12px; height: 12px; }
.mkt-foot {
text-align: center;
margin-top: 24px;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--yl-silver);
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════
VALORES · tiers v2 + scope examples
═══════════════════════════════════════════════════════════════ */
.pricing-grid-v2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 32px;
}
@media (max-width: 1000px) { .pricing-grid-v2 { grid-template-columns: 1fr; gap: 20px; } }
.tier-v2 {
position: relative;
padding: 40px 36px;
background:
radial-gradient(ellipse at top right, rgba(159, 228, 238,0.04), transparent 60%),
rgba(255,255,255,0.025);
border: 1px solid var(--yl-line);
border-radius: 8px;
transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1), border-color 600ms, box-shadow 600ms;
will-change: transform;
}
.tier-v2.featured {
background:
radial-gradient(ellipse at top, rgba(159, 228, 238,0.10), transparent 65%),
rgba(255,255,255,0.035);
border-color: rgba(159, 228, 238,0.35);
box-shadow: 0 30px 70px rgba(159, 228, 238,0.10);
}
.tier-v2:hover {
transform: translateY(-6px);
border-color: rgba(159, 228, 238,0.5);
box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(159, 228, 238,0.4);
}
.tier-ribbon {
position: absolute;
top: 16px; right: 16px;
padding: 5px 12px;
background: linear-gradient(135deg, var(--yl-copper), #6FD8E8);
color: var(--yl-ink);
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 3px;
box-shadow: 0 8px 20px rgba(159, 228, 238,0.35);
}
.tier-tag {
display: inline-block;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-copper);
text-transform: uppercase;
margin-bottom: 20px;
}
.tier-title {
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(32px, 4vw, 44px);
font-weight: 500;
color: var(--yl-platinum);
line-height: 1.05;
margin-bottom: 14px;
}
.tier-desc {
color: var(--yl-titanium);
font-size: 15.5px;
line-height: 1.55;
margin-bottom: 32px;
}
.tier-desc strong { color: var(--yl-platinum); font-weight: 500; }
.tier-value {
padding: 22px 0;
border-top: 1px solid var(--yl-line);
border-bottom: 1px solid var(--yl-line);
margin-bottom: 28px;
display: flex; flex-direction: column; gap: 4px;
}
/* Pricing split · instalación única + mensual lado a lado */
.tier-value-split {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: center;
}
@media (max-width: 640px) {
.tier-value-split { grid-template-columns: 1fr; gap: 14px; }
.tier-value-divider { display: none; }
}
.tier-value-block {
display: flex; flex-direction: column; gap: 4px;
}
.tier-value-divider {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 32px;
color: var(--yl-copper);
font-weight: 500;
line-height: 1;
text-align: center;
opacity: 0.6;
}
.tier-vamt-sm {
font-size: clamp(36px, 4.5vw, 48px) !important;
}
.tier-vlbl {
font-size: 10px;
letter-spacing: 0.16em;
color: var(--yl-silver);
text-transform: uppercase;
}
.tier-vamt-block {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.tier-vamt-num {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: clamp(48px, 6vw, 64px);
font-weight: 600;
color: var(--yl-platinum);
line-height: 1;
letter-spacing: -0.02em;
}
.tier-ars {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--yl-titanium);
letter-spacing: 0.04em;
}
.tier-vsub {
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-silver);
text-transform: uppercase;
margin-top: 6px;
}
.tier-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 22px;
margin-bottom: 28px;
}
@media (max-width: 600px) { .tier-feature-grid { grid-template-columns: 1fr; } }
.tier-ft {
display: flex; flex-direction: column; gap: 4px;
}
.tier-ft-ic {
width: 28px; height: 28px;
margin-bottom: 6px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--yl-copper);
flex-shrink: 0;
}
.tier-ft-ic svg { width: 18px; height: 18px; display: block; }
.tier-ft b {
color: var(--yl-platinum);
font-size: 13.5px;
font-weight: 500;
}
.tier-ft p {
color: var(--yl-titanium);
font-size: 12px;
line-height: 1.45;
margin: 0;
}
.tier-timeline {
padding: 14px 18px;
background: rgba(159, 228, 238,0.06);
border: 1px solid rgba(159, 228, 238,0.18);
border-radius: 4px;
display: flex; align-items: center; gap: 12px; justify-content: space-between;
margin-bottom: 28px;
font-size: 11px;
}
.tier-timeline .mono {
color: var(--yl-silver);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tier-timeline b {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 18px;
color: var(--yl-platinum);
font-weight: 600;
}
.tier-v2-cta {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%;
padding: 16px 24px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--yl-line);
border-radius: 4px;
color: var(--yl-platinum);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: all 300ms cubic-bezier(0.2,0.8,0.2,1);
}
.tier-v2.featured .tier-v2-cta {
background: linear-gradient(135deg, var(--yl-copper), #6FD8E8);
border-color: var(--yl-copper);
color: var(--yl-ink);
}
.tier-v2-cta:hover {
transform: translateX(2px);
background: rgba(159, 228, 238,0.15);
border-color: var(--yl-copper);
}
.tier-v2.featured .tier-v2-cta:hover {
background: linear-gradient(135deg, #C9F2F7, var(--yl-copper));
box-shadow: 0 12px 30px rgba(159, 228, 238,0.4);
}
/* Scope examples */
.scope-examples {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--yl-line);
}
.scope-head { max-width: 720px; margin-bottom: 56px; }
.scope-head h2 { margin-bottom: 16px; }
.scope-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1100px) { .scope-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .scope-grid { grid-template-columns: 1fr; } }
.scope-tier {
position: relative;
padding: 28px 24px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--yl-line);
border-radius: 6px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1), border-color 500ms;
}
.scope-tier:hover {
transform: translateY(-4px);
border-color: rgba(159, 228, 238,0.3);
}
.scope-tier.featured {
background:
radial-gradient(ellipse at top, rgba(159, 228, 238,0.08), transparent 60%),
rgba(255,255,255,0.03);
border-color: rgba(159, 228, 238,0.3);
}
.scope-rank {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 48px;
font-weight: 700;
color: var(--yl-copper);
line-height: 1;
margin-bottom: 8px;
}
.scope-range {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: var(--yl-platinum);
font-weight: 600;
margin-bottom: 4px;
}
.scope-desc {
font-size: 13px;
color: var(--yl-silver);
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--yl-line);
}
.scope-tier ul {
list-style: none; padding: 0; margin: 0 0 20px;
display: flex; flex-direction: column; gap: 10px;
}
.scope-tier li {
position: relative;
padding-left: 16px;
font-size: 12.5px;
color: var(--yl-titanium);
line-height: 1.45;
}
.scope-tier li::before {
content: '·';
position: absolute;
left: 4px;
color: var(--yl-copper);
font-weight: 700;
font-size: 16px;
line-height: 1;
}
.scope-time {
font-size: 10px;
letter-spacing: 0.14em;
color: var(--yl-copper);
text-transform: uppercase;
padding-top: 14px;
border-top: 1px solid var(--yl-line);
}
/* ============================================================
PRICING v3 · Start / Custom / Continuidad · 2026-05-18
============================================================ */
/* Escalera 3 capas · home de la página valores -------------- */
.ladder { padding: 80px 0 60px; }
.ladder-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 18px;
align-items: stretch;
margin-top: 36px;
}
.ladder-step {
padding: 28px 26px;
border: 1px solid var(--yl-line);
border-radius: 18px;
background: rgba(209,211,214,0.015);
position: relative;
transition: border-color 280ms var(--ease), background 280ms var(--ease);
}
.ladder-step:hover { border-color: rgba(200,169,107,0.35); background: rgba(200,169,107,0.025); }
.ladder-step .ladder-num {
display: inline-block;
font-size: 11px;
color: var(--yl-copper);
letter-spacing: 0.18em;
margin-bottom: 14px;
}
.ladder-step .ladder-tier {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--yl-titanium);
text-transform: uppercase;
margin-bottom: 10px;
}
.ladder-step .ladder-title {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 30px;
color: var(--yl-platinum);
margin-bottom: 12px;
line-height: 1.15;
}
.ladder-step .ladder-desc {
font-size: 14.5px;
color: var(--yl-titanium);
line-height: 1.6;
margin: 0;
}
.ladder-step .ladder-desc strong { color: var(--yl-platinum); font-weight: 500; }
.ladder-start { border-left: 2px solid #5978FF55; }
.ladder-custom { border-left: 2px solid #C8A96B; box-shadow: 0 0 24px rgba(200,169,107,0.04); }
.ladder-cont { border-left: 2px solid #4ade8055; }
.ladder-arrow {
align-self: center;
color: var(--yl-copper);
font-size: 20px;
opacity: 0.55;
padding: 0 4px;
}
@media (max-width: 900px) {
.ladder-grid { grid-template-columns: 1fr; gap: 14px; }
.ladder-arrow { display: none; }
}
/* Pricing capa Start vs Custom vs Continuidad -------------- */
.pricing-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
.pricing-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.pricing-grid-2, .pricing-grid-3 { grid-template-columns: 1fr; }
}
.pricing-subtitle {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 26px;
color: var(--yl-titanium);
margin: 48px 0 22px;
padding-bottom: 12px;
border-bottom: 1px solid var(--yl-line);
letter-spacing: -0.005em;
}
/* Tier scope · qué entra / qué no */
.tier-scope {
margin-top: 18px;
padding: 14px 16px;
background: rgba(5,7,11,0.55);
border: 1px dashed var(--yl-line);
border-radius: 12px;
}
.tier-scope-row {
display: flex; align-items: flex-start;
gap: 10px;
font-size: 12.5px;
color: var(--yl-titanium);
padding: 4px 0;
line-height: 1.55;
}
.tier-scope-row .ok { color: #4ade80; font-weight: 700; flex-shrink: 0; }
.tier-scope-row .ko { color: #f87171; font-weight: 700; flex-shrink: 0; }
.tier-scope-row.not { color: var(--yl-silver); font-size: 12px; }
/* Variantes visuales por capa */
.tier-start { background: linear-gradient(180deg, rgba(89,120,255,0.04) 0%, transparent 60%); }
.tier-custom { background: linear-gradient(180deg, rgba(200,169,107,0.05) 0%, transparent 60%); }
.tier-cont { background: linear-gradient(180deg, rgba(74,222,128,0.04) 0%, transparent 60%); }
.tier-start .tier-tag { color: #93b3ff; }
.tier-custom .tier-tag { color: var(--yl-copper); }
.tier-cont .tier-tag { color: #67e399; }
.tier-feature-grid-sm {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.tier-feature-grid-sm .tier-ft {
padding: 10px 12px;
font-size: 12.5px;
}
.tier-feature-grid-sm .tier-ft b {
font-size: 13px;
display: block;
}
.tier-feature-grid-sm .tier-ft p { display: none; }
/* Pricing foot warn · separador entre Start y Custom */
.pricing-foot-warn {
margin-top: 32px;
padding: 18px 22px;
background: rgba(200,169,107,0.05);
border: 1px solid rgba(200,169,107,0.25);
border-radius: 14px;
font-size: 14px;
line-height: 1.6;
color: var(--yl-titanium);
}
.pricing-foot-warn strong { color: var(--yl-copper); }
/* Section variants */
.pricing-custom { padding-top: 60px; }
.pricing-continuidad { padding-top: 60px; padding-bottom: 80px; }
/* Ladder compare table --------------------------------------- */
.ladder-compare {
padding: 80px 0 60px;
border-top: 1px solid var(--yl-line);
}
.ladder-compare-table {
margin-top: 36px;
border: 1px solid var(--yl-line);
border-radius: 18px;
overflow: hidden;
background: rgba(209,211,214,0.012);
}
.lct-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
border-top: 1px solid var(--yl-line);
}
.lct-row:first-child { border-top: 0; }
.lct-cell {
padding: 16px 18px;
font-size: 13.5px;
color: var(--yl-titanium);
line-height: 1.5;
border-left: 1px solid var(--yl-line);
}
.lct-cell:first-child { border-left: 0; }
.lct-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--yl-silver);
}
.lct-head .lct-cell {
background: rgba(5,7,11,0.5);
padding: 18px;
}
.lct-head .lct-cell b {
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 22px;
color: var(--yl-platinum);
margin-bottom: 4px;
}
.lct-head .lct-cell span.mono {
font-size: 11px;
color: var(--yl-copper);
letter-spacing: 0.08em;
}
.lct-head .lct-start b { color: #93b3ff; }
.lct-head .lct-custom b { color: var(--yl-copper); }
.lct-head .lct-cont b { color: #67e399; }
.lct-cell .ok { color: #4ade80; font-weight: 700; }
.lct-cell .ko { color: #6b7280; font-weight: 700; }
@media (max-width: 760px) {
.lct-row { grid-template-columns: 1fr 1fr; }
.lct-row .lct-cell:nth-child(4) { display: none; }
.ladder-compare-table::after {
content: "Vista mobile · scrolleá horizontal en desktop para ver Continuidad";
display: block;
padding: 12px 18px;
font-size: 11px;
color: var(--yl-silver);
border-top: 1px solid var(--yl-line);
}
}
/* ============================================================
BENTO v3 · Floating alerts + URL chrome + KPI deltas
============================================================ */
/* URL en chrome del laptop · "tunegocio.app · /panel" */
.sm-chrome .sm-url {
margin-left: 14px;
font-size: 9.5px;
color: rgba(209,211,214,0.55);
letter-spacing: 0.03em;
align-self: center;
}
/* KPI con label arriba + delta abajo · más jerarquía */
.sm-kpi {
display: flex !important;
flex-direction: column;
align-items: flex-start;
padding: 8px 10px !important;
gap: 2px;
position: relative;
}
.sm-kpi-lbl {
font-size: 8.5px;
color: rgba(209,211,214,0.5);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sm-kpi b {
font-size: 13px;
font-weight: 700;
}
.sm-kpi-delta {
font-size: 8.5px;
color: #4ade80;
font-weight: 600;
margin-top: 1px;
}
.sm-kpi-delta.sm-delta-warn {
color: #fbbf24;
font-size: 11px;
}
/* Sidebar items activo */
.sm-side {
display: flex !important;
flex-direction: column;
gap: 6px;
padding: 8px 5px;
}
.sm-side-item {
height: 8px;
width: 100%;
border-radius: 3px;
background: rgba(209,211,214,0.08);
display: block;
}
.sm-side-item.active {
background: linear-gradient(90deg, rgba(200,169,107,0.45), rgba(200,169,107,0.1));
box-shadow: inset 2px 0 0 var(--yl-copper);
}
/* Floating alerts · sistema vivo */
.show-card-systems .show-card-mockup {
position: relative;
overflow: visible;
}
.sm-float {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: rgba(11,16,28,0.88);
border: 1px solid rgba(209,211,214,0.12);
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(209,211,214,0.04) inset;
font-size: 10.5px;
pointer-events: none;
opacity: 0;
transform: translateY(8px) scale(0.96);
animation: smFloatIn 600ms var(--ease, cubic-bezier(.22,1,.36,1)) forwards;
white-space: nowrap;
}
.sm-float-1 {
top: 12%;
left: -8%;
animation-delay: 800ms;
}
.sm-float-2 {
top: 48%;
right: -6%;
animation-delay: 1400ms;
}
.sm-float-3 {
bottom: 12%;
left: 4%;
animation-delay: 2000ms;
}
.sm-float-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 8px currentColor;
}
.sm-fd-yel { background: #fbbf24; color: #fbbf24; }
.sm-fd-grn { background: #4ade80; color: #4ade80; }
.sm-fd-blu { background: #5978FF; color: #5978FF; }
.sm-float-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.sm-float-text b {
color: var(--yl-platinum);
font-weight: 600;
font-size: 10.5px;
}
.sm-float-text em {
color: rgba(209,211,214,0.55);
font-style: normal;
font-size: 9px;
margin-top: 2px;
letter-spacing: 0.01em;
}
@keyframes smFloatIn {
0% { opacity: 0; transform: translateY(8px) scale(0.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Mobile: ocultar floats en mobile · no hay espacio */
@media (max-width: 760px) {
.sm-float { display: none; }
.sm-chrome .sm-url { display: none; }
}
/* ============================================================
SHOWROOM Paginas-web · Mini browser frames + mood gradient
============================================================ */
/* Chrome de browser arriba de cada thumb */
.web-card-thumb {
position: relative;
overflow: hidden;
}
.web-card-thumb::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 22px;
background: linear-gradient(180deg, rgba(5,7,11,0.85), rgba(5,7,11,0.55));
border-bottom: 1px solid rgba(209,211,214,0.08);
z-index: 2;
}
.web-card-thumb::after {
content: "● ● ●";
position: absolute;
top: 6px; left: 10px;
font-size: 7px;
letter-spacing: 4px;
color: rgba(209,211,214,0.35);
z-index: 3;
line-height: 1;
}
/* Mini layout interno del mockup · debajo del chrome */
.web-card-thumb {
background-clip: padding-box;
}
.web-card-thumb > .wt-inner,
.web-card-thumb .wt-mini {
position: absolute;
top: 30px;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 1;
}
/* Cosmic · líneas de luz cruzando */
.wt-cosmic::before { background: linear-gradient(180deg, rgba(0,5,15,0.85), rgba(0,5,15,0.55)); }
.wt-cosmic {
background: radial-gradient(ellipse 70% 60% at 25% 30%, rgba(122,91,255,0.6), transparent 65%),
radial-gradient(ellipse 50% 40% at 75% 75%, rgba(91,214,255,0.45), transparent 65%),
linear-gradient(180deg, #0a0420, #02010a) !important;
}
/* Studio · editorial sobrio */
.wt-editorial {
background: linear-gradient(135deg, rgba(209,211,214,0.28) 0%, rgba(159, 228, 238,0.18) 100%),
linear-gradient(180deg, #1a1612, #0f0d0a) !important;
}
/* Treasury · cromo + ámbar */
.wt-frame {
background: linear-gradient(180deg, rgba(200,169,107,0.22) 0%, rgba(174,180,190,0.12) 50%, transparent 100%),
linear-gradient(180deg, #1c1812, #08070a) !important;
}
/* Analytics · grid técnico */
.wt-analytics {
background: linear-gradient(180deg, rgba(89,120,255,0.12), rgba(102,217,255,0.06)),
linear-gradient(180deg, #050b18, #02060f) !important;
background-size: 100% 100%, 20px 20px, 20px 20px !important;
}
/* Wellness · suave cálido */
.wt-travel {
background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,200,140,0.28), transparent 65%),
linear-gradient(180deg, #18120c, #0a0805) !important;
}
/* Security · brutalist clean */
.wt-precision {
background: linear-gradient(180deg, rgba(174,180,190,0.18), rgba(0,0,0,0.4)),
linear-gradient(180deg, #0a0b0d, #050608) !important;
}
/* Lumina · glow retail premium */
.wt-character {
background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(232,215,180,0.32), transparent 70%),
linear-gradient(180deg, #1a1612, #0a0805) !important;
}
/* Workspace · productividad dark */
.wt-productivity {
background: linear-gradient(135deg, rgba(102,217,255,0.16) 0%, rgba(89,120,255,0.10) 100%),
linear-gradient(180deg, #08101a, #04070c) !important;
}
/* Calculadora · interactivo */
.wt-calc {
background: linear-gradient(180deg, rgba(74,222,128,0.18), rgba(89,120,255,0.10)),
linear-gradient(180deg, #08120a, #050a06) !important;
}
/* Hover micro-interaction · scroll-like reveal */
.web-card:hover .web-card-thumb::before {
background: linear-gradient(180deg, rgba(5,7,11,0.65), rgba(5,7,11,0.35));
}
.web-card { transition: transform 280ms var(--ease, cubic-bezier(.22,1,.36,1)), border-color 280ms var(--ease, cubic-bezier(.22,1,.36,1)); }
.web-card:hover { transform: translateY(-3px); }
.web-card:hover .web-card-thumb {
box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(200,169,107,0.18);
}
/* ============================================================
OFFER PREVIEW SWITCHER · 4 ofertas · Home · 2026-05-18
============================================================ */
.offsw-section { padding: clamp(96px, 12vw, 160px) 0; position: relative; }
.offsw {
margin-top: 40px;
border: 1px solid var(--yl-line);
border-radius: 22px;
background: linear-gradient(180deg, rgba(13,19,35,0.6) 0%, rgba(5,11,23,0.4) 100%);
backdrop-filter: blur(8px);
overflow: hidden;
box-shadow: 0 24px 48px rgba(0,0,0,0.25), inset 0 1px 0 rgba(209,211,214,0.05);
}
.offsw-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--yl-line);
background: rgba(5,11,23,0.55);
}
.offsw-tab {
appearance: none;
background: transparent;
border: 0;
border-right: 1px solid var(--yl-line);
color: var(--yl-titanium);
padding: 18px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--yl-ui-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.005em;
transition: color 200ms var(--ease), background 200ms var(--ease);
text-align: left;
position: relative;
}
.offsw-tab:last-child { border-right: 0; }
.offsw-tab:hover { color: var(--yl-platinum); background: rgba(209,211,214,0.02); }
.offsw-tab:focus-visible { outline: 2px solid var(--yl-copper); outline-offset: -2px; }
.offsw-tab.active {
color: var(--yl-platinum);
background: linear-gradient(180deg, rgba(159, 228, 238,0.08) 0%, transparent 100%);
}
.offsw-tab.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--yl-copper);
box-shadow: 0 0 12px rgba(159, 228, 238,0.45);
}
.offsw-tab-num { font-size: 10px; color: var(--yl-copper); letter-spacing: 0.12em; }
.offsw-tab-lbl { flex: 1; }
.offsw-tab-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c, var(--yl-copper));
box-shadow: 0 0 10px var(--c, var(--yl-copper));
flex-shrink: 0;
opacity: 0.7;
transition: opacity 200ms var(--ease);
}
.offsw-tab.active .offsw-tab-dot { opacity: 1; }
.offsw-stage {
position: relative;
min-height: 460px;
padding: 36px 36px 28px;
background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(159, 228, 238,0.04), transparent 70%);
}
.offsw-panel { display: none; animation: offswFadeIn 360ms var(--ease); }
.offsw-panel.active { display: block; }
@keyframes offswFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.offsw-laptop {
background: #0a1020;
border: 1px solid rgba(209,211,214,0.1);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 36px rgba(0,0,0,0.4), inset 0 1px 0 rgba(209,211,214,0.05);
max-width: 880px;
margin: 0 auto;
}
.offsw-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: rgba(13,19,35,0.9);
border-bottom: 1px solid rgba(209,211,214,0.06);
}
.offsw-chrome > span:not(.offsw-url) { width: 10px; height: 10px; border-radius: 50%; background: rgba(209,211,214,0.18); }
.offsw-chrome > span:first-child { background: #ef4444aa; }
.offsw-chrome > span:nth-child(2) { background: #f59e0baa; }
.offsw-chrome > span:nth-child(3) { background: #22c55eaa; }
.offsw-url { margin-left: 14px; font-size: 11px; color: rgba(209,211,214,0.55); letter-spacing: 0.02em; }
.offsw-app { display: grid; grid-template-columns: 180px 1fr; min-height: 380px; }
.offsw-side {
padding: 16px 10px;
border-right: 1px solid rgba(209,211,214,0.06);
background: rgba(5,11,23,0.4);
display: flex; flex-direction: column; gap: 4px;
}
.offsw-side-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 7px;
font-size: 12.5px; color: var(--yl-silver);
transition: background 160ms var(--ease), color 160ms var(--ease);
}
.offsw-side-row:hover { color: var(--yl-titanium); background: rgba(209,211,214,0.04); }
.offsw-side-row.active {
color: var(--yl-platinum);
background: linear-gradient(90deg, rgba(159, 228, 238,0.18) 0%, rgba(159, 228, 238,0.03) 100%);
box-shadow: inset 2px 0 0 var(--yl-copper);
}
.offsw-side-ic { font-size: 13px; color: var(--yl-copper); opacity: 0.8; width: 16px; text-align: center; }
.offsw-main { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.offsw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.offsw-kpi {
padding: 12px 14px;
background: rgba(209,211,214,0.025);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 10px;
display: flex; flex-direction: column; gap: 3px;
}
.offsw-kpi span.mono { font-size: 10px; color: rgba(209,211,214,0.55); letter-spacing: 0.08em; text-transform: uppercase; }
.offsw-kpi b { font-size: 22px; font-weight: 600; color: var(--yl-platinum); letter-spacing: -0.01em; }
.offsw-kpi em { font-style: normal; font-size: 11px; font-weight: 600; }
.offsw-kpi em.up { color: #4ade80; }
.offsw-kpi em.warn { color: #fbbf24; }
.offsw-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding: 0 4px; }
.offsw-chart > div {
flex: 1;
background: linear-gradient(180deg, var(--yl-copper) 0%, rgba(159, 228, 238,0.22) 100%);
border-radius: 4px 4px 0 0; opacity: 0.85; min-height: 8px;
}
.offsw-rows { display: flex; flex-direction: column; gap: 6px; }
.offsw-row {
display: grid; grid-template-columns: 1fr auto auto;
align-items: center; gap: 14px; padding: 8px 12px;
background: rgba(209,211,214,0.018);
border: 1px solid rgba(209,211,214,0.04);
border-radius: 8px; font-size: 12.5px; color: var(--yl-titanium);
}
.offsw-row b { color: var(--yl-platinum); font-weight: 600; }
.offsw-row em { font-style: normal; font-size: 10.5px; color: rgba(209,211,214,0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.offsw-row em.ok { color: #4ade80; }
.offsw-row em.warn { color: #fbbf24; }
.offsw-laptop-web .offsw-web {
padding: 0; min-height: 380px;
background: linear-gradient(180deg, #0c1428 0%, #050b17 100%);
}
.offsw-web-nav { display: flex; align-items: center; gap: 18px; padding: 14px 24px; border-bottom: 1px solid rgba(209,211,214,0.06); }
.offsw-web-brand { width: 78px; height: 14px; background: linear-gradient(90deg, var(--yl-platinum), rgba(209,211,214,0.4)); border-radius: 4px; }
.offsw-web-links { display: flex; gap: 14px; margin-left: 12px; }
.offsw-web-links i { width: 38px; height: 8px; background: rgba(209,211,214,0.18); border-radius: 3px; }
.offsw-web-cta-mini { margin-left: auto; width: 72px; height: 26px; background: linear-gradient(135deg, var(--yl-copper), #6FD8E8); border-radius: 999px; }
.offsw-web-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 26px 24px; align-items: center; }
.offsw-web-copy { display: flex; flex-direction: column; gap: 9px; }
.offsw-web-h1 { height: 16px; background: linear-gradient(90deg, var(--yl-platinum) 0%, rgba(209,211,214,0.6) 100%); border-radius: 4px; width: 90%; }
.offsw-web-h2 { height: 9px; background: rgba(209,211,214,0.22); border-radius: 3px; width: 78%; }
.offsw-web-h2.sh { width: 65%; opacity: 0.7; }
.offsw-web-cta-row { display: flex; gap: 10px; margin-top: 6px; }
.offsw-web-cta-pri { width: 110px; height: 32px; background: linear-gradient(135deg, var(--yl-copper), #6FD8E8); border-radius: 999px; }
.offsw-web-cta-sec { width: 80px; height: 32px; border: 1px solid rgba(209,211,214,0.2); border-radius: 999px; }
.offsw-web-img {
height: 130px; border-radius: 10px;
background: radial-gradient(ellipse 60% 60% at 40% 40%, rgba(159, 228, 238,0.4) 0%, rgba(13,19,35,0.6) 70%);
position: relative; overflow: hidden;
border: 1px solid rgba(209,211,214,0.08);
}
.offsw-web-img-glow {
position: absolute; inset: 12% 18% auto auto;
width: 56px; height: 56px;
background: radial-gradient(circle, var(--yl-warm-glow) 0%, transparent 65%);
filter: blur(4px); opacity: 0.7;
}
.offsw-web-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 24px 24px; }
.offsw-web-card {
padding: 12px;
background: rgba(209,211,214,0.025);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 8px;
display: flex; flex-direction: column; gap: 6px;
}
.offsw-web-card i { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, var(--yl-copper), #8a5a40); opacity: 0.7; }
.offsw-web-card b { display: block; height: 8px; background: rgba(209,211,214,0.3); border-radius: 3px; width: 80%; }
.offsw-web-card span { display: block; height: 6px; background: rgba(209,211,214,0.14); border-radius: 2px; width: 100%; }
.offsw-chat {
max-width: 460px; margin: 0 auto;
background: #0a1220;
border: 1px solid rgba(209,211,214,0.1);
border-radius: 18px; overflow: hidden;
box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}
.offsw-chat-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(34,211,238,0.08) 0%, transparent 100%);
border-bottom: 1px solid rgba(209,211,214,0.08);
}
.offsw-chat-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #1a2a4a, #0a1220);
border: 1px solid rgba(34,211,238,0.4);
display: flex; align-items: center; justify-content: center;
font-family: var(--yl-display-serif); font-style: normal; font-size: 14px;
color: var(--yl-platinum);
}
.offsw-chat-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.offsw-chat-meta b { color: var(--yl-platinum); font-size: 13.5px; font-weight: 600; }
.offsw-chat-meta span.mono { font-size: 10.5px; color: rgba(34,211,238,0.75); letter-spacing: 0.04em; }
.offsw-chat-status { color: #22d3ee; font-size: 11px; box-shadow: 0 0 8px #22d3ee; border-radius: 50%; width: 8px; height: 8px; background: #22d3ee; display: inline-block; }
.offsw-chat-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.offsw-msg { display: flex; flex-direction: column; gap: 3px; max-width: 78%; }
.offsw-msg span { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.offsw-msg em.mono { font-style: normal; font-size: 10px; color: rgba(209,211,214,0.4); padding: 0 6px; }
.offsw-msg-in { align-self: flex-start; }
.offsw-msg-in span { background: rgba(209,211,214,0.06); color: var(--yl-platinum); border-bottom-left-radius: 4px; }
.offsw-msg-out { align-self: flex-end; }
.offsw-msg-out span { background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(34,211,238,0.05)); color: var(--yl-platinum); border: 1px solid rgba(34,211,238,0.2); border-bottom-right-radius: 4px; }
.offsw-msg-out em.mono { align-self: flex-end; }
.offsw-chat-result {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(74,222,128,0.1) 0%, rgba(74,222,128,0.02) 100%);
border-top: 1px solid rgba(74,222,128,0.18);
}
.offsw-chat-result-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #4ade80; flex-shrink: 0; }
.offsw-chat-result-text { display: flex; flex-direction: column; gap: 2px; }
.offsw-chat-result-text b { color: #4ade80; font-size: 13.5px; font-weight: 600; }
.offsw-chat-result-text .mono { font-size: 10.5px; color: rgba(74,222,128,0.7); letter-spacing: 0.03em; }
.offsw-mkt { display: grid; grid-template-columns: 200px 1fr 220px; gap: 18px; min-height: 380px; }
.offsw-mkt-lbl { font-size: 10px; color: var(--yl-copper); letter-spacing: 0.12em; margin-bottom: 12px; text-transform: uppercase; }
.offsw-mkt-left, .offsw-mkt-right {
padding: 18px 14px;
background: rgba(209,211,214,0.02);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 12px;
}
.offsw-mkt-agenda { display: flex; flex-direction: column; gap: 6px; }
.offsw-mkt-item {
display: flex; gap: 12px; align-items: center;
padding: 8px 10px; border-radius: 7px;
font-size: 13px; color: var(--yl-titanium);
border-left: 2px solid transparent;
transition: background 160ms var(--ease);
}
.offsw-mkt-item:hover { background: rgba(209,211,214,0.03); }
.offsw-mkt-item.active {
background: linear-gradient(90deg, rgba(159, 228, 238,0.16), transparent 80%);
border-left-color: var(--yl-copper);
}
.offsw-mkt-item .mono { font-size: 10.5px; color: rgba(209,211,214,0.55); letter-spacing: 0.05em; flex-shrink: 0; width: 38px; }
.offsw-mkt-item b { color: var(--yl-platinum); font-weight: 500; }
.offsw-mkt-center {
background: rgba(5,11,23,0.5);
border: 1px solid rgba(209,211,214,0.08);
border-radius: 14px;
padding: 18px;
display: flex; flex-direction: column;
}
.offsw-mkt-preview-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.offsw-mkt-pt {
padding: 5px 11px; font-size: 11px; border-radius: 999px;
background: rgba(209,211,214,0.03);
border: 1px solid rgba(209,211,214,0.08);
color: var(--yl-silver); cursor: default;
}
.offsw-mkt-pt.active { background: rgba(159, 228, 238,0.12); border-color: rgba(159, 228, 238,0.4); color: var(--yl-platinum); }
.offsw-mkt-slide {
flex: 1; position: relative;
background: linear-gradient(160deg, #0d1323 0%, #050b17 100%);
border-radius: 12px;
border: 1px solid rgba(209,211,214,0.06);
padding: 22px;
display: flex; flex-direction: column; justify-content: space-between;
min-height: 220px;
}
.offsw-mkt-slide-num { align-self: flex-end; font-size: 10px; color: rgba(209,211,214,0.5); letter-spacing: 0.12em; }
.offsw-mkt-slide-hook { height: 22px; background: linear-gradient(90deg, var(--yl-platinum), rgba(209,211,214,0.5)); border-radius: 5px; width: 85%; margin-top: -12px; }
.offsw-mkt-slide-sub { height: 11px; background: rgba(209,211,214,0.22); border-radius: 3px; width: 65%; margin-top: 8px; }
.offsw-mkt-slide-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(209,211,214,0.06); }
.offsw-mkt-slide-mk { width: 22px; height: 22px; background: url("/assets/brand/yl-mark-flat-white.svg") center / contain no-repeat; opacity: 0.8; }
.offsw-mkt-slide-tag { font-size: 9.5px; color: var(--yl-copper); letter-spacing: 0.16em; }
.offsw-mkt-quality { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.offsw-mkt-q-row {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 10px; border-radius: 6px;
background: rgba(209,211,214,0.018);
font-size: 12px; color: var(--yl-titanium);
}
.offsw-mkt-q-row b { color: var(--yl-platinum); font-size: 12.5px; font-weight: 600; }
.offsw-mkt-q-row b.ok { color: #4ade80; }
.offsw-mkt-approve {
appearance: none; width: 100%; padding: 11px 14px;
background: linear-gradient(135deg, var(--yl-copper), #6FD8E8);
color: #0a0810; border: 0; border-radius: 10px;
font-family: var(--yl-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.offsw-mkt-approve:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(159, 228, 238,0.3); }
.offsw-foot {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 24px;
padding: 26px 36px;
border-top: 1px solid var(--yl-line);
background: rgba(5,11,23,0.5);
}
.offsw-foot-text { display: flex; flex-direction: column; gap: 6px; }
.offsw-title { font-family: var(--yl-display-serif); font-style: normal; font-size: 28px; font-weight: 500; color: var(--yl-platinum); line-height: 1.15; }
.offsw-desc { font-size: 15px; color: var(--yl-titanium); line-height: 1.5; max-width: 640px; }
@media (max-width: 980px) {
.offsw-stage { padding: 22px; }
.offsw-mkt { grid-template-columns: 1fr; }
.offsw-mkt-left, .offsw-mkt-right { padding: 14px; }
.offsw-mkt-agenda { flex-direction: row; flex-wrap: wrap; }
.offsw-mkt-item { flex: 1 1 calc(33% - 6px); min-width: 0; }
}
@media (max-width: 760px) {
.offsw-section { padding: 70px 0 60px; }
.offsw-tabs { grid-template-columns: 1fr 1fr; }
.offsw-tab { padding: 14px 12px; font-size: 13px; }
.offsw-tab-num { display: none; }
.offsw-tab:nth-child(2) { border-right: 0; }
.offsw-tab:nth-child(1), .offsw-tab:nth-child(2) { border-bottom: 1px solid var(--yl-line); }
.offsw-app { grid-template-columns: 1fr; }
.offsw-side { flex-direction: row; gap: 4px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(209,211,214,0.06); }
.offsw-side-row { white-space: nowrap; padding: 6px 10px; font-size: 11px; }
.offsw-kpis { grid-template-columns: 1fr; }
.offsw-web-hero { grid-template-columns: 1fr; }
.offsw-web-img { height: 110px; }
.offsw-foot { grid-template-columns: 1fr; padding: 22px; text-align: left; }
.offsw-foot .btn { width: 100%; justify-content: center; }
.offsw-title { font-size: 22px; }
}
/* ============================================================
SYSTEMS LIVE DEMO · /sistemas hero · tabs por rubro
============================================================ */
.sis-hero-split { padding: 90px 0 70px; }
.sis-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
gap: 56px;
align-items: center;
}
.sis-hero-copy h1 { margin-top: 16px; line-height: 0.95; }
.sis-hero-sub {
margin-top: 22px;
font-size: 17px;
color: var(--yl-titanium);
max-width: 460px;
line-height: 1.55;
}
.sis-hero-sub strong { color: var(--yl-platinum); font-weight: 500; }
.sis-hero-chips {
list-style: none;
margin: 24px 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sis-hero-chips li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--yl-titanium);
}
.sis-hero-chips li .mono {
color: var(--yl-copper);
font-size: 11px;
}
.sis-hero-cta { gap: 12px; }
.sld {
--sld-accent: #4ade80;
border: 1px solid var(--yl-line);
border-radius: 18px;
background: linear-gradient(180deg, rgba(13,19,35,0.65), rgba(5,11,23,0.5));
overflow: hidden;
box-shadow: 0 20px 44px rgba(0,0,0,0.32), inset 0 1px 0 rgba(209,211,214,0.05);
}
.sld-tabs {
display: flex;
gap: 0;
overflow-x: auto;
border-bottom: 1px solid var(--yl-line);
background: rgba(5,11,23,0.6);
scrollbar-width: none;
}
.sld-tabs::-webkit-scrollbar { display: none; }
.sld-tab {
appearance: none;
background: transparent;
border: 0;
color: var(--yl-silver);
padding: 14px 18px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--yl-ui-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
flex: 1;
justify-content: center;
transition: color 200ms var(--ease), background 200ms var(--ease);
position: relative;
border-right: 1px solid var(--yl-line);
}
.sld-tab:last-child { border-right: 0; }
.sld-tab:hover { color: var(--yl-platinum); background: rgba(209,211,214,0.02); }
.sld-tab:focus-visible { outline: 2px solid var(--yl-copper); outline-offset: -2px; }
.sld-tab.active {
color: var(--yl-platinum);
background: linear-gradient(180deg, rgba(159, 228, 238,0.08), transparent);
}
.sld-tab.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--sld-accent);
box-shadow: 0 0 12px var(--sld-accent);
}
.sld-tab-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 8px var(--c);
}
.sld-frame {
background: #0a1020;
}
.sld-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: rgba(13,19,35,0.9);
border-bottom: 1px solid rgba(209,211,214,0.06);
}
.sld-chrome > span:not(.sld-url) {
width: 9px; height: 9px;
border-radius: 50%;
background: rgba(209,211,214,0.2);
}
.sld-chrome > span:first-child { background: #ef4444aa; }
.sld-chrome > span:nth-child(2) { background: #f59e0baa; }
.sld-chrome > span:nth-child(3) { background: #22c55eaa; }
.sld-url {
margin-left: 14px;
font-size: 11px;
color: rgba(209,211,214,0.72);
letter-spacing: 0.02em;
}
.sld-panel {
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 360px;
}
.sld-header {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(209,211,214,0.06);
}
.sld-title {
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 24px;
color: var(--yl-platinum);
font-weight: 500;
}
.sld-microcopy {
font-size: 11px;
color: var(--sld-accent);
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
}
.sld-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.sld-kpi {
padding: 12px;
background: rgba(209,211,214,0.025);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 3px;
}
.sld-kpi .mono {
font-size: 9.5px;
color: rgba(209,211,214,0.72);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sld-kpi b {
font-size: 22px;
font-weight: 600;
color: var(--yl-platinum);
letter-spacing: -0.01em;
}
.sld-kpi em {
font-style: normal;
font-size: 11px;
font-weight: 600;
color: rgba(209,211,214,0.72);
}
.sld-kpi em.up { color: var(--sld-accent); }
.sld-kpi em.warn { color: #fbbf24; }
.sld-rows { display: flex; flex-direction: column; gap: 6px; }
.sld-row {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
align-items: center;
gap: 14px;
padding: 9px 12px;
background: rgba(209,211,214,0.02);
border: 1px solid rgba(209,211,214,0.05);
border-radius: 8px;
font-size: 12.5px;
color: var(--yl-titanium);
}
.sld-row span { color: var(--yl-platinum); }
.sld-row b { font-weight: 500; color: var(--yl-titanium); }
.sld-row em {
font-style: normal;
font-size: 10.5px;
color: rgba(209,211,214,0.5);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sld-row em.ok { color: var(--sld-accent); }
.sld-row em.warn { color: #fbbf24; }
.sld-cta {
align-self: flex-start;
margin-top: 4px;
padding: 10px 18px;
background: linear-gradient(135deg, var(--sld-accent), rgba(74,222,128,0.4));
color: #050B17;
border-radius: 999px;
text-decoration: none;
font-family: var(--yl-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.sld-cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0,0,0,0.3);
}
@media (max-width: 1100px) {
.sis-hero-grid { grid-template-columns: 1fr; gap: 36px; }
.sis-hero-copy { max-width: 640px; }
}
@media (max-width: 760px) {
.sis-hero-split { padding: 60px 0 50px; }
.sis-hero-sub { font-size: 15px; }
.sld-tab { padding: 12px 10px; font-size: 12px; }
.sld-kpis { grid-template-columns: 1fr; }
.sld-row { grid-template-columns: 1fr auto; gap: 8px; }
.sld-row b { display: none; }
}
/* ============================================================
MARKETING COMMAND CENTER · /agentes-ia · agencia mensual
============================================================ */
.mcc-section { padding: clamp(96px, 12vw, 160px) 0; }
.mcc {
margin-top: 36px;
display: grid;
grid-template-columns: 260px 1fr 260px;
gap: 16px;
min-height: 580px;
padding: 22px;
border: 1px solid var(--yl-line);
border-radius: 20px;
background: linear-gradient(180deg, rgba(13,19,35,0.6), rgba(5,11,23,0.5));
backdrop-filter: blur(8px);
box-shadow: 0 24px 48px rgba(0,0,0,0.3), inset 0 1px 0 rgba(209,211,214,0.05);
}
.mcc-left, .mcc-right, .mcc-center {
background: rgba(5,11,23,0.55);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
}
.mcc-center { padding: 16px 18px; }
.mcc-lbl {
font-size: 10px;
color: var(--yl-copper);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 14px;
}
/* AGENDA */
.mcc-agenda { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mcc-step {
display: grid;
grid-template-columns: 50px 1fr auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
background: rgba(209,211,214,0.018);
font-size: 12.5px;
color: var(--yl-titanium);
border-left: 2px solid transparent;
transition: background 160ms var(--ease);
}
.mcc-step:hover { background: rgba(209,211,214,0.04); }
.mcc-step .mono { font-size: 10.5px; color: rgba(209,211,214,0.5); letter-spacing: 0.05em; }
.mcc-step b { color: var(--yl-platinum); font-weight: 500; font-size: 12.5px; }
.mcc-step em {
font-style: normal;
font-size: 9.5px;
color: rgba(209,211,214,0.45);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mcc-step.done {
border-left-color: #4ade80;
}
.mcc-step.done em { color: #4ade80; }
.mcc-step.active {
background: linear-gradient(90deg, rgba(159, 228, 238,0.18), transparent);
border-left-color: var(--yl-copper);
}
.mcc-step.active em { color: var(--yl-copper); }
.mcc-stats { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(209,211,214,0.06); }
.mcc-stat {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
background: rgba(209,211,214,0.018);
border-radius: 6px;
font-size: 12px;
color: var(--yl-titanium);
}
.mcc-stat .mono {
font-size: 10.5px;
color: rgba(209,211,214,0.55);
letter-spacing: 0.05em;
}
.mcc-stat b { color: var(--yl-platinum); font-weight: 600; font-size: 13px; }
.mcc-stat b.ok { color: #4ade80; }
.mcc-stat b.warn { color: #fbbf24; }
/* PIEZA TABS */
.mcc-piezatabs {
display: flex;
gap: 6px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.mcc-pt {
appearance: none;
background: rgba(209,211,214,0.03);
border: 1px solid rgba(209,211,214,0.08);
color: var(--yl-silver);
padding: 7px 14px;
border-radius: 999px;
font-family: var(--yl-ui-sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.005em;
cursor: pointer;
transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.mcc-pt:hover { color: var(--yl-platinum); }
.mcc-pt:focus-visible { outline: 2px solid var(--yl-copper); outline-offset: 2px; }
.mcc-pt.active {
background: rgba(159, 228, 238,0.16);
border-color: rgba(159, 228, 238,0.5);
color: var(--yl-platinum);
}
.mcc-preview { flex: 1; display: flex; flex-direction: column; gap: 12px; }
/* Tabs · ocultar inactivos · override del [hidden] sobre display: flex */
.mcc-preview[hidden] { display: none !important; }
.mcc-prev-meta {
display: flex;
justify-content: space-between;
font-size: 10.5px;
color: rgba(209,211,214,0.5);
letter-spacing: 0.04em;
}
/* SLIDE carrusel */
.mcc-slide-frame {
flex: 1;
position: relative;
background: linear-gradient(160deg, #0d1323 0%, #050b17 100%);
border-radius: 14px;
border: 1px solid rgba(209,211,214,0.08);
padding: 32px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 380px;
overflow: hidden;
}
.mcc-slide-frame::before {
content: "";
position: absolute;
inset: -20% auto auto -20%;
width: 70%; height: 70%;
background: radial-gradient(circle, rgba(159, 228, 238,0.18) 0%, transparent 60%);
filter: blur(20px);
}
.mcc-slide-tag {
align-self: flex-end;
font-size: 9.5px;
color: var(--yl-copper);
letter-spacing: 0.18em;
}
.mcc-slide-hook {
font-family: var(--yl-display-serif);
font-weight: 500;
font-size: 36px;
color: var(--yl-platinum);
line-height: 1.1;
margin-top: -28px;
position: relative;
}
.mcc-slide-hook em {
color: var(--yl-copper);
font-style: normal;
}
.mcc-slide-sub {
color: rgba(209,211,214,0.7);
font-size: 14.5px;
line-height: 1.5;
max-width: 90%;
position: relative;
}
.mcc-slide-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid rgba(209,211,214,0.08);
position: relative;
}
.mcc-slide-mk {
width: 28px; height: 28px;
background: url("/assets/brand/yl-mark-flat-white.svg") center / contain no-repeat;
opacity: 0.85;
display: inline-block;
}
.mcc-slide-cta {
font-size: 10px;
color: var(--yl-copper);
letter-spacing: 0.18em;
}
/* REEL frame */
.mcc-reel-frame {
flex: 1;
position: relative;
background: #0a0a14;
border-radius: 14px;
border: 1px solid rgba(209,211,214,0.08);
min-height: 380px;
overflow: hidden;
max-width: 280px;
aspect-ratio: 9 / 16;
margin: 0 auto;
}
.mcc-reel-thumb {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(159, 228, 238,0.32), transparent 70%),
linear-gradient(180deg, #1a1228, #050b17);
display: flex;
align-items: center;
justify-content: center;
}
.mcc-reel-play {
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(209,211,214,0.18);
backdrop-filter: blur(8px);
border: 1px solid rgba(209,211,214,0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--yl-platinum);
font-size: 22px;
padding-left: 4px;
}
.mcc-reel-overlay {
position: absolute;
left: 16px; right: 80px; bottom: 80px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mcc-reel-overlay b {
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 32px;
color: var(--yl-platinum);
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.mcc-reel-overlay em {
font-style: normal;
font-size: 12.5px;
color: rgba(209,211,214,0.85);
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.mcc-reel-side {
position: absolute;
right: 12px; bottom: 90px;
display: flex;
flex-direction: column;
gap: 14px;
color: var(--yl-platinum);
font-size: 12.5px;
text-align: center;
}
.mcc-reel-side small { display: block; color: rgba(209,211,214,0.55); font-size: 10px; }
.mcc-reel-cap {
position: absolute;
left: 14px; right: 14px; bottom: 16px;
display: flex;
flex-direction: column;
gap: 4px;
color: var(--yl-platinum);
}
.mcc-reel-cap b { font-size: 13px; font-weight: 600; }
.mcc-reel-cap span { font-size: 11.5px; color: rgba(209,211,214,0.7); }
/* POST / Thread X */
.mcc-post-frame {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.mcc-post-card {
background: rgba(5,11,23,0.6);
border: 1px solid rgba(209,211,214,0.08);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mcc-post-card header {
display: flex;
align-items: center;
gap: 10px;
}
.mcc-post-av {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--yl-copper), #8a5a40);
}
.mcc-post-card header div { display: flex; flex-direction: column; }
.mcc-post-card header b { color: var(--yl-platinum); font-size: 13.5px; font-weight: 600; }
.mcc-post-card header .mono { font-size: 11px; color: rgba(209,211,214,0.5); }
.mcc-post-card p {
color: var(--yl-platinum);
font-size: 14px;
line-height: 1.5;
}
.mcc-post-card p b { color: var(--yl-copper); font-weight: 600; }
.mcc-post-card footer {
font-size: 12px;
color: rgba(209,211,214,0.45);
letter-spacing: 0.08em;
}
/* NEWSLETTER */
.mcc-news-frame {
flex: 1;
background: linear-gradient(180deg, rgba(13,19,35,0.7), rgba(5,11,23,0.5));
border-radius: 14px;
border: 1px solid rgba(209,211,214,0.08);
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.mcc-news-head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(209,211,214,0.08);
}
.mcc-news-mk {
width: 40px; height: 40px;
background: url("/assets/brand/yl-mark-flat-white.svg") center / contain no-repeat;
opacity: 0.85;
}
.mcc-news-head div { display: flex; flex-direction: column; gap: 2px; }
.mcc-news-head b {
color: var(--yl-platinum);
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 18px;
font-weight: 500;
}
.mcc-news-head .mono { font-size: 10.5px; color: var(--yl-copper); letter-spacing: 0.08em; }
.mcc-news-h {
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 26px;
color: var(--yl-platinum);
font-weight: 500;
line-height: 1.15;
}
.mcc-news-body p {
color: rgba(209,211,214,0.75);
font-size: 14.5px;
line-height: 1.55;
}
.mcc-news-cta {
color: var(--yl-copper);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
margin-top: 8px;
}
/* CALIDAD */
.mcc-quality { display: flex; flex-direction: column; gap: 6px; }
.mcc-q-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 11px;
background: rgba(209,211,214,0.018);
border-radius: 7px;
font-size: 12px;
color: var(--yl-titanium);
}
.mcc-q-row b { color: var(--yl-platinum); font-weight: 600; font-size: 12.5px; }
.mcc-q-row b.ok { color: #4ade80; }
.mcc-q-row b.warn { color: #fbbf24; }
.mcc-approve {
appearance: none;
width: 100%;
padding: 13px 16px;
margin-top: 16px;
background: linear-gradient(135deg, var(--yl-copper), #6FD8E8);
color: #050B17;
border: 0;
border-radius: 10px;
font-family: var(--yl-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.mcc-approve:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(159, 228, 238,0.4);
}
.mcc-approve-default { display: inline; }
.mcc-approve-done { display: none; }
.mcc-approve.done {
background: linear-gradient(135deg, #4ade80, #22c55e);
}
.mcc-approve.done .mcc-approve-default { display: none; }
.mcc-approve.done .mcc-approve-done { display: inline; }
.mcc-foot {
margin-top: 14px;
font-size: 10.5px;
color: rgba(209,211,214,0.55);
letter-spacing: 0.05em;
text-align: center;
line-height: 1.4;
}
.mcc-cta-row {
margin-top: 28px;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 1100px) {
.mcc { grid-template-columns: 1fr; gap: 14px; }
.mcc-slide-hook { font-size: 28px; }
.mcc-news-h { font-size: 22px; }
}
@media (max-width: 760px) {
.mcc-section { padding: 70px 0 60px; }
.mcc { padding: 14px; }
.mcc-left, .mcc-right, .mcc-center { padding: 14px; }
.mcc-slide-frame { padding: 24px 22px; min-height: 320px; }
.mcc-slide-hook { font-size: 24px; margin-top: -18px; }
.mcc-pt { font-size: 11.5px; padding: 6px 11px; }
.mcc-reel-frame { max-width: 220px; }
.mcc-reel-overlay b { font-size: 24px; }
}
/* ============================================================
PIPELINE 5 ETAPAS · /agentes-ia · sin scroll horizontal
============================================================ */
.pl5 {
margin-top: 36px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.pl5-stage {
border: 1px solid var(--yl-line);
border-radius: 14px;
background: linear-gradient(180deg, rgba(13,19,35,0.55), rgba(5,11,23,0.4));
overflow: hidden;
transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.pl5-stage:hover { border-color: rgba(159, 228, 238,0.3); }
.pl5-stage[open] {
background: linear-gradient(180deg, rgba(159, 228, 238,0.06), rgba(5,11,23,0.4));
border-color: rgba(159, 228, 238,0.35);
}
.pl5-stage-final[open] {
background: linear-gradient(180deg, rgba(159, 228, 238,0.1), rgba(5,11,23,0.4));
border-color: rgba(159, 228, 238,0.5);
}
.pl5-summary {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 20px 24px;
cursor: pointer;
list-style: none;
user-select: none;
}
.pl5-summary::-webkit-details-marker { display: none; }
.pl5-summary:focus-visible { outline: 2px solid var(--yl-copper); outline-offset: -2px; border-radius: 14px; }
.pl5-num {
font-size: 11px;
color: var(--yl-copper);
letter-spacing: 0.16em;
background: rgba(159, 228, 238,0.1);
padding: 6px 11px;
border-radius: 999px;
border: 1px solid rgba(159, 228, 238,0.3);
}
.pl5-head-text { display: flex; flex-direction: column; gap: 3px; }
.pl5-head-text h3 {
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 26px;
font-weight: 500;
color: var(--yl-platinum);
line-height: 1.1;
}
.pl5-time {
font-size: 11px;
color: rgba(209,211,214,0.55);
letter-spacing: 0.05em;
}
.pl5-toggle {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(209,211,214,0.05);
border: 1px solid rgba(209,211,214,0.12);
position: relative;
flex-shrink: 0;
transition: transform 240ms var(--ease), background 200ms var(--ease);
}
.pl5-toggle::before, .pl5-toggle::after {
content: "";
position: absolute;
background: var(--yl-platinum);
border-radius: 1px;
}
.pl5-toggle::before {
top: 50%; left: 25%; right: 25%; height: 1.5px;
transform: translateY(-50%);
}
.pl5-toggle::after {
left: 50%; top: 25%; bottom: 25%; width: 1.5px;
transform: translateX(-50%);
transition: opacity 200ms var(--ease);
}
.pl5-stage[open] .pl5-toggle {
background: rgba(159, 228, 238,0.18);
border-color: rgba(159, 228, 238,0.5);
}
.pl5-stage[open] .pl5-toggle::after { opacity: 0; }
.pl5-agents {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
padding: 0 24px 24px;
}
.pl5-agent {
--c: var(--yl-copper);
position: relative;
padding: 14px 16px 14px 18px;
background: rgba(5,11,23,0.5);
border: 1px solid rgba(209,211,214,0.06);
border-left: 3px solid var(--c);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.pl5-agent:hover {
transform: translateY(-1px);
background: rgba(13,19,35,0.7);
box-shadow: 0 8px 22px rgba(0,0,0,0.25), 0 0 0 1px rgba(159, 228, 238,0.08);
}
.pl5-agent-num {
font-family: var(--yl-mono);
font-size: 10px;
color: var(--c);
letter-spacing: 0.12em;
opacity: 0.85;
}
.pl5-agent b {
color: var(--yl-platinum);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.pl5-agent p {
color: rgba(209,211,214,0.65);
font-size: 12.5px;
line-height: 1.45;
margin-top: 2px;
}
.pl5-agent-featured {
background: linear-gradient(135deg, rgba(159, 228, 238,0.14), rgba(13,19,35,0.5));
box-shadow: 0 0 0 1px rgba(159, 228, 238,0.25);
}
.pl5-agent-featured::before {
content: "★";
position: absolute;
top: 12px; right: 14px;
color: var(--yl-copper);
font-size: 12px;
}
.pl5-agent-featured b { color: var(--yl-warm-glow); }
@media (max-width: 760px) {
.pl5-summary { padding: 16px 18px; gap: 14px; }
.pl5-head-text h3 { font-size: 22px; }
.pl5-num { font-size: 10px; padding: 5px 9px; }
.pl5-agents { padding: 0 18px 18px; grid-template-columns: 1fr; }
.pl5-toggle { width: 24px; height: 24px; }
}
/* ============================================================
AGENT SCENARIO SWITCHER · /agentes-ia · 4 escenarios WhatsApp
============================================================ */
.ags {
--ags-accent: #F472B6;
margin-top: 36px;
border: 1px solid var(--yl-line);
border-radius: 20px;
background: linear-gradient(180deg, rgba(13,19,35,0.6), rgba(5,11,23,0.5));
overflow: hidden;
}
.ags-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--yl-line);
background: rgba(5,11,23,0.55);
}
.ags-tab {
appearance: none;
background: transparent;
border: 0;
border-right: 1px solid var(--yl-line);
color: var(--yl-titanium);
padding: 18px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--yl-ui-sans);
text-align: left;
position: relative;
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.ags-tab:last-child { border-right: 0; }
.ags-tab:hover { background: rgba(209,211,214,0.02); color: var(--yl-platinum); }
.ags-tab:focus-visible { outline: 2px solid var(--yl-copper); outline-offset: -2px; }
.ags-tab.active {
background: linear-gradient(180deg, rgba(159, 228, 238,0.08), transparent);
color: var(--yl-platinum);
}
.ags-tab.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--c, var(--yl-copper));
box-shadow: 0 0 12px var(--c, var(--yl-copper));
}
.ags-tab-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 10px var(--c);
flex-shrink: 0;
}
.ags-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ags-tab-text b {
font-size: 14px;
font-weight: 600;
color: inherit;
}
.ags-tab-text em {
font-style: normal;
font-size: 11px;
color: rgba(209,211,214,0.72);
letter-spacing: 0.005em;
}
.ags-tab.active .ags-tab-text em { color: rgba(209,211,214,0.7); }
.ags-stage {
display: grid;
grid-template-columns: 1fr minmax(0, 420px);
gap: 30px;
padding: 30px 36px 36px;
align-items: stretch;
}
.ags-side {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 6px;
}
.ags-side-tag {
display: inline-block;
align-self: flex-start;
padding: 5px 11px;
background: rgba(159, 228, 238,0.1);
border: 1px solid rgba(159, 228, 238,0.3);
border-radius: 999px;
color: var(--yl-copper);
font-size: 10px;
letter-spacing: 0.12em;
}
.ags-side-title {
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 32px;
font-weight: 500;
color: var(--yl-platinum);
line-height: 1.15;
margin-top: 4px;
}
.ags-side-desc {
color: rgba(209,211,214,0.7);
font-size: 15px;
line-height: 1.55;
}
.ags-meta {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: rgba(5,11,23,0.5);
border: 1px solid rgba(209,211,214,0.06);
border-radius: 12px;
}
.ags-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--yl-titanium);
padding: 4px 0;
}
.ags-meta-row span {
color: rgba(209,211,214,0.55);
font-size: 12.5px;
}
.ags-meta-row b {
color: var(--yl-platinum);
font-weight: 600;
font-size: 13px;
}
.ags-result {
display: flex;
gap: 14px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(74,222,128,0.02));
border: 1px solid rgba(74,222,128,0.3);
border-radius: 12px;
align-items: center;
}
.ags-result-dot {
width: 12px; height: 12px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 12px #4ade80;
flex-shrink: 0;
}
.ags-result b {
display: block;
color: #4ade80;
font-size: 14px;
font-weight: 600;
}
.ags-result .mono {
display: block;
font-size: 11px;
color: rgba(74,222,128,0.75);
letter-spacing: 0.02em;
margin-top: 2px;
}
/* PHONE */
.ags-phone-wrap { display: flex; justify-content: center; align-items: stretch; }
.ags-phone {
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
background: #0a1220;
border: 1px solid rgba(209,211,214,0.1);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 44px rgba(0,0,0,0.4);
}
.ags-phone-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, color-mix(in srgb, var(--ags-accent, #F472B6) 18%, transparent), transparent);
border-bottom: 1px solid rgba(209,211,214,0.08);
}
.ags-phone-avatar {
width: 42px; height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--yl-platinum);
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
background: linear-gradient(135deg, #1a2a4a, #0a1220);
}
.ags-phone-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ags-phone-meta b {
color: var(--yl-platinum);
font-size: 14px;
font-weight: 600;
}
.ags-phone-meta .mono {
font-size: 11px;
color: rgba(209,211,214,0.55);
letter-spacing: 0.03em;
}
.ags-phone-status {
width: 10px; height: 10px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 10px #4ade80;
}
.ags-phone-body {
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 360px;
max-height: 420px;
overflow-y: auto;
background: linear-gradient(180deg, rgba(13,19,35,0.5), rgba(5,11,23,0.3));
}
.ags-phone-body::-webkit-scrollbar { width: 4px; }
.ags-phone-body::-webkit-scrollbar-track { background: transparent; }
.ags-phone-body::-webkit-scrollbar-thumb { background: rgba(209,211,214,0.15); border-radius: 4px; }
.ags-msg {
display: flex;
flex-direction: column;
gap: 3px;
max-width: 82%;
animation: agsMsgIn 280ms var(--ease);
}
@keyframes agsMsgIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ags-msg span {
padding: 9px 13px;
border-radius: 14px;
font-size: 13.5px;
line-height: 1.45;
color: var(--yl-platinum);
}
.ags-msg em {
font-style: normal;
font-size: 9.5px;
color: rgba(209,211,214,0.68);
padding: 0 6px;
letter-spacing: 0.02em;
}
.ags-msg-in { align-self: flex-start; }
.ags-msg-in span {
background: rgba(209,211,214,0.06);
border: 1px solid rgba(209,211,214,0.08);
border-bottom-left-radius: 4px;
}
.ags-msg-out { align-self: flex-end; }
.ags-msg-out span {
border: 1px solid rgba(244,114,182,0.25);
background: linear-gradient(135deg, rgba(244,114,182,0.18), rgba(244,114,182,0.05));
border-bottom-right-radius: 4px;
}
.ags-msg-out em { align-self: flex-end; }
.ags-msg-typ {
align-self: flex-start;
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
padding: 10px 13px !important;
background: rgba(209,211,214,0.06);
border-radius: 14px;
border-bottom-left-radius: 4px;
max-width: 60px;
}
.ags-typ-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(209,211,214,0.5);
animation: agsTypBlink 1.2s infinite ease-in-out;
}
.ags-typ-dot:nth-child(2) { animation-delay: 0.2s; }
.ags-typ-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes agsTypBlink {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
.ags-replay {
appearance: none;
background: rgba(209,211,214,0.04);
border: 0;
border-top: 1px solid rgba(209,211,214,0.06);
color: var(--yl-titanium);
padding: 12px 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--yl-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background 160ms var(--ease), color 160ms var(--ease);
}
.ags-replay:hover { background: rgba(159, 228, 238,0.1); color: var(--yl-copper); }
.ags-replay svg { width: 14px; height: 14px; }
@media (max-width: 1100px) {
.ags-stage { grid-template-columns: 1fr; padding: 24px; }
.ags-side-title { font-size: 26px; }
}
@media (max-width: 760px) {
.ags-tabs { grid-template-columns: 1fr 1fr; }
.ags-tab { padding: 14px 12px; }
.ags-tab:nth-child(2) { border-right: 0; }
.ags-tab:nth-child(1), .ags-tab:nth-child(2) { border-bottom: 1px solid var(--yl-line); }
.ags-tab-text b { font-size: 13px; }
.ags-tab-text em { font-size: 10.5px; }
.ags-side-title { font-size: 22px; }
.ags-phone-body { max-height: 360px; min-height: 280px; }
}
/* ============================================================
DEMO SHELL · topbar Yusta + iframe wrapper
============================================================ */
body.demo-shell-body {
background: #050B17;
color: var(--yl-platinum);
overflow: hidden; /* iframe ocupa todo el viewport */
}
body.demo-shell-body .grain,
body.demo-shell-body nav.nav,
body.demo-shell-body footer { display: none !important; }
.demo-shell-bar {
position: sticky;
top: 0;
z-index: 999;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 12px 24px;
background: linear-gradient(180deg, #050B17 0%, rgba(5,11,23,0.96) 100%);
border-bottom: 1px solid rgba(159, 228, 238,0.25);
backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
height: 56px;
box-sizing: border-box;
}
.demo-shell-back {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 999px;
border: 1px solid rgba(209,211,214,0.12);
color: var(--yl-titanium);
text-decoration: none;
font-family: var(--yl-ui-sans);
font-size: 13px;
font-weight: 500;
transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.demo-shell-back:hover {
color: var(--yl-platinum);
border-color: rgba(159, 228, 238,0.4);
background: rgba(159, 228, 238,0.06);
}
.demo-shell-brand {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--yl-platinum);
text-decoration: none;
justify-self: center;
}
.demo-shell-brand img { display: block; opacity: 0.9; }
.demo-shell-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.demo-shell-brand-text b {
font-family: var(--yl-display-serif);
font-style: normal;
font-size: 17px;
font-weight: 500;
color: var(--yl-platinum);
letter-spacing: 0.01em;
}
.demo-shell-brand-text .mono {
font-size: 10px;
color: var(--yl-copper);
letter-spacing: 0.12em;
}
.demo-shell-cta {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 999px;
background: linear-gradient(135deg, var(--yl-copper), #6FD8E8);
color: #050B17;
text-decoration: none;
font-family: var(--yl-ui-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.005em;
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.demo-shell-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(159, 228, 238,0.4);
}
.demo-shell-iframe {
display: block;
width: 100%;
height: calc(100vh - 56px);
border: 0;
background: #050B17;
}
@media (max-width: 760px) {
.demo-shell-bar {
padding: 10px 14px;
gap: 10px;
grid-template-columns: auto 1fr auto;
}
.demo-shell-back span,
.demo-shell-cta span { display: none; }
.demo-shell-back, .demo-shell-cta {
padding: 8px 11px;
}
.demo-shell-brand-text b { font-size: 14px; }
.demo-shell-brand-text .mono { font-size: 9.5px; }
.demo-shell-iframe { height: calc(100vh - 52px); }
}
/* ============================================================
PAGINAS-WEB SHOWROOM · mini layouts dentro de browser frame
============================================================ */
/* Layout interno mini para cada thumb */
.wt-mini {
position: absolute;
inset: 30px 16px 16px;
display: flex;
flex-direction: column;
gap: 7px;
z-index: 1;
pointer-events: none;
}
.wt-mini-nav {
display: flex;
align-items: center;
gap: 7px;
padding-bottom: 4px;
}
.wt-mini-nav i {
width: 22px; height: 8px;
background: linear-gradient(90deg, var(--yl-platinum), rgba(209,211,214,0.5));
border-radius: 2px;
display: block;
}
.wt-mini-nav b {
width: 18px; height: 5px;
background: rgba(209,211,214,0.25);
border-radius: 1.5px;
display: block;
}
.wt-mini-h1 {
height: 11px;
background: linear-gradient(90deg, var(--yl-platinum), rgba(209,211,214,0.4));
border-radius: 2.5px;
width: 88%;
}
.wt-mini-h2 {
height: 5px;
background: rgba(209,211,214,0.24);
border-radius: 2px;
width: 70%;
}
.wt-mini-cta {
height: 16px;
width: 64px;
border-radius: 999px;
margin-top: 4px;
}
.wt-mini-paragraph {
height: 4px;
background: rgba(209,211,214,0.18);
border-radius: 1.5px;
width: 92%;
}
.wt-mini-paragraph.short { width: 70%; }
/* COSMIC · hero centrado con orb */
.wt-cosmic .wt-mini-hero { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.wt-cta-cosmic {
background: linear-gradient(135deg, #7a5bff, #4a3bff);
}
.wt-mini-orb {
position: absolute;
right: 6px; bottom: 14px;
width: 38px; height: 38px;
background: radial-gradient(circle, #91baff 0%, transparent 70%);
border-radius: 50%;
filter: blur(2px);
opacity: 0.85;
}
/* EDITORIAL · serif heading + paragraphs + cards */
.wt-mini-editorial { display: flex; flex-direction: column; gap: 4px; }
.wt-mini-h-serif {
height: 14px;
background: linear-gradient(90deg, #f0e6d8, rgba(240,230,216,0.4));
border-radius: 2px;
width: 86%;
font-style: normal;
}
.wt-mini-cards-row {
display: flex;
gap: 5px;
margin-top: 4px;
}
.wt-mini-cards-row > div {
flex: 1;
height: 18px;
background: rgba(217,180,140,0.18);
border: 1px solid rgba(217,180,140,0.25);
border-radius: 3px;
}
/* TREASURY · stats row + chart line */
.wt-mini-stat-row {
display: flex;
gap: 6px;
margin-top: 4px;
}
.wt-mini-stat {
flex: 1;
padding: 5px 7px;
background: rgba(200,169,107,0.08);
border: 1px solid rgba(200,169,107,0.2);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.wt-mini-stat span {
display: block;
height: 3px;
width: 60%;
background: rgba(209,211,214,0.3);
border-radius: 1px;
}
.wt-mini-stat b {
display: block;
height: 7px;
width: 80%;
background: linear-gradient(90deg, var(--yl-warm-glow), rgba(240,201,166,0.4));
border-radius: 1.5px;
}
.wt-mini-chart-line {
height: 26px;
margin-top: 4px;
background:
linear-gradient(180deg, transparent 60%, rgba(200,169,107,0.18) 100%),
url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat;
border-radius: 3px;
border: 1px solid rgba(200,169,107,0.18);
}
/* ANALYTICS · grid bars + kpi row */
.wt-mini-grid-bars {
display: flex;
align-items: flex-end;
gap: 3px;
height: 36px;
padding: 0 2px;
margin-top: 2px;
}
.wt-mini-grid-bars i {
flex: 1;
background: linear-gradient(180deg, var(--yl-electric), rgba(61,107,255,0.3));
border-radius: 1.5px 1.5px 0 0;
min-height: 4px;
display: block;
}
.wt-mini-kpi-row {
display: flex;
gap: 4px;
margin-top: 3px;
}
.wt-mini-kpi-row span {
flex: 1;
height: 5px;
background: rgba(61,107,255,0.22);
border-radius: 1.5px;
}
/* WELLNESS · hero img + warm h */
.wt-mini-hero-img {
height: 24px;
background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255,200,140,0.45), transparent 75%);
border-radius: 4px;
margin-bottom: 3px;
}
.wt-h-warm { background: linear-gradient(90deg, #f0d9b5, rgba(240,217,181,0.4)) !important; }
/* SECURITY · shield + code lines */
.wt-mini-shield {
height: 22px;
width: 18px;
background:
linear-gradient(180deg, rgba(174,180,190,0.55), rgba(102,217,255,0.18));
clip-path: polygon(50% 0, 100% 18%, 100% 65%, 50% 100%, 0 65%, 0 18%);
margin: 2px auto 6px;
}
.wt-mini-codeline {
height: 4px;
background: rgba(102,217,255,0.25);
border-radius: 1px;
width: 96%;
margin-bottom: 2px;
}
.wt-mini-codeline.short { width: 64%; opacity: 0.6; }
/* LUMINA · glow + cards */
.wt-mini-glow-orb {
position: absolute;
top: 36%; right: 14px;
width: 44px; height: 44px;
background: radial-gradient(circle, rgba(240,201,166,0.7), transparent 70%);
border-radius: 50%;
filter: blur(3px);
}
.wt-h-glow {
background: linear-gradient(90deg, var(--yl-warm-glow), rgba(240,201,166,0.4)) !important;
}
.wt-cards-lumina > div {
background: rgba(240,201,166,0.12) !important;
border-color: rgba(240,201,166,0.25) !important;
}
/* WORKSPACE · kanban columns */
.wt-mini-kanban {
display: flex;
gap: 4px;
margin-top: 4px;
}
.wt-mini-col {
flex: 1;
padding: 4px;
background: rgba(102,217,255,0.06);
border: 1px solid rgba(102,217,255,0.16);
border-radius: 3px;
display: flex;
flex-direction: column;
gap: 3px;
}
.wt-mini-col i {
height: 5px;
background: rgba(102,217,255,0.3);
border-radius: 1px;
display: block;
}
/* CALCULADORA · inputs + total */
.wt-mini-calc-input {
height: 12px;
background: rgba(74,222,128,0.1);
border: 1px solid rgba(74,222,128,0.22);
border-radius: 3px;
width: 100%;
margin-bottom: 3px;
}
.wt-mini-calc-input.short { width: 70%; }
.wt-mini-calc-total {
margin-top: 5px;
padding: 5px 7px;
background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.04));
border: 1px solid rgba(74,222,128,0.35);
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wt-mini-calc-total span {
display: block;
height: 4px;
width: 35%;
background: rgba(209,211,214,0.3);
border-radius: 1px;
}
.wt-mini-calc-total b {
display: block;
height: 8px;
width: 30%;
background: linear-gradient(90deg, #4ade80, rgba(74,222,128,0.4));
border-radius: 1.5px;
}
/* ============================================================
QUICK WINS 2026-05-22 · Audit marketing-deep
#3 hero-proof · #5 floating-wa · #9 pricing-teaser · #10 lead-success
============================================================ */
/* #3 · Hero proof stats (1.029 reseñas + SLE link) */
.hero-proof {
max-width: 540px;
margin: 32px 0 0;
padding: 20px 22px;
border-left: 3px solid #BFEAF2;
background: rgba(159, 228, 238, 0.05);
border-radius: 0 8px 8px 0;
}
.hero-proof-stats {
display: flex;
gap: 28px;
align-items: baseline;
margin-bottom: 12px;
}
.hero-proof-stats > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-proof-stats strong {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 32px;
line-height: 1;
color: #F2F0EB;
}
.hero-proof-stats span {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(209, 211, 214, 0.7);
text-transform: uppercase;
}
.hero-proof-line {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(209, 211, 214, 0.85);
}
.hero-proof-line strong { color: #F2F0EB; font-weight: 600; }
.hero-proof-line a {
display: inline-block;
margin-top: 6px;
font-size: 13px;
color: #BFEAF2;
text-decoration: none;
border-bottom: 1px dotted rgba(159, 228, 238, 0.4);
padding-bottom: 1px;
transition: color 200ms ease, border-color 200ms ease;
}
.hero-proof-line a:hover,
.hero-proof-line a:focus-visible {
color: #F0C9A6;
border-bottom-color: rgba(240, 201, 166, 0.7);
}
@media (max-width: 720px) {
.hero-proof { padding: 16px 18px; margin-top: 24px; }
.hero-proof-stats { gap: 18px; }
.hero-proof-stats strong { font-size: 26px; }
}
/* #5 · Floating WhatsApp button (solo mobile) */
.floating-wa {
position: fixed;
bottom: 18px;
right: 18px;
width: 56px;
height: 56px;
background: #25D366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 998;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(0,0,0,0.3);
transition: transform 200ms ease, box-shadow 200ms ease;
text-decoration: none;
}
.floating-wa svg { width: 28px; height: 28px; fill: currentColor; }
.floating-wa:hover,
.floating-wa:focus-visible {
transform: scale(1.07);
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5), 0 3px 8px rgba(0,0,0,0.35);
}
.floating-wa::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(37, 211, 102, 0.4);
animation: pulse-wa 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes pulse-wa {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.5); opacity: 0; }
}
@media (min-width: 1024px) {
.floating-wa { display: none; }
}
/* #9 · Pricing teaser entre hero y manifesto */
.pricing-teaser {
padding: 48px 0 24px;
border-top: 1px solid rgba(209, 211, 214, 0.06);
}
.pricing-teaser-row {
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
flex-wrap: wrap;
}
.pricing-teaser-anchor {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
}
.pricing-teaser-anchor > span:first-child {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(209, 211, 214, 0.55);
text-transform: uppercase;
}
.pricing-teaser-anchor em {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 44px;
line-height: 1;
color: #F0C9A6;
font-weight: 700;
}
.pricing-teaser-anchor > span:last-child {
font-size: 13px;
color: rgba(209, 211, 214, 0.75);
}
.pricing-teaser-divider {
font-family: 'Inter', system-ui, sans-serif;
font-size: 28px;
color: rgba(159, 228, 238, 0.45);
font-style: normal;
}
.pricing-teaser-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
padding: 10px 18px;
font-size: 13px;
color: #050B17;
background: #BFEAF2;
border-radius: 999px;
text-decoration: none;
transition: background 200ms ease, transform 200ms ease;
}
.pricing-teaser-cta:hover,
.pricing-teaser-cta:focus-visible {
background: #F0C9A6;
transform: translateY(-1px);
}
.pricing-teaser-note {
margin: 16px 0 0;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(209, 211, 214, 0.5);
text-align: center;
}
@media (max-width: 720px) {
.pricing-teaser { padding: 32px 0 16px; }
.pricing-teaser-row { gap: 18px; flex-direction: column; align-items: flex-start; padding: 0 24px; }
.pricing-teaser-anchor em { font-size: 36px; }
.pricing-teaser-divider { display: none; }
.pricing-teaser-cta { margin-left: 0; margin-top: 8px; }
.pricing-teaser-note { padding: 0 24px; text-align: left; }
}
/* #10 · Lead form success → WhatsApp redirect */
.lead-success {
text-align: center;
padding: 32px 24px;
}
.lead-success h3 {
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 32px;
color: #F2F0EB;
margin: 0 0 12px;
}
.lead-success p {
color: rgba(209, 211, 214, 0.85);
font-size: 15px;
line-height: 1.55;
margin: 0 0 16px;
}
.lead-success .btn-primary {
margin: 8px 0 12px;
}
.lead-success .small {
font-size: 12px;
color: rgba(209, 211, 214, 0.5);
}
/* QW #4 helper · form opcional collapsible */
.field-optional {
margin-top: 8px;
}
.field-optional > summary {
cursor: pointer;
font-size: 12px;
color: rgba(209, 211, 214, 0.6);
padding: 6px 0;
user-select: none;
list-style: none;
}
.field-optional > summary::-webkit-details-marker { display: none; }
.field-optional > summary:hover { color: #BFEAF2; }
.field-optional > summary::before { content: "+ "; color: #BFEAF2; }
.field-optional[open] > summary::before { content: "− "; }
/* ============================================================
V7 SILVER PREMIUM · override globales · 2026-05-22
============================================================ */
/* default es italic · en V7 lo queremos bold silver-light · sin italic
(excepto donde se declara explícitamente ) */
em {
font-style: normal;
font-weight: 600;
color: var(--yl-silver-light);
}
/* Headlines display · Inter peso 900 · NO italic · NO serif · letter-spacing -0.02em */
h1, h2, h3, .display, .display-xl, .display-lg, .display-md, .display-sm,
.hero-title, .section-title {
font-family: var(--yl-display-serif);
font-style: normal;
font-weight: var(--yl-display-weight);
letter-spacing: -0.022em;
color: var(--yl-silver-light);
}
/* Body text default · Inter 500 · silver-mirror · sin italic */
body, p, li, span, div {
font-style: normal;
}
p {
color: var(--yl-silver-mirror);
}
/* Mono labels · silver-dim · spacing wider · uppercase */
.mono {
font-family: var(--yl-mono);
color: var(--yl-silver-dim);
letter-spacing: 0.04em;
}
/* Accent inline · era copper warm · ahora silver-light bold (no italic) */
.accent {
color: var(--yl-silver-light);
font-weight: 600;
font-style: normal;
}
/* Strong / bold · silver-light prominente */
strong, b {
color: var(--yl-silver-light);
font-weight: 700;
}
/* CTA primary · copper-rim SOLO en el botón principal · silver para fill text */
.btn-primary {
background: var(--yl-copper-rim);
color: var(--yl-ink-black);
font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus-visible {
background: var(--yl-copper-light);
color: var(--yl-ink-black);
}
/* CTA ghost · plateado dominante */
.btn-ghost {
background: transparent;
color: var(--yl-silver-mirror);
border: 1px solid var(--yl-silver-line);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
color: var(--yl-silver-light);
border-color: var(--yl-silver-mirror);
background: var(--yl-copper-faint);
}
/* Nav · plateado · sin warm tones */
.nav, nav, .nav-inner { color: var(--yl-silver-mirror); }
.nav-links a { color: var(--yl-silver-mirror); }
.nav-links a:hover, .nav-links a[data-active="active"] { color: var(--yl-silver-light); }
/* Footer · silver-dim */
footer { color: var(--yl-silver-dim); }
footer a { color: var(--yl-silver-mirror); }
footer a:hover { color: var(--yl-silver-light); }
/* Hero proof stats · silver-mirror dominante · UN solo copper-rim accent */
.hero-proof {
border-left-color: var(--yl-copper-rim);
background: var(--yl-copper-faint);
}
.hero-proof-stats strong {
color: var(--yl-silver-light);
font-family: var(--yl-ui-sans); /* Inter · NO Cormorant */
font-style: normal;
font-weight: 800;
}
.hero-proof-line a {
color: var(--yl-copper-rim);
border-bottom-color: var(--yl-silver-line);
}
.hero-proof-line a:hover { color: var(--yl-copper-light); }
/* Pricing teaser · silver dominante · copper-rim solo en el numero */
.pricing-teaser-anchor em {
color: var(--yl-copper-rim);
font-style: normal;
font-weight: 800;
font-family: var(--yl-ui-sans);
}
.pricing-teaser-cta {
background: var(--yl-copper-rim);
color: var(--yl-ink-black);
}
.pricing-teaser-cta:hover {
background: var(--yl-copper-light);
}
.pricing-teaser-divider { color: var(--yl-silver-shadow); }
/* Floating WA mantiene verde IG · pero shadow neutralizado */
.floating-wa { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); }
/* ============================================================
V7 · EFECTO 3D HERO · grilla perspective + sun radial silver
2026-05-22 · sin synthwave neón · paleta silver premium
============================================================ */
/* Hero base · prepara el stage para las capas decorativas */
.hero {
position: relative;
overflow: hidden;
background: radial-gradient(
ellipse at 50% 35%,
var(--yl-ink-deep) 0%,
var(--yl-ink-black) 65%
);
}
/* Capa 1 · Grid 3D perspective (::before) · silver + copper-rim sutil */
.hero::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 200%;
height: 55%;
transform: translateX(-50%) perspective(900px) rotateX(60deg);
transform-origin: 50% 100%;
background-image:
linear-gradient(rgba(199, 205, 212, 0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(159, 228, 238, 0.12) 1px, transparent 1px);
background-size: 70px 70px;
background-position: 0 0;
mask-image: linear-gradient(to top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.6) 50%,
rgba(0, 0, 0, 0) 100%
);
-webkit-mask-image: linear-gradient(to top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.6) 50%,
rgba(0, 0, 0, 0) 100%
);
animation: grid-scroll-v7 24s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes grid-scroll-v7 {
from { background-position: 0 0; }
to { background-position: 0 70px; }
}
/* Capa 2 · Sun radial silver-copper (::after) · respira lento */
.hero::after {
content: "";
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
width: 720px;
height: 720px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(199, 205, 212, 0.16) 0%,
rgba(159, 228, 238, 0.10) 28%,
rgba(74, 82, 92, 0.08) 50%,
transparent 72%
);
filter: blur(48px);
animation: sun-breathe-v7 7s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes sun-breathe-v7 {
0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
/* Contenido del hero · z-index encima de las capas decorativas */
.hero > .container,
.hero > .hero-env,
.hero-inner,
.hero-corner {
position: relative;
z-index: 3;
}
/* Mobile · grid más sutil · perspective menos agresivo */
@media (max-width: 720px) {
.hero::before {
height: 40%;
background-size: 50px 50px;
transform: translateX(-50%) perspective(500px) rotateX(58deg);
}
.hero::after {
width: 380px;
height: 380px;
top: 32%;
}
}
/* Reduced motion · paramos animaciones · grid estática · sun fijo */
@media (prefers-reduced-motion: reduce) {
.hero::before, .hero::after {
animation: none !important;
}
.hero::after { opacity: 0.85; }
}
/* ============================================================
V7 · MEJORAS DESKTOP · proporciones · spacing · jerarquía
============================================================ */
/* Hero · más air en desktop · respiración */
@media (min-width: 1024px) {
.hero { min-height: 92vh; min-height: 92dvh; padding-top: 64px; }
.hero-inner { padding-top: 56px; }
.hero-title { font-size: clamp(56px, 6vw, 84px); line-height: 0.98; }
.hero-sub { font-size: 19px; line-height: 1.55; max-width: 580px; }
}
/* Manifesto · más presencia · gradient sutil de divider */
.manifesto {
position: relative;
border-top: 1px solid var(--yl-silver-trace);
}
.manifesto::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--yl-copper-rim) 50%,
transparent 100%
);
opacity: 0.7;
}
@media (min-width: 1024px) {
.manifesto { padding: 120px 0; }
.manifesto-body { font-size: clamp(28px, 3vw, 44px); line-height: 1.18; }
}
/* Rotator · más punch · letra spacing tight */
.rotator-static, .rotator-line {
letter-spacing: -0.022em;
}
.rotator .rotator-static { color: var(--yl-silver-mirror); }
.rotator .rotator-track > span { color: var(--yl-silver-light); }
.rotator-progress-fill { background: var(--yl-copper-rim); }
/* Section ofertas · grid 4 tabs con mejor air */
.offsw-section { padding: 100px 0; }
.offsw-tabs {
border-bottom: 1px solid var(--yl-silver-trace);
}
.offsw-tab {
color: var(--yl-silver-dim);
border-bottom: 2px solid transparent;
transition: color 240ms, border-color 240ms;
}
.offsw-tab.active {
color: var(--yl-silver-light);
border-bottom-color: var(--yl-copper-rim);
}
.offsw-tab:hover { color: var(--yl-silver-mirror); }
/* Section kicker · estructura clara */
.kicker-row .dot {
background: var(--yl-copper-rim);
opacity: 0.7;
}
/* Hero corner · esquina inferior · más minimal */
.hero-corner {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 80px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--yl-silver-shadow);
opacity: 0.6;
}
@media (max-width: 720px) {
.hero-corner { display: none; }
}
/* Mejor jerarquía CTAs · primary más sólido · ghost más sutil */
.btn-primary {
padding: 14px 26px;
border-radius: 999px;
font-weight: 600;
letter-spacing: -0.005em;
box-shadow: 0 4px 20px rgba(159, 228, 238, 0.25), 0 0 0 1px rgba(159, 228, 238, 0.4);
transition: transform 220ms, box-shadow 220ms;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 28px rgba(159, 228, 238, 0.4), 0 0 0 1px rgba(199, 147, 120, 0.6);
}
.btn-ghost {
padding: 14px 24px;
border-radius: 999px;
font-weight: 500;
}
/* Hero-mark · subtle copper-rim glow para que combine con el sun */
.hero-mark .halo { background: radial-gradient(circle, rgba(159, 228, 238,0.18), transparent 70%); }
/* Inputs · silver borders · focus copper-rim */
input, textarea, select {
background: var(--yl-ink-deep);
border: 1px solid var(--yl-silver-line);
color: var(--yl-silver-mirror);
}
input:focus, textarea:focus, select:focus {
border-color: var(--yl-copper-rim);
outline: 2px solid rgba(159, 228, 238, 0.2);
outline-offset: 1px;
}
/* Inputs labels · silver-dim · más sofisticado */
label {
color: var(--yl-silver-dim);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
}
/* ============================================================
V7 · OVERRIDE FINAL · CERO ITALIC (anti-regresión)
============================================================ */
/* Nuclear · todo elemento que browser por default pondría italic */
em, i, cite, dfn, var, address, q {
font-style: normal !important;
font-family: 'Inter', system-ui, sans-serif;
}
/* em semántico · silver-light bold (highlight) */
em {
font-weight: 600;
color: var(--yl-silver-light);
}
/* ============================================================
V7-3D-PRO · FONDO HERO AMBICIOSO · 2026-05-23
Adaptación REAL del v4 synthwave al brand silver premium.
Capas: ambient + horizon line + grid 3D denso + sun mega +
stars constellation + grain
============================================================ */
/* Refactor del hero · usamos un wrapper extra para más capas */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(159, 228, 238, 0.04) 0%, transparent 70%),
radial-gradient(ellipse 80% 50% at 50% 30%, var(--yl-ink-deep) 0%, var(--yl-ink-black) 70%);
}
/* Capa A · Horizon line · separación visual entre cielo y suelo */
.hero::before {
content: "";
position: absolute;
bottom: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(159, 228, 238, 0.0) 15%,
rgba(199, 205, 212, 0.35) 50%,
rgba(159, 228, 238, 0.0) 85%,
transparent 100%
);
box-shadow:
0 0 30px rgba(199, 205, 212, 0.18),
0 0 60px rgba(159, 228, 238, 0.10);
z-index: 1;
pointer-events: none;
}
/* Capa B · Grid 3D denso · MÁS visible que V7 inicial */
.hero::after {
content: "";
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 50%;
transform: perspective(800px) rotateX(62deg);
transform-origin: 50% 100%;
background-image:
linear-gradient(rgba(199, 205, 212, 0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(159, 228, 238, 0.20) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: linear-gradient(to top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.4) 65%,
rgba(0, 0, 0, 0) 100%
);
-webkit-mask-image: linear-gradient(to top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.4) 65%,
rgba(0, 0, 0, 0) 100%
);
animation: grid-scroll-3d-pro 16s linear infinite;
z-index: 0;
pointer-events: none;
}
@keyframes grid-scroll-3d-pro {
from { background-position: 0 0; }
to { background-position: 0 60px; }
}
/* Capa C · SUN MEGA · grande · detrás del hero · respira */
.hero-env {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero-env::before {
content: "";
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 900px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(232, 234, 237, 0.14) 0%,
rgba(199, 205, 212, 0.10) 18%,
rgba(159, 228, 238, 0.08) 32%,
rgba(74, 82, 92, 0.06) 50%,
transparent 70%
);
filter: blur(60px);
animation: sun-pro-breathe 8s ease-in-out infinite;
}
@keyframes sun-pro-breathe {
0%, 100% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.06);
}
}
/* Capa D · Stars · constellation distribuida en el cielo
Trick: 1 elemento + multiple box-shadows · 50 stars */
.hero-env::after {
content: "";
position: absolute;
top: 20%;
left: 20%;
width: 1px;
height: 1px;
background: var(--yl-silver-light);
border-radius: 50%;
box-shadow:
/* Constellation pattern · stars distribuidas en la mitad superior */
47px 23px 0 0 rgba(232, 234, 237, 0.7),
132px 78px 0 0 rgba(199, 205, 212, 0.5),
231px 12px 0 0 rgba(232, 234, 237, 0.8),
312px 96px 0 0 rgba(159, 228, 238, 0.6),
421px 45px 0 0 rgba(199, 205, 212, 0.4),
512px 152px 0 0 rgba(232, 234, 237, 0.6),
618px 38px 0 0 rgba(199, 205, 212, 0.7),
721px 124px 0 0 rgba(159, 228, 238, 0.4),
78px 187px 0 0 rgba(232, 234, 237, 0.5),
198px 224px 0 0 rgba(199, 205, 212, 0.6),
287px 168px 0 0 rgba(232, 234, 237, 0.7),
395px 211px 0 0 rgba(159, 228, 238, 0.5),
487px 282px 0 0 rgba(199, 205, 212, 0.4),
572px 198px 0 0 rgba(232, 234, 237, 0.6),
678px 245px 0 0 rgba(199, 205, 212, 0.5),
768px 178px 0 0 rgba(159, 228, 238, 0.6),
856px 89px 0 0 rgba(232, 234, 237, 0.8),
932px 156px 0 0 rgba(199, 205, 212, 0.5),
1015px 24px 0 0 rgba(232, 234, 237, 0.6),
1098px 132px 0 0 rgba(159, 228, 238, 0.5),
1187px 67px 0 0 rgba(232, 234, 237, 0.7),
34px 312px 0 0 rgba(199, 205, 212, 0.4),
156px 278px 0 0 rgba(159, 228, 238, 0.5),
267px 332px 0 0 rgba(232, 234, 237, 0.5),
389px 295px 0 0 rgba(199, 205, 212, 0.6),
478px 372px 0 0 rgba(159, 228, 238, 0.4),
589px 318px 0 0 rgba(232, 234, 237, 0.7),
687px 367px 0 0 rgba(199, 205, 212, 0.5),
789px 298px 0 0 rgba(159, 228, 238, 0.5),
876px 354px 0 0 rgba(232, 234, 237, 0.6),
965px 287px 0 0 rgba(199, 205, 212, 0.4),
1067px 412px 0 0 rgba(232, 234, 237, 0.5);
animation: stars-twinkle 4s ease-in-out infinite;
z-index: 2;
}
@keyframes stars-twinkle {
0%, 100% { opacity: 0.7; }
50% { opacity: 1.0; }
}
/* Z-index correcto para que el contenido quede SIEMPRE arriba */
.hero > .container,
.hero-inner,
.hero-corner,
.hero-proof,
.cta-row {
position: relative;
z-index: 5;
}
/* Hero mark · brillo extra en V2 · combina con sun */
.hero-mark {
position: relative;
z-index: 4;
}
.hero-mark .halo {
background: radial-gradient(circle,
rgba(199, 205, 212, 0.22) 0%,
rgba(159, 228, 238, 0.14) 30%,
transparent 65%
);
filter: blur(30px);
}
/* Hero corner · footer info · más sutil */
.hero-corner {
bottom: 32px;
font-size: 10.5px;
letter-spacing: 0.12em;
color: var(--yl-silver-shadow);
opacity: 0.55;
}
/* Mobile · adaptado · grid más sutil y sun más chico */
@media (max-width: 720px) {
.hero::after {
height: 38%;
background-size: 42px 42px;
transform: perspective(400px) rotateX(60deg);
}
.hero-env::before {
width: 460px;
height: 460px;
top: 25%;
}
.hero-env::after {
transform: scale(0.6);
top: 8%;
}
}
/* Reduced motion · animaciones off · estado fijo */
@media (prefers-reduced-motion: reduce) {
.hero::after,
.hero-env::before,
.hero-env::after {
animation: none !important;
}
}
/* ============================================================
V7-3D-PRO-RINGS · ANILLOS ORBITALES estilo Saturno · 2026-05-23
Decisión Nico: sacar el sun mega · agregar anillos 3D que envuelvan
el logo metálico · darle "magia" al espacio detrás del mark.
============================================================ */
/* QUITAMOS el sun mega del hero-env (era #C demasiado dominante) */
.hero-env::before {
display: none !important;
content: none !important;
}
/* Hero-env solo mantiene la constellation (stars) · sun fuera */
/* ============================================================
ANILLOS ORBITALES · 3 capas alrededor del logo
Estilo: Saturn ring system · adapted Yusta premium
============================================================ */
/* Hero-mark · enable 3D context · más respiración */
.hero-mark {
position: relative;
z-index: 4;
perspective: 1200px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
/* Anillo EXTERNO · el más grande · slow rotation · silver-mirror */
.hero-mark .orbit {
position: absolute;
top: 50%;
left: 50%;
width: 580px;
height: 580px;
margin-top: -290px;
margin-left: -290px;
border-radius: 50%;
border: 1px solid rgba(199, 205, 212, 0.16);
box-shadow:
inset 0 0 24px rgba(199, 205, 212, 0.04),
0 0 60px rgba(159, 228, 238, 0.06);
transform: rotateX(72deg) rotateZ(0deg);
animation: orbit-spin-outer 60s linear infinite;
pointer-events: none;
z-index: 0;
}
/* Anillo MEDIO · más denso · copper-rim dashed · reverse rotation */
.hero-mark::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 480px;
height: 480px;
margin-top: -240px;
margin-left: -240px;
border-radius: 50%;
border: 1px dashed rgba(159, 228, 238, 0.32);
transform: rotateX(68deg) rotateZ(18deg);
animation: orbit-spin-middle 42s linear infinite reverse;
pointer-events: none;
z-index: 1;
}
/* Anillo INTERNO · más cerca del logo · silver-light brillante */
.hero-mark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 380px;
height: 380px;
margin-top: -190px;
margin-left: -190px;
border-radius: 50%;
border: 1px solid rgba(232, 234, 237, 0.22);
box-shadow:
inset 0 0 18px rgba(159, 228, 238, 0.08),
0 0 28px rgba(199, 205, 212, 0.10);
transform: rotateX(58deg) rotateZ(-12deg);
animation: orbit-spin-inner 28s linear infinite;
pointer-events: none;
z-index: 2;
}
/* Animaciones · 3 velocidades distintas · suaves */
@keyframes orbit-spin-outer {
from { transform: rotateX(72deg) rotateZ(0deg); }
to { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes orbit-spin-middle {
from { transform: rotateX(68deg) rotateZ(18deg); }
to { transform: rotateX(68deg) rotateZ(378deg); }
}
@keyframes orbit-spin-inner {
from { transform: rotateX(58deg) rotateZ(-12deg); }
to { transform: rotateX(58deg) rotateZ(348deg); }
}
/* ============================================================
SATÉLITES · 3 dots copper-light girando sobre los anillos
1 dot por anillo · pegado a la órbita · animación matching
============================================================ */
/* Reutilizamos el .sat existente del HTML como satélite del anillo externo */
.hero-mark .sat,
.hero-mark .sat-a {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px;
border-radius: 50%;
background: var(--yl-copper-light);
box-shadow:
0 0 12px rgba(199, 147, 120, 0.7),
0 0 24px rgba(159, 228, 238, 0.4);
pointer-events: none;
z-index: 3;
animation: sat-orbit-outer 60s linear infinite;
}
.hero-mark .sat i {
display: none;
}
/* Agregamos 2 satélites más via background pseudo-element del orbit */
.hero-mark .orbit::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px;
border-radius: 50%;
background: var(--yl-silver-light);
box-shadow:
0 0 10px rgba(232, 234, 237, 0.8),
0 0 20px rgba(199, 205, 212, 0.4);
transform: translate(290px, 0);
z-index: 2;
}
.hero-mark .orbit::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
margin: -2.5px;
border-radius: 50%;
background: var(--yl-copper-rim);
box-shadow:
0 0 8px rgba(159, 228, 238, 0.8),
0 0 18px rgba(159, 228, 238, 0.3);
transform: translate(-290px, 0);
z-index: 2;
}
/* Satellite orbit path · el .sat principal orbita en el anillo externo */
@keyframes sat-orbit-outer {
from { transform: rotate(0deg) translateX(290px) rotate(0deg); }
to { transform: rotate(360deg) translateX(290px) rotate(-360deg); }
}
/* ============================================================
GLOW AMBIENTE · halo alrededor del logo central
Reemplaza el sun mega · más sutil · más focused
============================================================ */
.hero-mark .halo {
position: absolute;
top: 50%;
left: 50%;
width: 420px;
height: 420px;
margin-top: -210px;
margin-left: -210px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(199, 205, 212, 0.18) 0%,
rgba(159, 228, 238, 0.12) 25%,
rgba(74, 82, 92, 0.08) 50%,
transparent 70%
);
filter: blur(40px);
animation: halo-breathe 8s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes halo-breathe {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1.0; transform: scale(1.06); }
}
/* ============================================================
MOBILE · escalar todo proporcional · mantener proporciones
============================================================ */
@media (max-width: 720px) {
.hero-mark .orbit {
width: 340px; height: 340px;
margin-top: -170px; margin-left: -170px;
}
.hero-mark::before {
width: 280px; height: 280px;
margin-top: -140px; margin-left: -140px;
}
.hero-mark::after {
width: 230px; height: 230px;
margin-top: -115px; margin-left: -115px;
}
.hero-mark .halo {
width: 260px; height: 260px;
margin-top: -130px; margin-left: -130px;
}
@keyframes sat-orbit-outer {
from { transform: rotate(0deg) translateX(170px) rotate(0deg); }
to { transform: rotate(360deg) translateX(170px) rotate(-360deg); }
}
.hero-mark .orbit::before { transform: translate(170px, 0); }
.hero-mark .orbit::after { transform: translate(-170px, 0); }
}
/* Reduced motion · anillos quietos · sin spin */
@media (prefers-reduced-motion: reduce) {
.hero-mark .orbit,
.hero-mark::before,
.hero-mark::after,
.hero-mark .sat,
.hero-mark .halo {
animation: none !important;
}
}
/* ============================================================
V7-3D-ULTRA · 2026-05-23 · Anillos REALES + Estrellas VIVAS
============================================================
Problema del V7-3D-PRO-RINGS:
- Anillos border-radius+border solid = simétricos · rotateZ invisible
- Estrellas 1 elem + 1 keyframe global = todas pulsan iguales · sin vida
Solución V7-3D-ULTRA:
- Conic-gradient con highlight/shadow asimétrico · spin VISIBLE
- Z-depth real · satélites pasan delante/detrás del logo
- 5 layers de stars · timing/delay/drift independientes
- 1 estrella fugaz cada 30s · diagonal con trail
============================================================ */
/* ===== KILL V7-3D-PRO-RINGS old · todo reescrito ===== */
.hero-mark .orbit {
animation: none !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.hero-mark::before,
.hero-mark::after {
animation: none !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
content: none !important;
}
.hero-mark .orbit::before,
.hero-mark .orbit::after {
display: none !important;
content: none !important;
}
.hero-env::after {
/* kill old stars layer · reemplazadas por .hero-stars */
display: none !important;
}
/* ===== HERO-MARK · perspectiva 3D fuerte ===== */
.hero-mark {
position: relative;
z-index: 4;
perspective: 1600px;
perspective-origin: 50% 45%;
transform-style: preserve-3d;
isolation: isolate;
}
/* ===== ANILLO EXTERNO · 580px · silver-mirror highlight rotativo ===== */
.hero-mark .orbit-ring-outer {
position: absolute;
top: 50%;
left: 50%;
width: 580px;
height: 580px;
margin: -290px 0 0 -290px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent 0%,
rgba(199, 205, 212, 0.10) 8%,
rgba(232, 234, 237, 0.55) 18%,
rgba(255, 255, 255, 0.85) 24%,
rgba(232, 234, 237, 0.55) 30%,
rgba(199, 205, 212, 0.15) 42%,
transparent 50%,
rgba(159, 228, 238, 0.10) 58%,
rgba(199, 147, 120, 0.45) 70%,
rgba(159, 228, 238, 0.65) 76%,
rgba(199, 147, 120, 0.40) 82%,
rgba(159, 228, 238, 0.10) 92%,
transparent 100%
);
-webkit-mask:
radial-gradient(circle,
transparent 48.5%,
black 49.5%,
black 51%,
transparent 52%
);
mask:
radial-gradient(circle,
transparent 48.5%,
black 49.5%,
black 51%,
transparent 52%
);
transform: rotateX(74deg) rotateZ(0deg);
animation: orbit-ultra-outer 32s linear infinite;
pointer-events: none;
z-index: 1;
filter: drop-shadow(0 0 22px rgba(199, 147, 120, 0.10));
}
/* ===== ANILLO MEDIO · 470px · copper-rim dashed feel ===== */
.hero-mark .orbit-ring-middle {
position: absolute;
top: 50%;
left: 50%;
width: 470px;
height: 470px;
margin: -235px 0 0 -235px;
border-radius: 50%;
background: conic-gradient(
from 45deg,
transparent 0%,
rgba(159, 228, 238, 0.35) 10%,
transparent 14%,
rgba(159, 228, 238, 0.55) 22%,
transparent 26%,
rgba(199, 147, 120, 0.75) 34%,
transparent 38%,
rgba(159, 228, 238, 0.45) 46%,
transparent 50%,
rgba(199, 205, 212, 0.30) 60%,
transparent 64%,
rgba(232, 234, 237, 0.55) 72%,
transparent 76%,
rgba(199, 205, 212, 0.40) 84%,
transparent 88%,
rgba(159, 228, 238, 0.25) 96%,
transparent 100%
);
-webkit-mask:
radial-gradient(circle,
transparent 48%,
black 49.2%,
black 50.8%,
transparent 52%
);
mask:
radial-gradient(circle,
transparent 48%,
black 49.2%,
black 50.8%,
transparent 52%
);
transform: rotateX(68deg) rotateZ(0deg);
animation: orbit-ultra-middle 22s linear infinite reverse;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 0 18px rgba(159, 228, 238, 0.18));
}
/* ===== ANILLO INTERNO · 360px · silver-light bright + soft glow ===== */
.hero-mark .orbit-ring-inner {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height: 360px;
margin: -180px 0 0 -180px;
border-radius: 50%;
background: conic-gradient(
from 180deg,
transparent 0%,
rgba(199, 205, 212, 0.15) 10%,
rgba(232, 234, 237, 0.65) 22%,
rgba(255, 255, 255, 0.95) 28%,
rgba(232, 234, 237, 0.65) 34%,
rgba(199, 205, 212, 0.20) 46%,
transparent 52%,
rgba(159, 228, 238, 0.20) 62%,
rgba(199, 147, 120, 0.55) 74%,
rgba(159, 228, 238, 0.30) 86%,
transparent 100%
);
-webkit-mask:
radial-gradient(circle,
transparent 47%,
black 48.5%,
black 51.5%,
transparent 53%
);
mask:
radial-gradient(circle,
transparent 47%,
black 48.5%,
black 51.5%,
transparent 53%
);
transform: rotateX(60deg) rotateZ(0deg);
animation: orbit-ultra-inner 14s linear infinite;
pointer-events: none;
z-index: 3;
filter: drop-shadow(0 0 14px rgba(199, 205, 212, 0.20));
}
/* ===== KEYFRAMES · spin distinto por anillo ===== */
@keyframes orbit-ultra-outer {
from { transform: rotateX(74deg) rotateZ(0deg); }
to { transform: rotateX(74deg) rotateZ(360deg); }
}
@keyframes orbit-ultra-middle {
from { transform: rotateX(68deg) rotateZ(0deg); }
to { transform: rotateX(68deg) rotateZ(360deg); }
}
@keyframes orbit-ultra-inner {
from { transform: rotateX(60deg) rotateZ(0deg); }
to { transform: rotateX(60deg) rotateZ(360deg); }
}
/* ============================================================
SATÉLITES · 3 cuerpos orbitando · Z-DEPTH REAL
Cada satélite pasa DELANTE y DETRÁS del logo · z-index dinámico
============================================================ */
.hero-mark .sat-outer,
.hero-mark .sat-middle,
.hero-mark .sat-inner {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
pointer-events: none;
will-change: transform, opacity;
}
/* Satélite EXTERNO · grande · copper-light · 32s ===== */
.hero-mark .sat-outer {
width: 12px;
height: 12px;
margin: -6px;
background: radial-gradient(circle at 35% 35%,
rgba(255, 255, 255, 0.95) 0%,
var(--yl-copper-light, #C9F2F7) 35%,
var(--yl-copper-rim, #9FE4EE) 70%,
transparent 100%
);
box-shadow:
0 0 14px rgba(199, 147, 120, 0.85),
0 0 28px rgba(159, 228, 238, 0.50),
0 0 56px rgba(159, 228, 238, 0.20);
animation: sat-orbit-ultra-outer 32s linear infinite;
}
/* Satélite MEDIO · mediano · silver-light · 22s reverse ===== */
.hero-mark .sat-middle {
width: 8px;
height: 8px;
margin: -4px;
background: radial-gradient(circle at 35% 35%,
rgba(255, 255, 255, 1) 0%,
var(--yl-silver-light, #E8EAED) 40%,
var(--yl-silver-mirror, #C7CDD4) 75%,
transparent 100%
);
box-shadow:
0 0 10px rgba(232, 234, 237, 0.95),
0 0 22px rgba(199, 205, 212, 0.55),
0 0 44px rgba(199, 205, 212, 0.20);
animation: sat-orbit-ultra-middle 22s linear infinite reverse;
}
/* Satélite INTERNO · chico brillante · copper-rim · 14s ===== */
.hero-mark .sat-inner {
width: 6px;
height: 6px;
margin: -3px;
background: radial-gradient(circle at 30% 30%,
rgba(255, 255, 255, 1) 0%,
var(--yl-copper-rim, #9FE4EE) 55%,
transparent 100%
);
box-shadow:
0 0 8px rgba(159, 228, 238, 1),
0 0 18px rgba(159, 228, 238, 0.65),
0 0 36px rgba(159, 228, 238, 0.25);
animation: sat-orbit-ultra-inner 14s linear infinite;
}
/* Keyframes orbitales · Z REAL · pasa delante (z+) y detrás (z-) ===== */
@keyframes sat-orbit-ultra-outer {
0% { transform: translate3d(290px, 0, 0) scale(1); opacity: 1; z-index: 6; }
24% { transform: translate3d(100px, -85px, 180px) scale(1.15); opacity: 1; z-index: 6; }
25% { transform: translate3d(80px, -85px, 180px) scale(1.18); opacity: 1; z-index: 6; }
49% { transform: translate3d(-260px, -50px, 60px) scale(1.05); opacity: 0.95; z-index: 6; }
50% { transform: translate3d(-290px, 0, -10px) scale(1); opacity: 0.65; z-index: 0; }
51% { transform: translate3d(-285px, 5px, -30px) scale(0.95); opacity: 0.55; z-index: 0; }
74% { transform: translate3d(-80px, 85px, -180px) scale(0.78); opacity: 0.40; z-index: 0; }
75% { transform: translate3d(-60px, 88px, -180px) scale(0.78); opacity: 0.45; z-index: 0; }
99% { transform: translate3d(280px, 12px, 10px) scale(0.95); opacity: 0.90; z-index: 6; }
100% { transform: translate3d(290px, 0, 0) scale(1); opacity: 1; z-index: 6; }
}
@keyframes sat-orbit-ultra-middle {
0% { transform: translate3d(235px, 0, 0) scale(1); opacity: 1; z-index: 6; }
25% { transform: translate3d(0, -100px, 150px) scale(1.20); opacity: 1; z-index: 6; }
50% { transform: translate3d(-235px, 0, -10px) scale(1); opacity: 0.55; z-index: 0; }
75% { transform: translate3d(0, 100px, -150px) scale(0.72); opacity: 0.35; z-index: 0; }
100% { transform: translate3d(235px, 0, 0) scale(1); opacity: 1; z-index: 6; }
}
@keyframes sat-orbit-ultra-inner {
0% { transform: translate3d(180px, 0, 0) scale(1); opacity: 1; z-index: 6; }
25% { transform: translate3d(0, -75px, 110px) scale(1.30); opacity: 1; z-index: 6; }
50% { transform: translate3d(-180px, 0, -10px) scale(1); opacity: 0.5; z-index: 0; }
75% { transform: translate3d(0, 75px, -110px) scale(0.68); opacity: 0.30; z-index: 0; }
100% { transform: translate3d(180px, 0, 0) scale(1); opacity: 1; z-index: 6; }
}
/* ============================================================
HALO · glow central · radial focused · breathing
============================================================ */
.hero-mark .halo {
position: absolute;
top: 50%;
left: 50%;
width: 460px;
height: 460px;
margin: -230px 0 0 -230px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(199, 205, 212, 0.20) 0%,
rgba(159, 228, 238, 0.14) 22%,
rgba(74, 82, 92, 0.08) 48%,
transparent 70%
);
filter: blur(44px);
animation: halo-ultra-breathe 9s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes halo-ultra-breathe {
0%, 100% { opacity: 0.80; transform: scale(1); }
50% { opacity: 1.00; transform: scale(1.08); }
}
/* ============================================================
ESTRELLAS · 5 LAYERS · cada layer con timing/delay distinto
Approach: 5 elementos absolute con box-shadow multi-stars
Cada layer rota su keyframe en distinto tempo · NO sincronizadas
============================================================ */
.hero-stars {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
/* LAYER 1 · MICRO stars · 1px · twinkle rápido · 2.4s ===== */
.hero-stars .star-layer-1 {
position: absolute;
top: 8%;
left: 6%;
width: 1px;
height: 1px;
background: var(--yl-silver-light, #E8EAED);
border-radius: 50%;
box-shadow:
72px 41px 0 rgba(232, 234, 237, 0.55),
181px 119px 0 rgba(199, 205, 212, 0.45),
287px 28px 0 rgba(232, 234, 237, 0.70),
412px 167px 0 rgba(199, 205, 212, 0.40),
523px 88px 0 rgba(232, 234, 237, 0.55),
645px 201px 0 rgba(199, 205, 212, 0.35),
778px 63px 0 rgba(232, 234, 237, 0.50),
891px 142px 0 rgba(199, 205, 212, 0.45),
1012px 33px 0 rgba(232, 234, 237, 0.60),
1133px 178px 0 rgba(199, 205, 212, 0.35),
1248px 95px 0 rgba(232, 234, 237, 0.55),
49px 273px 0 rgba(199, 205, 212, 0.40),
167px 312px 0 rgba(232, 234, 237, 0.50),
298px 245px 0 rgba(199, 205, 212, 0.45),
428px 358px 0 rgba(232, 234, 237, 0.55),
549px 287px 0 rgba(199, 205, 212, 0.40),
678px 332px 0 rgba(232, 234, 237, 0.50);
animation: twinkle-fast 2.4s ease-in-out infinite;
}
/* LAYER 2 · SMALL stars · 1.5px · twinkle medio · 3.6s + delay -1.2s ===== */
.hero-stars .star-layer-2 {
position: absolute;
top: 12%;
left: 11%;
width: 1.5px;
height: 1.5px;
background: rgba(232, 234, 237, 0.85);
border-radius: 50%;
box-shadow:
92px 23px 0 rgba(199, 147, 120, 0.55),
231px 81px 0 rgba(232, 234, 237, 0.70),
354px 142px 0 rgba(199, 205, 212, 0.55),
478px 38px 0 rgba(232, 234, 237, 0.65),
602px 195px 0 rgba(159, 228, 238, 0.45),
731px 71px 0 rgba(232, 234, 237, 0.70),
862px 156px 0 rgba(199, 205, 212, 0.50),
998px 49px 0 rgba(199, 147, 120, 0.50),
1124px 188px 0 rgba(232, 234, 237, 0.65),
1255px 81px 0 rgba(199, 205, 212, 0.55),
132px 304px 0 rgba(232, 234, 237, 0.55),
267px 263px 0 rgba(199, 147, 120, 0.45),
402px 348px 0 rgba(232, 234, 237, 0.60),
538px 298px 0 rgba(199, 205, 212, 0.50);
animation: twinkle-med 3.6s ease-in-out -1.2s infinite;
filter: drop-shadow(0 0 2px rgba(232, 234, 237, 0.3));
}
/* LAYER 3 · MEDIUM stars · 2px · twinkle lento + drift · 5s + delay -2.5s ===== */
.hero-stars .star-layer-3 {
position: absolute;
top: 18%;
left: 8%;
width: 2px;
height: 2px;
background: var(--yl-silver-light, #E8EAED);
border-radius: 50%;
box-shadow:
142px 67px 0 rgba(232, 234, 237, 0.85),
312px 119px 0 rgba(199, 147, 120, 0.65),
487px 41px 0 rgba(232, 234, 237, 0.75),
668px 178px 0 rgba(199, 205, 212, 0.60),
832px 92px 0 rgba(232, 234, 237, 0.80),
1012px 165px 0 rgba(199, 147, 120, 0.60),
1198px 53px 0 rgba(232, 234, 237, 0.75),
87px 273px 0 rgba(199, 205, 212, 0.65),
287px 332px 0 rgba(232, 234, 237, 0.70),
489px 281px 0 rgba(199, 147, 120, 0.55);
animation:
twinkle-slow 5s ease-in-out -2.5s infinite,
drift-soft 28s ease-in-out infinite alternate;
filter: drop-shadow(0 0 3px rgba(232, 234, 237, 0.45));
}
/* LAYER 4 · LARGE stars (rare) · 3px · long twinkle + drift opposite · 7s + delay -3.5s ===== */
.hero-stars .star-layer-4 {
position: absolute;
top: 22%;
left: 14%;
width: 3px;
height: 3px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
box-shadow:
232px 89px 0 rgba(199, 147, 120, 0.80),
498px 167px 0 rgba(232, 234, 237, 0.90),
784px 71px 0 rgba(199, 205, 212, 0.75),
1062px 132px 0 rgba(232, 234, 237, 0.85),
198px 298px 0 rgba(199, 147, 120, 0.70),
528px 348px 0 rgba(232, 234, 237, 0.80);
animation:
twinkle-big 7s ease-in-out -3.5s infinite,
drift-soft-rev 35s ease-in-out infinite alternate;
filter: drop-shadow(0 0 5px rgba(232, 234, 237, 0.6));
}
/* LAYER 5 · COPPER accent stars · pulse warm · 4.5s + delay -1.8s ===== */
.hero-stars .star-layer-5 {
position: absolute;
top: 30%;
left: 18%;
width: 1.5px;
height: 1.5px;
background: var(--yl-copper-light, #C9F2F7);
border-radius: 50%;
box-shadow:
178px 51px 0 rgba(199, 147, 120, 0.70),
412px 138px 0 rgba(159, 228, 238, 0.60),
689px 78px 0 rgba(199, 147, 120, 0.75),
932px 192px 0 rgba(159, 228, 238, 0.55),
1158px 41px 0 rgba(199, 147, 120, 0.65);
animation: pulse-copper 4.5s ease-in-out -1.8s infinite;
filter: drop-shadow(0 0 3px rgba(199, 147, 120, 0.55));
}
/* === KEYFRAMES de twinkle/drift/pulse - cada una distinta === */
@keyframes twinkle-fast {
0%, 100% { opacity: 0.40; }
35% { opacity: 0.95; }
60% { opacity: 0.30; }
80% { opacity: 0.85; }
}
@keyframes twinkle-med {
0%, 100% { opacity: 0.55; }
50% { opacity: 1.00; }
}
@keyframes twinkle-slow {
0%, 100% { opacity: 0.65; }
40% { opacity: 1.00; }
75% { opacity: 0.45; }
}
@keyframes twinkle-big {
0%, 100% { opacity: 0.70; transform: scale(1); }
50% { opacity: 1.00; transform: scale(1.25); }
}
@keyframes pulse-copper {
0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 3px rgba(199, 147, 120, 0.40)); }
50% { opacity: 1.00; filter: drop-shadow(0 0 6px rgba(199, 147, 120, 0.85)); }
}
@keyframes drift-soft {
0% { transform: translate(0, 0); }
50% { transform: translate(8px, -6px); }
100% { transform: translate(-5px, 4px); }
}
@keyframes drift-soft-rev {
0% { transform: translate(0, 0); }
50% { transform: translate(-7px, 5px); }
100% { transform: translate(6px, -4px); }
}
/* ============================================================
ESTRELLA FUGAZ · cada ~30s · diagonal con trail
============================================================ */
.hero-stars .shooting-star {
position: absolute;
top: 18%;
left: -10%;
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
box-shadow:
0 0 8px rgba(255, 255, 255, 0.9),
-3px 0 12px rgba(232, 234, 237, 0.85),
-8px 0 18px rgba(199, 205, 212, 0.65),
-16px 0 24px rgba(199, 147, 120, 0.45),
-28px 0 32px rgba(199, 147, 120, 0.25),
-42px 0 40px rgba(159, 228, 238, 0.12);
opacity: 0;
animation: shoot-diagonal 32s ease-in -8s infinite;
}
.hero-stars .shooting-star.delay-b {
top: 32%;
left: 105%;
box-shadow:
0 0 8px rgba(255, 255, 255, 0.9),
3px 0 12px rgba(232, 234, 237, 0.85),
8px 0 18px rgba(199, 205, 212, 0.65),
16px 0 24px rgba(199, 147, 120, 0.45),
28px 0 32px rgba(199, 147, 120, 0.25),
42px 0 40px rgba(159, 228, 238, 0.12);
animation: shoot-diagonal-rev 48s ease-in -22s infinite;
}
@keyframes shoot-diagonal {
0%, 92% { opacity: 0; transform: translate(0, 0); }
93% { opacity: 1; transform: translate(0, 0); }
98% { opacity: 1; transform: translate(1200px, 380px); }
100% { opacity: 0; transform: translate(1300px, 410px); }
}
@keyframes shoot-diagonal-rev {
0%, 88% { opacity: 0; transform: translate(0, 0); }
89% { opacity: 1; transform: translate(0, 0); }
96% { opacity: 1; transform: translate(-1100px, 320px); }
100% { opacity: 0; transform: translate(-1200px, 360px); }
}
/* ============================================================
MOBILE · escalas reducidas · todo proporcional
============================================================ */
@media (max-width: 720px) {
.hero-mark .orbit-ring-outer {
width: 340px; height: 340px;
margin: -170px 0 0 -170px;
}
.hero-mark .orbit-ring-middle {
width: 270px; height: 270px;
margin: -135px 0 0 -135px;
}
.hero-mark .orbit-ring-inner {
width: 210px; height: 210px;
margin: -105px 0 0 -105px;
}
.hero-mark .halo {
width: 280px; height: 280px;
margin: -140px 0 0 -140px;
}
@keyframes sat-orbit-ultra-outer {
0% { transform: translate3d(170px, 0, 0) scale(1); opacity: 1; z-index: 6; }
25% { transform: translate3d(0, -55px, 110px) scale(1.15); opacity: 1; z-index: 6; }
50% { transform: translate3d(-170px, 0, -10px) scale(1); opacity: 0.6; z-index: 0; }
75% { transform: translate3d(0, 55px, -110px) scale(0.75); opacity: 0.40; z-index: 0; }
100% { transform: translate3d(170px, 0, 0) scale(1); opacity: 1; z-index: 6; }
}
@keyframes sat-orbit-ultra-middle {
0% { transform: translate3d(135px, 0, 0) scale(1); opacity: 1; z-index: 6; }
25% { transform: translate3d(0, -60px, 90px) scale(1.20); opacity: 1; z-index: 6; }
50% { transform: translate3d(-135px, 0, -10px) scale(1); opacity: 0.55; z-index: 0; }
75% { transform: translate3d(0, 60px, -90px) scale(0.72); opacity: 0.35; z-index: 0; }
100% { transform: translate3d(135px, 0, 0) scale(1); opacity: 1; z-index: 6; }
}
@keyframes sat-orbit-ultra-inner {
0% { transform: translate3d(105px, 0, 0) scale(1); opacity: 1; z-index: 6; }
25% { transform: translate3d(0, -45px, 65px) scale(1.30); opacity: 1; z-index: 6; }
50% { transform: translate3d(-105px, 0, -10px) scale(1); opacity: 0.50; z-index: 0; }
75% { transform: translate3d(0, 45px, -65px) scale(0.68); opacity: 0.30; z-index: 0; }
100% { transform: translate3d(105px, 0, 0) scale(1); opacity: 1; z-index: 6; }
}
/* En mobile menos estrellas para no saturar */
.hero-stars .star-layer-4,
.hero-stars .star-layer-5 {
display: none;
}
.hero-stars .shooting-star.delay-b {
display: none;
}
}
/* ============================================================
REDUCED MOTION · todo quieto · sin spin · sin twinkle
============================================================ */
@media (prefers-reduced-motion: reduce) {
.hero-mark .orbit-ring-outer,
.hero-mark .orbit-ring-middle,
.hero-mark .orbit-ring-inner,
.hero-mark .sat-outer,
.hero-mark .sat-middle,
.hero-mark .sat-inner,
.hero-mark .halo,
.hero-stars .star-layer-1,
.hero-stars .star-layer-2,
.hero-stars .star-layer-3,
.hero-stars .star-layer-4,
.hero-stars .star-layer-5,
.hero-stars .shooting-star {
animation: none !important;
}
}
/* ============================================================
V7-3D-ULTRA-v3 · 2026-05-23 · Mejoras de feedback Nico
============================================================
- Luz volumétrica que CUBRE toda la hero (no solo arriba-izq)
- 3 rayos volumétricos cruzando · god rays más visibles
- Estrellas con cross-flare grande (3 estrellas dominantes)
- Logo respira (scale subtle 6s)
- Sheen scan recorre el logo cada 12s (escaner laser)
- Drift más visible en estrellas (rango duplicado)
============================================================ */
/* === LUZ VOLUMÉTRICA · 3 god-rays cubriendo toda la hero === */
.hero-env::before {
/* OVERRIDE · ahora sí mostramos pero como god-rays sutiles */
display: block !important;
content: '' !important;
position: absolute !important;
top: -10% !important;
left: -20% !important;
width: 140% !important;
height: 140% !important;
margin: 0 !important;
transform: none !important;
border-radius: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
background:
/* RAY 1 · arriba-izquierda · diagonal hacia abajo-derecha */
linear-gradient(135deg,
transparent 35%,
rgba(232, 234, 237, 0.10) 42%,
rgba(199, 205, 212, 0.15) 46%,
rgba(232, 234, 237, 0.10) 50%,
transparent 57%
),
/* RAY 2 · arriba-centro · vertical sutil */
linear-gradient(180deg,
transparent 0%,
rgba(199, 147, 120, 0.05) 30%,
transparent 60%
),
/* RAY 3 · arriba-derecha · diagonal hacia abajo-izquierda */
linear-gradient(225deg,
transparent 45%,
rgba(159, 228, 238, 0.06) 52%,
rgba(199, 147, 120, 0.10) 56%,
rgba(159, 228, 238, 0.06) 60%,
transparent 68%
);
filter: blur(8px);
animation: god-rays-shift 22s ease-in-out infinite alternate !important;
}
@keyframes god-rays-shift {
0% { transform: translateX(-2%) translateY(0%); opacity: 0.85; }
50% { transform: translateX(2%) translateY(-1%); opacity: 1; }
100% { transform: translateX(-1%) translateY(1%); opacity: 0.92; }
}
/* === ESTRELLAS · 3 DOMINANTES con cross-flare cinematográfico === */
.hero-stars .star-flare-1,
.hero-stars .star-flare-2,
.hero-stars .star-flare-3 {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
box-shadow:
0 0 8px rgba(255, 255, 255, 1),
0 0 16px rgba(232, 234, 237, 0.8),
0 0 32px rgba(199, 205, 212, 0.4);
pointer-events: none;
will-change: opacity, transform;
}
.hero-stars .star-flare-1::before,
.hero-stars .star-flare-1::after,
.hero-stars .star-flare-2::before,
.hero-stars .star-flare-2::after,
.hero-stars .star-flare-3::before,
.hero-stars .star-flare-3::after {
content: '';
position: absolute;
background: linear-gradient(currentColor, transparent);
pointer-events: none;
}
/* Cross-flare horizontal */
.hero-stars .star-flare-1::before,
.hero-stars .star-flare-2::before,
.hero-stars .star-flare-3::before {
top: 50%;
left: -32px;
width: 68px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
transform: translateY(-50%);
}
/* Cross-flare vertical */
.hero-stars .star-flare-1::after,
.hero-stars .star-flare-2::after,
.hero-stars .star-flare-3::after {
left: 50%;
top: -32px;
height: 68px;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7), transparent);
transform: translateX(-50%);
}
.hero-stars .star-flare-1 {
top: 14%; left: 22%;
animation: flare-pulse 5.5s ease-in-out infinite;
}
.hero-stars .star-flare-2 {
top: 28%; right: 18%;
animation: flare-pulse 7s ease-in-out -2.5s infinite;
}
.hero-stars .star-flare-3 {
top: 42%; left: 8%;
animation: flare-pulse 6s ease-in-out -1s infinite;
}
@keyframes flare-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
/* === LOGO RESPIRA · scale subtle 6s loop === */
.hero-mark .art {
animation: logo-breathe 6s ease-in-out infinite;
transform-origin: center center;
}
@keyframes logo-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.018); }
}
/* === SHEEN SCAN · línea de luz cruza el logo cada 12s === */
.hero-mark .art::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(125deg,
transparent 30%,
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 0.18) 50%,
rgba(232, 234, 237, 0.10) 53%,
transparent 65%
);
mix-blend-mode: overlay;
animation: sheen-scan 12s linear infinite;
z-index: 5;
}
@keyframes sheen-scan {
0% { transform: translateX(-120%) translateY(-50%) rotate(0deg); opacity: 0; }
8% { opacity: 0.65; }
16% { transform: translateX(120%) translateY(50%) rotate(0deg); opacity: 0; }
100% { transform: translateX(120%) translateY(50%) rotate(0deg); opacity: 0; }
}
/* === DRIFT MÁS VISIBLE en estrellas (rango duplicado) === */
@keyframes drift-soft {
0% { transform: translate(0, 0); }
33% { transform: translate(16px, -10px); }
66% { transform: translate(-8px, 6px); }
100% { transform: translate(-12px, 8px); }
}
@keyframes drift-soft-rev {
0% { transform: translate(0, 0); }
33% { transform: translate(-14px, 12px); }
66% { transform: translate(10px, -8px); }
100% { transform: translate(14px, -10px); }
}
/* === Reduced motion · todo quieto === */
@media (prefers-reduced-motion: reduce) {
.hero-env::before,
.hero-stars .star-flare-1,
.hero-stars .star-flare-2,
.hero-stars .star-flare-3,
.hero-mark .art,
.hero-mark .art::after {
animation: none !important;
}
}
/* ============================================================
PRICING TEASER INCLUDES v3 · 4 items con dot copper · centrado
============================================================ */
.pricing-teaser-includes {
list-style: none;
margin: 24px auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
max-width: 980px;
}
.pricing-teaser-includes li {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 500;
color: var(--yl-silver-mirror, #C7CDD4);
letter-spacing: 0.005em;
}
.pricing-teaser-includes li strong {
color: var(--yl-silver-light, #E8EAED);
font-weight: 700;
}
.pricing-teaser-includes .pti-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--yl-copper-rim, #9FE4EE);
box-shadow: 0 0 6px rgba(159, 228, 238, 0.55);
flex-shrink: 0;
}
@media (max-width: 720px) {
.pricing-teaser-includes {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 0 16px;
}
.pricing-teaser-includes li {
font-size: 13px;
}
}
/* ============================================================
LOOK v81 · HIELO CYAN + CROMO PLATA + ACENTO POR SECCIÓN
(2026-05-29 · Nico eligió Opción 12 "Hielo Cyan")
El copper ya fue swappeado a cyan. Acá: cromo en números,
CTA un toque más saturado, y tokens del sistema de acento.
============================================================ */
:root{
--yl-chrome: linear-gradient(135deg,#EAF0F6 0%,#AEB7C2 42%,#F4F7FA 52%,#9AA6B3 100%);
--yl-cta: #6FD8E8; /* CTA · cyan un toque más saturado que el acento */
}
/* Cromo plata en los NÚMEROS grandes · NO toca el ★ dorado (.stars-gold) */
.counter,
.hero-proof-stats strong:not(.stars-gold),
.biz-stat-num, .case-stat-num, .stat-num, .org-kpi-num,
.num-xl, .metric-num, .proof-num, .verify-num{
background: var(--yl-chrome);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
/* CTA principal · cyan saturado para que resalte sobre el oscuro */
.btn-primary{
background: var(--yl-cta) !important;
border-color: var(--yl-cta) !important;
color: #06131C !important;
box-shadow: 0 10px 30px rgba(111,216,232,.32) !important;
}
.btn-primary:hover{ background:#86E2EE !important; }
/* Glow ambiente que inyecta el script de acento-por-sección */
.sec-accent-glow{ position:absolute; inset:0; pointer-events:none; z-index:0; }