:root {
--primary: #4e678c;
--primary-dark: #2f4e78;
--primary-soft: #eef3f8;

--accent: #c8a77a;
--accent-soft: #f8f2ea;

--dark: #172234;
--text: #5c6878;
--muted: #8a94a3;

--white: #ffffff;
--soft: #f6f8fb;
--border: #e4e9ef;

--success: #20a97b;

--shadow:
0 20px 50px rgba(47, 78, 120, 0.12);
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

color: var(--dark);
background: var(--white);
line-height: 1.6;
}

a {
color: inherit;
text-decoration: none;
}

img,
video {
max-width: 100%;
}

.container {
width: min(1160px, calc(100% - 40px));
margin: 0 auto;
}

/* NAVBAR */

.navbar-wrapper {
position: sticky;
top: 0;
z-index: 1000;

background: rgba(255,255,255,.95);
border-bottom: 1px solid var(--border);

backdrop-filter: blur(14px);
}

.navbar {
min-height: 78px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 30px;
}

.brand {
display: flex;
align-items: center;
gap: 12px;

font-size: 24px;
font-weight: 800;

color: var(--primary-dark);
}

.brand-icon {
width: 44px;
height: 44px;

display: grid;
place-items: center;

border-radius: 14px;

color: var(--white);

background:
linear-gradient(
135deg,
var(--primary-dark),
var(--primary)
);
}

.brand span span {
color: var(--accent);
}

.nav-menu {
display: flex;
align-items: center;
gap: 26px;

color: var(--text);
font-size: 14px;
font-weight: 600;
}

.nav-menu a:hover {
color: var(--primary);
}

.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}

/* BUTTONS */

.btn {
min-height: 46px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 12px 22px;

border: none;
border-radius: 12px;

font-weight: 700;

transition: .25s ease;
cursor: pointer;
}

.btn:hover {
transform: translateY(-2px);
}

.btn-primary {
color: var(--white);

background:
linear-gradient(
135deg,
var(--primary-dark),
var(--primary)
);

box-shadow:
0 10px 24px rgba(47,78,120,.20);
}

.btn-outline {
color: var(--primary-dark);

border: 1px solid var(--border);
background: var(--white);
}

.btn-light {
color: var(--primary-dark);
background: var(--white);
}

.btn-large {
min-height: 54px;
padding: 14px 26px;
}

/* HERO */

.hero {
position: relative;
overflow: hidden;

padding: 105px 0 95px;

background:
radial-gradient(
circle at 86% 15%,
rgba(200,167,122,.22),
transparent 28%
),
linear-gradient(
135deg,
#f9fbfd 0%,
#eef3f8 100%
);
}

.hero::before {
content: "";

position: absolute;

width: 420px;
height: 420px;

left: -210px;
bottom: -230px;

border-radius: 50%;

background:
rgba(78,103,140,.08);
}

.hero-grid {
position: relative;

display: grid;

grid-template-columns:
1fr 1.05fr;

align-items: center;

gap: 75px;
}

.hero-badge {
width: fit-content;

display: flex;
align-items: center;
gap: 8px;

padding: 8px 14px;
margin-bottom: 22px;

border-radius: 30px;

color: var(--primary-dark);
background: var(--primary-soft);

font-size: 13px;
font-weight: 800;
}

.hero h1 {
margin-bottom: 24px;

font-size: clamp(44px, 5vw, 68px);
line-height: 1.05;

letter-spacing: -2.3px;
}

.hero h1 span {
color: var(--primary);
}

.hero-description {
max-width: 620px;

color: var(--text);

font-size: 19px;
line-height: 1.75;
}

.hero-actions {
display: flex;
flex-wrap: wrap;

gap: 14px;

margin-top: 34px;
}

.hero-points {
display: flex;
flex-wrap: wrap;

gap: 18px;

margin-top: 28px;

color: var(--text);

font-size: 13px;
font-weight: 600;
}

.hero-points i {
color: var(--success);
margin-right: 5px;
}

/* MOCKUP */

.product-window {
overflow: hidden;

border: 8px solid rgba(255,255,255,.85);
border-radius: 25px;

background: var(--white);

box-shadow: var(--shadow);

transform: rotate(1deg);
}

.product-window-top {
height: 50px;

display: flex;
align-items: center;

padding: 0 18px;

border-bottom: 1px solid var(--border);
}

.window-dots {
display: flex;
gap: 6px;
}

.window-dots span {
width: 8px;
height: 8px;

border-radius: 50%;

background: #cbd3dd;
}

.window-title {
margin: auto;
padding-right: 45px;

color: var(--muted);

font-size: 11px;
font-weight: 700;
}

.product-content {
min-height: 420px;

display: grid;

grid-template-columns:
78px 1fr;
}

.mock-sidebar {
padding: 20px 13px;

display: flex;
flex-direction: column;
align-items: center;

gap: 18px;

background: var(--primary-dark);
}

.mock-logo {
width: 40px;
height: 40px;

display: grid;
place-items: center;

margin-bottom: 10px;

border-radius: 12px;

color: var(--primary-dark);
background: var(--white);

font-weight: 900;
font-size: 11px;
}

.mock-link {
width: 40px;
height: 10px;

border-radius: 10px;

background: rgba(255,255,255,.22);
}

.mock-link.active {
height: 34px;

background: var(--primary);
}

.mock-main {
padding: 25px;

background: #f7f9fc;
}

.mock-welcome {
display: flex;
justify-content: space-between;
align-items: center;
}

.mock-welcome small {
color: var(--muted);
}

.mock-welcome strong {
display: block;

color: var(--primary-dark);
}

.mock-avatar {
width: 40px;
height: 40px;

display: grid;
place-items: center;

border-radius: 50%;

color: var(--white);
background: var(--primary);

font-size: 11px;
font-weight: 800;
}

.mock-cards {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 12px;

margin-top: 25px;
}

.mock-card {
padding: 16px;

border: 1px solid var(--border);
border-radius: 14px;

background: var(--white);
}

.mock-card i {
color: var(--primary);
}

.mock-card strong,
.mock-card small {
display: block;
}

.mock-card strong {
margin-top: 12px;

font-size: 23px;
}

.mock-card small {
color: var(--muted);
}

.mock-chart {
margin-top: 18px;

padding: 20px;

border: 1px solid var(--border);
border-radius: 15px;

background: var(--white);
}

.mock-chart-title {
margin-bottom: 18px;

font-size: 12px;
font-weight: 800;
}

.bars {
height: 135px;

display: flex;
align-items: flex-end;
justify-content: space-around;

gap: 10px;
}

.bars span {
width: 24px;

min-height: 20px;

border-radius:
7px 7px 2px 2px;

background:
linear-gradient(
180deg,
var(--primary),
var(--primary-dark)
);
}

/* TRUST */

.trust {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.trust-grid {
display: grid;

grid-template-columns:
repeat(4, 1fr);
}

.trust-grid > div {
padding: 28px 25px;

border-right: 1px solid var(--border);
}

.trust-grid > div:last-child {
border-right: none;
}

.trust-grid strong,
.trust-grid span {
display: block;
}

.trust-grid strong {
color: var(--primary-dark);
}

.trust-grid span {
margin-top: 5px;

color: var(--muted);
font-size: 13px;
}

/* GENERAL */

.section {
padding: 100px 0;
}

.section-soft {
background: var(--soft);
}

.section-heading {
max-width: 740px;

margin: 0 auto 55px;

text-align: center;
}

.section-label {
display: inline-block;

margin-bottom: 12px;

color: var(--primary);

font-size: 13px;
font-weight: 900;

letter-spacing: 1px;

text-transform: uppercase;
}

.section-heading h2 {
margin-bottom: 16px;

font-size: clamp(31px, 4vw, 46px);
line-height: 1.16;

letter-spacing: -1.3px;
}

.section-heading p {
color: var(--text);
font-size: 17px;
}

/* FEATURES */

.features-grid {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 22px;
}

.feature-card {
padding: 30px;

border: 1px solid var(--border);
border-radius: 20px;

background: var(--white);

transition: .25s ease;
}

.feature-card:hover {
transform: translateY(-5px);

box-shadow: var(--shadow);

border-color:
rgba(78,103,140,.35);
}

.feature-icon {
width: 52px;
height: 52px;

display: grid;
place-items: center;

margin-bottom: 20px;

border-radius: 15px;

color: var(--primary);

background: var(--primary-soft);

font-size: 20px;
}

.feature-card h3 {
margin-bottom: 10px;

font-size: 19px;
}

.feature-card p {
color: var(--text);

font-size: 15px;
}

/* VIDEO */

.video-section {
background: var(--primary-dark);
color: var(--white);
}

.video-section .section-label {
color: var(--accent);
}

.video-section .section-heading h2 {
color: var(--white);
}

.video-section .section-heading p {
color: rgba(255,255,255,.72);
}

.video-wrapper {
max-width: 980px;

margin: 0 auto;

padding: 12px;

border-radius: 25px;

background: rgba(255,255,255,.08);

box-shadow:
0 24px 60px rgba(0,0,0,.30);
}

.video-placeholder {
min-height: 540px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 16px;

border-radius: 17px;

color: var(--white);

background:
linear-gradient(
135deg,
#162c4b,
#4e678c
);

text-align: center;
}

.video-placeholder i {
font-size: 72px;
color: var(--accent);
}

.video-placeholder h3 {
font-size: 28px;
}

.video-placeholder p {
max-width: 500px;

color: rgba(255,255,255,.72);
}

/* BENEFITS */

.benefits-grid {
display: grid;

grid-template-columns:
1fr 1fr;

gap: 80px;

align-items: center;
}

.benefits-content h2 {
margin-bottom: 18px;

font-size: clamp(31px,4vw,44px);
line-height: 1.18;
}

.benefits-content > p {
color: var(--text);

font-size: 17px;
}

.benefits-list {
margin-top: 30px;

list-style: none;
}

.benefits-list li {
display: flex;

gap: 14px;

margin-bottom: 20px;
}

.benefits-list li > i {
margin-top: 4px;

color: var(--success);

font-size: 20px;
}

.benefits-list strong,
.benefits-list span {
display: block;
}

.benefits-list span {
margin-top: 3px;

color: var(--text);
}

.benefits-panel {
padding: 23px;

border: 1px solid var(--border);
border-radius: 24px;

background: var(--white);

box-shadow: var(--shadow);
}

.benefit-item {
display: flex;
gap: 16px;

padding: 22px;

border-bottom: 1px solid var(--border);
}

.benefit-item:last-child {
border-bottom: none;
}

.benefit-item-icon {
width: 48px;
height: 48px;

flex-shrink: 0;

display: grid;
place-items: center;

border-radius: 14px;

color: var(--primary);

background: var(--primary-soft);
}

.benefit-item strong,
.benefit-item span {
display: block;
}

.benefit-item span {
margin-top: 3px;

color: var(--text);
font-size: 14px;
}

/* PRICING */

.pricing-card {
max-width: 520px;

margin: 0 auto;

padding: 40px;

border: 1px solid rgba(78,103,140,.22);
border-radius: 25px;

background: var(--white);

box-shadow: var(--shadow);
}

.price-badge {
display: inline-block;

margin-bottom: 16px;

padding: 7px 13px;

border-radius: 30px;

color: var(--primary-dark);

background: var(--primary-soft);

font-size: 12px;
font-weight: 800;
}

.pricing-card h3 {
font-size: 24px;
}

.price {
display: flex;
align-items: flex-end;

gap: 8px;

margin-top: 14px;
}

.price strong {
color: var(--primary-dark);

font-size: 50px;
line-height: 1;
}

.price span {
padding-bottom: 5px;

color: var(--muted);
}

.pricing-list {
margin: 28px 0;

list-style: none;
}

.pricing-list li {
padding: 8px 0;

color: var(--text);
}

.pricing-list i {
margin-right: 9px;

color: var(--success);
}

/* DOS PLANES LADO A LADO */

.pricing-grid {
width: 100%;
max-width: 1050px;
margin: 0 auto;

display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;

gap: 30px;
}

.pricing-grid .pricing-card {
width: calc(50% - 15px);
max-width: none;
margin: 0;

display: flex;
flex-direction: column;

position: relative;
}

.pricing-description {
margin-top: 10px;
min-height: 70px;

color: var(--text);
font-size: 14px;
line-height: 1.6;
}

.pricing-grid .pricing-list {
flex-grow: 1;
}

.pricing-card-featured {
border: 2px solid var(--primary);
transform: translateY(-10px);
}

.recommended-badge {
position: absolute;
top: -16px;
right: 25px;

padding: 7px 16px;

border-radius: 30px;

color: var(--white);
background: var(--primary);

font-size: 12px;
font-weight: 800;

box-shadow: 0 8px 20px rgba(47, 78, 120, .20);
}

/* CTA */

.cta {
padding: 85px 0;

background:
linear-gradient(
135deg,
var(--primary-dark),
var(--primary)
);

color: var(--white);
}

.cta-box {
display: grid;

grid-template-columns:
1fr auto;

gap: 60px;

align-items: center;
}

.cta h2 {
margin-bottom: 12px;

font-size: clamp(32px,4vw,46px);
}

.cta p {
max-width: 700px;

color: rgba(255,255,255,.75);

font-size: 17px;
}

/* FAQ */

.faq-grid {
max-width: 850px;

margin: 0 auto;
}

.faq-item {
padding: 22px 0;

border-bottom: 1px solid var(--border);
}

.faq-item h4 {
margin-bottom: 8px;
}

.faq-item p {
color: var(--text);
}

/* FOOTER */

.footer {
color: rgba(255,255,255,.72);

background: var(--dark);
}

.footer-content {
display: flex;
justify-content: space-between;

gap: 50px;

padding: 55px 0;
}

.footer-brand {
color: var(--white);
}

.footer-content p {
margin-top: 13px;
}

.footer-links {
display: flex;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}

.footer-links a:hover {
color: var(--white);
}

.footer-bottom {
padding: 20px 0;

border-top:
1px solid rgba(255,255,255,.10);

font-size: 13px;
}

/* RESPONSIVE */

@media (max-width: 1000px) {

.nav-menu {
display: none;
}

.hero-grid,
.benefits-grid {
grid-template-columns: 1fr;
}

.hero-content {
text-align: center;
}

.hero-badge {
margin-left: auto;
margin-right: auto;
}

.hero-description {
margin-left: auto;
margin-right: auto;
}

.hero-actions,
.hero-points {
justify-content: center;
}

.product-window {
max-width: 680px;

margin: 0 auto;

transform: none;
}

.features-grid {
grid-template-columns:
repeat(2,1fr);
}
}

@media (max-width: 760px) {

.container {
width:
min(100% - 28px, 1160px);
}

.navbar {
min-height: 70px;
}

.nav-actions .btn-outline {
display: none;
}

.hero {
padding: 75px 0 65px;
}

.hero h1 {
font-size: 42px;
}

.hero-actions {
flex-direction: column;
}

.hero-actions .btn {
width: 100%;
}

.hero-points {
flex-direction: column;
gap: 9px;
}

.product-content {
grid-template-columns:
55px 1fr;
}

.mock-sidebar {
padding-left: 8px;
padding-right: 8px;
}

.mock-logo,
.mock-link {
width: 31px;
}

.mock-main {
padding: 15px;
}

.mock-cards {
grid-template-columns: 1fr;
}

.trust-grid {
grid-template-columns: 1fr 1fr;
}

.features-grid {
grid-template-columns: 1fr;
}

.section {
padding: 75px 0;
}

.video-placeholder {
min-height: 320px;
}

.pricing-card {
padding: 27px;
}

.cta-box {
grid-template-columns: 1fr;

text-align: center;
}

.footer-content {
flex-direction: column;
}



}