:root{
--font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
--accent-1:#00FF26;
--accent-2:#5CC6D0;
--promo-green:#02FD2B;
--a1:0,255,38;
--a2:92,198,208;
--grad:linear-gradient(135deg,var(--accent-1),var(--accent-2));
--bg:#f4f6f7;
--surface:rgba(255,255,255,.86);
--surface-2:rgba(255,255,255,.68);
--text:#0b0f12;
--muted:rgba(11,15,18,.68);
--border:rgba(11,15,18,.12);
--radius:18px;
--container:1240px;
--center-bias-y:-6vh;
--focus:0 0 0 3px rgba(92,198,208,.18);
--glow-soft:0 0 22px rgba(var(--a1),.12),0 0 28px rgba(var(--a2),.10);
--glow-strong:0 0 240px rgba(var(--a1),.22),0 0 380px rgba(var(--a2),.14);
--logo-size:min(340px,62vw);
--logo-nudge-x: 28px;
--logo-tx: 0px;
--logo-ty: 0px;
--t1: 0;
--t2: 0;
--t3: 0;
}
:root.theme-dark{
--bg:#020304;
--surface:rgba(255,255,255,.045);
--surface-2:rgba(255,255,255,.06);
--text:rgba(255,255,255,.92);
--muted:rgba(255,255,255,.70);
--border:rgba(255,255,255,.12);
--focus:0 0 0 3px rgba(var(--a1),.18);
--glow-soft:0 0 30px rgba(var(--a1),.16),0 0 44px rgba(var(--a2),.12);
--glow-strong:0 0 280px rgba(var(--a1),.28),0 0 460px rgba(var(--a2),.20);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme:light dark; scroll-snap-type: y proximity; }
body{
margin:0;
font-family:var(--font);
background:var(--bg);
color:var(--text);
line-height:1.55;
letter-spacing:-0.01em;
}
.container{ width:min(var(--container), calc(100% - 2rem)); margin-inline:auto; }
.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;
}
.small{ font-size: .88rem; }
.muted{ color:var(--muted); }
.skip-link{
position:absolute; left:-999px; top:10px;
background:var(--surface); color:var(--text);
border:1px solid var(--border);
border-radius:999px;
padding:.6rem .9rem;
z-index:9999;
}
.skip-link:focus{ left:12px; outline:none; box-shadow:var(--focus); }
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:2;
opacity:0;
}
:root.theme-dark body::before{
opacity:0.75;
background:
radial-gradient(1200px 700px at 50% 35%, transparent 55%, rgba(0,0,0,0.55) 100%),
radial-gradient(900px 600px at 20% 80%, transparent 52%, rgba(0,0,0,0.35) 100%),
radial-gradient(900px 600px at 80% 80%, transparent 52%, rgba(0,0,0,0.35) 100%);
}
.aurora{
position:fixed;
inset:-45vh -25vw;
pointer-events:none;
z-index:1;
background-size:200% 200%;
will-change:transform, background-position;
}
:root.theme-dark .aurora{
opacity:.96;
filter:blur(98px) saturate(1.62);
mix-blend-mode:screen;
}
:root:not(.theme-dark) .aurora{
opacity:.11;
filter:blur(140px) saturate(1.04);
mix-blend-mode:multiply;
}
.aurora-1{
background-image:
radial-gradient(55% 42% at 12% 18%, rgba(var(--a2), .40), transparent 62%),
radial-gradient(48% 40% at 80% 20%, rgba(var(--a1), .38), transparent 63%),
radial-gradient(46% 42% at 62% 86%, rgba(var(--a2), .28), transparent 66%),
radial-gradient(44% 40% at 22% 84%, rgba(var(--a1), .24), transparent 68%);
animation:auroraLoop1 12s linear infinite;
}
.aurora-2{
background-image:
radial-gradient(54% 42% at 28% 32%, rgba(var(--a1), .26), transparent 64%),
radial-gradient(48% 40% at 74% 36%, rgba(var(--a2), .30), transparent 66%),
radial-gradient(44% 40% at 54% 92%, rgba(var(--a1), .18), transparent 70%);
opacity:.72;
filter:blur(112px) saturate(1.70);
animation:auroraLoop2 16s linear infinite;
}
@keyframes auroraLoop1{
0%{ transform:translate3d(0,0,0) scale(1); background-position:0% 50%; }
50%{ transform:translate3d(3%,-4%,0) scale(1.06); background-position:100% 50%; }
100%{ transform:translate3d(0,0,0) scale(1); background-position:0% 50%; }
}
@keyframes auroraLoop2{
0%{ transform:translate3d(0,0,0) scale(1.02); background-position:100% 50%; }
50%{ transform:translate3d(-4%,3%,0) scale(1.08); background-position:0% 50%; }
100%{ transform:translate3d(0,0,0) scale(1.02); background-position:100% 50%; }
}
@media (max-width: 520px){
.aurora-2{ display:none; }
}
/* ========== BARRA COUNTDOWN PROMO ========== */
.promo-countdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #02FD2B;
  color: #000;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 70;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(2, 253, 43, 0.25);
  letter-spacing: 0.02em;
}
.countdown-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1240px;
  width: 100%;
}
.promo-text {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.promo-apply{
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.16);
}
.promo-apply:hover,
.promo-apply:focus-visible{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.countdown-timer {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.counter {
  background: rgba(0, 0, 0, 0.12);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-weight: 950;
  font-family: "Courier New", monospace;
  min-width: 3rem;
  text-align: center;
}
.counter span {
  font-feature-settings: "tnum";
}
.icon-toggle,
.audio-toggle{
position:fixed;
top:80px;
z-index:60;
width:44px;
height:44px;
border-radius:999px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
display:grid;
place-items:center;
cursor:pointer;
box-shadow:var(--glow-soft);
backdrop-filter:blur(10px);
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.audio-toggle .audio-icon,
.audio-toggle .audio-icon svg{
color:inherit;
}
.audio-toggle.is-holding{
opacity:0.88;
}
.icon-toggle{ right:16px; top: 95px; }
.audio-toggle{ right:68px; top: 95px; }
.icon-toggle:hover,
.audio-toggle:hover{
transform:translateY(-2px);
box-shadow:var(--glow-strong);
}
.icon-toggle:focus-visible,
.audio-toggle:focus-visible{ outline:none; box-shadow:var(--focus); }
.icon-toggle .toggle-icon{ position:relative; width:22px; height:22px; }
.icon-toggle .icon-sun,
.icon-toggle .icon-moon{
position:absolute; inset:0;
opacity:0;
transform:scale(.92) rotate(-10deg);
transition: opacity 180ms ease, transform 180ms ease;
}
:root:not(.theme-dark) .icon-toggle .icon-moon{ opacity:1; transform:scale(1) rotate(0); }
:root.theme-dark .icon-toggle .icon-sun{ opacity:1; transform:scale(1) rotate(0); }
.audio-toggle .audio-icon{ position:relative; width:22px; height:22px; display:grid; place-items:center; }
.audio-toggle .icon-note{ position:absolute; inset:0; }
.audio-toggle .icon-slash{
position:absolute;
inset:-2px;
opacity:0;
transition: opacity 180ms ease;
}
.audio-toggle.is-paused .icon-slash{ opacity:1; }
.audio-popover{
position:fixed;
top:68px;
right:68px;
z-index:66;
width: 200px;
padding: 0.9rem;
border-radius: 16px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(12px);
box-shadow: var(--glow-soft);
opacity:0;
transform: translateY(-6px);
pointer-events:none;
transition: opacity 160ms ease, transform 160ms ease;
}
.audio-popover.is-open{
opacity:1;
transform: translateY(0);
pointer-events:auto;
}
.audio-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.55rem;
}
.audio-label{ font-weight:950; font-size:.9rem; }
.audio-value{ font-weight:900; color:var(--muted); font-size:.88rem; }
.audio-range{
width:100%;
appearance: none;
height: 3px;
background: color-mix(in srgb, var(--border) 70%, transparent);
border-radius: 999px;
outline: none;
}
.audio-range::-webkit-slider-thumb{
appearance: none;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--accent-1);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--surface) 65%, transparent), 0 0 18px rgba(var(--a1), .22);
cursor: pointer;
}
.audio-range::-moz-range-thumb{
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--accent-1);
border: none;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--surface) 65%, transparent), 0 0 18px rgba(var(--a1), .22);
cursor: pointer;
}
.nav-arrow{
position:fixed;
left:50%;
transform: translateX(-50%);
bottom:16px;
z-index:60;
width:44px; height:44px;
border-radius:999px;
border:1px solid rgba(var(--a1), .42);
background: color-mix(in srgb, var(--surface) 92%, transparent);
color: var(--accent-1);
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 0 16px rgba(var(--a1), .16);
backdrop-filter:blur(10px);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, opacity 220ms ease;
}
body:not(.intro-ready) .nav-arrow{
opacity:0;
pointer-events:none;
transform: translateX(-50%) translateY(8px);
}
.nav-arrow:hover{
transform: translateX(-50%) translateY(-2px);
box-shadow:0 0 24px rgba(var(--a1), .22), 0 0 44px rgba(var(--a2), .12);
border-color: rgba(var(--a1), .72);
}
.nav-arrow:active{ transform: translateX(-50%) translateY(-1px) scale(.96); }
.nav-arrow:focus-visible{ outline:none; box-shadow:var(--focus); }
.nav-arrow-up{ display:none; }
.nav-arrow.is-up .nav-arrow-down{ display:none; }
.nav-arrow.is-up .nav-arrow-up{ display:block; }
main{ position:relative; z-index:3; }
.screen{ scroll-snap-align: center; scroll-snap-stop: always; }
.hero{ height:240vh; }
.hero-sticky{
position:sticky;
top:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.hero-inner{ padding:2.2rem 0 3.2rem; }
.hero-stage{
position:relative;
height:100vh;
display:grid;
place-items:center;
transform: translateY(var(--center-bias-y));
}
.logo-shell{
position:absolute;
left:50%;
top:50%;
width: var(--logo-size);
transform: translate(-50%, -50%);
will-change: transform;
}
.logo-shell::before{
content:"";
position:absolute;
inset:-32%;
background:
radial-gradient(circle at 50% 45%, rgba(var(--a1), .22), transparent 58%),
radial-gradient(circle at 55% 55%, rgba(var(--a2), .18), transparent 62%);
filter: blur(18px);
opacity: .55;
}
.brand-logo{
width:100%;
height:auto;
filter:
drop-shadow(0 0 28px rgba(var(--a1), .22))
drop-shadow(0 0 58px rgba(var(--a2), .18));
}
.intro-enter .logo-shell{
animation: logoEnter 1.95s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes logoEnter{
0%{ opacity:0; transform: translate(calc(-50% + 44vw), -50%) scale(.98); }
65%{ opacity:1; transform: translate(-50%, -50%) scale(1.02); }
100%{ opacity:1; transform: translate(-50%, -50%) scale(1.0); }
}
.intro-ready:not(.intro-enter) .logo-shell{
transform: translate(-50%, -50%) translate(var(--logo-tx), var(--logo-ty));
}
.hero-compose{
width:min(1180px, 100%);
display:grid;
grid-template-columns: var(--logo-size) minmax(0, 1fr);
gap: clamp(1.4rem, 2.4vw, 2.2rem);
align-items:center;
justify-items:start;
}
.logo-slot{
width: var(--logo-size);
height: 1px;
transform: translateX(var(--logo-nudge-x));
}
.hero-copy{ max-width: 96ch; }
.kicker{
display:flex;
align-items:baseline;
gap:.7rem;
margin:0 0 .85rem;
font-weight:800;
opacity: calc(.20 + var(--t1) * .70);
color: var(--muted);
transform: translateY(calc((1 - var(--t1)) * 16px));
filter: blur(calc((1 - var(--t1)) * 8px));
}
.kicker-label{
letter-spacing:.18em;
font-size:.76rem;
text-transform: uppercase;
}
.grad-text{
background: var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
letter-spacing:.18em;
font-size:.76rem;
font-weight:900;
text-transform: uppercase;
}
.hero-title{
margin:0 0 1rem;
font-weight:950;
font-size: clamp(2.2rem, 1.35rem + 2.55vw, 3.35rem);
line-height:1.02;
letter-spacing:-0.055em;
opacity: var(--t2);
transform: translateY(calc((1 - var(--t2)) * 18px));
filter: blur(calc((1 - var(--t2)) * 10px));
clip-path: inset(0 0 calc((1 - var(--t2)) * 100%) 0);
-webkit-clip-path: inset(0 0 calc((1 - var(--t2)) * 100%) 0);
}
.hero-subtitle{
margin:0;
width:100%;
max-width: 100%;
font-size: clamp(1.02rem, .98rem + .25vw, 1.12rem);
color: var(--muted);
opacity: var(--t3);
transform: translateY(calc((1 - var(--t3)) * 14px));
filter: blur(calc((1 - var(--t3)) * 8px));
}
.section{ padding: clamp(3.2rem, 3rem + 2vw, 5.4rem) 0; }
.section-alt{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-header{
max-width: 88ch;
margin-bottom: 2rem;
}
.section-header h2{
font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.4rem);
font-weight: 950;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 0 0 0.6rem;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-wrap: balance;
}
.section-header p{ color:var(--muted); margin:0; max-width:72ch; }
.cards-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; }
.pricing{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; }
.why-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
.contact-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:1.2rem; align-items:start; }
.card, .price-card, .timeline-item, .why-card, .contact-form{
border:1px solid var(--border);
border-radius:var(--radius);
padding:1.25rem;
background:var(--surface);
backdrop-filter: blur(10px);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
:root.theme-dark .card,
:root.theme-dark .price-card,
:root.theme-dark .timeline-item,
:root.theme-dark .why-card,
:root.theme-dark .contact-form{
background: rgba(255,255,255,.035);
border-color: rgba(255,255,255,.11);
}
.card:hover,
.price-card:hover,
.timeline-item:hover,
.why-card:hover{
transform: translateY(-2px);
box-shadow: 0 0 26px rgba(var(--a1), .10), 0 0 46px rgba(var(--a2), .08);
border-color: color-mix(in srgb, var(--border) 55%, rgba(var(--a2), .55));
}
.mini-list{ margin:.9rem 0 0; padding-left:1.1rem; color:var(--muted); }
.mini-list li{ margin:.35rem 0; }
.price-card{ position:relative; }
.price-card.recommended{
border-color: rgba(var(--a1), .42);
box-shadow: 0 0 40px rgba(var(--a1), .14), 0 0 80px rgba(var(--a2), .12);
animation: recommendedGlow 2.6s ease-in-out infinite;
}
@keyframes recommendedGlow{
0%,100%{ box-shadow: 0 0 40px rgba(var(--a1), .14), 0 0 80px rgba(var(--a2), .12); }
50%{ box-shadow: 0 0 56px rgba(var(--a1), .20), 0 0 110px rgba(var(--a2), .14); }
}
.recommended-badge{
position:absolute;
top:56px;
left:auto;
right:18px;
transform:none;
font-size:.98rem;
font-weight:950;
color:#041015;
background:var(--grad);
padding:.68rem 1.05rem;
min-width: 160px;
display:flex;
align-items:center;
justify-content:center;
border-radius: 999px;
box-shadow: 0 0 46px rgba(var(--a1), .22), 0 0 78px rgba(var(--a2), .12);
border: 1px solid rgba(var(--a1), .34);
z-index:1;
white-space:nowrap;
}
.recommended-badge::before{
content:"";
position:absolute;
inset:-8px -14px;
border-radius:999px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
opacity:.55;
z-index:-1;
}
.recommended-badge::after{
content:"";
position:absolute;
width:18px;
height:18px;
bottom:-9px;
right:28px;
background:var(--grad);
transform: rotate(45deg);
border-radius:4px;
box-shadow: 0 10px 30px rgba(var(--a2), .10);
opacity:1;
pointer-events:none;
}
.discount-badge{
position:absolute;
top:14px;
right:14px;
font-size:.95rem;
font-weight:950;
color:var(--accent-1);
letter-spacing:-0.02em;
text-shadow: 0 0 22px rgba(var(--a1), .25);
pointer-events:none;
z-index:2;
}
.price{ display:flex; flex-direction:column; align-items:flex-start; gap:.18rem; margin:.2rem 0 .35rem; }
.price-original{
position:relative;
display:inline-flex;
align-items:baseline;
gap:.35rem;
}
.price-original::after{
content:"";
position:absolute;
left:-10px;
right:-10px;
top:50%;
height:3px;
background:var(--accent-1);
transform:translateY(-50%);
border-radius:999px;
box-shadow:0 0 26px rgba(var(--a1), .28);
}
.price-after{
color:var(--accent-1);
font-weight:900;
font-size:.98rem;
}
.price-after strong{
font-size:1.25rem;
letter-spacing:-0.04em;
}
.price-after-currency{
color:var(--accent-1);
font-weight:900;
}
.amount{ font-size:2.05rem; font-weight:950; letter-spacing:-0.06em; }
.currency{ color:var(--muted); font-weight:900; }
.audience{ color:var(--muted); margin:0; }
.feature-list{
margin:1rem 0 0;
padding:0;
list-style:none;
display:grid;
gap:.6rem;
color:var(--muted);
}
.feature-list li{ padding-left:1.55rem; position:relative; }
.feature-list li::before{
content:"";
position:absolute; left:0; top:.46rem;
width:10px; height:10px; border-radius:999px;
background: var(--grad);
box-shadow: 0 0 14px rgba(var(--a1), .14);
}
.price-actions{ margin-top:1.15rem; display:grid; gap:.6rem; }
.btn{
display:inline-flex; align-items:center; justify-content:center;
height:46px; padding:0 1.05rem;
border-radius:999px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
font-weight:900; font-size:.95rem;
cursor:pointer;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--glow-soft); }
.btn:focus-visible{ outline:none; box-shadow:var(--focus); }
.btn-primary{ border:none; background:var(--grad); color:#041015; box-shadow:var(--glow-strong); }
.btn-ghost{ background:transparent; }
.fineprint{ margin-top: 1.1rem; font-size: 0.92rem; }
.timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; }
.timeline-item{ display:grid; grid-template-columns:44px 1fr; gap:.9rem; align-items:start; }
.timeline-content{ min-width:0; }
.timeline-content p{ margin:0; color:var(--muted); overflow-wrap:anywhere; }
.timeline-icon{
width:44px; height:44px; border-radius:14px;
display:grid; place-items:center;
font-weight:950; color:#041015;
background:var(--grad);
box-shadow:var(--glow-soft);
}
/* ✅ PÁGINA 4: PROCESO - Caras justificadas a la derecha */
#proceso.screen{
min-height: 100vh;
display: grid;
align-items: center;
}
.proceso-layout{
display: flex;
gap: 2rem;
align-items: flex-start;
}
.proceso-image{ 
max-width: 70%;
height: auto;
display: block;
flex-shrink: 0;
}
.proceso-content{
flex: 1;
max-width: 100%;
}
#proceso .section-header{ margin-bottom: 1.2rem; }
#proceso .timeline{
display:grid;
grid-template-columns: 1fr;
gap: 0.8rem;
}
#proceso .timeline-item{
min-width:0;
padding: 0.85rem;
border-radius: 14px;
grid-template-columns: 36px 1fr;
gap: 0.75rem;
}
#proceso .timeline-icon{ width:36px; height:36px; border-radius:12px; font-size:0.95rem; }
#proceso .timeline-content h3{ margin: 0 0 0.25rem; font-size: 0.98rem; }
#proceso .timeline-content p{ font-size: 0.92rem; line-height: 1.35; }
.contact-form label{
display:grid; gap:.45rem;
font-weight:900; font-size:.92rem;
margin-bottom:.85rem;
}
input,select,textarea{
width:100%;
padding:.78rem .9rem;
border-radius:14px;
border:1px solid var(--border);
background:var(--surface-2);
color:var(--text);
font:inherit;
outline:none;
}
select{
appearance:none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
background-repeat:no-repeat;
background-position:right .75rem center;
background-size:20px;
padding-right:2.5rem;
}
textarea{ resize:vertical; min-height:130px; }
input:focus,select:focus,textarea:focus{
box-shadow:var(--focus);
border-color:rgba(var(--a2), .45);
}
select option{
background:var(--bg);
color:var(--text);
}
:root.theme-dark select option{
background:#020304;
color:rgba(255,255,255,.92);
}
.form-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.2rem; }

/* ✅ FOOTER VERDE - Pantalla 7 */
.site-footer{
padding:2.2rem 0 2.8rem;
background:var(--promo-green);
}
.footer-inner{
display:flex; justify-content:space-between; align-items:center;
gap:1rem; flex-wrap:wrap;
border-top:1px solid rgba(0,0,0,0.15);
padding-top:1.2rem;
}
.footer-inner strong,
.footer-inner .sep,
.footer-inner .muted{
color:#000;
}
.footer-links a{ color:#000; font-weight:900; font-size:.92rem; }

.modal{
position:fixed;
inset:0;
z-index:80;
display:none;
}
.modal.is-open{ display:block; }
.modal-backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.55);
}
.modal-panel{
position:relative;
width:min(740px, calc(100% - 2rem));
margin: 8vh auto;
border-radius: 18px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(16px);
box-shadow: var(--glow-strong);
padding: 1.2rem;
}
.modal-panel-sm{
width: min(460px, calc(100% - 2rem));
}
.modal-panel-lg{
width: min(1060px, calc(100% - 2rem));
padding: 1.1rem;
max-height: 86vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-close{
position:absolute;
top:10px; right:10px;
width:40px; height:40px;
border-radius:999px;
border:1px solid var(--border);
background: transparent;
color: var(--text);
cursor:pointer;
z-index: 2;
}
.modal-title{
margin:0 0 .35rem;
font-size: 1.45rem;
font-weight: 950;
background: var(--grad);
-webkit-background-clip:text;
background-clip:text;
color: transparent;
}
.modal-sub{ margin:0 0 1rem; }
.modal-actions{
display:flex;
gap:.75rem;
flex-wrap:wrap;
margin-top: .6rem;
}
.checkout{
display:grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 1rem;
align-items:start;
overflow-y: auto;
padding-right: 6px;
}
.checkout::-webkit-scrollbar{ width: 10px; }
.checkout::-webkit-scrollbar-thumb{
background: color-mix(in srgb, var(--border) 70%, transparent);
border-radius: 999px;
}
.checkout::-webkit-scrollbar-track{ background: transparent; }
.checkout-note{
border:1px solid var(--border);
border-radius: 14px;
padding: .75rem .85rem;
background: color-mix(in srgb, var(--surface) 80%, transparent);
margin-bottom: .85rem;
}
.grad-inline{
background: var(--grad);
-webkit-background-clip:text;
background-clip:text;
color: transparent;
font-weight: 950;
}
.checkout-card{
border:1px solid var(--border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 80%, transparent);
padding: .9rem;
margin-bottom: .85rem;
}
.checkout-card-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
margin-bottom:.7rem;
}
.checkout-card h3{
margin:0;
font-size: 1rem;
font-weight: 950;
}
.link-like{
border:none;
background:transparent;
color: var(--muted);
font-weight: 900;
cursor:not-allowed;
text-decoration: underline;
text-underline-offset: 4px;
}
.checkout-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
}
.pay-methods{
display:grid;
gap: .65rem;
}
.method{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap: .8rem;
padding: .75rem .8rem;
border-radius: 12px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
cursor:pointer;
text-align:left;
font-weight: 950;
}
.method.is-open{
border-color: rgba(var(--a1), .45);
box-shadow: 0 0 20px rgba(var(--a1), .12);
}
.method-panel{
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 78%, transparent);
padding: .85rem;
display:none;
}
.method-panel.is-open{ display:block; }
.pay-cardgrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
}
.pay-cardgrid .span-2{ grid-column: 1 / -1; }
.check{
display:flex;
gap:.65rem;
align-items:flex-start;
font-weight:800;
color: var(--muted);
margin: 0.75rem 0 0.2rem;
}
.check input{ margin-top:.25rem; }
.btn-wide{ width: 100%; }
.summary{
border:1px solid var(--border);
border-radius: 14px;
padding: .9rem;
background: color-mix(in srgb, var(--surface) 80%, transparent);
position: sticky;
top: 18px;
}
.summary h3{
margin:0 0 .65rem;
font-size: 1rem;
font-weight: 950;
}
.summary-box{
border:1px solid var(--border);
border-radius: 12px;
padding: .8rem;
background: color-mix(in srgb, var(--surface) 76%, transparent);
}
@media (max-width: 980px){
:root{
--logo-size:min(280px, 70vw);
--center-bias-y:-3vh;
--logo-nudge-x: 0px;
}
.section { padding-top: 3rem; }
#servicios-web { padding-top: 6rem; }
#planes { padding-top: 6rem; }
#contacto { padding-top: 6rem; }
.cards-3, .pricing{ grid-template-columns:1fr; }
.why-grid{ grid-template-columns:1fr 1fr; }
.contact-grid{ grid-template-columns:1fr; }
.hero-compose{ grid-template-columns: 1fr; }
.proceso-layout{ gap: 1.5rem; }
.proceso-image{ max-width: 75%; }
.logo-slot{
width: var(--logo-size);
height: var(--logo-size);
margin-bottom: 1rem;
transform: translateX(0px);
}
#proceso.screen{ min-height: auto; }
#proceso .timeline{ grid-template-columns: 1fr; }
.proceso-content{ max-width: 100%; margin-left: 0; }
.checkout{ grid-template-columns: 1fr; }
.checkout-grid{ grid-template-columns: 1fr; }
.pay-cardgrid{ grid-template-columns: 1fr; }
.pay-cardgrid .span-2{ grid-column: auto; }
}
@media (max-width: 768px){
.section { padding-top: 5rem; }
#servicios-web { padding-top: 9rem; }
#planes { padding-top: 9rem; }
#contacto { padding-top: 9rem; }
.audio-toggle{ right: 62px; top: 140px; }
.icon-toggle{ right: 12px; top: 140px; }
.audio-popover{ right: 62px; width: 190px; top: 195px; }
.proceso-layout{ flex-direction: column; }
.proceso-image{ max-width: 100%; }
}
@media (max-width: 520px){
.section { padding-top: 7rem; }
#servicios-web { padding-top: 12rem; }
#planes { padding-top: 12rem; }
#contacto { padding-top: 12rem; }
.hero { padding-top: 0; }
.promo-countdown { padding: 0.5rem; }
.countdown-content { gap: 0.6rem; flex-direction: column; }
.promo-text { font-size: 0.8rem; }
.countdown-timer { gap: 0.35rem; }
.counter { padding: 0.3rem 0.5rem; min-width: 2.2rem; font-size: 0.8rem; }
.audio-toggle{ right: 62px; top: 165px; }
.icon-toggle{ right: 12px; top: 165px; }
.audio-popover{ right: 62px; width: 190px; top: 220px; }
.nav-arrow{ bottom: 12px; }
}