/*==============================================================
h3oGROUP Landing
Version: 1.0
Author: ChatGPT
==============================================================*/


/*==============================================================
ROOT
==============================================================*/

:root{

--bg:#07111f;
--bg-2:#0d1728;

--surface:rgba(255,255,255,.05);

--surface-2:rgba(255,255,255,.03);

--border:rgba(255,255,255,.08);

--border-hover:rgba(85,155,255,.35);

--primary:#2d7dff;

--primary-hover:#559cff;

--secondary:#8d4cff;

--text:#ffffff;

--text-soft:#c3d0e5;

--text-muted:#91a0b8;

--success:#22c55e;

--danger:#ff5b75;

--shadow:0 20px 60px rgba(0,0,0,.35);

--shadow-hover:0 30px 80px rgba(27,83,255,.20);

--radius-xs:8px;

--radius-sm:12px;

--radius:18px;

--radius-lg:26px;

--transition:.30s cubic-bezier(.4,0,.2,1);

--container:1200px;

--header-height:82px;

}


/*==============================================================
RESET
==============================================================*/

*,
*::before,
*::after{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

-webkit-text-size-adjust:100%;

}

body{

background:var(--bg);

color:var(--text);

font-family:Inter,sans-serif;

font-size:16px;

line-height:1.65;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

svg{

display:block;

}

a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}

button{

font:inherit;

border:none;

cursor:pointer;

background:none;

}

ul{

list-style:none;

}

table{

border-collapse:collapse;

width:100%;

}

input,
textarea,
select{

font:inherit;

}

::selection{

background:#2d7dff;

color:#fff;

}


/*==============================================================
ACCESSIBILITY
==============================================================*/

.skip-link{

position:absolute;

left:-9999px;

top:20px;

background:#fff;

color:#000;

padding:12px 18px;

border-radius:8px;

z-index:9999;

}

.skip-link:focus{

left:20px;

}

:focus-visible{

outline:3px solid #4ea2ff;

outline-offset:4px;

}


/*==============================================================
LAYOUT
==============================================================*/

.container{

width:min(100% - 48px,var(--container));

margin-inline:auto;

}

section{

padding:110px 0;

position:relative;

}

.section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-heading h2{

font-size:clamp(2rem,4vw,3rem);

font-weight:800;

line-height:1.15;

margin-bottom:20px;

letter-spacing:-1px;

}

.section-heading p{

font-size:1.08rem;

color:var(--text-soft);

}


/*==============================================================
BACKGROUND
==============================================================*/

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at top right,
rgba(77,93,255,.12),
transparent 38%),

radial-gradient(circle at bottom left,
rgba(138,79,255,.10),
transparent 40%);

z-index:-2;

}

body::after{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

background-size:60px 60px;

mask-image:linear-gradient(to bottom,
rgba(0,0,0,.20),
transparent);

pointer-events:none;

z-index:-1;

}


/*==============================================================
BUTTONS
==============================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 28px;

border-radius:999px;

font-weight:700;

transition:var(--transition);

white-space:nowrap;

}

.btn-primary{

background:

linear-gradient(135deg,
var(--primary),
var(--secondary));

color:#fff;

box-shadow:

0 12px 35px rgba(46,124,255,.35);

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 20px 55px rgba(46,124,255,.40);

}

.btn-secondary{

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

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

backdrop-filter:blur(12px);

color:#fff;

}

.btn-secondary:hover{

border-color:var(--primary);

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

}


/*==============================================================
HEADER
==============================================================*/

.site-header{

position:sticky;

top:0;

z-index:1000;

height:var(--header-height);

background:rgba(7,17,31,.80);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.site-header .container{

height:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

.logo{

flex-shrink:0;

}

.main-nav ul{

display:flex;

gap:34px;

align-items:center;

}

.main-nav a{

color:var(--text-soft);

font-weight:600;

position:relative;

}

.main-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:var(--transition);

}

.main-nav a:hover{

color:#fff;

}

.main-nav a:hover::after{

width:100%;

}


/*==============================================================
TRUST BAR
==============================================================*/

.trust-bar{

border-bottom:1px solid rgba(255,255,255,.05);

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

backdrop-filter:blur(8px);

}

.trust-bar .container{

display:flex;

justify-content:center;

align-items:center;

gap:40px;

padding:14px 0;

font-size:.92rem;

font-weight:600;

color:var(--text-muted);

}

.trust-bar span{

display:flex;

align-items:center;

gap:10px;

}

.trust-bar span::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--primary);

box-shadow:0 0 12px var(--primary);

}


/*==============================================================
HERO
==============================================================*/

.hero{

padding-top:90px;

padding-bottom:120px;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

}

.eyebrow{

display:inline-flex;

padding:8px 16px;

border-radius:999px;

background:rgba(45,125,255,.10);

border:1px solid rgba(45,125,255,.25);

color:#89b7ff;

font-size:.88rem;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:clamp(3rem,6vw,4.7rem);

line-height:1.02;

letter-spacing:-2px;

font-weight:800;

margin-bottom:28px;

max-width:760px;

}

.hero-text{

font-size:1.18rem;

color:var(--text-soft);

max-width:640px;

margin-bottom:42px;

}

.hero-actions{

display:flex;

gap:18px;

margin-bottom:60px;

flex-wrap:wrap;

}

.hero-stats{

display:grid;

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

gap:18px;

}

.hero-stats article{

padding:24px;

border-radius:var(--radius);

background:var(--surface);

backdrop-filter:blur(20px);

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

transition:var(--transition);

}

.hero-stats article:hover{

border-color:var(--border-hover);

transform:translateY(-4px);

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

}

.hero-stats strong{

display:block;

font-size:2rem;

font-weight:800;

margin-bottom:8px;

}

.hero-stats span{

font-size:.95rem;

color:var(--text-muted);

}

.hero-visual{

position:relative;

display:grid;

grid-template-columns:repeat(2,180px);

justify-content:center;

gap:24px;

}

.metric-card{

padding:34px;

border-radius:24px;

background:

linear-gradient(180deg,
rgba(255,255,255,.07),
rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.metric-card::before{

content:"";

position:absolute;

inset:-50%;

background:

radial-gradient(circle,
rgba(70,120,255,.18),
transparent 60%);

opacity:.8;

}

.metric-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:0 30px 80px rgba(45,125,255,.25);

}

.metric-card span{

display:block;

font-size:.90rem;

color:var(--text-muted);

margin-bottom:14px;

position:relative;

z-index:2;

}

.metric-card strong{

position:relative;

z-index:2;

font-size:3rem;

font-weight:800;

}

.metric-card.price strong{

color:#87b4ff;

}
*==============================================================
h3oGROUP Landing
Version: 1.0
Author: ChatGPT
==============================================================*/


/*==============================================================
ROOT
==============================================================*/

:root{

--bg:#07111f;
--bg-2:#0d1728;

--surface:rgba(255,255,255,.05);

--surface-2:rgba(255,255,255,.03);

--border:rgba(255,255,255,.08);

--border-hover:rgba(85,155,255,.35);

--primary:#2d7dff;

--primary-hover:#559cff;

--secondary:#8d4cff;

--text:#ffffff;

--text-soft:#c3d0e5;

--text-muted:#91a0b8;

--success:#22c55e;

--danger:#ff5b75;

--shadow:0 20px 60px rgba(0,0,0,.35);

--shadow-hover:0 30px 80px rgba(27,83,255,.20);

--radius-xs:8px;

--radius-sm:12px;

--radius:18px;

--radius-lg:26px;

--transition:.30s cubic-bezier(.4,0,.2,1);

--container:1200px;

--header-height:82px;

}


/*==============================================================
RESET
==============================================================*/

*,
*::before,
*::after{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

-webkit-text-size-adjust:100%;

}

body{

background:var(--bg);

color:var(--text);

font-family:Inter,sans-serif;

font-size:16px;

line-height:1.65;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

svg{

display:block;

}

a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}

button{

font:inherit;

border:none;

cursor:pointer;

background:none;

}

ul{

list-style:none;

}

table{

border-collapse:collapse;

width:100%;

}

input,
textarea,
select{

font:inherit;

}

::selection{

background:#2d7dff;

color:#fff;

}


/*==============================================================
ACCESSIBILITY
==============================================================*/

.skip-link{

position:absolute;

left:-9999px;

top:20px;

background:#fff;

color:#000;

padding:12px 18px;

border-radius:8px;

z-index:9999;

}

.skip-link:focus{

left:20px;

}

:focus-visible{

outline:3px solid #4ea2ff;

outline-offset:4px;

}


/*==============================================================
LAYOUT
==============================================================*/

.container{

width:min(100% - 48px,var(--container));

margin-inline:auto;

}

section{

padding:110px 0;

position:relative;

}

.section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-heading h2{

font-size:clamp(2rem,4vw,3rem);

font-weight:800;

line-height:1.15;

margin-bottom:20px;

letter-spacing:-1px;

}

.section-heading p{

font-size:1.08rem;

color:var(--text-soft);

}


/*==============================================================
BACKGROUND
==============================================================*/

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at top right,
rgba(77,93,255,.12),
transparent 38%),

radial-gradient(circle at bottom left,
rgba(138,79,255,.10),
transparent 40%);

z-index:-2;

}

body::after{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

background-size:60px 60px;

mask-image:linear-gradient(to bottom,
rgba(0,0,0,.20),
transparent);

pointer-events:none;

z-index:-1;

}


/*==============================================================
BUTTONS
==============================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 28px;

border-radius:999px;

font-weight:700;

transition:var(--transition);

white-space:nowrap;

}

.btn-primary{

background:

linear-gradient(135deg,
var(--primary),
var(--secondary));

color:#fff;

box-shadow:

0 12px 35px rgba(46,124,255,.35);

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 20px 55px rgba(46,124,255,.40);

}

.btn-secondary{

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

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

backdrop-filter:blur(12px);

color:#fff;

}

.btn-secondary:hover{

border-color:var(--primary);

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

}


/*==============================================================
HEADER
==============================================================*/

.site-header{

position:sticky;

top:0;

z-index:1000;

height:var(--header-height);

background:rgba(7,17,31,.80);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.site-header .container{

height:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

.logo{

flex-shrink:0;

}

.main-nav ul{

display:flex;

gap:34px;

align-items:center;

}

.main-nav a{

color:var(--text-soft);

font-weight:600;

position:relative;

}

.main-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:var(--transition);

}

.main-nav a:hover{

color:#fff;

}

.main-nav a:hover::after{

width:100%;

}


/*==============================================================
TRUST BAR
==============================================================*/

.trust-bar{

border-bottom:1px solid rgba(255,255,255,.05);

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

backdrop-filter:blur(8px);

}

.trust-bar .container{

display:flex;

justify-content:center;

align-items:center;

gap:40px;

padding:14px 0;

font-size:.92rem;

font-weight:600;

color:var(--text-muted);

}

.trust-bar span{

display:flex;

align-items:center;

gap:10px;

}

.trust-bar span::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--primary);

box-shadow:0 0 12px var(--primary);

}


/*==============================================================
HERO
==============================================================*/

.hero{

padding-top:90px;

padding-bottom:120px;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

}

.eyebrow{

display:inline-flex;

padding:8px 16px;

border-radius:999px;

background:rgba(45,125,255,.10);

border:1px solid rgba(45,125,255,.25);

color:#89b7ff;

font-size:.88rem;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:clamp(3rem,6vw,4.7rem);

line-height:1.02;

letter-spacing:-2px;

font-weight:800;

margin-bottom:28px;

max-width:760px;

}

.hero-text{

font-size:1.18rem;

color:var(--text-soft);

max-width:640px;

margin-bottom:42px;

}

.hero-actions{

display:flex;

gap:18px;

margin-bottom:60px;

flex-wrap:wrap;

}

.hero-stats{

display:grid;

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

gap:18px;

}

.hero-stats article{

padding:24px;

border-radius:var(--radius);

background:var(--surface);

backdrop-filter:blur(20px);

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

transition:var(--transition);

}

.hero-stats article:hover{

border-color:var(--border-hover);

transform:translateY(-4px);

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

}

.hero-stats strong{

display:block;

font-size:2rem;

font-weight:800;

margin-bottom:8px;

}

.hero-stats span{

font-size:.95rem;

color:var(--text-muted);

}

.hero-visual{

position:relative;

display:grid;

grid-template-columns:repeat(2,180px);

justify-content:center;

gap:24px;

}

.metric-card{

padding:34px;

border-radius:24px;

background:

linear-gradient(180deg,
rgba(255,255,255,.07),
rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.metric-card::before{

content:"";

position:absolute;

inset:-50%;

background:

radial-gradient(circle,
rgba(70,120,255,.18),
transparent 60%);

opacity:.8;

}

.metric-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:0 30px 80px rgba(45,125,255,.25);

}

.metric-card span{

display:block;

font-size:.90rem;

color:var(--text-muted);

margin-bottom:14px;

position:relative;

z-index:2;

}

.metric-card strong{

position:relative;

z-index:2;

font-size:3rem;

font-weight:800;

}

.metric-card.price strong{

color:#87b4ff;

}
/*==============================================================
MARCAS
==============================================================*/

.brands{

padding-top:70px;

}

.brands-grid{

display:grid;

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

gap:28px;

align-items:center;

}

.brands-grid img{

margin:auto;

opacity:.55;

filter:grayscale(100%);

transition:var(--transition);

}

.brands-grid img:hover{

opacity:1;

filter:none;

transform:scale(1.05);

}


/*==============================================================
DIFERENCIALES
==============================================================*/

.features{

position:relative;

}

.features-grid{

display:grid;

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

gap:28px;

}

.feature-card{

position:relative;

overflow:hidden;

padding:42px;

border-radius:var(--radius-lg);

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);

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

backdrop-filter:blur(18px);

transition:var(--transition);

}

.feature-card::before{

content:"";

position:absolute;

left:-40%;

top:-40%;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(45,125,255,.16),
transparent 70%);

transition:var(--transition);

}

.feature-card:hover{

transform:translateY(-8px);

border-color:var(--border-hover);

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

}

.feature-card:hover::before{

transform:scale(1.2);

}

.feature-card h3{

position:relative;

z-index:2;

font-size:1.45rem;

font-weight:800;

margin-bottom:18px;

letter-spacing:-.5px;

}

.feature-card p{

position:relative;

z-index:2;

color:var(--text-soft);

}


/*==============================================================
COMPARATIVA
==============================================================*/

.comparison{

position:relative;

}

.comparison-grid{

display:grid;

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

gap:34px;

margin-bottom:46px;

}

.comparison-card{

padding:44px;

border-radius:28px;

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

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);

backdrop-filter:blur(18px);

transition:var(--transition);

}

.comparison-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.comparison-negative{

border-color:

rgba(255,91,117,.18);

}

.comparison-positive{

border-color:

rgba(45,125,255,.25);

}

.comparison-card h3{

font-size:1.7rem;

font-weight:800;

margin-bottom:26px;

letter-spacing:-.5px;

}

.comparison-card ul{

display:flex;

flex-direction:column;

gap:18px;

}

.comparison-card li{

display:flex;

align-items:flex-start;

gap:14px;

color:var(--text-soft);

}

.comparison-negative li::before{

content:"✕";

font-weight:700;

color:var(--danger);

flex-shrink:0;

}

.comparison-positive li::before{

content:"✓";

font-weight:700;

color:var(--success);

flex-shrink:0;

}

.comparison-highlight{

text-align:center;

font-size:1.45rem;

font-weight:800;

letter-spacing:-.5px;

max-width:780px;

margin:auto;

color:#fff;

}


/*==============================================================
TABLA DE MEDIOS
==============================================================*/

.media-table-section{

position:relative;

}

.table-wrapper{

overflow-x:auto;

border-radius:28px;

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

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.media-table{

min-width:980px;

}

.media-table thead{

position:sticky;

top:82px;

z-index:10;

}

.media-table th{

padding:22px;

text-align:left;

font-size:.90rem;

font-weight:700;

background:

rgba(12,22,40,.98);

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

white-space:nowrap;

}

.media-table td{

padding:22px;

border-bottom:1px solid rgba(255,255,255,.05);

vertical-align:middle;

}

.media-table tbody tr{

transition:var(--transition);

}

.media-table tbody tr:hover{

background:

rgba(255,255,255,.03);

}

.media-table img{

border-radius:8px;

}

.media-table a{

font-weight:700;

color:#fff;

}

.media-table a:hover{

color:#87b4ff;

}

.media-table td:nth-child(4),
.media-table td:nth-child(5),
.media-table td:nth-child(6){

font-weight:700;

text-align:center;

}

.media-table th:nth-child(4),
.media-table th:nth-child(5),
.media-table th:nth-child(6){

text-align:center;

}

.media-table td:nth-child(7),
.media-table td:nth-child(8){

font-weight:700;

white-space:nowrap;

}

.btn-table{

display:inline-flex;

align-items:center;

justify-content:center;

padding:11px 18px;

border-radius:999px;

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

font-size:.92rem;

font-weight:700;

color:#fff;

transition:var(--transition);

}

.btn-table:hover{

transform:translateY(-2px);

box-shadow:

0 12px 32px rgba(45,125,255,.30);

}

.table-note{

margin-top:22px;

text-align:center;

font-size:.93rem;

color:var(--text-muted);

line-height:1.7;

}


/*==============================================================
SCROLLBAR TABLA
==============================================================*/

.table-wrapper::-webkit-scrollbar{

height:10px;

}

.table-wrapper::-webkit-scrollbar-track{

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

}

.table-wrapper::-webkit-scrollbar-thumb{

background:rgba(45,125,255,.45);

border-radius:999px;

}

.table-wrapper::-webkit-scrollbar-thumb:hover{

background:rgba(45,125,255,.70);

}

/*==============================================================
QUÉ INCLUYE
==============================================================*/

.included{

position:relative;

}

.included-grid{

display:grid;

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

gap:28px;

}

.included-card{

position:relative;

padding:38px;

border-radius:var(--radius-lg);

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);

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

backdrop-filter:blur(18px);

overflow:hidden;

transition:var(--transition);

}

.included-card::before{

content:"";

position:absolute;

top:-70px;

right:-70px;

width:160px;

height:160px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(45,125,255,.18),
transparent 70%
);

transition:var(--transition);

}

.included-card:hover{

transform:translateY(-8px);

border-color:var(--border-hover);

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

}

.included-card:hover::before{

transform:scale(1.3);

}

.included-card h3{

position:relative;

z-index:2;

font-size:1.35rem;

font-weight:800;

margin-bottom:18px;

letter-spacing:-.4px;

}

.included-card p{

position:relative;

z-index:2;

color:var(--text-soft);

}


/*==============================================================
DESCUENTOS
==============================================================*/

.volume-discounts{

position:relative;

}

.discount-grid{

display:grid;

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

gap:30px;

}

.discount-card{

padding:50px 36px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);

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

backdrop-filter:blur(18px);

transition:var(--transition);

}

.discount-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

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

}

.discount-number{

display:block;

font-size:3rem;

font-weight:800;

line-height:1;

margin-bottom:18px;

background:
linear-gradient(
135deg,
#6fb7ff,
#9b68ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}

.discount-card h3{

font-size:1.45rem;

margin-bottom:16px;

font-weight:800;

}

.discount-card p{

color:var(--text-soft);

}


/*==============================================================
PROCESO
==============================================================*/

.process{

position:relative;

}

.timeline{

display:grid;

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

gap:26px;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

top:42px;

left:12%;

right:12%;

height:2px;

background:

linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

z-index:0;

}

.timeline-step{

position:relative;

z-index:1;

text-align:center;

padding:30px;

}

.timeline-step span{

display:flex;

align-items:center;

justify-content:center;

width:82px;

height:82px;

margin:0 auto 26px;

border-radius:50%;

font-size:1.7rem;

font-weight:800;

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

box-shadow:

0 20px 40px rgba(45,125,255,.25);

}

.timeline-step h3{

font-size:1.30rem;

font-weight:800;

margin-bottom:16px;

}

.timeline-step p{

color:var(--text-soft);

}


/*==============================================================
FAQ
==============================================================*/

.faq{

position:relative;

}

.faq-wrapper{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:18px;

}

.faq-item{

border-radius:22px;

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

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);

overflow:hidden;

transition:var(--transition);

}

.faq-item[open]{

border-color:var(--border-hover);

}

.faq-item:hover{

border-color:var(--primary);

}

.faq-item summary{

list-style:none;

cursor:pointer;

padding:28px 34px;

font-size:1.08rem;

font-weight:700;

display:flex;

align-items:center;

justify-content:space-between;

}

.faq-item summary::-webkit-details-marker{

display:none;

}

.faq-item summary::after{

content:"+";

font-size:1.7rem;

font-weight:300;

transition:var(--transition);

}

.faq-item[open] summary::after{

content:"−";

transform:rotate(180deg);

}

.faq-content{

padding:0 34px 30px;

}

.faq-content p{

color:var(--text-soft);

}


/*==============================================================
CTA FINAL
==============================================================*/

.final-cta{

position:relative;

}

.cta-box{

padding:90px 70px;

border-radius:34px;

background:

linear-gradient(
135deg,
rgba(28,72,180,.95),
rgba(88,49,185,.92)
);

position:relative;

overflow:hidden;

text-align:center;

box-shadow:

0 35px 90px rgba(0,0,0,.35);

}

.cta-box::before{

content:"";

position:absolute;

top:-160px;

right:-120px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.15),
transparent 70%
);

}

.cta-box>*{

position:relative;

z-index:2;

}

.cta-box h2{

font-size:clamp(2.4rem,4vw,3.5rem);

font-weight:800;

margin:20px auto 24px;

max-width:820px;

line-height:1.1;

letter-spacing:-1px;

}

.cta-box p{

max-width:760px;

margin:0 auto 42px;

font-size:1.12rem;

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

}

.cta-actions{

display:flex;

justify-content:center;

margin-bottom:50px;

}

#form-placeholder{

max-width:760px;

margin:auto;

min-height:420px;

border-radius:24px;

border:2px dashed rgba(255,255,255,.20);

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

backdrop-filter:blur(12px);

}


/*==============================================================
FOOTER
==============================================================*/

.site-footer{

padding-top:90px;

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

background:rgba(0,0,0,.18);

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

padding-bottom:60px;

}

.footer-logo{

display:inline-block;

margin-bottom:26px;

}

.footer-brand p{

max-width:430px;

color:var(--text-soft);

}

.footer-nav h3,
.footer-contact h3{

font-size:1.15rem;

margin-bottom:22px;

font-weight:800;

}

.footer-nav ul{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-nav a{

color:var(--text-soft);

}

.footer-nav a:hover{

color:#fff;

}

.footer-contact p{

color:var(--text-soft);

line-height:1.8;

}

.footer-bottom{

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

padding:28px 0;

text-align:center;

}

.footer-bottom p{

font-size:.95rem;

color:var(--text-muted);

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.hero-text{

margin-inline:auto;

}

.hero-actions{

justify-content:center;

}

.hero-visual{

order:-1;

}

.hero-stats{

max-width:820px;

margin:auto;

}

.footer-grid{

grid-template-columns:1fr;

gap:50px;

}

}


@media (max-width:992px){

section{

padding:90px 0;

}

.main-nav{

display:none;

}

.hero h1{

font-size:clamp(2.5rem,7vw,4rem);

}

.hero-stats{

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

}

.hero-visual{

grid-template-columns:repeat(2,160px);

}

.features-grid{

grid-template-columns:1fr;

}

.comparison-grid{

grid-template-columns:1fr;

}

.included-grid{

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

}

.discount-grid{

grid-template-columns:1fr;

}

.timeline{

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

gap:40px;

}

.timeline::before{

display:none;

}

.brands-grid{

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

}

.cta-box{

padding:70px 40px;

}

}


@media (max-width:768px){

.container{

width:min(100% - 32px,var(--container));

}

section{

padding:80px 0;

}

.section-heading{

margin-bottom:50px;

}

.section-heading h2{

font-size:2rem;

}

.site-header{

height:74px;

}

.site-header .container{

gap:20px;

}

.logo img{

width:140px;

height:auto;

}

.site-header .btn{

padding:12px 18px;

font-size:.9rem;

}

.trust-bar{

display:none;

}

.hero{

padding-top:60px;

}

.hero h1{

font-size:2.4rem;

letter-spacing:-1px;

}

.hero-text{

font-size:1rem;

}

.hero-actions{

flex-direction:column;

align-items:stretch;

}

.hero-actions .btn{

width:100%;

}

.hero-stats{

grid-template-columns:1fr;

}

.hero-visual{

grid-template-columns:1fr;

justify-items:center;

}

.metric-card{

width:240px;

}

.brands-grid{

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

gap:24px;

}

.included-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.timeline-step{

padding:0;

}

.cta-box{

padding:60px 28px;

}

.cta-box h2{

font-size:2rem;

}

.footer-grid{

gap:40px;

}

}


/*==============================================================
TABLA RESPONSIVE
==============================================================*/

@media (max-width:900px){

.table-wrapper{

border:none;

background:none;

box-shadow:none;

overflow:visible;

}

.media-table{

min-width:100%;

}

.media-table thead{

display:none;

}

.media-table,

.media-table tbody,

.media-table tr,

.media-table td{

display:block;

width:100%;

}

.media-table tr{

margin-bottom:26px;

padding:24px;

border-radius:22px;

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

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

}

.media-table td{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:14px 0;

border:none;

text-align:right;

}

.media-table td::before{

content:attr(data-label);

font-weight:700;

color:#fff;

text-align:left;

}

.media-table td:first-child{

justify-content:center;

}

.media-table td:first-child::before{

display:none;

}

}


/*==============================================================
HOVER SOLO EN DISPOSITIVOS CON RATÓN
==============================================================*/

@media (hover:hover){

.btn:hover{

transform:translateY(-3px);

}

.feature-card:hover,
.included-card:hover,
.discount-card:hover,
.metric-card:hover{

transform:translateY(-8px);

}

}


/*==============================================================
DISPOSITIVOS TÁCTILES
==============================================================*/

@media (hover:none){

.feature-card,
.included-card,
.discount-card,
.metric-card{

transform:none !important;

}

}


/*==============================================================
FOCUS
==============================================================*/

button:focus-visible,
a:focus-visible,
summary:focus-visible{

outline:3px solid #72b8ff;

outline-offset:4px;

border-radius:10px;

}


/*==============================================================
PREFERS REDUCED MOTION
==============================================================*/

@media (prefers-reduced-motion:reduce){

html{

scroll-behavior:auto;

}

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==============================================================
PRINT
==============================================================*/

@media print{

body{

background:#fff;

color:#000;

}

.site-header,
.trust-bar,
.hero-visual,
.btn,
.final-cta,
footer{

display:none;

}

section{

padding:20px 0;

break-inside:avoid;

}

}


/*==============================================================
UTILIDADES
==============================================================*/

.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;

}

.text-center{

text-align:center;

}

.hidden{

display:none !important;

}


/*==============================================================
SCROLLBAR GLOBAL
==============================================================*/

::-webkit-scrollbar{

width:11px;

height:11px;

}

::-webkit-scrollbar-track{

background:#07111f;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-hover);

}


/*==============================================================
SELECCIÓN
==============================================================*/

::selection{

background:rgba(45,125,255,.35);

color:#fff;

}


/*==============================================================
OPTIMIZACIONES
==============================================================*/

img{

content-visibility:auto;

}

section{

content-visibility:auto;

contain-intrinsic-size:800px;

}

.hero,
.site-header{

content-visibility:visible;

}


/*==============================================================
FIN
==============================================================*/