/* ==================================================================
VIVOOK · Landing styles
Estructura:
1. Tokens (variables)
2. Reset & base
3. Utilidades
4. Botones
5. Header
6. Hero
7. Stats
8. Features (Todo lo que necesitas)
9. Roles (Soluciones para cada rol)
10. Boost (Potencia tu administración)
11. Setup (Configuración en 24h)
12. Testimonials
13. Logos
14. CTA final
15. Footer
16. Responsive
================================================================== */
/* ---------- 1. Tokens ---------- */
:root {
/* Paleta oficial Vivook */
--blue: #07A1C2; /* Principal — webapp, links, brand */
--blue-dark: #058AA8; /* Hover de blue */
--red: #E44634; /* CTA, alertas */
--orange: #F2A23E; /* Avisos, pendientes */
--green: #65B03B; /* Éxito, confirmaciones */
--dark: #0A3D4F; /* Texto, encabezados */
--mid: #07697D; /* Fondos secundarios */
/* Neutrales para UI (no son de marca) */
--ink-700: #374151;
--ink-500: #6B7280;
--ink-400: #9CA3AF;
--ink-300: #D1D5DB;
--ink-200: #E5E7EB;
--ink-100: #F3F4F6;
--ink-50: #F9FAFB;
--white: #FFFFFF;
--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
--shadow-md: 0 4px 12px rgba(0,0,0,.08);
--shadow-lg: 0 12px 32px rgba(0,0,0,.10);
--shadow-xl: 0 24px 60px rgba(0,0,0,.18);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-xl: 28px;
--container: 1200px;
--gutter: 24px;
--font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
--font-display: "Geist", -apple-system, BlinkMacSystemFont, system-ui, "Inter", sans-serif;
}
/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
color: var(--dark);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }
/* Tipografía display para títulos grandes */
.hero__title,
.section-title,
.setup__title,
.cta-final__title,
.role-content__title {
font-family: var(--font-display);
letter-spacing: -0.03em;
}
/* ---------- 3. Utilidades ---------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.text-blue { color: var(--blue); }
.text-mid { color: var(--mid); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-red { color: var(--red); }
.text-dark { color: var(--dark); }
/* Scroll reveal — desactivado: el contenido se muestra de inmediato al cargar */
.reveal { opacity: 1; transform: none; }
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.section-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--dark);
}
.section-sub {
margin-top: 16px;
font-size: 17px;
color: var(--ink-500);
}
.pill {
display: inline-block;
padding: 6px 14px;
background: rgba(7, 105, 125, .12);
color: var(--mid);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
border-radius: 999px;
margin-bottom: 16px;
}
/* ---------- 4. Botones ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
white-space: nowrap;
}
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--primary {
background: var(--blue);
color: #fff;
box-shadow: 0 6px 18px rgba(7, 161, 194, .35);
}
.btn--primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
/* En la sección de CTA final el botón primario es verde */
.cta-final__panel .btn--primary,
.features-cta__panel .btn--primary {
background: var(--green);
box-shadow: 0 6px 18px rgba(101, 176, 59, .4);
}
.cta-final__panel .btn--primary:hover,
.features-cta__panel .btn--primary:hover { background: #4F9128; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--ghost {
background: rgba(255,255,255,.14);
color: #fff;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.3);
}
.btn--ghost:hover { background: rgba(255,255,255,.22); }
.btn--outline {
background: transparent;
color: var(--ink-700);
border: 1px solid var(--ink-300);
}
.btn--outline:hover { background: var(--ink-100); }
.btn--white {
background: #fff;
color: var(--dark);
}
.btn--white:hover { background: var(--ink-100); }
.btn__arrow { font-size: 18px; line-height: 1; }
/* ---------- 5. Header (sticky) ---------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 18px 0;
transition: background .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled {
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 4px 24px rgba(10, 61, 79, .08);
padding: 12px 0;
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
position: relative;
display: inline-block;
transition: opacity .2s ease;
}
.logo:hover { opacity: .85; }
.logo__img {
display: block;
width: auto;
transition: opacity .3s ease, height .3s ease;
}
.logo__img--light { height: 80px; }
/* La versión "dark" se superpone sobre la "light" para crossfade,
y mantiene su tamaño en ambos estados */
.logo__img--dark {
position: absolute;
top: 0;
left: 0;
height: 56px;
opacity: 0;
}
.site-header.is-scrolled .logo__img--light {
opacity: 0;
height: 56px; /* compacta el contenedor para que coincida con la dark */
}
.site-header.is-scrolled .logo__img--dark { opacity: 1; }
/* Nav con pill hover */
.nav {
display: flex;
gap: 4px;
background: rgba(255, 255, 255, .92);
padding: 6px 8px;
border-radius: 999px;
box-shadow: var(--shadow-md);
transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled .nav {
background: transparent;
box-shadow: none;
}
.nav a {
position: relative;
font-size: 14px;
font-weight: 500;
color: var(--ink-700);
padding: 8px 16px;
border-radius: 999px;
transition: background .2s ease, color .2s ease;
}
.nav a:hover {
background: rgba(10, 61, 79, .08);
color: var(--dark);
}
.site-header.is-scrolled .nav a:hover {
background: rgba(7, 161, 194, .08);
color: var(--blue);
}
/* Items con dropdown */
.nav-item {
position: relative;
display: inline-flex;
}
.nav-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
}
.nav-caret {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
fill: none;
transition: transform .25s ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret {
transform: rotate(180deg);
}
/* Panel del dropdown */
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: -8px;
min-width: 240px;
padding: 8px;
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 48px -12px rgba(10, 61, 79, .18), 0 0 0 1px rgba(10, 61, 79, .04);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .22s ease, transform .22s ease, visibility .22s;
z-index: 60;
}
/* Bridge invisible para que el hover no se rompa al cruzar el gap entre trigger y panel */
.nav-dropdown::before {
content: "";
position: absolute;
top: -10px; left: 0; right: 0;
height: 10px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
display: block;
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--ink-700);
background: transparent;
white-space: nowrap;
}
.nav-dropdown a:hover {
background: rgba(7, 161, 194, .08);
color: var(--blue);
}
/* ---------- 6. Hero ---------- */
.hero {
position: relative;
min-height: 640px;
padding: 140px 0 80px;
overflow: hidden;
color: #fff;
}
.hero__bg {
position: absolute; inset: 0;
background:
url("assets/hero-bg.jpg") center/cover no-repeat,
#1f3b2e;
}
.hero__overlay {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: 580px; }
/* Mockup del producto a la derecha (anclado al container) */
.hero__mockup {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 54%;
max-width: 720px;
z-index: 2;
pointer-events: none;
}
.hero__mockup-img {
width: 100%;
height: auto;
display: block;
}
.hero__mockup-badge {
position: absolute;
left: -50px;
bottom: 50px;
background: #fff;
color: var(--dark);
padding: 14px 18px;
border-radius: 14px;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
transform: rotate(-3deg);
animation: hero-badge-float 3s ease-in-out infinite;
}
.hero__mockup-badge strong {
display: block;
font-weight: 700;
font-size: 13px;
line-height: 1.2;
}
.hero__mockup-badge-sub {
display: block;
font-size: 11px;
color: var(--ink-500);
margin-top: 2px;
}
.hero__mockup-badge-icon {
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--green);
color: #fff;
font-weight: 800;
flex-shrink: 0;
}
@keyframes hero-badge-float {
0%, 100% { transform: rotate(-3deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-6px); }
}
/* ============== HOME HERO LIGHT (split, phone + burbujas) ============== */
.home-hero {
position: relative;
overflow: hidden;
padding: 120px 0 80px;
color: var(--dark);
isolation: isolate;
background:
radial-gradient(40% 50% at 100% 0%, rgba(7, 161, 194, .08) 0%, transparent 60%),
radial-gradient(35% 45% at 0% 100%, rgba(242, 162, 62, .06) 0%, transparent 60%),
#fafbfc;
}
.home-hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: stretch;
text-align: left;
max-width: 1300px;
margin-inline: auto;
padding-inline: 32px;
}
/* Hero content sin cuadro: layout limpio sobre el fondo de la sección */
.home-hero__content {
color: var(--dark);
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
/* CTAs · primario dark navy + secundario ghost gris */
.home-hero__content .btn--primary {
background: var(--dark);
color: #fff;
border: 1px solid var(--dark);
}
.home-hero__content .btn--primary:hover {
background: #08293a;
border-color: #08293a;
}
.home-hero__content .btn--outline {
background: transparent;
color: var(--dark);
border: 1px solid var(--ink-200);
}
.home-hero__content .btn--outline:hover {
background: var(--ink-50);
border-color: var(--ink-400);
}
/* Phone mockup + ventana detrás (estilo Stripe, con parallax) */
.home-hero__visual {
position: relative;
display: block;
min-height: 460px;
perspective: 1400px;
}
/* Wrap del phone — JS le mueve transform para parallax */
.home-hero__phone-wrap {
position: absolute;
left: 0;
bottom: 4%;
width: 100%;
max-width: 380px;
z-index: 2;
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
will-change: transform;
}
.home-hero__phone {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 30px 50px rgba(10, 61, 79, .22));
animation: phone-breath 5s ease-in-out infinite;
will-change: transform;
}
@keyframes phone-breath {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Wrap de la ventana — anchor clickeable, JS le mueve transform para parallax */
.home-hero__window-wrap {
position: absolute;
top: 0;
right: 0;
width: 100%;
max-width: 440px;
z-index: 1;
transition: transform .4s ease;
will-change: transform;
cursor: pointer;
text-decoration: none;
display: block;
}
/* En desktop ancho (1440+), el browser hace bleed hacia la derecha */
@media (min-width: 1440px) {
.home-hero__window-wrap { right: -18%; max-width: 480px; }
}
.home-hero__window {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 70px -16px rgba(10, 61, 79, .25), 0 0 0 1px rgba(10, 61, 79, .05);
background: #fff;
opacity: .9;
transform: rotateY(-6deg) rotateX(2deg);
transform-origin: center;
transition: opacity .3s ease, box-shadow .3s ease;
}
.home-hero__window-wrap:hover .home-hero__window {
opacity: 1;
box-shadow: 0 40px 90px -16px rgba(10, 61, 79, .35), 0 0 0 1px rgba(7, 161, 194, .25);
}
@media (prefers-reduced-motion: reduce) {
.home-hero__phone { animation: none; }
.home-hero__phone-wrap,
.home-hero__window-wrap { transition: none; }
}
.home-hero__window .browser-frame__body img {
width: 100%;
height: auto;
display: block;
}
.hero-bubble {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 9px;
border-radius: 999px;
color: var(--dark);
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
letter-spacing: -.005em;
z-index: 3;
cursor: pointer;
text-decoration: none;
/* Glass effect */
background: rgba(255, 255, 255, .72);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, .85);
box-shadow:
0 1px 0 rgba(255, 255, 255, .9) inset,
0 8px 24px -8px rgba(10, 51, 71, .18),
0 18px 48px -16px rgba(10, 51, 71, .12);
will-change: transform, opacity;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, background .25s ease;
animation: hero-bubble-float 5.5s ease-in-out infinite;
}
.hero-bubble:hover {
animation-play-state: paused;
transform: translateY(-3px) scale(1.04);
background: rgba(255, 255, 255, .92);
box-shadow:
0 1px 0 rgba(255, 255, 255, .9) inset,
0 12px 32px -8px var(--bubble-glow, rgba(10, 51, 71, .25)),
0 28px 64px -16px rgba(10, 51, 71, .18);
z-index: 4;
}
/* Icono dentro del bubble: cápsula coloreada según producto */
.hero-bubble__icon {
width: 26px;
height: 26px;
padding: 6px;
border-radius: 999px;
flex-shrink: 0;
color: #fff;
background: var(--bubble-color, var(--blue));
box-shadow: 0 4px 10px -2px var(--bubble-glow, rgba(7, 161, 194, .35));
}
/* Posiciones · cada bubble entra con un delay diferente para no flotar todas igual */
.hero-bubble--1 {
top: 20%; left: 36%;
--bubble-color: var(--blue);
--bubble-glow: rgba(7, 161, 194, .35);
animation-delay: 0s;
}
.hero-bubble--2 {
top: 34%; left: 46%;
--bubble-color: var(--orange);
--bubble-glow: rgba(242, 162, 62, .35);
animation-delay: -1.1s;
}
.hero-bubble--3 {
top: 50%; left: 50%;
--bubble-color: var(--red);
--bubble-glow: rgba(228, 70, 52, .35);
animation-delay: -2.2s;
}
.hero-bubble--4 {
top: 66%; left: 44%;
--bubble-color: var(--green);
--bubble-glow: rgba(101, 176, 59, .35);
animation-delay: -3.3s;
}
.hero-bubble--5 {
bottom: 4%; left: 34%;
--bubble-color: var(--mid);
--bubble-glow: rgba(7, 105, 125, .35);
animation-delay: -4.4s;
}
/* Float gentle — micromotion sutil, no rotación dramática */
@keyframes hero-bubble-float {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-6px) translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bubble { animation: none; }
}
@media (max-width: 900px) {
.home-hero { padding: 120px 0 60px; }
.home-hero__inner {
grid-template-columns: 1fr;
gap: 0;
padding-inline: 20px;
}
.home-hero__content {
max-width: 100%;
text-align: left;
padding: 0;
}
.home-hero__actions {
justify-content: stretch;
flex-direction: column;
gap: 12px;
}
.home-hero__content .btn {
width: 100%;
justify-content: center;
}
/* Ocultar phone + browser-frame + bubbles en celular: solo se ve el texto */
.home-hero__visual { display: none; }
}
/* Capa sutil de "noise" para evitar banding del blur */
.home-hero__noise {
position: absolute;
inset: 0;
z-index: 0;
background-image:
radial-gradient(ellipse at center, rgba(255,255,255,.04) 0%, transparent 60%),
linear-gradient(180deg, rgba(10,20,34,.0) 0%, rgba(10,20,34,.6) 100%);
pointer-events: none;
}
/* Pill */
.home-hero__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px 6px 6px;
border-radius: 999px;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(10, 61, 79, .12);
backdrop-filter: blur(10px);
color: var(--dark);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background .2s ease, transform .2s ease, border-color .2s ease;
margin-bottom: 28px;
align-self: flex-start;
max-width: 100%;
}
.home-hero__pill:hover {
background: #fff;
border-color: rgba(10, 61, 79, .25);
transform: translateY(-1px);
}
.home-hero__pill-star { color: var(--orange); font-size: 14px; line-height: 1; }
.home-hero__pill-tag {
background: var(--orange);
color: #fff;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 3px 9px;
border-radius: 999px;
flex-shrink: 0;
}
.home-hero__pill-arrow { color: var(--ink-500); font-size: 16px; line-height: 1; margin-left: 2px; flex-shrink: 0; }
/* Pill ticker — texto que cicla entre noticias */
.home-hero__pill-ticker {
position: relative;
display: inline-block;
height: 1.4em;
overflow: hidden;
min-width: 240px;
flex: 1;
}
.home-hero__pill-item {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
opacity: 0;
transform: translateX(60%);
animation: pill-ticker-cycle 21s ease-in-out infinite;
}
.home-hero__pill-item:nth-child(1) { animation-delay: 0s; }
.home-hero__pill-item:nth-child(2) { animation-delay: -7s; }
.home-hero__pill-item:nth-child(3) { animation-delay: -14s; }
@keyframes pill-ticker-cycle {
0% { opacity: 0; transform: translateX(60%); }
4% { opacity: 1; transform: translateX(0); }
29% { opacity: 1; transform: translateX(0); }
33% { opacity: 0; transform: translateX(-60%); }
100% { opacity: 0; transform: translateX(-60%); }
}
@media (prefers-reduced-motion: reduce) {
.home-hero__pill-item { animation: none; opacity: 1; transform: none; position: static; }
.home-hero__pill-item:nth-child(n+2) { display: none; }
}
/* Title — weights variables para crear ritmo visual */
.home-hero__title {
font-family: Geist, system-ui, sans-serif;
font-size: clamp(40px, 5.4vw, 68px);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--dark);
margin: 0 0 24px;
text-align: left;
}
.home-hero__title-1 { font-weight: 700; }
.home-hero__title-2 { font-weight: 800; }
.home-hero__title-mark { font-weight: 800; }
.home-hero__title-highlight {
position: relative;
display: inline-block;
font-weight: 900;
z-index: 0;
}
.home-hero__title-highlight::after {
content: "";
position: absolute;
left: -4px;
right: -4px;
bottom: 0.06em;
height: 0.34em;
background: linear-gradient(90deg, rgba(242, 162, 62, .55), rgba(228, 70, 52, .55));
border-radius: 4px;
z-index: -1;
transform: scaleX(0);
transform-origin: left center;
animation: title-highlight 1.1s 0.7s cubic-bezier(.7, 0, .3, 1) forwards;
}
@keyframes title-highlight {
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.home-hero__title-highlight::after { animation: none; transform: scaleX(1); }
}
.home-hero__title-mark {
color: var(--blue);
}
/* Sub */
.home-hero__sub {
font-size: clamp(16px, 1.25vw, 18.5px);
line-height: 1.55;
color: var(--ink-500);
margin: 0 0 32px;
max-width: 520px;
font-weight: 400;
}
/* CTA row */
.home-hero__actions {
display: flex;
gap: 12px;
justify-content: flex-start;
flex-wrap: wrap;
}
/* Live counter — "X condominios usando Vivook ahora mismo" */
.home-hero__live {
display: flex;
align-items: center;
gap: 10px;
margin: 28px 0 0;
font-size: 13px;
color: rgba(255, 255, 255, .82);
font-weight: 500;
}
.home-hero__live strong { font-weight: 800; color: #fff; }
.home-hero__live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #65B03B;
position: relative;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(101, 176, 59, .25);
animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(101, 176, 59, .25); }
50% { box-shadow: 0 0 0 8px rgba(101, 176, 59, .12); }
}
@media (prefers-reduced-motion: reduce) {
.home-hero__live-dot { animation: none; }
}
.btn--outline-light {
background: rgba(255, 255, 255, .08);
color: #fff;
border: 1px solid rgba(255, 255, 255, .18);
backdrop-filter: blur(10px);
}
.btn--outline-light:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .3);
}
/* Stats cards */
.home-hero__stats {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
max-width: 760px;
margin-inline: auto;
}
.home-hero__stat {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 18px;
padding: 22px 18px;
backdrop-filter: blur(8px);
text-align: center;
}
.home-hero__stat-num {
font-family: Geist, sans-serif;
font-size: 36px;
font-weight: 800;
line-height: 1;
margin-bottom: 6px;
}
.home-hero__stat-label {
font-size: 13px;
color: rgba(255, 255, 255, .65);
}
.home-hero__stat--orange .home-hero__stat-num { color: var(--orange); }
.home-hero__stat--blue .home-hero__stat-num { color: var(--blue); }
.home-hero__stat--green .home-hero__stat-num { color: var(--green); }
/* Trust row + logos */
.home-hero__trust {
margin: 56px 0 18px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255, 255, 255, .45);
}
.home-hero__logos {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 80px;
}
.home-hero__logos img {
height: 40px;
width: auto;
object-fit: contain;
opacity: .7;
transition: opacity .2s ease;
}
.home-hero__logos img:hover { opacity: 1; }
/* Mockup floating below */
.home-hero__mockup {
margin-top: 16px;
max-width: 1100px;
margin-inline: auto;
pointer-events: none;
}
.home-hero__mockup img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .55);
}
/* Responsive */
@media (max-width: 960px) {
.home-hero { padding: 130px 0 80px; }
.home-hero__title { font-size: clamp(36px, 8vw, 52px); }
.home-hero__glow { filter: blur(60px); opacity: .35; }
.home-hero__logos { gap: 24px; }
.home-hero__logos img { height: 28px; }
}
@media (max-width: 640px) {
.home-hero__stats { grid-template-columns: 1fr; }
.home-hero__stat { padding: 18px; }
}
/* ============== HERO FORM (landing.html) ============== */
.hero-form {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 46%;
max-width: 440px;
z-index: 3;
background: #fff;
border-radius: 20px;
padding: 28px 28px 24px;
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .45);
color: var(--ink-700);
display: grid;
gap: 12px;
}
.hero-form__head { margin-bottom: 4px; }
.hero-form__title {
font-family: Geist, sans-serif;
font-size: 24px;
font-weight: 800;
color: var(--dark);
margin: 0 0 6px;
line-height: 1.2;
}
.hero-form__sub {
font-size: 14px;
color: var(--ink-500);
margin: 0;
}
.hero-form__field { display: grid; gap: 6px; }
.hero-form__field label {
font-size: 13px;
font-weight: 600;
color: var(--ink-700);
}
.hero-form__field input {
padding: 10px 14px;
border: 1px solid var(--ink-200);
border-radius: 10px;
font: inherit;
font-size: 14px;
background: #fff;
color: var(--ink-700);
transition: border-color .2s ease, box-shadow .2s ease;
}
.hero-form__field input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(7, 161, 194, .15);
}
.hero-form__field input::placeholder { color: var(--ink-300); }
.hero-form__submit {
margin-top: 4px;
width: 100%;
justify-content: center;
}
.hero-form__legal {
font-size: 12px;
color: var(--ink-500);
text-align: center;
margin: 4px 0 0;
}
@media (max-width: 960px) {
.hero-form {
position: static;
transform: none;
width: 100%;
max-width: 480px;
margin: 32px auto 0;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__mockup-badge { animation: none; }
}
@media (max-width: 980px) {
.hero__mockup { display: none; }
.hero__content { max-width: 760px; }
}
/* En celular el hero va centrado para no quedar bajo el sticky-cta */
@media (max-width: 640px) {
.hero__content { text-align: center; margin: 0 auto; }
.hero__actions,
.hero__bullets,
.hero__stores { justify-content: center; }
}
.hero__title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
margin-bottom: 32px;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 18px;
}
.hero__bullets {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 13px;
color: rgba(255,255,255,.85);
margin-bottom: 28px;
}
.hero__stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badge {
display: inline-block;
line-height: 0;
transition: transform .2s ease, opacity .2s ease;
}
.store-badge:hover {
transform: translateY(-2px);
opacity: .9;
}
.store-badge img {
display: block;
height: 40px;
width: auto;
}
/* ---------- 7. Stats ---------- */
.stats {
padding: 72px 0 96px;
background: #fff;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: 1200px;
margin-inline: auto;
padding-inline: 32px;
}
.stat {
position: relative;
padding: 8px 32px;
text-align: center;
background: transparent;
border: 0;
transition: transform .25s ease;
}
/* Divider vertical sutil entre stats (excepto el último) */
.stat:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: var(--ink-100);
}
.stat:hover { transform: translateY(-2px); }
/* Paleta reducida: 3000+ destaca en azul (KPI principal), resto en dark navy */
.stat:nth-child(1) { color: var(--blue); }
.stat:nth-child(2),
.stat:nth-child(3),
.stat:nth-child(4) { color: var(--dark); }
.stat__num {
font-family: Geist, sans-serif;
font-size: clamp(48px, 5.5vw, 72px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: .95;
margin-bottom: 10px;
color: inherit;
}
.stat__label {
color: var(--ink-500);
font-size: 12.5px;
font-weight: 500;
letter-spacing: .01em;
line-height: 1.4;
}
/* ---------- 8. Features ---------- */
.features { padding: 96px 0; background: var(--ink-50); position: relative; }
.features .container { position: relative; z-index: 1; }
.features__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
position: relative;
background: #fff;
padding: 32px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid transparent;
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 18px;
row-gap: 0;
align-items: start;
}
.feature-card:hover {
transform: translateY(-6px);
border-color: var(--blue);
box-shadow: 0 24px 48px -16px rgba(7, 161, 194, .28);
}
.feature-card:active {
transform: translateY(-3px) scale(.99);
transition-duration: .1s;
}
/* "Stretched link" — el link "Ver más" hace toda la card clickeable */
.feature-card__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 1;
}
.feature-card__icon {
width: 56px; height: 56px;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.feature-card:hover .feature-card__icon {
transform: scale(1.1) rotate(-6deg);
}
.feature-card__icon img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.feature-card__title {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
color: var(--dark);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.feature-card__desc {
color: var(--ink-500);
margin: 16px 0 20px;
font-size: 15px;
grid-column: 1 / -1;
grid-row: 2;
}
.feature-card__list { grid-column: 1 / -1; }
.feature-card__link { grid-column: 1 / -1; }
.feature-card__list li {
position: relative;
padding: 8px 0 8px 24px;
font-size: 14px;
color: var(--ink-700);
border-top: 1px solid var(--ink-100);
}
.feature-card__list li:first-child { border-top: 0; }
.feature-card__list li::before {
content: "✓";
position: absolute;
left: 0; top: 8px;
color: var(--green);
font-weight: 700;
}
.feature-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 14px;
font-weight: 600;
color: var(--blue);
transition: color .2s ease;
}
.feature-card__link:hover { color: var(--blue-dark); }
.feature-card__arrow {
display: inline-block;
transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.feature-card:hover .feature-card__arrow,
.feature-card__link:hover .feature-card__arrow {
transform: translateX(4px);
}
/* ---------- 9. Roles (tabs + contenido split) ---------- */
.roles { padding: 96px 0; background: #fff; }
/* Tabs */
.role-tabs-wrap {
display: flex;
justify-content: center;
margin-bottom: 56px;
}
.role-tabs {
display: inline-flex;
gap: 4px;
padding: 6px;
background: var(--ink-100);
border-radius: 999px;
flex-wrap: wrap;
justify-content: center;
}
.role-tab {
padding: 11px 22px;
border: 0;
background: transparent;
border-radius: 999px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--ink-500);
cursor: pointer;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
white-space: nowrap;
}
.role-tab:hover { color: var(--ink-700); }
.role-tab.is-active {
background: #fff;
color: var(--dark);
box-shadow: var(--shadow-sm);
}
/* Contenido del tab */
.role-content {
display: none;
grid-template-columns: 1fr 1.05fr;
gap: 56px;
align-items: center;
}
.role-content.is-active { display: grid; }
.role-content__title {
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 16px 0 12px;
color: var(--dark);
}
.role-content__desc {
color: var(--ink-500);
font-size: 16px;
line-height: 1.65;
margin-bottom: 28px;
}
/* Badge superior */
.badge {
display: inline-block;
padding: 6px 14px;
background: rgba(7, 161, 194, .12);
color: var(--blue);
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
border-radius: 999px;
}
/* Lista de features */
.role-feats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
margin-bottom: 32px;
}
.role-feat {
display: flex;
align-items: center;
gap: 14px;
font-size: 14px;
line-height: 1.4;
color: var(--ink-700);
}
.role-feat__icon {
width: 38px; height: 38px;
flex: 0 0 38px;
border-radius: 10px;
display: grid;
place-items: center;
}
.role-feat__icon svg { width: 18px; height: 18px; }
.role-feat__icon--blue { background: rgba(7, 161, 194, .12); color: var(--blue); }
.role-feat__icon--green { background: rgba(101, 176, 59, .12); color: var(--green); }
.role-feat__icon--orange { background: rgba(242, 162, 62, .12); color: var(--orange); }
.role-feat__icon--red { background: rgba(228, 70, 52, .12); color: var(--red); }
.role-content__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Imagen */
.role-content__image {
background: var(--ink-50);
border-radius: var(--radius-lg);
padding: 32px;
display: grid;
place-items: center;
min-height: 360px;
overflow: hidden;
}
.role-content__image img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
/* ---------- 10. Boost ---------- */
.boost { padding: 96px 0; background: var(--ink-50); }
.boost__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 920px;
margin: 0 auto;
}
.boost-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
padding: 24px;
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid transparent;
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
overflow: hidden;
}
.boost-card:hover {
transform: translateY(-6px);
border-color: var(--blue);
box-shadow: 0 24px 48px -16px rgba(7, 161, 194, .28);
}
.boost-card:active {
transform: translateY(-3px) scale(.99);
transition-duration: .1s;
}
/* "Stretched link" — el link "Ver más" hace toda la card clickeable */
.boost-card__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 1;
}
.boost-card__img {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
background: var(--ink-50);
}
.boost-card:hover .boost-card__img {
transform: scale(1.04);
}
.boost-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Marcos coloreados (solo el background del contenedor) */
.boost-card__img--1 { background: linear-gradient(135deg, rgba(7, 161, 194, .15), rgba(7, 105, 125, .25)); }
.boost-card__img--2 { background: linear-gradient(135deg, rgba(242, 162, 62, .15), rgba(228, 70, 52, .20)); }
.boost-card__img--3 { background: linear-gradient(135deg, rgba(101, 176, 59, .15), rgba(10, 61, 79, .20)); }
.boost-card__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--dark); }
.boost-card__desc { font-size: 13.5px; color: var(--ink-500); margin-bottom: 16px; }
.boost-card__note { display: block; font-size: 11.5px; color: var(--ink-400); margin: -8px 0 16px; }
.boost-card__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: auto;
font-size: 13.5px;
font-weight: 600;
color: var(--blue);
transition: color .2s ease;
}
.boost-card__link:hover { color: var(--blue-dark); }
.boost-card__arrow {
display: inline-block;
transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.boost-card:hover .boost-card__arrow,
.boost-card__link:hover .boost-card__arrow {
transform: translateX(4px);
}
/* ---------- 11. Setup ---------- */
.setup { padding: 64px 0 96px; background: var(--ink-50); }
.setup__panel {
background: #fff;
border-radius: var(--radius-lg);
padding: 48px;
box-shadow: var(--shadow-md);
max-width: 1080px;
margin: 0 auto;
}
.setup__head { text-align: center; margin-bottom: 40px; }
.setup__title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
line-height: 1.25;
color: var(--dark);
}
.setup__sub { color: var(--ink-500); margin-top: 8px; font-size: 15px; }
.setup__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.setup__steps--3 {
grid-template-columns: repeat(3, 1fr);
max-width: 780px;
margin: 0 auto;
}
.setup-step {
padding: 22px;
border-radius: var(--radius-md);
background: var(--ink-50);
display: flex;
flex-direction: column;
}
.setup-step--1 { background: #EEF2FF; }
.setup-step--2 { background: #ECFDF5; }
.setup-step--3 { background: #FFF7ED; }
.setup-step--4 { background: #FEF2F2; }
.setup-step__num {
font-size: 24px;
font-weight: 800;
margin-bottom: 12px;
}
.setup-step--1 .setup-step__num { color: var(--blue); }
.setup-step--2 .setup-step__num { color: var(--green); }
.setup-step--3 .setup-step__num { color: var(--orange); }
.setup-step--4 .setup-step__num { color: var(--red); }
.setup-step__name { font-weight: 700; color: var(--dark); margin-bottom: 6px; font-size: 15px; }
.setup-step__desc { font-size: 13px; color: var(--ink-500); }
/* ---------- 12. Testimonials ---------- */
.testimonials { padding: 96px 0; background: var(--ink-100); }
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial {
background: #fff;
padding: 28px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
border: 1px solid transparent;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
display: flex;
flex-direction: column;
}
.testimonial:hover {
transform: translateY(-4px);
border-color: var(--blue);
box-shadow: 0 20px 40px -16px rgba(7, 161, 194, .22);
}
.testimonial:active {
transform: translateY(-2px) scale(.99);
transition-duration: .1s;
}
.testimonial__stars { color: var(--orange); font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial__quote {
font-size: 14.5px;
color: var(--ink-700);
line-height: 1.6;
margin-bottom: 22px;
}
.testimonial__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto; /* empuja el autor al fondo de la card, sin importar el largo del quote */
position: relative; /* anclaje para el tooltip del rol truncado */
}
.testimonial__avatar {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
display: block;
flex-shrink: 0;
background: var(--ink-100); /* fondo de carga mientras la imagen aparece */
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.testimonial:hover .testimonial__avatar {
transform: scale(1.1) rotate(-6deg);
}
.testimonial__name { font-weight: 700; font-size: 14px; color: var(--dark); }
.testimonial__role {
font-size: 12px;
color: var(--ink-500);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.testimonial__role.is-truncated { cursor: help; }
/* Tooltip flotante: anclado al .testimonial__author (que NO tiene overflow:hidden) */
.testimonial__author:has(.testimonial__role.is-truncated)::after {
content: attr(data-role-full);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 10px 14px;
background: var(--dark);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0;
border-radius: 8px;
box-shadow: 0 12px 28px -8px rgba(10, 61, 79, .35);
white-space: normal;
width: max-content;
max-width: 260px;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 10;
}
.testimonial__author:has(.testimonial__role.is-truncated)::before {
content: "";
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--dark);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 10;
}
.testimonial__author:has(.testimonial__role.is-truncated):hover::after,
.testimonial__author:has(.testimonial__role.is-truncated):hover::before,
.testimonial__role.is-truncated:focus-visible ~ * ~ ::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Fallback: si el browser no soporta :has(), aún se ve nativo con title */
/* ---------- 13. Logos (carrusel infinito) ---------- */
.logos { padding: 72px 0; background: #fff; }
.logos__head { text-align: center; color: var(--ink-500); font-size: 13px; margin-bottom: 28px; letter-spacing: .08em; text-transform: uppercase; }
.logos-marquee {
overflow: hidden;
position: relative;
/* Fade en los bordes laterales */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logos-marquee__track {
display: flex;
align-items: center;
width: max-content;
gap: 72px;
padding: 12px 36px;
animation: logos-scroll 60s linear infinite;
}
.logos-marquee:hover .logos-marquee__track { animation-play-state: paused; }
.logos-marquee__item {
flex: 0 0 auto;
display: grid;
place-items: center;
height: 72px;
}
.logos-marquee__item img {
max-height: 44px;
width: auto;
max-width: 120px;
object-fit: contain;
opacity: .85;
filter: grayscale(1);
transition: opacity .2s ease, transform .2s ease, filter .25s ease;
}
.logos-marquee__item img:hover { opacity: 1; filter: grayscale(0); transform: scale(1.08); }
@keyframes logos-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logos-marquee__track { animation: none; }
}
.logos__cta { text-align: center; margin-top: 32px; }
/* ---------- 14. CTA final ---------- */
.cta-final { padding: 96px 0; background: #fff; }
.cta-final__panel {
background:
linear-gradient(135deg, rgba(7, 161, 194, .78) 0%, rgba(7, 105, 125, .82) 55%, rgba(10, 61, 79, .9) 100%),
url("assets/edificios.jpg") center/cover no-repeat;
color: #fff;
text-shadow: 0 1px 18px rgba(10, 61, 79, .5);
border-radius: var(--radius-xl);
padding: 64px 48px;
text-align: center;
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
.cta-final__panel .btn { text-shadow: none; }
.cta-final__panel::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 40%);
pointer-events: none;
}
.cta-final__title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 14px;
position: relative;
}
.cta-final__sub {
font-size: 16px;
opacity: .9;
margin-bottom: 40px;
position: relative;
}
.cta-final__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 760px;
margin: 0 auto 40px;
position: relative;
}
.cta-stat {
background: rgba(255,255,255,.12);
padding: 20px;
border-radius: var(--radius-md);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.15);
}
.cta-stat__num { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.cta-stat__label { font-size: 12px; opacity: .85; line-height: 1.4; }
.cta-final__actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
position: relative;
}
.cta-final__bullets {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 22px;
font-size: 13px;
opacity: .9;
position: relative;
}
/* ---------- 15. Footer ---------- */
.site-footer { background: #0B1220; color: var(--ink-300); padding: 72px 0 32px; }
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.logo--footer { margin-bottom: 24px; }
.logo--footer img { height: 64px; width: auto; }
.site-header.is-scrolled .logo--footer img { height: 64px; } /* override del shrink del header */
.footer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer__phones { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; }
.footer__phones a { color: inherit; text-decoration: none; transition: color .2s ease; }
.footer__phones a:hover { color: var(--blue); }
.footer__social {
display: flex;
gap: 10px;
margin-top: 18px;
}
.footer__social a {
width: 40px; height: 40px;
border-radius: 50%;
display: grid; place-items: center;
background: rgba(255, 255, 255, .08);
color: var(--ink-300);
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.footer__social a:hover {
transform: translateY(-2px);
background: var(--blue);
color: #fff;
}
.footer__social svg { width: 18px; height: 18px; }
.footer__col h4 {
color: #fff;
font-size: 14px;
margin-bottom: 16px;
letter-spacing: .04em;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 14px; color: var(--ink-400); transition: color .15s ease; }
.footer__col a:hover { color: #fff; }
.footer__legal {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: var(--ink-500);
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.08);
}
.footer__legal a:hover { color: #fff; }
/* ---------- 15b. Accesibilidad: focus-visible global ---------- */
/* Outline brand consistente al navegar por teclado.
:focus-visible solo aparece con Tab (no con click), así que no estorba al ratón. */
a:focus-visible,
button:focus-visible,
.role-tab:focus-visible,
.feature-card:focus-within,
.boost-card:focus-within {
outline: 3px solid rgba(7, 161, 194, .5);
outline-offset: 3px;
border-radius: 6px;
}
.feature-card:focus-within,
.boost-card:focus-within {
border-radius: var(--radius-lg);
}
/* ---------- 16. CTA flotante lateral ---------- */
.sticky-cta {
position: fixed;
top: 50%;
left: 0;
z-index: 100;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--orange);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 14px 28px;
border-radius: 0 0 14px 14px;
box-shadow: 0 10px 30px rgba(242, 162, 62, .45);
white-space: nowrap;
text-decoration: none;
transform-origin: 0 0;
transform: rotate(-90deg) translate(-50%, 0);
opacity: 0;
visibility: hidden;
transition: padding .25s ease, box-shadow .25s ease, background .2s ease, opacity .3s ease, visibility .3s;
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; }
.sticky-cta:hover {
padding: 14px 36px;
background: #DA8B2D;
box-shadow: 0 14px 36px rgba(242, 162, 62, .6);
}
.sticky-cta:focus-visible {
outline: 3px solid rgba(7, 161, 194, .5);
outline-offset: 3px;
}
.sticky-cta .sticky-cta__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
@media (max-width: 640px) {
.sticky-cta {
font-size: 11px;
padding: 10px 18px;
}
}
/* ---------- 17. Responsive ---------- */
@media (max-width: 980px) {
/* .nav ya no se oculta — se convierte en drawer en bloque 20 */
.features__grid,
.boost__grid,
.testimonials__grid { grid-template-columns: 1fr 1fr; }
.setup__steps { grid-template-columns: 1fr 1fr; }
.stats__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
.stat:nth-child(2n)::after { display: none; } /* no divider en columna derecha */
.footer__grid { grid-template-columns: 1fr 1fr; }
.role-content.is-active { grid-template-columns: 1fr; gap: 32px; }
.role-content__image { order: -1; min-height: 260px; }
}
@media (max-width: 640px) {
.hero { padding: 120px 0 60px; min-height: 560px; }
.features__grid,
.boost__grid,
.testimonials__grid,
.cta-final__stats { grid-template-columns: 1fr; }
.setup__steps { grid-template-columns: 1fr; }
.stats__grid { grid-template-columns: 1fr 1fr; }
.footer__grid { grid-template-columns: 1fr; gap: 32px; }
.setup__panel, .cta-final__panel { padding: 32px 22px; }
.role-feats { grid-template-columns: 1fr; }
.role-tab { padding: 10px 16px; font-size: 13px; }
}
/* ==================================================================
18. PÁGINA DE PRECIOS
================================================================== */
/* ---------- Hero de precios ---------- */
.pricing-hero {
padding: 160px 0 32px;
background: linear-gradient(180deg, var(--ink-50) 0%, #fff 100%);
}
.pricing-hero .section-head { margin-bottom: 0; }
/* ---------- Calculadora ---------- */
.pricing-calc { padding: 24px 0 48px; background: #fff; }
.pricing-calc__panel {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 24px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 20px;
max-width: 720px;
margin: 0 auto;
box-shadow: var(--shadow-sm);
}
.pricing-calc__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.pricing-calc__field label {
font-size: 13px;
font-weight: 600;
color: var(--dark);
}
.pricing-calc__field input,
.pricing-calc__field select {
width: 100%;
padding: 12px 14px;
font: inherit;
font-size: 15px;
color: var(--dark);
background: #fff;
border: 1px solid var(--ink-200);
border-radius: 10px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.pricing-calc__field input:focus,
.pricing-calc__field select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 4px rgba(7, 161, 194, .12);
}
.pricing-calc__hint {
font-size: 12px;
color: var(--ink-500);
}
/* ---------- Grid de planes ---------- */
.pricing-plans { padding: 24px 0 56px; background: #fff; }
.plans-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
align-items: stretch;
}
.plan {
position: relative;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 28px 22px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--plan-color, var(--dark)) 50%, transparent);
box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--plan-color, var(--dark)) 35%, transparent);
}
.plan.is-recommended,
.plan--is-recommended {
border-color: var(--plan-color, var(--orange));
box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--plan-color, var(--orange)) 35%, transparent);
transform: translateY(-4px);
}
.plan.is-recommended:hover,
.plan--is-recommended:hover {
box-shadow: 0 30px 56px -16px color-mix(in srgb, var(--plan-color, var(--orange)) 45%, transparent);
transform: translateY(-6px);
}
.plan__badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--plan-color, var(--orange));
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
padding: 6px 14px;
border-radius: 999px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease;
}
.plan.is-recommended .plan__badge,
.plan--is-recommended .plan__badge {
opacity: 1;
visibility: visible;
}
.plan__head { margin-bottom: 4px; }
.plan__name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
color: var(--plan-color, var(--dark));
margin-bottom: 2px;
letter-spacing: -.01em;
}
.plan__range {
font-size: 12px;
color: var(--ink-500);
text-transform: uppercase;
letter-spacing: .04em;
}
.plan__price {
display: flex;
align-items: baseline;
gap: 6px;
margin: 8px 0 2px;
}
.plan__amount {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
color: var(--dark);
letter-spacing: -.02em;
line-height: 1;
}
.plan__price--custom .plan__amount {
font-size: 22px;
color: var(--plan-color, var(--dark));
}
.plan__unit { font-size: 13px; color: var(--ink-500); }
.plan__price-note { font-size: 12px; color: var(--ink-500); }
.plan__alt {
font-size: 12px;
color: var(--ink-500);
padding-top: 8px;
border-top: 1px dashed var(--ink-200);
}
.plan__tax {
font-size: 11px;
color: var(--ink-500);
}
.plan__tax strong { color: var(--dark); }
.plan__cta {
width: 100%;
margin: 6px 0 4px;
padding: 11px 16px;
font-size: 13px;
justify-content: center;
}
.plan__features {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
color: var(--ink-700);
margin-top: 6px;
}
.plan__features li {
position: relative;
padding-left: 20px;
line-height: 1.45;
}
.plan__features li::before {
content: "✓";
position: absolute;
left: 0; top: 0;
color: var(--green);
font-weight: 700;
}
/* Link "Ver funcionalidades" al final de cada plan */
.plan__more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 0;
background: transparent;
border: 0;
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
color: var(--plan-color, var(--blue));
cursor: pointer;
text-align: left;
transition: gap .2s ease, opacity .2s ease;
}
.plan__more:hover {
gap: 10px;
opacity: .8;
}
.plan__more:focus-visible {
outline: 2px solid var(--plan-color, var(--blue));
outline-offset: 4px;
border-radius: 4px;
}
/* ---------- Lo que incluye cada plan ---------- */
.pricing-includes { padding: 96px 0; background: var(--ink-50); }
.includes-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.include {
background: #fff;
border-radius: var(--radius-md);
padding: 22px;
border: 1px solid var(--ink-200);
transition: transform .25s ease, box-shadow .25s ease;
}
.include:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px -12px rgba(10, 61, 79, .15);
}
.include__icon {
width: 44px; height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--icon-bg, var(--ink-100));
margin-bottom: 14px;
}
.include__icon svg {
width: 22px;
height: 22px;
}
.include h3 {
font-size: 14.5px;
font-weight: 700;
margin-bottom: 4px;
color: var(--dark);
}
.include p {
font-size: 13px;
color: var(--ink-500);
line-height: 1.45;
}
/* ---------- Paquetes adicionales ---------- */
.pricing-addons { padding: 96px 0; background: #fff; }
.addons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.addon {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 32px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.addon:hover {
transform: translateY(-4px);
border-color: var(--addon-color);
box-shadow: 0 24px 48px -16px rgba(10, 61, 79, .15);
}
.addon__head {
border-bottom: 1px solid var(--ink-100);
padding-bottom: 20px;
margin-bottom: 20px;
}
.addon__badge {
display: inline-block;
background: var(--addon-color);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 12px;
}
.addon__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
color: var(--dark);
letter-spacing: -.02em;
margin-bottom: 8px;
line-height: 1.2;
}
.addon__desc {
font-size: 14px;
color: var(--ink-500);
line-height: 1.55;
}
.addon__list {
display: flex;
flex-direction: column;
gap: 14px;
}
.addon__list li {
display: flex;
align-items: flex-start;
gap: 14px;
}
.addon__icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
color: #fff;
flex-shrink: 0;
}
.addon__icon svg {
width: 18px;
height: 18px;
}
.addon__list strong {
display: block;
font-weight: 700;
font-size: 14px;
color: var(--dark);
margin-bottom: 2px;
}
.addon__list span:not(.addon__icon) {
display: block;
font-size: 13px;
color: var(--ink-500);
line-height: 1.4;
}
/* ---------- CTA dudas ---------- */
.pricing-cta { padding: 0 0 96px; background: #fff; }
.pricing-cta__panel {
background: linear-gradient(135deg, var(--blue) 0%, var(--mid) 100%);
color: #fff;
border-radius: var(--radius-xl);
padding: 56px 40px;
text-align: center;
box-shadow: var(--shadow-lg);
}
.pricing-cta__title {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 34px);
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 12px;
}
.pricing-cta__sub {
font-size: 16px;
opacity: .92;
margin-bottom: 28px;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.pricing-cta__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.pricing-cta__actions .btn--outline {
border-color: rgba(255, 255, 255, .35);
color: #fff;
}
.pricing-cta__actions .btn--outline:hover {
background: rgba(255, 255, 255, .12);
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.plans-grid { grid-template-columns: repeat(3, 1fr); }
.plan:nth-child(4), .plan:nth-child(5) { /* sin cambios, fluyen */ }
.includes-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.plans-grid { grid-template-columns: 1fr 1fr; }
.pricing-calc__panel { grid-template-columns: 1fr; }
.includes-grid { grid-template-columns: 1fr 1fr; }
.addons-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.plans-grid,
.includes-grid { grid-template-columns: 1fr; }
.pricing-hero { padding: 130px 0 24px; }
.pricing-cta__panel { padding: 40px 24px; }
}
/* ---------- Includes clickeables ---------- */
.include--clickable {
width: 100%;
text-align: left;
font: inherit;
cursor: pointer;
position: relative;
border: 1px solid var(--ink-200);
background: #fff;
border-radius: var(--radius-md);
padding: 22px;
}
.include--clickable:hover {
border-color: color-mix(in srgb, var(--blue) 30%, transparent);
box-shadow: 0 16px 32px -12px rgba(7, 161, 194, .15);
transform: translateY(-4px);
}
.include--clickable:active {
transform: translateY(-2px) scale(.99);
transition-duration: .1s;
}
.include__more {
display: inline-block;
margin-top: 10px;
font-size: 12px;
font-weight: 600;
color: var(--blue);
transition: gap .2s ease;
}
.include--clickable:hover .include__more {
text-decoration: underline;
}
/* ==================================================================
19. MODAL DE FUNCIONALIDADES
================================================================== */
.modal {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s;
}
.modal[hidden] {
display: none !important;
}
.modal.is-open {
opacity: 1;
visibility: visible;
}
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 61, 79, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal__panel {
position: relative;
background: #fff;
border-radius: var(--radius-lg);
width: 100%;
max-width: 880px;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .35);
transform: translateY(10px) scale(.98);
transition: transform .25s cubic-bezier(.2, .7, .2, 1);
overflow: hidden;
}
.modal.is-open .modal__panel {
transform: translateY(0) scale(1);
}
.modal__head {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(--ink-100);
}
.modal__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--icon-bg, var(--ink-100));
display: grid;
place-items: center;
flex-shrink: 0;
}
.modal__icon svg { width: 22px; height: 22px; }
.modal__heading { flex: 1; min-width: 0; }
.modal__heading h2 {
font-family: var(--font-display);
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 800;
color: var(--dark);
letter-spacing: -.02em;
margin-bottom: 2px;
}
.modal__heading p {
font-size: 13px;
color: var(--ink-500);
}
.modal__close {
background: var(--ink-100);
border: none;
border-radius: 50%;
width: 36px; height: 36px;
display: grid;
place-items: center;
cursor: pointer;
color: var(--ink-500);
transition: background .2s ease, color .2s ease;
flex-shrink: 0;
}
.modal__close:hover { background: var(--ink-200); color: var(--dark); }
.modal__close svg { width: 18px; height: 18px; }
.modal__body {
padding: 20px 24px;
overflow-y: auto;
overflow-x: auto;
flex: 1;
}
.modal__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 24px;
border-top: 1px solid var(--ink-100);
background: var(--ink-50);
flex-wrap: wrap;
}
.modal__foot-note {
font-size: 12.5px;
color: var(--ink-700);
font-weight: 600;
}
.modal__foot .btn--primary {
background: var(--red);
box-shadow: 0 6px 18px rgba(228, 70, 52, .35);
}
.modal__foot .btn--primary:hover { background: #c93826; }
/* ---------- Tabla comparativa ---------- */
.feat-section {
text-align: center;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .12em;
color: var(--blue);
margin: 18px 0 12px;
}
.feat-section:first-child { margin-top: 4px; }
.feat-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
margin-bottom: 6px;
}
.feat-table thead th {
background: var(--dark);
color: #fff;
font-weight: 700;
text-align: center;
padding: 12px 10px;
font-size: 11.5px;
letter-spacing: .04em;
text-transform: uppercase;
}
.feat-table thead th:first-child {
text-align: left;
border-top-left-radius: 10px;
}
.feat-table thead th:last-child {
border-top-right-radius: 10px;
}
.feat-table tbody td {
padding: 14px 10px;
text-align: center;
border-bottom: 1px solid var(--ink-100);
color: var(--ink-700);
}
.feat-table tbody td:first-child {
text-align: left;
font-weight: 500;
color: var(--dark);
line-height: 1.4;
}
.feat-table tbody tr:nth-child(even) td { background: var(--ink-50); }
.feat-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.feat-table tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
/* Check verde redondo (SVG inline para nitidez perfecta) */
.feat-table tbody td:not(:first-child) {
font-size: 0;
line-height: 0;
}
.feat-table tbody td:not(:first-child)::before {
content: "";
display: inline-block;
width: 26px;
height: 26px;
vertical-align: middle;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* ---------- Lista de funcionalidades con íconos (reemplaza tabla en modales) ---------- */
.feat-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
--feat-color: var(--blue);
}
.feat-list li {
display: grid;
grid-template-columns: 38px 1fr;
gap: 14px;
align-items: start;
padding: 14px 16px;
background: var(--ink-50);
border: 1px solid var(--ink-100);
border-radius: 12px;
}
.feat-list__icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--feat-color);
color: #fff;
flex-shrink: 0;
}
.feat-list__icon svg {
width: 18px;
height: 18px;
}
.feat-list li strong {
display: block;
font-family: var(--font-display);
font-size: 14.5px;
font-weight: 800;
color: var(--dark);
margin-bottom: 2px;
line-height: 1.3;
}
.feat-list li div span {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--ink-500);
}
.feat-list--single { grid-template-columns: 1fr; }
@media (max-width: 700px) {
.feat-list { grid-template-columns: 1fr; gap: 10px; }
.feat-list li { padding: 12px 14px; }
}
/* ---------- Bloque "Funciones extra disponibles" en modales ---------- */
.modal-extras {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--ink-200);
}
.modal-extras__head {
text-align: center;
margin-bottom: 20px;
}
.modal-extras__title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--dark);
margin: 0 0 4px;
}
.modal-extras__sub {
font-size: 13px;
color: var(--ink-500);
margin: 0;
}
.modal-extras__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.modal-extras__group {
display: flex;
flex-direction: column;
gap: 14px;
}
.modal-extras__badge {
display: inline-flex;
align-self: flex-start;
padding: 6px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
color: #fff;
text-transform: uppercase;
}
.modal-extras__badge--blue { background: var(--blue); }
.modal-extras__badge--green { background: var(--green); }
@media (max-width: 700px) {
.modal-extras__grid { grid-template-columns: 1fr; gap: 24px; }
}
/* Body sin scroll cuando hay modal abierto (combinado con position:fixed en JS) */
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
.modal { padding: 12px; }
.modal__head { padding: 16px; gap: 12px; }
.modal__body { padding: 16px; }
.modal__foot { padding: 12px 16px; }
.feat-table { font-size: 12px; }
.feat-table thead th { padding: 10px 8px; font-size: 10px; }
.feat-table tbody td { padding: 12px 8px; }
}
/* ==================================================================
20. MENÚ HAMBURGER + DRAWER MOBILE
================================================================== */
.menu-toggle {
display: none;
background: rgba(255, 255, 255, .92);
border: none;
width: 44px;
height: 44px;
border-radius: 12px;
box-shadow: var(--shadow-md);
cursor: pointer;
padding: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
transition: background .2s ease;
}
.menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--dark);
border-radius: 2px;
transition: transform .3s ease, opacity .25s ease;
}
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__close {
display: none;
background: var(--ink-100);
border: none;
width: 40px; height: 40px;
border-radius: 50%;
cursor: pointer;
color: var(--ink-700);
align-items: center;
justify-content: center;
align-self: flex-end;
margin-bottom: 8px;
}
.nav__close svg { width: 20px; height: 20px; }
.nav__close:hover { background: var(--ink-200); color: var(--dark); }
/* Backdrop del drawer */
.menu-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 61, 79, .5);
z-index: 49;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s;
}
.menu-backdrop.is-visible {
opacity: 1;
visibility: visible;
}
body.menu-open { overflow: hidden; }
/* Botón de login dentro del drawer: oculto en desktop, visible en mobile */
.nav__login { display: none; }
@media (max-width: 980px) {
.menu-toggle { display: flex; }
/* Header mobile: grid de 3 columnas para centrar el botón de login */
.header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
}
.header__inner > .logo {
grid-row: 1;
grid-column: 1;
}
.header__inner > .btn {
grid-row: 1;
grid-column: 2;
justify-self: center;
display: inline-flex;
padding: 10px 18px;
font-size: 13.5px;
}
.header__inner > .menu-toggle {
grid-row: 1;
grid-column: 3;
}
/* El drawer ocupa toda la fila sin desplazar nada (es position: fixed) */
.header__inner > .nav {
grid-row: 1;
grid-column: 1 / -1;
}
/* El login dentro del drawer YA NO se muestra (lo movimos al header) */
.nav__login {
display: none !important;
}
/* Convertir el nav en drawer lateral */
.nav {
position: fixed;
top: 0;
right: 0;
width: min(340px, 100vw);
height: 100vh;
background: #fff;
flex-direction: column;
align-items: stretch;
gap: 4px;
padding: 20px 20px 32px;
border-radius: 0;
box-shadow: -20px 0 60px rgba(10, 61, 79, .18);
transform: translateX(100%);
transition: transform .3s cubic-bezier(.2, .7, .2, 1);
overflow-y: auto;
z-index: 60;
}
/* Override del background-transparent del estado scrolled (regla pensada para desktop) */
.site-header.is-scrolled .nav { background: #fff; }
.nav.is-open { transform: translateX(0); }
.nav__close { display: inline-flex; }
/* Links en versión vertical, full width */
.nav > a:not(.nav__login),
.nav-trigger {
display: flex;
width: 100%;
padding: 14px 16px;
font-size: 16px;
font-weight: 500;
color: var(--dark);
border-radius: 12px;
transition: background .2s ease;
}
.nav > a:not(.nav__login):hover,
.nav-trigger:hover {
background: rgba(10, 61, 79, .06);
}
/* Items con dropdown — siempre expandidos en mobile (no toggle) */
.nav-item.has-dropdown {
display: flex;
flex-direction: column;
width: 100%;
}
/* Ocultar caret: en mobile no hay toggle, todo está siempre visible */
.nav-caret { display: none; }
.nav-trigger {
justify-content: flex-start;
}
.nav-dropdown {
position: static;
box-shadow: none;
background: transparent;
padding: 4px 0 8px 0;
margin: 0 0 0 16px;
min-width: 0;
opacity: 1;
visibility: visible;
max-height: none;
transform: none;
transition: none;
border-left: 2px solid var(--ink-100);
}
.nav-dropdown::before { display: none; }
.nav-dropdown a {
display: block;
padding: 10px 14px;
font-size: 14px;
color: var(--ink-700);
border-radius: 8px;
}
.nav-dropdown a:hover {
background: rgba(7, 161, 194, .08);
color: var(--blue);
}
/* En estado scrolled, el botón sigue blanco para verse bien */
.site-header.is-scrolled .menu-toggle {
background: var(--ink-100);
}
.site-header.is-scrolled .menu-toggle:hover {
background: var(--ink-200);
}
/* Ocultar el background del nav original (ya no es pill) */
.site-header .nav {
box-shadow: -20px 0 60px rgba(10, 61, 79, .18);
}
/* En mobile el footer va centrado (el sticky-cta queda en el borde izquierdo) */
.site-footer { text-align: center; }
.footer__brand {
display: flex;
flex-direction: column;
align-items: center;
}
.footer__contact li {
justify-content: center;
}
.footer__social {
justify-content: center;
}
.footer__col ul { padding-left: 0; }
.footer__legal { justify-content: center; text-align: center; }
}
/* ==================================================================
21. FAQ ACORDEÓN (página de precios)
================================================================== */
.pricing-faq { padding: 0 0 96px; background: #fff; }
.faq-panel {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 16px 40px 24px;
max-width: 1080px;
margin: 0 auto;
box-shadow: var(--shadow-sm);
}
.faq-title {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 800;
text-align: center;
color: var(--dark);
letter-spacing: -.02em;
padding: 24px 0 8px;
margin-bottom: 0;
}
.faq-item {
border-top: 1px solid var(--ink-100);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 4px;
font-weight: 600;
font-size: 16px;
color: var(--dark);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
/* Icono ✚ que rota 45° al abrir → se vuelve × */
.faq-item summary::after {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background:
linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat;
transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-item p {
padding: 0 28px 22px;
color: var(--ink-700);
line-height: 1.65;
font-size: 14.5px;
text-align: center;
}
@media (max-width: 640px) {
.faq-panel { padding: 8px 20px 16px; }
.faq-item summary { font-size: 15px; }
.faq-item p { padding: 0 0 18px; font-size: 14px; text-align: left; }
}
/* ==================================================================
22. TRUST SIGNALS (debajo de los planes)
================================================================== */
.trust-signals {
padding: 0 0 56px;
background: #fff;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1020px;
margin: 0 auto;
padding: 22px 28px;
background: var(--ink-50);
border: 1px solid var(--ink-100);
border-radius: var(--radius-md);
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--dark);
line-height: 1.3;
}
.trust-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(7, 161, 194, .12);
color: var(--blue);
}
.trust-icon svg { width: 20px; height: 20px; }
/* Cada item con un acento distinto de la paleta */
.trust-item:nth-child(1) .trust-icon { background: rgba(7, 161, 194, .12); color: var(--blue); }
.trust-item:nth-child(2) .trust-icon { background: rgba(101, 176, 59, .12); color: var(--green); }
.trust-item:nth-child(3) .trust-icon { background: rgba(242, 162, 62, .12); color: var(--orange); }
.trust-item:nth-child(4) .trust-icon { background: rgba(7, 105, 125, .12); color: var(--mid); }
@media (max-width: 900px) {
.trust-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 480px) {
.trust-grid { grid-template-columns: 1fr; padding: 20px; }
}
/* ==================================================================
23. SPRITE SVG (iconos referenciados con )
================================================================== */
/* Los SVGs ahora son envolventes vacíos con un