:root{
--bg:#050505;
--panel:#0c0c0c;
--panel2:#101010;
--text:#ffffff;
--muted:rgba(255,255,255,.68);
--muted2:rgba(255,255,255,.45);
--line:rgba(255,255,255,.10);
--line2:rgba(255,255,255,.14);
--accent:#ff6300;
--shadow: 0 20px 60px rgba(0,0,0,.55);
--radius: 18px;
--radius2: 22px;
--max: 1180px;
--ease: cubic-bezier(.2,.8,.2,1);
--yes: #ff6300; /* your accent */
--yesBg: rgba(255,99,0,.18);
--no: #2fe27a; /* green text */
--noBg: rgba(47,226,122,.18);
}
*{ box-sizing:border-box; }
html,
body{
height:100%;
max-width:100%;
overflow-x: hidden;
}
@supports (overflow: clip){
html,
body{
overflow-x: clip;
}
}
body{
margin:0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
.bg-glow{
position:fixed;
inset:-40% -20% auto -20%;
height:80vh;
background:
radial-gradient(closest-side, rgba(255,99,0,.26), rgba(255,99,0,0) 70%),
radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 68%);
filter: blur(25px);
pointer-events:none;
z-index:0;
}
/* Header */
.header{
position:sticky;
top:0;
z-index:10;
backdrop-filter: blur(12px);
background: rgba(5,5,5,.62);
border-bottom: 1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding: 14px 20px;
}
.brand{
display:flex; align-items:center; gap:10px;
letter-spacing:.4px;
}
.brandMark{
width:8px; height:8px; border-radius:4px;
background: var(--accent);
box-shadow: 0 0 0 5px rgba(255,99,0,.10);
}
.brandMark.small{ width:6px; height:6px; border-radius:3px; }
.brandName{ font-weight:700; }
.brandNameLogo {
height: 28px; /* adjust if needed */
width: auto;
display: block;
}
.brandTag{
font-size:10px;
color: var(--muted2);
border:1px solid var(--line);
padding: 4px;
border-radius: 999px;
}
.nav{ display:flex; align-items:center; gap:14px; }
.nav a{
color: var(--muted);
font-size:14px;
padding: 8px 10px;
border-radius: 999px;
transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover{ color:#fff; background: rgba(255,255,255,.06); }
html{
scroll-behavior: smooth;
}
#contacto{
scroll-margin-top: 90px; /* adjust if needed */
}
.headerCta{
color: #fff !important;
font-weight: 700;
}
/* Layout */
main{ position:relative; z-index:1; }
.section, .hero{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section{ padding: 30px 0; }
.sectionHead{ max-width: 720px; }
.sectionHead h2{
margin:0 0 10px;
font-size: 28px;
letter-spacing: -.02em;
}
.sectionHead p{ margin:0; color: var(--muted); line-height:1.6; }
.hero{
padding: 90px 0 26px;
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 28px;
align-items:start;
}
.pill{
display:inline-flex; align-items:center; gap:10px;
border:1px solid var(--line);
background: rgba(255,255,255,.03);
padding: 8px 12px;
border-radius: 999px;
color: var(--muted);
font-size: 13px;
margin:0 0 18px;
}
.pillDot{ width:8px; height:8px; border-radius:999px; background: var(--accent); }
.hero h1{
margin:0 0 14px;
font-size: 80px;
line-height: 1.08;
letter-spacing: -.03em;
}
.accent{ color: var(--accent); text-shadow: 0 0 24px rgba(255,99,0,.15); }
.sub{ margin:0 0 22px; color: var(--muted); line-height: 1.7; max-width: 56ch; }
.heroCtas{ display:flex; gap: 12px; align-items:center; margin-bottom: 22px; }
.btn{
border-radius: 999px;
border: 1px solid var(--line2);
padding: 16px 24px;
font-size: 17px;
font-weight: 700;
background: rgba(255,255,255,.04);
color:#fff;
transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.22);
}
.btn.primary{
background: linear-gradient(180deg, rgba(255,99,0,.95), rgba(255,99,0,.75));
border-color: rgba(255,99,0,.70);
box-shadow: 0 18px 40px rgba(255,99,0,.16);
}
.btn.primary:hover{ box-shadow: 0 22px 55px rgba(255,99,0,.22); }
.btn.ghost{
background: rgba(255,255,255,.03);
}
.btn.full{ width:100%; }
.heroMetrics{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
margin-top: 18px;
}
.metric{
padding: 12px 12px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255,255,255,.02);
}
.metricTop{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; }
.metricNum{ font-weight:700; letter-spacing:-.02em; }
.metricLabel{ font-size:12px; color: var(--muted2); }
.metricBar{
height: 6px;
background: rgba(255,255,255,.06);
border-radius: 999px;
margin-top: 10px;
overflow:hidden;
}
.metricBar span{
display:block;
height: 100%;
background: rgba(255,99,0,.9);
border-radius:999px;
}
.heroLeft {
padding-left: 10px;
margin-right: 30px;
}
.heroLeft .heroCtas{
margin-top: 36px; /* prueba 16px / 24px / 32px */
}
.heroLeft .heroMetrics{
margin-top: 24px; /* separa mΓ©tricas del CTA */
}
/* Hero right card */
.glassCard{
border-radius: var(--radius2);
box-shadow: var(--shadow);
padding: 14px;
}
.cardHeader{ display:flex; gap:10px; align-items:center; margin-bottom: 10px;}
.chip{
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,99,0,.18);
border: 1px solid rgba(255,99,0,.35);
}
.chipOutline{
background: rgba(255,255,255,.03);
border-color: rgba(255,255,255,.12);
color: var(--muted);
}
.miniDash{
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
background: rgba(5,5,5,.55);
padding: 14px;
}
.dashTitle{
display:flex; align-items:center; justify-content:space-between;
color: var(--muted);
font-size: 13px;
margin-bottom: 12px;
}
.dashPulse{
display:flex; align-items:center; gap:8px;
font-size: 12px;
}
.dashPulse span{
width:8px; height:8px; border-radius:999px;
background: var(--accent);
box-shadow: 0 0 0 6px rgba(255,99,0,.12);
animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{
0%{ transform:scale(1); opacity:1; }
55%{ transform:scale(1.25); opacity:.55; }
100%{ transform:scale(1); opacity:1; }
}
.dashGrid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.dashStat{
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
padding: 12px;
background: rgba(255,255,255,.02);
}
.dashStat.wide{ grid-column: 1 / -1; }
.dashKpi{ font-size: 12px; color: var(--muted2); }
.dashVal{ font-weight: 800; letter-spacing: -.02em; font-size: 20px; margin: 6px 0 4px; }
.dashHint{ font-size: 12px; color: var(--muted); }
.sparkWrap{ margin-top: 10px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
#spark{ width:100%; height:90px; display:block; }
.dashFooter{
display:flex; justify-content:space-between;
margin-top: 10px;
}
.tiny{ font-size: 11px; color: var(--muted2); }
.accentText{ color: var(--accent); }
/* Static dashboard image replacement */
.imageDash {
padding: 0;
overflow: hidden;
}
/* IMAGE: no box, no background, no border */
.miniDash.imageDash {
border: none;
background: transparent;
padding: 0;
box-shadow: none;
display: flex;
justify-content: center;
overflow: visible; /* was hidden -> this was clipping */
align-items: flex-start; /* anchor content to top */
}
/* IMAGE SIZE: smaller but no growth limit */
.dashboardImage {
width: 140%; /* π controls size */
height: auto;
max-width: none; /* π IMPORTANT: removes growth limit */
border-radius: 0;
transform: translate(40px, -50px); /* Push phone upwards */
}
/* Nudge hero chips slightly to the left */
.heroRight .cardHeader {
margin-left: -40px; /* π adjust: -6px to -20px */
margin-top: -16px;
}
.heroRight {
position: relative;
}
/* Orange glow behind phone */
.phoneGlow--low {
position: absolute;
right: 0px;
bottom: -50px;
width: 420px;
height: 420px;
background: radial-gradient(
closest-side,
rgba(255, 99, 0, 0.35),
rgba(255, 99, 0, 0.18),
rgba(255, 99, 0, 0)
);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.phoneGlow--high {
position: absolute;
right: -60px; /* slightly more to the right */
bottom: 220px; /* π ABOVE the lower glow */
width: 300px;
height: 300px;
background: radial-gradient(
closest-side,
rgba(255, 99, 0, 0.28),
rgba(255, 99, 0, 0.14),
rgba(255, 99, 0, 0)
);
filter: blur(36px);
z-index: 0;
pointer-events: none;
}
/* Feature cards */
.cards3{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
margin-top: 22px;
}
.featureCard{
border-radius: var(--radius);
border: 1px solid var(--line);
background: rgba(255,255,255,.02);
padding: 18px;
transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.featureCard:hover{
transform: translateY(-3px);
border-color: rgba(255,99,0,.35);
background: rgba(255,99,0,.05);
}
.iconRing{
width: 36px; height: 36px; border-radius: 14px;
display:grid; place-items:center;
border: 1px solid rgba(255,99,0,.35);
background: rgba(255,99,0,.12);
margin-bottom: 10px;
}
.featureCard h3{ margin: 0 0 8px; letter-spacing:-.02em; }
.featureCard p{ margin: 0; color: var(--muted); line-height:1.6; }
.checkList{
list-style: none;
padding: 0;
margin: 12px 0 0;
display: grid;
gap: 8px;
}
.checkList li{
color: var(--muted);
font-size: 14px;
line-height: 1.45;
padding-left: 14px;
position: relative;
}
.checkList li::before{
content: "β";
position: absolute;
left: 0;
color: var(--accent);
font-weight: 700;
}
/* Make image container relative */
.imageDash {
position: relative;
}
/* Store badges positioned ON the image */
.storeBadges--onImage{
position:absolute;
top:14%;
right:80%;
display:flex;
flex-direction: column;
gap:16px;
z-index:3;
pointer-events:auto;
}
#demoVideo{
scroll-margin-top: 90px;
}
/* Badge (real-looking) */
.storeBadge{
display:flex;
align-items:center;
gap:10px;
color:#fff;
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.25);
backdrop-filter: blur(6px);
transition: color .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Logo container */
.storeMark{
width:26px;
height:26px;
display:grid;
place-items:center;
flex: 0 0 auto;
}
.storeMark svg{
width:100%;
height:100%;
display:block;
}
/* Text */
.storeText{
display:flex;
flex-direction:column;
line-height:1.05;
}
.storeSmall{
font-size:10px;
opacity:.85;
}
.storeBig{
font-size:14px;
font-weight:700;
}
/* Hover */
.storeBadge:hover{
color:#ff6300;
border-color: rgba(255,99,0,.6);
box-shadow: 0 0 0 6px rgba(255,99,0,.15);
transform: translateY(-2px);
}
.videoCard{
border-radius: var(--radius2);
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.02);
padding: 16px;
}
.videoTop{
display:flex;
gap:10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
/* Frame: βglassβ border + subtle inner shadow */
.videoFrame{
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(5,5,5,.55);
overflow: hidden;
aspect-ratio: 30 / 8;
}
/* Make the video feel like an βassetβ inside your UI */
.videoEl{
width: 100%;
height: auto;
display:block;
outline: none;
}
/* Optional: small hover lift like your cards */
.videoCard:hover{
border-color: rgba(255,99,0,.28);
background: rgba(255,99,0,.04);
}
/* Clickable cover */
.videoCover {
position: relative;
cursor: pointer;
}
.videoPoster {
width: 100%;
display: block;
border-radius: 18px;
}
/* Play button */
.playBtn {
position: absolute;
inset: 0;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: rgba(255,99,0,.75); /* π always orange */
color: #fff;
font-size: 22px;
display: grid;
place-items: center;
transition: transform .2s ease, background .2s ease;
}
.videoCover:hover .playBtn {
transform: scale(1.15);
}
/* Video modal sizing */
.videoModalPanel {
width: min(960px, 92vw);
background: transparent;
border: none;
box-shadow: none;
}
.videoModalPanel video {
width: 100%;
height: auto;
border-radius: 18px;
}
/* Split section */
.split{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 18px;
align-items:start;
margin-top: 5px;
}
.bullet{ list-style:none; padding:0; margin: 18px 0 0; display:grid; gap:10px; }
.bullet li{ color: var(--muted); display:flex; gap:10px; line-height:1.55; }
.bulletMark{ color: var(--accent); }
.note{
margin-top: 16px;
border-radius: 16px;
border: 1px solid rgba(255,99,0,.25);
background: rgba(255,99,0,.08);
padding: 12px 12px;
color: rgba(255,255,255,.82);
display:flex; align-items:flex-start; gap:10px;
}
.noteDot{ width:10px; height:10px; border-radius:999px; background: var(--accent); margin-top: 3px; }
.securityBox{
border-radius: var(--radius2);
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.02);
padding: 16px;
}
.securityTop{ display:flex; gap:10px; margin-bottom: 12px; flex-wrap:wrap; }
.badge{
font-size:12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.35);
background: rgba(255,99,0,.12);
}
.badgeOutline{
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.02);
color: var(--muted);
}
.securityGrid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.secItem{
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
padding: 12px;
background: rgba(255,255,255,.02);
}
.secItem.wide{ grid-column: 1/-1; }
.secLabel{ font-size:12px; color: var(--muted2); }
.secValue{ margin-top: 6px; font-weight: 650; }
/* Pricing */
#precios{
scroll-margin-top: 90px; /* same offset as contacto */
}
.pricing{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
margin-top: 22px;
}
.priceCard{
border-radius: var(--radius2);
border: 1px solid var(--line);
background: rgba(255,255,255,.02);
padding: 18px;
position:relative;
overflow:hidden;
}
.priceCardHot{
border-color: rgba(255,99,0,.35);
background: radial-gradient(600px 300px at 20% 0%, rgba(255,99,0,.14), transparent 60%),
rgba(255,255,255,.02);
}
.hot{
position:absolute;
top: 14px; right: 14px;
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.35);
background: rgba(255,99,0,.12);
}
.priceTop{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.priceTop h3{ margin:0; letter-spacing:-.02em; }
.price{
font-weight: 800;
letter-spacing:-.02em;
font-size: 26px;
}
.price span{ font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.priceCard ul{ margin: 14px 0 16px; padding-left: 16px; color: var(--muted); display:grid; gap: 8px; }
.priceCard li{ line-height:1.45; }
.coming-soon {
display: block; /* allows centering control */
width: 70%; /* π adjust width here */
margin: 0 auto; /* π centers horizontally */
text-align: center;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
color: #ff6300;
padding: 12px 0; /* vertical padding only */
border: 1px dashed rgba(255, 99, 0, 0.45);
border-radius: 999px;
background: rgba(255, 99, 0, 0.06);
}
.pricingNote{
margin-top: 12px;
text-align: right;
font-size: 10px;
color: var(--muted2);
letter-spacing: .02em;
}
/* Form section (matches site style) */
.formCard{
border-radius: var(--radius2);
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.02);
padding: 16px;
}
.formTop{
display:flex;
gap:10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.formGrid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.field{
display:grid;
gap: 6px;
}
.fieldFull{
grid-column: 1 / -1;
}
.field span{
font-size: 12px;
color: var(--muted2);
}
.field input,
.field textarea{
width: 100%;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(5,5,5,.55);
color: #fff;
padding: 10px 12px;
outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{
resize: vertical;
min-height: 110px;
}
.field input:focus,
.field textarea:focus{
border-color: rgba(255,99,0,.55);
box-shadow: 0 0 0 6px rgba(255,99,0,.12);
}
.check{
display:flex;
align-items:center;
gap:10px;
color: var(--muted);
font-size: 13px;
}
.check input{
width: 16px;
height: 16px;
}
.formActions{
display:flex;
align-items:center;
gap: 12px;
flex-wrap: wrap;
}
.formHint{
font-size: 12px;
color: var(--muted2);
}
.formSuccess{
margin: 0;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,99,0,.25);
background: rgba(255,99,0,.08);
color: rgba(255,255,255,.88);
}
.checkOrange{
color: var(--accent); /* your orange */
font-weight: 700;
}
.check input[type="checkbox"] {
accent-color: var(--accent); /* orange */
}
/* Mobile: stack form fields */
@media (max-width: 820px){
.formGrid{ grid-template-columns: 1fr; }
}
/* FAQ */
.faq{ margin-top: 20px; margin-bottom: 30px; display:grid; gap: 12px; }
details{
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255,255,255,.02);
padding: 12px 14px;
}
summary{ cursor:pointer; font-weight: 600; }
details p{ margin: 10px 0 0; color: var(--muted); line-height:1.6; }
/* Legal */
.legal{ padding-top: 26px; }
.legalCard{
border-radius: var(--radius2);
border: 1px solid var(--line);
background: rgba(255,255,255,.02);
padding: 18px;
}
.muted{ color: var(--muted); line-height:1.65; }
.h3{ margin: 14px 0 8px; font-size: 15px; letter-spacing:-.01em; }
.kv{
margin-top: 16px;
display:grid;
grid-template-columns: 190px 1fr;
gap: 10px 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.kv.compact{ margin-top: 10px; padding-top: 10px; }
.k{ color: var(--muted2); font-size: 13px; }
.v{ color: #fff; font-size: 13px; }
/* Footer */
.footer{
border-top: 1px solid var(--line);
padding: 24px 0;
}
.footerInner{
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
display:flex;
align-items:flex-start;
justify-content:flex-start; /* π key change */
gap: 48px; /* spacing between logo + links */
}
.brandLine{ display:flex; align-items:center; gap:10px; }
.smallText{ font-size: 12px; }
.footerLinks{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; }
.footerLinks a, .linkBtn{
color: var(--muted);
font-size: 13px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
}
.footerLinks a:hover, .linkBtn:hover{
color:#fff;
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
}
.brandNameLogo_footer {
height: 18px; /* adjust if needed */
width: auto;
display: block;
}
.footerLinksRows{
display:flex;
flex-direction:column;
gap: 20px;
}
/* ===== Footer: lock layout + typography (final) ===== */
/* Ensure the rows container isn't affected by .footerLinks (center + wrap) */
.footerLinks.footerLinksRows{
align-items: stretch;
flex-wrap: nowrap;
}
/* Stable 2-column row: Title | Content */
.footerRow{
display: grid;
grid-template-columns: 101px 1fr; /* try 140β160px */
gap: 1px; /* optional fine tuning */
align-items: center; /* vertical alignment title <-> content */
}
/* Title style (restore the "site style") */
.footerTitle{
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: var(--muted2);
text-transform: uppercase;
line-height: 1.2;
color: #fff;
}
/* Content containers */
.footerRowLinks,
.footerRowText{
margin: 0;
padding: 0;
line-height: 1.2;
}
/* Keep your pill links, but ensure consistent start */
.footerRowLinks a{
display: inline-flex;
align-items: center;
padding: 8px 10px;
line-height: 1.2;
}
/* Contact text aligned like the links (same box model) */
.footerRowText{
display: inline-flex;
align-items: center;
padding: 8px 10px;
color: var(--muted);
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
}
.footerRowText{
font-size: 13px; /* same as .footerLinks a */
font-weight: 400; /* match link weight */
}
/* --- Footer dual row: Social + Contact --- */
.footerRowDual{
grid-template-columns: 110px 1fr;
align-items: center;
}
.footerRowDualContent{
display: flex;
align-items: center;
gap: 24px; /* space between socials and contact */
flex-wrap: wrap;
}
.footerRowContact{
display: flex;
align-items: center;
gap: 10px;
}
.footerTitleInline{
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: var(--muted2);
text-transform: uppercase;
color: #fff;
}
/* Separators ONLY for "Sobre la empresa" links */
.footerRowLinksSeparated{
display: flex;
align-items: center;
}
.footerRowLinksSeparated .linkSep{
width: 1.5px;
height: 20px;
background: var(--line2);
margin: 0 10px;
flex-shrink: 0;
}
/* Footer social icons */
.footerSocialIcons{
display:flex;
align-items:center;
gap: 16px;
flex-wrap: wrap;
}
.footerSocialIcons .socialIcon{
border: 1.5px solid var(--accent) !important;
border-color: rgba(255,99,0,.85);
}
/* Tight circle hugging the icon */
.footerSocialIcons .socialIcon{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px; /* π controls how tight the circle is */
border-radius: 999px;
border: 1.5px solid var(--accent);
background: transparent;
width: auto; /* π remove fixed box */
height: auto;
}
.footerSocialIcons .socialIcon svg{
width: 16px; /* keep icon readable */
height: 16px;
color: #fff
}
/* Uniformly scale social icons */
.footerSocialIcons{
transform: scale(0.85); /* try 0.8 β 0.9 */
transform-origin: left center;
}
/* === Footer social icons: hover scale + orange icon === */
.footerSocialIcons .socialIcon{
transition:
transform .2s var(--ease),
background .2s var(--ease),
box-shadow .2s var(--ease),
color .2s var(--ease);
}
.footerSocialIcons .socialIcon:hover{
transform: scale(1.15); /* π grow, donβt move */
background: rgba(255,99,0,.12);
box-shadow: 0 0 0 6px rgba(255,99,0,.14);
}
.footerSocialIcons .socialIcon:hover svg{
color: #ff6300; /* π icon turns orange */
}
/* Footer contact items (phone + email) */
.footerContactItem{
display:inline-flex;
align-items:center;
gap: 6px;
color: var(--muted);
font-size: 13px;
padding: 6px 8px;
border-radius: 999px;
transition: color .2s var(--ease), background .2s var(--ease);
}
.footerContactItem svg{
width: 14px;
height: 14px;
color: var(--accent);
}
.footerContactItem:hover{
color: #fff;
background: rgba(255,255,255,.05);
}
/* Make ONLY the email icon a bit bigger */
.footerContactItem svg{
width: 14px;
height: 14px;
}
/* Email icon slightly larger */
.footerContactItem[href^="mailto"] svg{
width: 16px;
height: 16px;
}
.footer .brandNameLogo {
height: 24px; /* try 16β20px */
}
/*---------- PUSH ALL THE LINKS AND EVERYTHING TO THE RIGHT ----------- */
.footerLinks.footerLinksRows{
margin-left: 3%; /* try 2% / 3% / 4% / 5% */
}
/* Drawer (Cart) */
.drawer{
position:fixed;
inset:0;
z-index:40;
pointer-events:none;
overflow:hidden;
}
.drawer[aria-hidden="false"]{
pointer-events:auto;
overflow:visible;
}
.drawerOverlay{
position:absolute; inset:0;
background: rgba(0,0,0,.62);
opacity:0;
transition: opacity .22s var(--ease);
}
.drawer[aria-hidden="false"] .drawerOverlay{ opacity:1; }
.drawerPanel{
position:absolute;
top:0; right:0; height:100%;
width: min(420px, calc(100% - 28px));
background: rgba(10,10,10,.88);
border-left: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(14px);
transform: translateX(102%);
transition: transform .55s cubic-bezier(.2,.8,.2,1);
box-shadow: var(--shadow);
display:flex;
flex-direction:column;
}
.drawer[aria-hidden="false"] .drawerPanel{ transform: translateX(0); }
.drawerHead{
padding: 18px;
border-bottom: 1px solid var(--line);
display:flex; justify-content:space-between; align-items:flex-start;
gap: 14px;
}
.drawerTitle{ font-weight: 800; letter-spacing:-.02em; }
.drawerSub{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.iconBtn{
width: 38px; height: 38px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
color:#fff;
}
.iconBtn:hover{ background: rgba(255,255,255,.07); }
.drawerBody{ padding: 16px 18px; overflow:auto; }
.empty{ text-align:center; padding: 26px 10px; }
.emptyIcon{ font-size: 30px; margin-bottom: 10px; }
.emptyTitle{ font-weight: 750; letter-spacing:-.02em; }
.emptyText{ margin: 8px 0 14px; color: var(--muted); line-height:1.6; }
.cartList{ display:grid; gap: 10px; }
.cartItem{
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.02);
border-radius: 16px;
padding: 12px;
display:grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.itemName{ font-weight: 650; letter-spacing:-.01em; }
.itemMeta{ color: var(--muted2); font-size: 12px; margin-top: 4px; }
.itemMeta .cartMetaHighlight{
color: var(--accent);
font-weight: 800;
}
.itemRight{ display:flex; flex-direction:column; align-items:flex-end; gap: 8px; }
.itemPrice{ font-weight: 800; }
.itemActions{ display:flex; align-items:center; gap: 8px; }
.qty{
display:flex; align-items:center; gap: 6px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
border-radius: 999px;
padding: 6px 8px;
}
.qty button{
width: 26px; height: 26px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color:#fff;
}
.qty button:hover{ background: rgba(255,255,255,.08); }
.qty span{ min-width: 18px; text-align:center; font-size: 13px; }
.removeBtn{
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
color: var(--muted);
padding: 7px 10px;
border-radius: 999px;
font-size: 12px;
}
.removeBtn:hover{ color:#fff; background: rgba(255,255,255,.06); }
.summary{
margin-top: 14px;
border-top: 1px solid var(--line);
padding-top: 14px;
}
.sumRow{ display:flex; justify-content:space-between; align-items:center; padding: 6px 0; }
.sumRow.total{ font-weight: 800; font-size: 16px; }
.smallMuted{ margin: 12px 0 0; color: var(--muted2); font-size: 12px; line-height:1.55; }
.cartDiscountBox{
margin: 12px 0 16px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
transition:
border-color .25s var(--ease),
background .25s var(--ease),
box-shadow .25s var(--ease),
transform .25s var(--ease);
}
.cartDiscountBox:hover,
.cartDiscountBox.is-ok:hover,
.cartDiscountBox.is-error:hover{
border: none;
background: transparent;
box-shadow: none;
}
.cartDiscountBox.is-ok{
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.cartDiscountBox.is-error{
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.cartDiscountLabel{
display: block;
margin-bottom: 8px;
color: rgba(255,255,255,.62);
font-size: 12px;
font-weight: 650;
letter-spacing: -.01em;
}
.cartDiscountLabel::after{
content: none;
}
.cartDiscountRow{
display: flex;
gap: 8px;
}
.cartDiscountInput{
flex: 1;
min-width: 0;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(5,5,5,.42);
color: #fff;
padding: 10px 13px;
outline: none;
font-size: 13px;
transition:
border-color .2s var(--ease),
box-shadow .2s var(--ease),
background .2s var(--ease);
}
.cartDiscountInput::placeholder{
color: rgba(255,255,255,.32);
}
.cartDiscountInput:focus{
border-color: rgba(255,99,0,.42);
box-shadow: 0 0 0 4px rgba(255,99,0,.08);
background: rgba(5,5,5,.58);
}
.cartDiscountBox.is-ok .cartDiscountInput{
border-color: rgba(47,226,122,.35);
color: #2fe27a;
font-weight: 750;
}
.cartDiscountApplyBtn{
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.045);
color: rgba(255,255,255,.78);
border-radius: 999px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
box-shadow: none;
transition:
transform .18s var(--ease),
background .18s var(--ease),
border-color .18s var(--ease),
color .18s var(--ease);
}
.cartDiscountApplyBtn:hover{
transform: translateY(-1px);
color: #fff;
border-color: rgba(255,99,0,.35);
background: rgba(255,99,0,.10);
}
.cartDiscountApplyBtn:disabled{
cursor: default;
opacity: .72;
transform: none;
}
.cartDiscountMessage{
min-height: 16px;
margin-top: 8px;
font-size: 12px;
color: rgba(255,255,255,.56);
}
.cartDiscountBox.is-error .cartDiscountMessage{
color: rgba(255,107,107,.88);
font-weight: 650;
}
.cartDiscountSuccess{
display: flex;
align-items: center;
gap: 10px;
animation: discountPop .55s var(--ease) both;
}
.cartDiscountSuccess__icon{
width: 30px;
height: 30px;
border-radius: 999px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: #06140b;
background: #2fe27a;
font-weight: 1000;
box-shadow:
0 0 0 0 rgba(47,226,122,.28),
0 0 26px rgba(47,226,122,.32);
animation: discountIconPulse .75s var(--ease) both;
}
.cartDiscountSuccess strong{
display: block;
color: #2fe27a;
font-size: 16px;
font-weight: 950;
letter-spacing: -.025em;
text-shadow: 0 0 18px rgba(47,226,122,.14);
}
.cartDiscountSuccess small{
display: block;
margin-top: 1px;
color: rgba(255,255,255,.54);
font-size: 11px;
font-weight: 650;
}
@keyframes discountPop{
0%{
opacity: 0;
transform: translateY(8px) scale(.97);
}
55%{
opacity: 1;
transform: translateY(-2px) scale(1.025);
}
100%{
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes discountIconPulse{
0%{
transform: scale(.75);
box-shadow:
0 0 0 0 rgba(47,226,122,.34),
0 0 0 rgba(47,226,122,0);
}
60%{
transform: scale(1.08);
box-shadow:
0 0 0 8px rgba(47,226,122,.10),
0 0 30px rgba(47,226,122,.38);
}
100%{
transform: scale(1);
box-shadow:
0 0 0 4px rgba(47,226,122,.08),
0 0 22px rgba(47,226,122,.22);
}
}
@media (max-width: 430px){
.cartDiscountRow{
flex-direction: row;
align-items: center;
gap: 6px;
width: 100%;
}
.cartDiscountInput{
min-width: 0;
height: 34px;
padding: 0 10px;
font-size: 12px;
flex: 1 1 auto;
}
.cartDiscountApplyBtn{
height: 34px;
min-height: 0;
padding: 0 10px;
font-size: 11px;
flex: 0 0 auto;
white-space: nowrap;
}
.cartDiscountLabel{
font-size: 12px;
margin-bottom: 7px;
}
.cartDiscountMessage{
font-size: 11px;
margin-top: 7px;
}
}
/* Responsive */
@media (max-width: 980px){
.hero{ grid-template-columns: 1fr; }
.split{ grid-template-columns: 1fr; }
.cards3{ grid-template-columns: 1fr; }
.pricing{ grid-template-columns: 1fr; }
.heroMetrics{ grid-template-columns: 1fr; }
.payGrid{ grid-template-columns: 1fr; }
.kv{ grid-template-columns: 1fr; }
.nav a{ display:none; }
}
/* --- Header hide on scroll --- */
.header{
position: fixed; /* override sticky */
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: transform .3s ease;
}
.header.header--hidden{
transform: translateY(-100%);
}
:root { --header-h: 64px; } /* adjust once */
body { padding-top: var(--header-h); }
/* =========================================================
RESPONSIVE BREAKPOINTS (Professional)
========================================================= */
/* -------- XL screens (>= 1600px): breathe a bit more -------- */
@media (min-width: 1600px){
:root{
--max: 1240px;
--header-h: 72px;
}
}
/* -------- Large laptops (<= 1200px) -------- */
@media (max-width: 1200px){
.hero{
grid-template-columns: 1.08fr .92fr;
}
.dashboardImage{
width: min(150%, 700px);
transform: translate(28px, -44px);
}
.storeBadges--onImage{
left: -4%;
top: 16%;
}
}
/* -------- Tablets / small laptops (<= 980px) -------- */
@media (max-width: 980px){
:root{ --header-h: 66px; }
.hero{ grid-template-columns: 1fr; }
.split{ grid-template-columns: 1fr; }
.cards3{ grid-template-columns: 1fr; }
.pricing{ grid-template-columns: 1fr; }
.heroMetrics{ grid-template-columns: 1fr; }
.kv{ grid-template-columns: 1fr; }
.grid2{ grid-template-columns: 1fr; }
/* Keep brand + CTA visible; hide other links (since no burger menu in HTML) */
.nav a{ display:none; }
.nav .headerCta{ display:inline-flex; }
.nav a[href="#login"]{ display:inline-flex; }
.dashboardImage{
width: min(108%, 640px);
transform: translate(0px, -10px);
}
.storeBadges--onImage{
position: static;
flex-direction: row;
justify-content: center;
gap: 12px;
margin: 10px 0 0;
}
.imageDash{
flex-direction: column;
align-items: center;
}
.cardHeader{
justify-content: center;
}
.phoneGlow--high{ display:none; }
}
/* -------- Small tablets / large phones (<= 768px) -------- */
@media (max-width: 768px){
.header{
padding-left: var(--containerPad);
padding-right: var(--containerPad);
}
.brand{ min-width: 0; }
.brandTag{ display:none; }
.hero{
padding-top: calc(var(--s-6) + 6px);
}
.btn{ padding: 10px 14px; }
.storeBadge{
min-width: 0;
width: auto;
}
.footerInner{
flex-direction: column;
gap: 18px;
}
.footerRow{
grid-template-columns: 1fr;
gap: 8px;
align-items: start;
}
.footerRowDual{
grid-template-columns: 1fr;
}
.footerRowDualContent{
justify-content: flex-start;
}
.brandNameLogo{ height: 22px; }
.brandMark{
margin-right: -3px;
margin-left: 15px;
}
.btn.primary.headerCta{
margin-right: 15px;
}
}
/* -------- Phones (<= 600px) -------- */
@media (max-width: 600px){
:root{
--containerPad: 16px;
--header-h: 64px;
}
.pill{ font-size: 12px; }
.sub{ max-width: 100%; }
.heroCtas{
gap: 10px;
}
.metric{
padding: 12px;
}
.modalPanel{
width: calc(100% - 18px);
border-radius: 20px;
}
.steps{
gap: 8px;
}
.step{
font-size: 12px;
padding: 7px 9px;
}
.storeBadges--onImage{
flex-direction: column;
align-items: stretch;
}
.storeBadge{
width: 100%;
justify-content: center;
}
}
/* =========================================================
ULTRAWIDE (2560px+): FULL-WIDTH 2-column layout
(Matches header full width)
========================================================= */
@media (min-width: 2560px) {
:root{
--header-h: 76px;
}
main{
width: 100%;
max-width: none;
margin: 0;
/* β¬
οΈ Push layout to the left */
padding-left: clamp(48px, 4vw, 96px);
padding-right: clamp(120px, 7vw, 220px);
display: grid;
/* β¬
οΈ Hero slightly wider than Producto */
grid-template-columns: 1.15fr 0.85fr;
/* β¬
οΈ More space between columns */
gap: clamp(48px, 4vw, 80px);
align-items: start;
}
main > section,
main > footer{
width: auto !important;
margin: 0 !important;
}
}
/* ULTRAWIDE (2560px+): FAQ + Footer FULL WIDTH ONLY*/
@media (min-width: 2560px) {
/* Force FAQ to occupy the full grid row */
main > section#faq{
grid-column: 1 / -1;
}
/* Force footer to occupy the full grid row */
main > footer.footer{
grid-column: 1 / -1;
}
/* Optional: keep FAQ content readable (not too stretched) */
#faq .faq{
max-width: 1200px;
}
}
/* =========================================================
1024px range: keep content centered, but footer full-bleed
========================================================= */
@media (max-width: 1200px) and (min-width: 901px) {
main{
width: 100%;
max-width: none;
margin: 0;
/* β¬
οΈ Keep comfortable left padding */
padding-left: clamp(24px, 4vw, 48px);
/* β‘οΈ MUCH smaller right padding */
padding-right: clamp(8px, .9vw, 8px);
}
/* Let hero use all the space available */
.hero{
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Optional: give the right column more real estate */
.hero{
grid-template-columns: 1fr 1.05fr; /* more room for the phone */
gap: clamp(26px, 3vw, 52px);
}
/* Stop horizontal overflow from affecting layout / header */
html, body{
overflow-x: clip; /* better than hidden (doesn't create scrolling quirks) */
}
/* DO NOT clip the hero column */
.heroRight{
overflow: visible;
}
/* Give the phone room so it isn't clipped */
.miniDash.imageDash{
overflow: visible; /* let it breathe */
padding-right: clamp(18px, 2vw, 36px);
}
/* (Optional) keep nice rounded clipping if needed */
.miniDash.imageDash{
border-radius: 18px;
}
/* Center all sections (content) */
main > section{
margin-left: auto !important;
margin-right: auto !important;
}
/* β
Footer: full viewport width (break out of main padding) */
main > footer.footer{
width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* Keep footer content aligned with the page padding */
.footerInner{
width: 100%;
max-width: none;
margin: 0 auto;
padding-left: clamp(24px, 4vw, 48px);
padding-right: clamp(24px, 4vw, 48px);
}
}
/* 1024px (901β1200): Footer = 2 columns (brand left, links right)
Right column contains 2 rows (like your 2nd screenshot) */
@media (max-width: 1200px) and (min-width: 901px) {
/* Footer content uses full available width */
.footerInner{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: clamp(24px, 4vw, 48px) !important;
padding-right: clamp(24px, 4vw, 48px) !important;
/* β
This is the key: 2 columns, not 1 */
display: grid !important;
grid-template-columns: minmax(260px, 360px) 1fr !important;
column-gap: clamp(28px, 4vw, 64px);
align-items: start;
}
/* Left column: brand stays left */
.footerLeft{
grid-column: 1;
grid-row: 1;
}
/* Right column: everything else stays to the right (two rows inside) */
.footerLinks.footerLinksRows{
grid-column: 2;
grid-row: 1;
margin-left: 0 !important; /* cancels your old push-right rule */
}
/* Keep Row 1 (social + contact) on one line */
.footerRowDualContent{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: clamp(16px, 2vw, 28px);
}
/* If contact row is too tight, allow ONLY the contact to wrap */
.footerRowContact{
flex-wrap: wrap;
row-gap: 8px;
}
/* Row 2 links can wrap naturally if needed */
.footerRowLinksSeparated{
flex-wrap: wrap;
row-gap: 10px;
}
}
@media (max-width: 1200px) and (min-width: 901px) {
/* 1) Make the left column narrower so the right content moves left */
.footerInner{
grid-template-columns: minmax(100px, 180px) 1fr !important; /* was 260β360 */
column-gap: clamp(18px, 2.6vw, 40px) !important; /* slightly tighter */
}
/* 2) Remove any "push to the right" from earlier rules */
.footerLinks.footerLinksRows{
margin-left: 0 !important;
padding-left: 0 !important;
justify-self: start; /* makes sure it hugs the left of column 2 */
}
/* Optional: if you still want it even more left */
.footerLinks.footerLinksRows{
transform: translateX(-14px);
}
}
@media (max-width: 1200px) and (min-width: 901px) {
.dashboardImage{
width: 170%; /* β¬
οΈ percentage-based scaling */
max-width: none; /* allow it to exceed container */
height: auto;
transform: translate(20px, -40px);
}
}
/* β
iPad/tablet: evita que el hero "ensanche" la pΓ‘gina */
@media (min-width: 769px) and (max-width: 1024px){
/* 1) El hero no puede crear ancho extra */
.hero{
overflow-x: clip; /* mejor que hidden */
}
/* 2) El contenedor del telΓ©fono tambiΓ©n */
.heroRight,
.miniDash.imageDash{
overflow-x: clip;
}
/* 3) Reduce el "desborde" del telΓ©fono en iPad */
.dashboardImage{
width: 120%;
transform: translate(10px, -30px);
}
/* 4) Evita que los glows empujen fuera */
.phoneGlow--high{
transform: translateX(-30%);
}
.phoneGlow--low{
transform: translateX(-30%);
}
.dashboardImage{
scale: calc(1);
transform: translateX(-15%);
}
}
/* =========================================================
768px range
========================================================= */
/* Tablet (601β768): move heroRight content under the sub text by swapping which one is visible */
.heroRight--tabletSlot{ display:none; }
/* Re-show main nav links specifically at 768px */
@media (max-width: 768px) and (min-width: 601px){
.nav a{
display: inline-flex;
font-size: 0.75rem; /* slightly smaller */
line-height: 1.2;
}
.pill{
display: none;
}
/* hide the original heroRight (the sibling one) */
.hero > .heroRight:not(.heroRight--tabletSlot){
display: none;
}
/* show the duplicate that sits after .sub inside heroLeft */
.heroRight--tabletSlot{
display: block;
margin-top: 14px; /* optional spacing */
}
/* Anchor for absolute positioning */
.heroLeft{
position: relative;
}
/* Free placement over title/subtitle */
.heroRight--tabletSlot{
position: absolute;
top: 50%; /* move up/down */
left: 50%; /* horizontal reference */
transform: translateX(-10%);
z-index: 3; /* above text */
width: 100%;
max-width: 420px; /* optional, keeps it neat */
pointer-events: none; /* optional: text remains selectable */
}
.storeBadge--apple{
min-width: 112px;
}
.storeBadges.storeBadges--onImage{
display: flex;
flex-direction: column;
gap: 8px; /* space between Google Play & App Store */
align-items: center; /* optional: center them */
}
/* Make the image area a positioning context */
.miniDash.imageDash{
position: relative;
}
/* Overlay the badges ON TOP of the image */
.storeBadges.storeBadges--onImage{
position: absolute;
top: 0px; /* adjust vertical position */
left: 12px; /* adjust horizontal position */
z-index: 5;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start; /* or center */
transform: scale(0.75);
transform-origin: top left;
}
/* Make sure the image stays as-is and doesn't get affected by siblings */
.dashboardImage{
display: block;
transform: scale(1.45);
transform-origin: center;
margin-top: 25px;
margin-left: 10px;
}
.cardHeader{
transform: scale(0.72) translateY(20px);
transform-origin: left top;
margin-right: 55px;
}
.heroMetrics{
width: 45vw; /* 50% of the screen */
max-width: 45vw;
}
.header{
left: 0;
right: 0;
width: 100vw;
}
/* Footer logo smaller */
.footer .brandNameLogo,
.brandNameLogo_footer{
height: 18px; /* try 16β18px */
}
/* Footer copyright text smaller */
.footer .smallText{
font-size: 10px;
line-height: 1;
}
/* 2 columns: left brand (20%) + rest (80%) */
.footerInner{
flex-direction: row; /* override the <=768 column stack */
align-items: flex-start;
display: grid;
grid-template-columns: 19% 1fr;
column-gap: 18px;
}
/* Left column: stack logo + copyright */
.footerLeft{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
width: 100%;
}
/* Right column: keep all your existing rows */
.footerLinks.footerLinksRows{
width: 100%;
margin-left: 0; /* cancels any earlier push-right */
}
/* Force Row 1 content into a single horizontal line */
.footerRow.footerRowDual{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 16px;
}
/* Make the right side (icons + contact) a single row */
.footerRowDualContent{
display: flex;
align-items: center;
flex-wrap: nowrap; /* π key */
gap: 24px;
}
/* Social icons stay in one line */
.footerSocialIcons{
flex-wrap: nowrap;
gap: 16px;
}
/* Contact block stays inline */
.footerRowContact{
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 12px;
}
/* Prevent phone/email from breaking lines */
.footerContactItem{
white-space: nowrap;
}
/* Scale the whole right footer content */
.footerLinks.footerLinksRows{
transform: scale(0.8);
transform-origin: left top; /* keep it anchored */
}
/* Force Row 2 to stay on one line */
.footerRow{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 16px;
}
/* Keep the links in a single horizontal line */
.footerRowLinksSeparated{
display: flex;
align-items: center;
flex-wrap: nowrap; /* π key */
white-space: nowrap;
}
/* Prevent individual links from wrapping */
.footerRowLinksSeparated a{
white-space: nowrap;
}
.brandLine{
margin-left: -15px;
align-self: left;
}
.muted.smallText{
margin-left: -2px;
margin-top: 5px;
font-size: 8px;
}
}
@media (max-width: 768px){
.heroTitle{
font-size: 48px !important;
}
}
/* =========================================================
FORCE: Mobile-only header ONLY under 480px
========================================================= */
/* Always hide the mobile-only header by default (strong rule) */
header.header.header--mobileOnly{
display: none !important;
}
/* Always hide any burger that might exist in the desktop header */
header.header:not(.header--mobileOnly) .navToggle{
display: none !important;
}
/* Show mobile-only header only on small screens */
@media (max-width: 480px){
/* Hide desktop header */
header.header:not(.header--mobileOnly){
display: none !important;
}
/* Show mobile header */
header.header.header--mobileOnly{
display: flex !important;
align-items: center;
justify-content: space-between;
}
/* Burger visible on mobile header */
header.header.header--mobileOnly .navToggle{
display: inline-flex !important;
}
}
/* =========================================================
MOBILE DROPDOWN MENU
========================================================= */
/* Ensure the mobile header is the positioning context */
.header--mobileOnly{
position: fixed;
}
/* Dropdown panel */
.header--mobileOnly .mobileMenu{
position: fixed;
left: 0;
right: 0;
width: 100vw;
top: calc(100% + 10px);
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
border-radius: 18px;
border: 2px solid rgba(255,255,255,.16);
/* Darker, more solid glass (final) */
background: rgba(6,6,6,.96);
backdrop-filter: blur(14px);
box-shadow:
0 18px 50px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.04) inset;
z-index: 1001;
/* Hidden state (animated) */
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-6px);
pointer-events: none;
transition:
max-height .35s var(--ease),
opacity .22s var(--ease),
transform .22s var(--ease);
}
/* Subtle orange glow behind panel */
.header--mobileOnly .mobileMenu::before{
content:"";
position:absolute;
inset:-18px -18px auto -18px;
height: 110px;
background: radial-gradient(
closest-side,
rgba(255,99,0,.22),
rgba(255,99,0,0) 70%
);
filter: blur(18px);
pointer-events:none;
z-index:0;
}
/* Thin orange accent line at the top (brand anchor) */
.header--mobileOnly .mobileMenu::after{
content:"";
position:absolute;
top:0;
left:14px;
right:14px;
height:2px;
border-radius:999px;
background: linear-gradient(
90deg,
rgba(255,99,0,0),
rgba(255,99,0,.9),
rgba(255,99,0,0)
);
box-shadow: 0 0 10px rgba(255,99,0,.45);
pointer-events:none;
z-index:2;
}
/* Reveal when open */
.header--mobileOnly.header--menuOpen .mobileMenu{
max-height: 360px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Links: pill buttons */
.header--mobileOnly .mobileMenu a{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 12px;
border-radius: 14px;
/* White text by default */
color: #ffffff;
font-size: 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
transition:
transform .15s var(--ease),
background .2s var(--ease),
border-color .2s var(--ease),
box-shadow .2s var(--ease);
justify-content: flex-start; /* π instead of space-between */
text-align: left;
width: 100%; /* optional: makes the whole row clickable */
}
/* Optional: tiny orange dot indicator (very subtle) */
.header--mobileOnly .mobileMenu a::before{
content:"";
width:6px;
height:6px;
border-radius:999px;
background: rgba(255,99,0,0);
margin-right: 8px;
flex-shrink: 0;
transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
/* Hover */
.header--mobileOnly .mobileMenu a:hover{
background: rgba(255,255,255,.08);
border-color: rgba(255,99,0,.35);
box-shadow: 0 0 0 6px rgba(255,99,0,.10);
transform: translateY(-1px);
}
.header--mobileOnly .mobileMenu a:hover::before{
background: rgba(255,99,0,.9);
box-shadow: 0 0 0 4px rgba(255,99,0,.18);
}
/* Active (tap feedback) */
.header--mobileOnly .mobileMenu a:active{
transform: translateY(0);
background: rgba(255,99,0,.14);
border-color: rgba(255,99,0,.45);
}
/* Accessibility: focus ring */
.header--mobileOnly .mobileMenu a:focus-visible{
outline: none;
color: #ffffff;
box-shadow: 0 0 0 6px rgba(255,99,0,.18);
border-color: rgba(255,99,0,.45);
}
/* First item: subtle accent cue (eye entry point) */
.header--mobileOnly .mobileMenu a:first-child{
border-color: rgba(255,99,0,.28);
background: rgba(255,99,0,.06);
font-weight: 700;
}
/* First item hover: slightly stronger */
.header--mobileOnly .mobileMenu a:first-child:hover{
background: rgba(255,99,0,.14);
box-shadow: 0 0 0 6px rgba(255,99,0,.14);
}
/* Optional divider (future-proof) */
.header--mobileOnly .mobileMenu .divider{
height: 1px;
background: rgba(255,255,255,.08);
margin: 6px 6px;
}
/* MOBILE HEADER ALIGNMENT*/
.header--mobileOnly .mobileHeaderRight{
display: flex;
align-items: center; /* vertical centering */
gap: 10px;
}
/* Make the CTA the same height as .iconBtn (38px) */
.header--mobileOnly a.headerCta{
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px; /* matches .iconBtn */
padding: 0 10px; /* pill width */
font-size: 13px;
line-height: 1; /* avoid baseline weirdness */
white-space: nowrap;
/* keep it looking premium but not too heavy */
box-shadow: 0 10px 24px rgba(255,99,0,.18);
}
.header--mobileOnly .navToggle svg{
width: 22px;
height: 22px;
}
/* Ensure brand content is perfectly centered */
.header--mobileOnly .brand{
display: flex;
align-items: center; /* π key */
gap: 10px;
transform: scale(1); /* subtle, not cartoonish */
transform-origin: left center;
}
/* Kill baseline alignment on the logo image */
.header--mobileOnly .brandNameLogo{
display: block; /* π removes baseline behavior */
align-self: center;
}
/* Optional: slightly lift the brandTag if needed */
.header--mobileOnly .brandTag{
align-self: center;
}
/* =========================================================
FOOTER (425px) β align logo and copyright perfectly
========================================================= */
@media (max-width: 480px){
/* ================= Footer left (brand) ================= */
.footerLeft{
display: flex;
flex-direction: column;
align-items: center; /* π center */
text-align: center;
}
.footerLeft .brandLine{
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
/* Align copyright with logo (ignore dot) */
.footerLeft .smallText{
padding-left: 0;
}
/* ================= Social + contact block ================= */
/* Single-column layout */
.footerRow.footerRowDual{
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 14px;
justify-items: center; /* π center grid items */
text-align: center;
}
/* Flatten wrapper */
.footerRowDualContent{
display: contents !important;
}
/* --- SΓGUENOS --- */
.footerTitle{
justify-self: center;
}
/* Icons UNDER the title, centered, single row */
.footerRowLinks.footerSocialIcons{
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
transform: none !important;
}
.footerRowLinks.footerSocialIcons .socialIcon{
flex: 0 0 auto !important;
}
/* --- Contact block UNDER socials --- */
.footerRowContact{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px;
text-align: center;
}
/* Title on its own line */
.footerRowContact .footerTitleInline{
white-space: nowrap;
}
/* Phone + email on SAME line */
.footerRowContact .footerContactItem{
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* Wrap phone + email together */
.footerRowContact{
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
column-gap: 14px;
}
.footerRowContact .footerTitleInline{
flex-basis: 100%;
}
/* Make footer content stack vertically */
.footerInner{
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 22px;
}
/* All link/content blocks stay centered at the top */
.footerLinks.footerLinksRows{
order: 1;
justify-self: center;
text-align: center;
}
/* Move brand + copyright to bottom CENTER */
.footerLeft {
order: 2;
justify-self: center; /* centers within grid cell */
align-items: center; /* centers items horizontally */
text-align: center; /* centers text */
}
/* Brand spacing stays the same */
.footerLeft .brandMark.small {
margin-top: 20px;
}
.footerLeft .brandNameLogo {
height: 16px;
margin-top: 20px;
}
/* Brand line centered */
.footerLeft .brandLine {
justify-content: center; /* β¬
οΈ was flex-end */
}
/* Copyright centered */
.footerLeft .smallText {
padding-left: 0;
text-align: center; /* β¬
οΈ was right */
font-size: 8px;
margin-bottom: 0;
}
/* Center the whole legal links row */
.footerRowLinksSeparated{
display: flex;
justify-content: center; /* π real centering */
align-items: center;
text-align: center;
}
/* Normalize link box model */
.footerRowLinksSeparated a{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 6px; /* symmetric padding */
line-height: 1.2;
}
/* Normalize separators */
.footerRowLinksSeparated .linkSep{
display: inline-block;
align-self: center;
height: 14px;
margin: 0 6px;
}
.footerRowContact{
margin-top: 14px;
}
/* Extra space ONLY above "Sobre la empresa" */
.footerRow:not(.footerRowDual){
margin-top: 14px;
}
}
/*========== REST 480PX =========*/
@media (max-width: 480px){
.pill{
display: none !important;
}
.bg-glow{
inset: -32% -20% auto -20%;
}
.cardHeader{
display: flex;
justify-content: flex-start; /* π left align chips */
align-items: center;
text-align: left;
margin-right: auto; /* π push it to the left */
transform: scale(0.85) translateX(50px) translateY(20px);
transform-origin: left top;
}
.storeBadges.storeBadges--onImage{
transform: scale(0.9) translateX(-5px) translateY(40px);
transform-origin: top left;
gap: 20px;
}
.dashboardImage{
transform: scale(1.35) translateX(30px) translateY(-110px); /* π move up */
transform-origin: center top;
margin-top: 0; /* neutralize earlier margins */
}
/* Ensure the burger button centers its icon */
.header--mobileOnly .navToggle{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0; /* remove uneven padding */
}
/* Normalize the SVG itself */
.header--mobileOnly .navToggle svg{
display: block; /* removes inline SVG baseline shift */
}
.header{
left: 0;
right: 0;
width: 100vw;
}
.hero {
padding-top: 10px; /* adjust to taste */
}
.sub {
margin-bottom: -10px; /* try 10β14px */
}
.noteDot{
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0; /* π CLAVE */
display: inline-block; /* π CLAVE */
margin-top: 7px;
}
.phoneGlow--high{
display: block !important;
}
/* Your mobile positioning */
.phoneGlow--high {
right: 50%;
bottom: -40px;
width: 280px;
height: 280px;
transform: translateX(100%) translateY(-75%);
filter: blur(36px);
}
/* Lower glow β tighter and centered */
.phoneGlow--low {
right: 50%;
bottom: -40px;
width: 280px;
height: 280px;
transform: translateX(75%) translateY(-15%);
filter: blur(36px);
}
#producto.section {
margin-top: -80px;
}
.phoneGlow--high{
width: 200px; /* was 280/300 */
height: 200px;
filter: blur(28px); /* was 36px */
opacity: 0.85; /* optional */
}
.dashboardImage{
transform: scale(1.1) translateX(30px) translateY(-80px);
/* was ~1.35 and +30px X */
}
}
/*====== 375 px ====== */
@media (max-width: 380px) and (max-height: 585px) {
.header--mobileOnly .btn.primary.headerCta {
font-size: 10px;
padding: 4px 8px;
}
.header--mobileOnly .mobileMenu{
width: calc(100vw - 20px);
left: 50%;
right: auto;
/* β
center horizontally (this was missing) */
transform: translateX(-50%) translateY(-6px);
}
/* keep your open-state animation, but centered */
.header--mobileOnly.header--menuOpen .mobileMenu{
transform: translateX(-50%) translateY(0);
}
.hero .heroTitle {
font-size: 35px !important;
}
.heroCtas {
transform: scale(0.9);
transform-origin: left center;
}
.dashboardImage{
transform: scale(1) translateX(30px) translateY(-110px);
}
.cardHeader{
transform: scale(0.80) translateX(50px) translateY(20px);
}
.storeBadges.storeBadges--onImage{
transform: scale(.85) translateX(-5px) translateY(20px);
}
#producto.section {
margin-top: -110px;
}
.footerRowLinks a {
font-size: 11px;
}
.phoneGlow--high{
width: 100px; /* was 280/300 */
height: 100px;
filter: blur(28px); /* was 36px */
opacity: 0.85; /* optional */
}
.phoneGlow--low{
width: 100px; /* was 280/300 */
height: 100px;
filter: blur(28px); /* was 36px */
opacity: 0.85; /* optional */
}
}
/* === Tiny phones (e.g. 320x576) === */
@media (max-width: 340px) {
.headerCta{
transform: scale(0.85) translateX(20px);
transform-origin: center;
}
.hero .heroTitle {
font-size: 28px !important;
}
.heroCtas {
transform-origin: left center;
white-space: nowrap;
}
.cardHeader{
transform: scale(0.72) translateX(50px) translateY(20px);
}
#producto.section {
margin-top: -120px;
}
.footerRowLinks a {
font-size: 8px;
margin-top: 5px;
}
}
/* ===== Header Cart Button ===== */
.cartBtn{
display:inline-flex;
align-items:center;
gap:10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
padding: 10px 12px;
background: rgba(255,255,255,.04);
color:#fff;
font-weight: 700;
font-size: 13px;
transition:
transform .15s var(--ease),
background .2s var(--ease),
border-color .2s var(--ease),
box-shadow .2s var(--ease);
}
.cartBtn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.22);
}
/* contador */
.cartCount{
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size: 12px;
font-weight: 800;
border: 1px solid rgba(255,99,0,.55);
background: rgba(255,99,0,.18);
}
/* puntito naranja (solo cuando haya items) */
.cartDot{
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 6px rgba(255,99,0,.12);
display:none; /* se activa con JS cuando count > 0 */
}
/* Optional: a tiny tweak so it fits well in header */
.cartBtn--header{
padding: 10px 12px;
}
/* Fix: dot must not be display:none if JS toggles opacity */
.cartDot{
display: inline-block; /* β
was none */
opacity: 0; /* start hidden */
}
/* ===========================
MODAL (Premium NumbuX style)
=========================== */
/* Modal: hidden by default (real hide, not only pointer-events) */
.modal{
position: fixed;
inset: 0;
z-index: 50;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.modal[aria-hidden="false"]{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modalOverlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,.62);
opacity: 0;
transition: opacity .22s var(--ease);
}
.modal[aria-hidden="false"] .modalOverlay{ opacity: 1; }
.modalPanel{
position: relative; /* β
not absolute */
margin: 0; /* flex will center it */
width: min(560px, calc(100% - 28px));
background: rgba(10,10,10,.92);
border: 1px solid rgba(255,255,255,.12);
border-radius: 22px;
backdrop-filter: blur(14px);
box-shadow: var(--shadow);
padding: 16px;
/* β
hidden state */
opacity: 0;
transform: translateY(18px) scale(.985);
transition: transform .35s var(--ease), opacity .22s var(--ease);
/* β
prevent it from exceeding viewport */
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
}
.modal[aria-hidden="false"] .modalPanel{
opacity: 1;
transform: translateY(0) scale(1);
}
.modal[aria-hidden="false"]{
display: flex; /* β
enables centering */
align-items: center; /* β
vertical center */
justify-content: center; /* β
horizontal center */
padding: 16px; /* β
breathing room on small screens */
}
/* Subtle orange glow "behind" the panel edge */
.modalPanel::before{
content:"";
position:absolute;
inset: -18px -18px auto -18px;
height: 140px;
background: radial-gradient(closest-side, rgba(255,99,0,.22), rgba(255,99,0,0) 70%);
filter: blur(18px);
pointer-events:none;
z-index: 0;
}
/* Thin accent line (like your mobile menu top line) */
.modalPanel::after{
content:"";
position:absolute;
top: 0;
left: 18px;
right: 18px;
height: 2px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(255,99,0,0),
rgba(255,99,0,.85),
rgba(255,99,0,0)
);
box-shadow: 0 0 10px rgba(255,99,0,.35);
pointer-events:none;
z-index: 1;
}
/* Header: clean + aligned */
.modalHead{
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 4px 14px;
border-bottom: 1px solid rgba(255,255,255,.10);
margin-bottom: 14px;
}
.modalTitle{
font-weight: 800;
letter-spacing: -.02em;
font-size: 14px;
color: #fff;
}
/* Close button consistent with your iconBtn but slightly tighter */
.modalHead .iconBtn{
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.modalHead .iconBtn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.07);
box-shadow: 0 0 0 6px rgba(255,99,0,.10);
}
/* Body content spacing (where checkoutRoot renders) */
#checkoutRoot{
position: relative;
z-index: 2;
}
/* Mobile: tighter top spacing + full height feel */
@media (max-width: 600px){
.modal[aria-hidden="false"]{
padding: 10px;
}
.modalPanel{
width: calc(100% - 18px);
border-radius: 20px;
max-height: calc(100vh - 20px);
}
}
/* ==========================================
CHECKOUT UI (inside #checkoutRoot) β NumbuX
Paste at end of CSS
========================================== */
#checkoutRoot{
padding: 6px 2px 2px;
}
/* Header: 3 zones -> left | centered meta | right */
#checkoutRoot .checkoutHeader{
display: grid;
grid-template-columns: max-content 1fr max-content;
align-items: center;
gap: 10px;
padding-top: 16px; /* tweak */
margin-bottom: 10px;
}
#checkoutRoot .checkoutTitle{
justify-self: start;
font-size: 18px;
font-weight: 800;
letter-spacing: -.02em;
align-self: center;
line-height: 1;
}
/* Center: pills */
#checkoutRoot .checkoutMeta{
justify-self: center;
align-self: center;
display: inline-flex;
gap: 8px;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
/* Push X to the far right */
#checkoutRoot .checkoutClose{
margin-left: auto;
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
color: #fff;
font-size: 20px;
line-height: 1;
display:grid;
place-items:center;
transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
justify-self: end;
margin-left: 0; /* β
remove flex trick */
align-self: center;
margin-right: 10px; /* tweak: 6β16px */
}
#checkoutRoot .checkoutClose:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.07);
box-shadow: 0 0 0 6px rgba(255,99,0,.10);
}
/* Pills (scoped so it doesn't fight your hero .pill) */
#checkoutRoot .pill{
display:inline-flex;
align-items:center;
gap:8px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
padding: 8px 10px;
border-radius: 999px;
color: rgba(255,255,255,.78);
font-size: 12px;
}
#checkoutRoot .pill.pillAlt{
background: rgba(255,99,0,.10);
border-color: rgba(255,99,0,.28);
color: rgba(255,255,255,.92);
}
/* Step pills row */
#checkoutRoot .stepPills{
display:flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 14px;
}
#checkoutRoot .stepPill{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.72);
font-size: 12px;
letter-spacing: .01em;
}
#checkoutRoot .stepPill.isActive{
background: rgba(255,99,0,.14);
border-color: rgba(255,99,0,.38);
color: #fff;
box-shadow: 0 0 0 6px rgba(255,99,0,.10);
}
#checkoutRoot .stepPill.isDone{
border-color: rgba(255,255,255,.16);
color: rgba(255,255,255,.85);
}
/* Panel (same language as your cards) */
#checkoutRoot .panel{
border-radius: var(--radius2);
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.02);
overflow: hidden;
}
#checkoutRoot .panelTitle{
padding: 14px 14px 12px;
font-weight: 800;
letter-spacing: -.02em;
border-bottom: 1px solid rgba(255,255,255,.08);
background:
radial-gradient(700px 260px at 15% 0%, rgba(255,99,0,.10), transparent 60%),
rgba(255,255,255,.02);
}
#checkoutRoot .panelBody{
padding: 14px;
}
#checkoutRoot .divider{
height: 1px;
background: rgba(255,255,255,.08);
margin: 14px 0;
}
/* Line items */
#checkoutRoot .lineItem{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 12px;
padding: 10px 0;
}
#checkoutRoot .lineItem + .lineItem{
border-top: 1px solid rgba(255,255,255,.06);
}
#checkoutRoot .liTitle{
font-weight: 750;
letter-spacing: -.01em;
}
#checkoutRoot .liQty{
color: rgba(255,255,255,.65);
font-weight: 700;
margin-left: 6px;
}
#checkoutRoot .liMeta{
margin-top: 4px;
color: rgba(255,255,255,.55);
font-size: 12px;
}
#checkoutRoot .liPrice{
font-weight: 850;
}
/* Totals */
#checkoutRoot .totals{
display:grid;
gap: 8px;
}
#checkoutRoot .totRow{
display:flex;
justify-content:space-between;
gap: 12px;
}
#checkoutRoot .totRow.muted{
color: rgba(255,255,255,.60);
}
/* Hint / note */
#checkoutRoot .hint{
margin-top: 12px;
border-radius: 16px;
border: 1px solid rgba(255,99,0,.22);
background: rgba(255,99,0,.08);
padding: 12px 12px;
color: rgba(255,255,255,.86);
line-height: 1.55;
font-size: 13px;
}
/* Buttons inside checkout (mapped to your .btn style) */
#checkoutRoot .checkoutFooter{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-top: 14px;
padding: 10px 2px 2px;
flex-wrap: wrap;
}
#checkoutRoot .checkoutLegalLinks{
display:flex;
align-items:center;
gap: 10px;
color: rgba(255,255,255,.68);
font-size: 13px;
}
#checkoutRoot .checkoutLegalLinks .sep{
opacity: .35;
}
#checkoutRoot .checkoutNav{
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
justify-content:flex-end;
}
/* Make these look like your .btn */
#checkoutRoot .primaryBtn,
#checkoutRoot .ghostBtn{
border-radius: 999px;
border: 1px solid var(--line2);
padding: 10px 14px;
background: rgba(255,255,255,.04);
color:#fff;
transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#checkoutRoot .primaryBtn{
background: linear-gradient(180deg, rgba(255,99,0,.95), rgba(255,99,0,.75));
border-color: rgba(255,99,0,.70);
box-shadow: 0 18px 40px rgba(255,99,0,.14);
}
#checkoutRoot .ghostBtn{
background: rgba(255,255,255,.03);
}
#checkoutRoot .primaryBtn:hover,
#checkoutRoot .ghostBtn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.22);
}
#checkoutRoot .primaryBtn:disabled{
opacity: .55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Payment merchant block */
#checkoutRoot .merchantCard{
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(5,5,5,.45);
padding: 14px;
}
#checkoutRoot .merchantHead{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 10px;
margin-bottom: 12px;
}
#checkoutRoot .merchantName{
font-weight: 850;
letter-spacing: -.02em;
}
#checkoutRoot .merchantTag{
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.30);
background: rgba(255,99,0,.10);
color: rgba(255,255,255,.88);
white-space: nowrap;
}
#checkoutRoot .merchantGrid{
display:grid;
grid-template-columns: 1fr;
gap: 10px;
}
#checkoutRoot .merchantGrid .kv{
display:flex;
justify-content:space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
}
#checkoutRoot .merchantGrid .kv span{
color: rgba(255,255,255,.62);
font-size: 12px;
}
#checkoutRoot .merchantNote{
margin-top: 12px;
color: rgba(255,255,255,.70);
font-size: 12px;
line-height: 1.55;
}
/* Success */
#checkoutRoot .success{
display:flex;
align-items:flex-start;
gap: 12px;
}
#checkoutRoot .successDot{
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 8px rgba(255,99,0,.14);
margin-top: 6px;
}
#checkoutRoot .successTitle{
font-weight: 850;
letter-spacing: -.02em;
}
#checkoutRoot .successMeta{
margin-top: 4px;
color: rgba(255,255,255,.70);
font-size: 13px;
}
/* Actions row at the end */
#checkoutRoot .actionsRow{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
/* Inline panels (Aviso Legal / TΓ©rminos) */
#checkoutRoot .inlinePanels{
position: relative;
}
#checkoutRoot .inlinePanelBackdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
opacity: 0;
pointer-events:none;
transition: opacity .2s var(--ease);
z-index: 2600;
}
#checkoutRoot .inlinePanelBackdrop.on{
opacity: 1;
pointer-events:auto;
}
#checkoutRoot .inlinePanel{
position: fixed;
top: 88px;
left: 50%;
transform: translateX(-50%) translateY(14px);
width: min(860px, calc(100% - 28px));
max-height: calc(100vh - 140px);
overflow: auto;
border-radius: var(--radius2);
border: 1px solid rgba(255,255,255,.12);
background:
radial-gradient(900px 360px at 15% 0%, rgba(255,99,0,.10), transparent 60%),
rgba(8,8,8,.92);
backdrop-filter: blur(16px);
box-shadow: var(--shadow);
opacity: 0;
pointer-events:none;
transition: opacity .2s var(--ease), transform .25s var(--ease);
z-index: 2700;
}
#checkoutRoot .inlinePanel.on{
opacity: 1;
pointer-events:auto;
transform: translateX(-50%) translateY(0);
}
#checkoutRoot .inlinePanelHead{
display:flex;
justify-content:space-between;
align-items:center;
gap: 12px;
padding: 14px 14px 12px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
#checkoutRoot .inlinePanelTitle{
font-weight: 850;
letter-spacing: -.02em;
}
#checkoutRoot .inlinePanelBody{
padding: 14px;
}
/* Docs inside inline panels */
#checkoutRoot .docLead{
margin: 0 0 12px;
color: rgba(255,255,255,.78);
line-height: 1.6;
}
#checkoutRoot .docGrid{
display:grid;
gap: 10px;
}
#checkoutRoot .docGrid .kv{
display:flex;
justify-content:space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
}
#checkoutRoot .docGrid .kv span{
color: rgba(255,255,255,.62);
font-size: 12px;
}
#checkoutRoot .checkoutNav .primaryBtn{
margin-right: 10px; /* tweak: 6β16px */
}
/* Responsive touch (width OR touch devices) */
@media (max-width: 600px), (hover: none) and (pointer: coarse){
#checkoutRoot .checkoutHeader{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
/* Title takes full row */
#checkoutRoot .checkoutTitle{
flex: 1 1 100%;
}
/* Close stays top-right */
#checkoutRoot .checkoutClose{
order: 2;
margin-left: auto;
}
/* Pills go under the title, left aligned */
#checkoutRoot .checkoutMeta{
order: 3;
flex: 1 1 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
}
/* Make the panel fit the viewport and keep footer reachable */
.modalPanel{
/* keep your existing styles... */
max-height: calc(100vh - 80px); /* matches inset:40px ... */
display: flex;
flex-direction: column;
}
/* Head stays fixed at top of the panel */
.modalHead{
flex: 0 0 auto;
}
/* Checkout content becomes the scroll area */
#checkoutRoot{
flex: 1 1 auto;
min-height: 0; /* β
IMPORTANT for flex scroll to work */
overflow: auto;
padding-bottom: 14px; /* breathing room above footer edge */
overscroll-behavior: contain;
}
/* β
Checkout footer: not fixed/sticky β stays at the end of the scroll */
#checkoutRoot .checkoutFooter{
position: static; /* remove sticky */
bottom: auto;
background: transparent; /* optional: remove bar look */
backdrop-filter: none;
border-top: 1px solid rgba(255,255,255,.08); /* keep divider if you like */
padding: 12px 2px 6px;
margin-top: 14px;
}
/* Space between Finalizar and Vaciar */
.summary #checkoutBtn{
margin-top: 18px;
margin-bottom: 14px; /* adjust */
}
#checkoutRoot .field input{
margin-bottom: 12px; /* space below each input */
}
@media (max-width: 600px){
.modalPanel{
top: 14px;
max-height: calc(100vh - 28px);
}
/* Force one single row: Legal (left) + Nav (right) */
#checkoutRoot .checkoutFooter{
flex-wrap: nowrap !important; /* keep in one row */
align-items: center;
gap: 8px;
}
/* Legal links: smaller + tighter, no wrapping */
#checkoutRoot .checkoutLegalLinks{
flex: 0 1 auto; /* allow it to shrink */
min-width: 0; /* IMPORTANT for flex shrink */
white-space: nowrap; /* keep it on one line */
overflow: hidden; /* prevent pushing nav out */
text-overflow: ellipsis; /* if needed */
gap: 6px;
font-size: 11px; /* smaller */
}
#checkoutRoot .checkoutLegalLinks .linkBtn{
font-size: 9px; /* smaller text */
padding: 4px 6px; /* tighter pill */
line-height: 1;
}
#checkoutRoot .checkoutLegalLinks .sep{
margin: 0 2px;
opacity: .30;
}
/* Nav: always has priority space, stays on the right */
#checkoutRoot .checkoutNav{
flex: 1 0 auto; /* take remaining space */
justify-content: flex-end;
flex-wrap: nowrap; /* keep buttons in same row */
gap: 8px;
min-width: 0;
}
/* Optional: slightly tighter buttons on phones */
#checkoutRoot .primaryBtn,
#checkoutRoot .ghostBtn{
padding: 9px 12px;
}
.cartItem .removeBtn{
padding: 4px 7px;
font-size: 10px;
}
}
.blink-offer {
font-weight: bold;
color: #ff6300;
}
.blink-text {
display: block;
font-size: 0.8em;
font-weight: normal;
animation: blinkColor 1.6s infinite;
}
@keyframes blinkColor {
0% { color: #ff6300; }
50% { color: #9e9e9e; }
100% { color: #ff6300; }
}
.blink-text-2 {
display: block;
font-size: 0.6em;
font-weight: normal;
animation: blinkColor2 10s infinite;
}
@keyframes blinkColor2 {
0% { color: #ff6300; }
50% { color: #9e9e9e; }
100% { color: #ff6300; }
}
/* =========================
NumbuX School layout tweak
========================= */
.schoolIntro {
max-width: 420px; /* hace el bloque mΓ‘s pequeΓ±o */
}
.schoolIntro h2 {
font-size: 1.6rem; /* mΓ‘s pequeΓ±o que otros h2 */
}
.schoolIntro p {
font-size: 0.95rem;
}
.schoolIntro .bullet {
font-size: 0.9rem;
}
.schoolIntro .note {
margin-top: 12px;
font-size: 0.85rem;
}
.schoolIntro .heroCtas {
margin-top: 14px;
}
#school .cards3 {
flex: 1;
}
#school .split {
align-items: flex-start;
}
#school .split{
display: grid;
grid-template-columns: 420px 1fr; /* π LEFT fixed, RIGHT fills */
gap: 24px;
align-items: flex-start;
}
.schoolIntro p,
.schoolIntro .bullet li {
text-align: justify;
text-justify: inter-word;
}
#school .featureCard {
text-align: center;
}
#school .featureCard .iconRing {
margin: 0 auto 10px; /* center icon + space below */
}
#school .featureCard h3 {
text-align: center;
margin-top: 6px;
}
/* =========================================
NumbuX School β Responsive (<= 768px)
========================================= */
/* Tablets & below */
@media (max-width: 768px){
/* Stack: intro on top, cards below */
#school .split{
grid-template-columns: 1fr; /* was 420px 1fr */
gap: 18px;
}
/* Let intro use full width */
#school .schoolIntro{
max-width: none;
}
/* Optional: make heading a bit smaller on tablet */
#school .schoolIntro h2{
font-size: 1.45rem;
}
/* Make CTA align nicely on small widths */
#school .schoolIntro .heroCtas{
justify-content: flex-start; /* or center */
flex-wrap: wrap;
}
/* Cards layout on tablet: 1 column (safe, clean) */
#school .cards3{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#school .featureCard:last-child{
grid-column: 1 / -1; /* last card full width */
}
/* Keep centered icon + title (you already have this, but safe) */
#school .featureCard{
text-align: center;
}
/* Optional: prevent super-wide centered paragraphs looking odd */
#school .featureCard p{
max-width: 52ch;
margin-left: auto;
margin-right: auto;
}
}
/* Phones: tighten spacing + typography */
@media (max-width: 480px){
#school.section{
padding: 22px 0;
}
#school .schoolIntro h2{
font-size: 1.30rem;
}
#school .schoolIntro p{
font-size: 0.92rem;
}
#school .schoolIntro .bullet{
font-size: 0.88rem;
}
#school .featureCard{
padding: 16px;
}
}
/* =========================
Map section layout
========================= */
.mapSplit{
display: grid;
grid-template-columns: 1fr 420px;
gap: 24px;
align-items: flex-start;
}
/* Map container */
.mapBox{
width: 100%;
height: 420px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
overflow: hidden;
background: rgba(255,255,255,.03);
}
/* Right column */
.mapInfo{
max-width: 420px;
}
/* =========================
Responsive (<= 768px)
========================= */
@media (max-width: 768px){
.mapSplit{
grid-template-columns: 1fr;
gap: 18px;
}
.mapBox{
height: 320px;
}
.mapInfo{
max-width: none;
}
}
@media (max-width: 480px){
.mapBox{
height: 280px;
}
}
/* =========================
NumbuX custom map pin
========================= */
.numbux-marker{
width: 28px;
height: 28px;
}
.numbux-marker::before{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #ff6300; /* orange pin */
border: 3px solid #000; /* black circle */
box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
/* Optional: subtle hover effect */
.leaflet-marker-icon:hover .numbux-marker::before{
transform: scale(1.1);
}
.mapInfo p{
text-align: justify;
text-justify: inter-word;
}
.noteLink strong{
color: #ff6300;
}
.noteLink:hover strong{
text-decoration: underline;
}
.noteCta{
display: block; /* forces new line */
margin-top: 6px; /* space from text above */
}
#checkoutRoot .pill{
margin: 0 !important; /* overrides global .pill { margin:0 0 18px } */
line-height: 1; /* avoids baseline weirdness */
}
/* Make the "IVA no incluido" text smaller (2nd column in the muted sum row) */
.sumRow.muted span:nth-child(1){
font-size: 13px; /* try 10β12px */
line-height: 1.1;
}
.sumRow.muted span:nth-child(2){
font-size: 11px; /* try 10β12px */
line-height: 1.1;
}
/* Hide the "Total" row inside the cart summary */
.summary .sumRow.total{
display: none !important;
}
/* Hide ONLY the per-item "price Β· line" meta (right-side, last line) */
.cartItem .itemRight > .itemMeta{
display: none !important;
}
/* PayPal buttons: tiny phones (<375px) */
@media (max-width: 374px){
/* Remove side βwastedβ space so PayPal has real width */
.modal[aria-hidden="false"]{
padding: 6px; /* was 10β16px depending on breakpoint */
}
.modalPanel{
width: calc(100% - 12px);
padding: 10px; /* was 16px */
}
/* Your checkoutRoot already has padding; reduce it further here */
#checkoutRoot{
padding: 0;
}
/* Override the inline wrapper you inject with padding:18px; max-width:520px; */
#checkoutRoot > div[style]{
padding: 10px !important; /* less padding = more width for PayPal */
max-width: none !important; /* avoid any inner constraining */
width: 100% !important;
}
/* Make sure the PayPal container uses full width */
#paypalButtons{
width: 100% !important;
}
/* Mobile header cart button (the one next to the burger) */
#headerMobile .cartBtn{
padding: 8px 8px; /* was 10px 12px */
gap: 6px; /* was 10px */
font-size: 12px; /* was 13px */
max-width: 92px; /* makes it visually smaller */
justify-content: center;
}
/* Optional: reduce counter a bit */
#headerMobile .cartCount{
min-width: 16px;
height: 16px;
padding: 0 5px;
font-size: 11px;
}
#headerMobile .cartDot{
width: 5px;
height: 5px;
box-shadow: 0 0 0 4px rgba(255,99,0,.08) !important; /* this is the key */
}
}
/* --- Cita toggle (square) --- */
.citaWrap{
display:inline-block;
perspective: 900px;
margin-left: 6px;
vertical-align: middle;
transform: translateY(-1px) translateX(-3px);
}
.citaCard{
width: 104px; /* tweak if you want wider */
height: 30px;
position: relative;
transform-style: preserve-3d;
transition: transform .55s var(--ease);
display: inline-block; /* or block */
vertical-align: middle;
}
/* flip on hover */
.citaWrap:hover .citaCard{
transform: rotateY(180deg);
}
/* mobile: allow toggle by adding .isFlipped with JS */
.citaWrap.isFlipped .citaCard{
transform: rotateY(180deg);
}
/* Card face (more square, not pill) */
.citaFace{
position:absolute;
inset:0;
display:flex;
align-items:stretch;
justify-content:stretch;
gap: 6px;
border-radius: 10px; /* π square-ish */
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.22);
backdrop-filter: blur(6px);
padding: 3px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
box-sizing: border-box;
}
.citaFace.back{
transform: rotateY(180deg);
}
/* The two toggle buttons */
.citaPill{
flex: 1 1 0;
display:flex;
align-items:center;
justify-content:center;
font-size: 12px;
font-weight: 900;
letter-spacing: .02em;
border-radius: 8px; /* π square-ish */
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.78);
transition:
background .2s var(--ease),
border-color .2s var(--ease),
box-shadow .2s var(--ease),
transform .15s var(--ease),
color .2s var(--ease),
opacity .2s var(--ease);
}
/* OFF (gray, disabled look) */
.citaPill.off{
background: rgba(255,255,255,.02);
border-color: rgba(255,255,255,.08);
color: rgba(255,255,255,.35);
opacity: .85;
filter: saturate(.4);
}
/* Selected: NO (green) */
.citaPill.activeNo{
background: var(--noBg);
color: var(--no);
border-color: rgba(47,226,122,.85);
box-shadow: 0 0 0 6px rgba(47,226,122,.10);
}
/* Selected: SI (orange) */
.citaPill.activeYes{
background: var(--yesBg);
color: var(--yes);
border-color: rgba(255,99,0,.85);
box-shadow: 0 0 0 6px rgba(255,99,0,.10);
}
/* Dark glass popup */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
background: rgba(10,10,10,.92);
color: #fff;
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0,0,0,.55);
backdrop-filter: blur(12px);
}
.leaflet-popup-content a{ color:#ff6300; text-decoration: underline; }
/* Close X */
.leaflet-container a.leaflet-popup-close-button{
color:#fff;
font-size: 18px;
}
.leaflet-container a.leaflet-popup-close-button:hover{
color:#ff6300;
}
/* ==========================================
Leaflet popup: Cita toggle = compact
Grey only on the INACTIVE pill
========================================== */
.leaflet-popup-content .citaWrap{
margin-left: 6px;
}
/* smaller overall control */
.leaflet-popup-content .citaCard{
width: 86px; /* was 104 */
height: 24px; /* was 30 */
}
/* REMOVE the "track" background so it doesn't grey the whole control */
.leaflet-popup-content .citaFace{
padding: 0; /* was 3px */
gap: 4px; /* was 6px */
background: transparent; /* β
key */
border: none; /* β
key */
backdrop-filter: none; /* optional */
box-shadow: none; /* optional */
}
/* pill base = transparent, only OFF gets grey */
.leaflet-popup-content .citaPill{
font-size: 11px; /* smaller */
font-weight: 800; /* slightly lighter than 900 */
border-radius: 7px; /* tighter */
background: transparent; /* β
base is clear */
box-shadow: none; /* remove big glow by default */
border: 1px solid rgba(0,0,0,.10);
color: rgba(0,0,0,.75);
}
/* OFF pill = grey */
.leaflet-popup-content .citaPill.off{
background: rgba(0,0,0,.07);
border-color: rgba(0,0,0,.12);
color: rgba(0,0,0,.35);
opacity: 1;
filter: none;
}
/* Active pills = stronger fill so they read well on white popup */
.leaflet-popup-content .citaPill.activeNo{
background: rgba(47,226,122,.30);
border-color: rgba(47,226,122,.75);
color: rgba(0,0,0,.75);
box-shadow: 0 0 0 3px rgba(47,226,122,.14);
}
.leaflet-popup-content .citaPill.activeYes{
background: rgba(255,99,0,.28);
border-color: rgba(255,99,0,.75);
color: rgba(0,0,0,.75);
box-shadow: 0 0 0 3px rgba(255,99,0,.14);
}
/* ==========================================
Leaflet popup: Cita toggle = TINY
========================================== */
.leaflet-popup-content .citaWrap{
margin-left: 6px;
vertical-align: middle;
}
/* overall control size */
.leaflet-popup-content .citaCard{
width: 64px; /* β
smaller */
height: 18px; /* β
smaller */
}
/* no track */
.leaflet-popup-content .citaFace{
padding: 0;
gap: 2px; /* β
tighter */
background: transparent;
border: none;
backdrop-filter: none;
box-shadow: none;
}
/* pills */
.leaflet-popup-content .citaPill{
font-size: 9px; /* β
smaller text */
font-weight: 800;
letter-spacing: 0; /* β
less spacing = fits smaller */
border-radius: 6px;
padding: 0; /* β
keep tight */
line-height: 1;
background: transparent;
border: 1px solid rgba(0,0,0,.10);
color: rgba(0,0,0,.75);
box-shadow: none;
}
/* OFF pill */
.leaflet-popup-content .citaPill.off{
background: rgba(0,0,0,.06);
border-color: rgba(0,0,0,.10);
color: rgba(0,0,0,.35);
opacity: 1;
filter: none;
}
/* active rings smaller */
.leaflet-popup-content .citaPill.activeNo{
background: rgba(47,226,122,.28);
border-color: rgba(47,226,122,.75);
box-shadow: 0 0 0 2px rgba(47,226,122,.14); /* β
thinner glow */
}
.leaflet-popup-content .citaPill.activeYes{
background: rgba(255,99,0,.26);
border-color: rgba(255,99,0,.75);
box-shadow: 0 0 0 2px rgba(255,99,0,.14); /* β
thinner glow */
}
/* Row layout inside popup */
.leaflet-popup-content .popupRow--cita{
display: flex;
align-items: center; /* β
vertical centering */
gap: 8px;
margin-bottom: 6px;
}
.leaflet-popup-content .popupRow--cita .popupLabel{
line-height: 1; /* β
prevents baseline drop */
}
.leaflet-popup-content .popupHorario{
display: inline-block;
max-width: 180px;
white-space: nowrap;
font-size: clamp(10px, 1.9vw, 13px); /* auto shrink on small widths */
line-height: 1.2;
}
.leaflet-popup-content .popupRow--horario{
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: start;
margin-bottom: 6px;
}
.leaflet-popup-content .popupRow--horario .popupLabel{
line-height: 1.1;
white-space: nowrap;
}
.leaflet-popup-content .popupRow--horario .popupHorario{
display: inline-block;
max-width: 180px;
white-space: pre-line !important; /* β
\n becomes real line breaks */
line-height: 1.2;
font-size: 13px;
}
.leaflet-popup-content .popupHorario.popupHorario--sm{
font-size: 12px;
line-height: 1.12;
}
/* =========================================================
NumbuX Motion Upgrade: dynamic landing + scroll experience
========================================================= */
:root{
--scrollProgress: 0%;
--mx: 50vw;
--my: 30vh;
--tiltX: 0deg;
--tiltY: 0deg;
}
.scrollProgress{
position: fixed;
top: 0;
left: 0;
width: var(--scrollProgress);
height: 3px;
z-index: 3000;
background: linear-gradient(90deg, rgba(255,99,0,.2), #ff6300, #fff0d8);
box-shadow: 0 0 18px rgba(255,99,0,.75), 0 0 42px rgba(255,99,0,.25);
transform-origin: left center;
pointer-events: none;
}
.cursorGlow{
position: fixed;
left: 0;
top: 0;
width: 360px;
height: 360px;
margin-left: -180px;
margin-top: -180px;
border-radius: 999px;
background: radial-gradient(circle, rgba(255,99,0,.16), rgba(255,99,0,.055) 38%, transparent 68%);
transform: translate3d(var(--mx), var(--my), 0);
z-index: 0;
pointer-events: none;
mix-blend-mode: screen;
opacity: .9;
transition: opacity .35s var(--ease);
}
.motionGrid{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .24;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
animation: gridDrift 18s linear infinite;
}
.motionGrid span{
position:absolute;
border-radius:999px;
filter: blur(28px);
opacity:.55;
animation: orbFloat 12s var(--ease) infinite;
}
.motionGrid span:nth-child(1){ width:240px; height:240px; left:8%; top:18%; background:rgba(255,99,0,.17); }
.motionGrid span:nth-child(2){ width:180px; height:180px; right:12%; top:44%; background:rgba(255,255,255,.09); animation-delay:-4s; }
.motionGrid span:nth-child(3){ width:280px; height:280px; left:44%; bottom:8%; background:rgba(255,99,0,.10); animation-delay:-8s; }
@keyframes gridDrift{ to{ background-position: 72px 144px; } }
@keyframes orbFloat{
0%,100%{ transform: translate3d(0,0,0) scale(1); }
35%{ transform: translate3d(30px,-24px,0) scale(1.08); }
70%{ transform: translate3d(-24px,18px,0) scale(.94); }
}
/* More cinematic hero */
.hero{
min-height: calc(100svh - var(--header-h));
align-items: center;
perspective: 1200px;
isolation: isolate;
}
.heroLeft{
transform: translateY(-60px);
}
.heroTitle{
text-wrap: balance;
position: relative;
overflow: hidden;
}
.heroTitle::after{
content:"";
position:absolute;
left:-8%;
top:0;
width:42%;
height:100%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
transform: translateX(-140%) skewX(-18deg);
animation: titleSweep 6.2s ease-in-out infinite;
pointer-events:none;
}
@keyframes titleSweep{
0%,42%{ transform: translateX(-145%) skewX(-18deg); opacity:0; }
52%{ opacity:1; }
68%,100%{ transform: translateX(330%) skewX(-18deg); opacity:0; }
}
.accent{
animation: accentPulse 3.8s var(--ease) infinite;
}
@keyframes accentPulse{
0%,100%{ text-shadow: 0 0 22px rgba(255,99,0,.18); }
50%{ text-shadow: 0 0 38px rgba(255,99,0,.42), 0 0 82px rgba(255,99,0,.14); }
}
.heroRight .glassCard{
position: relative;
transform-style: preserve-3d;
animation: heroCardFloat 7s var(--ease) infinite;
}
@keyframes heroCardFloat{
0%,100%{ transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg); }
50%{ transform: translate3d(0,-16px,0) rotateX(1.4deg) rotateY(-2deg); }
}
.dashboardImage{
animation: phoneHover 6.4s var(--ease) infinite;
filter: drop-shadow(0 34px 50px rgba(0,0,0,.55));
will-change: transform;
}
@keyframes phoneHover{
0%,100%{ transform: translate(40px, -50px) rotate(-1deg); }
50%{ transform: translate(32px, -70px) rotate(2.4deg) scale(1.018); }
}
.phoneGlow--low,
.phoneGlow--high{
animation: glowBreath 4.8s var(--ease) infinite;
}
.phoneGlow--high{ animation-delay: -2.2s; }
@keyframes glowBreath{
0%,100%{ opacity:.72; transform: scale(.96); }
50%{ opacity:1; transform: scale(1.12); }
}
.storeBadge{
animation: badgeBob 4.6s var(--ease) infinite;
}
.storeBadge:nth-child(2){ animation-delay: -1.7s; }
@keyframes badgeBob{
0%,100%{ transform: translate3d(0,0,0); }
50%{ transform: translate3d(0,-8px,0); }
}
/* Buttons feel more alive */
.btn{
position: relative;
overflow: hidden;
transform: translate3d(0,0,0);
}
.btn::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 72%);
transform: translateX(-120%);
transition: transform .65s var(--ease);
}
.btn:hover::after{ transform: translateX(120%); }
.btn.primary{
animation: ctaPulse 2.8s var(--ease) infinite;
}
@keyframes ctaPulse{
0%,100%{ box-shadow: 0 18px 40px rgba(255,99,0,.16), 0 0 0 0 rgba(255,99,0,.25); }
50%{ box-shadow: 0 24px 68px rgba(255,99,0,.28), 0 0 0 8px rgba(255,99,0,.06); }
}
/* Reveal animations become directional + more dramatic */
.reveal{
opacity:0;
filter: blur(8px);
transition:
opacity .86s var(--ease),
filter .86s var(--ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, filter;
}
.reveal.on{
opacity:1;
filter: blur(0);
}
.sectionHead.reveal{ transform: translate3d(-32px, 32px, 0) scale(.98); }
.sectionHead.reveal.on{ transform: translate3d(0,0,0) scale(1); }
/* Dynamic strip */
.motionStrip{
width: 100vw;
margin: 20px calc(50% - 50vw) 18px;
overflow:hidden;
border-block: 1px solid rgba(255,255,255,.1);
background:
radial-gradient(circle at 20% 50%, rgba(255,99,0,.14), transparent 38%),
rgba(255,255,255,.025);
display:flex;
gap: 0;
position: relative;
}
.motionStrip::before,
.motionStrip::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:18vw;
z-index:2;
pointer-events:none;
}
.motionStrip::before{ left:0; background: linear-gradient(90deg, var(--bg), transparent); }
.motionStrip::after{ right:0; background: linear-gradient(270deg, var(--bg), transparent); }
.motionStripTrack{
flex: 0 0 auto;
display:flex;
align-items:center;
gap: 16px;
padding: 18px 8px;
animation: marquee 28s linear infinite;
}
.motionStripTrack--ghost{ animation: marquee 28s linear infinite; }
.motionStripTrack span{
white-space: nowrap;
border:1px solid rgba(255,99,0,.2);
background: rgba(255,99,0,.08);
color: rgba(255,255,255,.86);
padding: 10px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing:.01em;
}
@keyframes marquee{
to{ transform: translateX(-100%); }
}
/* Cards: 3D tilt + richer hover */
.featureCard,
.priceCard,
.securityBox,
.videoCard,
.formCard,
details,
.metric{
transform-style: preserve-3d;
will-change: transform, border-color, background;
}
.featureCard,
.priceCard,
.securityBox,
.videoCard,
.formCard{
position: relative;
overflow: hidden;
}
.featureCard::after,
.priceCard::after,
.securityBox::after,
.videoCard::after,
.formCard::after{
content:"";
position:absolute;
inset:-35%;
background: radial-gradient(circle at var(--cardX, 50%) var(--cardY, 50%), rgba(255,99,0,.18), transparent 28%);
opacity:0;
transition: opacity .28s var(--ease);
pointer-events:none;
}
.featureCard:hover::after,
.priceCard:hover::after,
.securityBox:hover::after,
.videoCard:hover::after,
.formCard:hover::after{ opacity:1; }
.featureCard:hover,
.priceCard:hover,
.securityBox:hover,
.videoCard:hover,
.formCard:hover{
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-7px);
box-shadow: 0 26px 80px rgba(0,0,0,.44), 0 0 0 1px rgba(255,99,0,.08) inset;
}
.iconRing{
animation: iconBreath 4.2s var(--ease) infinite;
}
@keyframes iconBreath{
0%,100%{ box-shadow: 0 0 0 0 rgba(255,99,0,.0); }
50%{ box-shadow: 0 0 0 8px rgba(255,99,0,.08); }
}
.metricBar span{
width: 0 !important;
transition: width 1.2s var(--ease) .25s;
}
.metric.on .metricBar span,
.heroMetrics.on .metricBar span{
width: var(--target-width, 70%) !important;
}
/* Scroll showcase */
.scrollShowcase{
padding-top: 72px;
padding-bottom: 0px;
}
.scrollShowcaseGrid{
display:grid;
grid-template-columns: minmax(280px,.92fr) minmax(0,1.08fr);
gap: clamp(28px, 6vw, 80px);
align-items:start;
}
.scrollSticky{
position: sticky;
top: calc(var(--header-h) + 28px);
min-height: calc(100svh - var(--header-h) - 56px);
display:flex;
flex-direction:column;
justify-content:center;
}
.scrollSticky h2{
margin:0 0 14px;
font-size: clamp(36px, 5vw, 64px);
line-height:1.02;
letter-spacing:-.05em;
text-wrap: balance;
}
.scrollSticky p:not(.pill){
color: var(--muted);
line-height:1.7;
max-width: 48ch;
}
.livePhone{
position:relative;
width:min(100%, 360px);
margin-top:28px;
perspective:900px;
}
.livePhoneGlow{
position:absolute;
inset: 12% -12% -8%;
background: radial-gradient(circle, rgba(255,99,0,.36), transparent 64%);
filter: blur(38px);
animation: glowBreath 4s var(--ease) infinite;
}
.livePhoneFrame{
position:relative;
min-height: 420px;
border-radius: 38px;
padding: 18px;
background:
radial-gradient(circle at 50% -10%, rgba(255,99,0,.3), transparent 42%),
linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.14);
box-shadow: 0 36px 100px rgba(0,0,0,.54);
transform: rotateY(-10deg) rotateX(3deg);
transition: transform .4s var(--ease);
overflow:hidden;
}
.livePhoneFrame::before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(115deg, transparent, rgba(255,255,255,.08), transparent);
transform: translateX(-120%);
animation: phoneSheen 5.5s ease-in-out infinite;
}
@keyframes phoneSheen{
0%,48%{ transform: translateX(-140%); }
70%,100%{ transform: translateX(140%); }
}
.livePhoneTop{
width:92px;
height:18px;
border-radius:0 0 18px 18px;
margin: -18px auto 36px;
background:#050505;
}
.livePhoneStatus{
display:inline-flex;
align-items:center;
padding: 8px 12px;
border-radius:999px;
border:1px solid rgba(255,99,0,.28);
background:rgba(255,99,0,.12);
color:#ffb37c;
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.livePhoneTitle{
margin-top:18px;
font-size:32px;
line-height:1.04;
font-weight:900;
letter-spacing:-.04em;
}
.livePhoneText{
margin-top:10px;
color:var(--muted);
line-height:1.5;
min-height:48px;
}
.liveProgress{
margin-top:28px;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.liveProgress span{
display:block;
width:30%;
height:100%;
border-radius:inherit;
background: linear-gradient(90deg, #ff6300, #ffd3b6);
box-shadow: 0 0 30px rgba(255,99,0,.42);
transition: width .55s var(--ease);
}
.liveApps{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 28px;
}
.liveApps span{
aspect-ratio:1;
border-radius:18px;
background: rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
animation: appPulse 3.2s var(--ease) infinite;
}
.liveApps span:nth-child(2){ animation-delay:-.4s; }
.liveApps span:nth-child(3){ animation-delay:-.8s; }
.liveApps span:nth-child(4){ animation-delay:-1.2s; }
.liveApps span:nth-child(5){ animation-delay:-1.6s; }
.liveApps span:nth-child(6){ animation-delay:-2s; }
.liveApp--orange{ background: rgba(255,99,0,.28) !important; border-color: rgba(255,99,0,.45) !important; }
.liveApp--dim{ opacity:.34; filter:saturate(.5); }
@keyframes appPulse{
0%,100%{ transform: scale(1); }
50%{ transform: scale(.92); }
}
.scrollSteps{
display:grid;
gap: 36px;
padding: 8svh 0;
}
.scrollStep{
min-height: 48svh;
display:flex;
flex-direction:column;
justify-content:center;
border-radius: 28px;
border: 1px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 15% 10%, rgba(255,99,0,.15), transparent 40%),
rgba(255,255,255,.035);
padding: clamp(22px, 4vw, 42px);
box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.scrollStep.is-active{
border-color: rgba(255,99,0,.5);
background:
radial-gradient(circle at 15% 10%, rgba(255,99,0,.25), transparent 40%),
rgba(255,99,0,.055);
box-shadow: 0 30px 90px rgba(255,99,0,.10), 0 28px 90px rgba(0,0,0,.42);
}
.stepKicker{
color: var(--accent);
font-weight:900;
letter-spacing:.18em;
font-size: 13px;
margin-bottom:18px;
}
.scrollStep h3{
margin:0 0 10px;
font-size: clamp(28px, 4vw, 48px);
line-height:1.03;
letter-spacing:-.045em;
}
.scrollStep p{
margin:0;
color:var(--muted);
line-height:1.65;
max-width: 58ch;
}
.priceCardHot{
animation: hotPlanGlow 4.8s var(--ease) infinite;
}
@keyframes hotPlanGlow{
0%,100%{ box-shadow: 0 20px 60px rgba(0,0,0,.34), 0 0 0 0 rgba(255,99,0,.18); }
50%{ box-shadow: 0 30px 92px rgba(0,0,0,.48), 0 0 0 8px rgba(255,99,0,.045); }
}
@media (max-width: 980px){
.hero{ min-height: auto; padding-top: 54px; }
.scrollShowcaseGrid{ grid-template-columns: 1fr; }
.scrollSticky{
position: relative;
top: auto;
min-height: auto;
}
.livePhone{ margin-left:auto; margin-right:auto; }
.scrollSteps{ padding: 0; gap: 18px; }
.scrollStep{ min-height: auto; }
.motionStripTrack{ animation-duration: 34s; }
}
@media (max-width: 560px){
.cursorGlow{ display:none; }
.motionStripTrack span{ font-size:12px; padding:8px 12px; }
.livePhoneFrame{ min-height: 360px; transform:none; }
.livePhoneTitle{ font-size: 27px; }
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
.cursorGlow,
.motionGrid{ display:none; }
}
/* =========================================================
SUBTLE PREMIUM ORANGE BROWSER SCROLLBAR
========================================================= */
/* Firefox */
html{
scrollbar-width: thin;
scrollbar-color: rgba(255,99,0,.45) #070707;
}
/* Chrome, Edge, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
width: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
background: #070707;
border-left: 1px solid rgba(255,255,255,.035);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
border-radius: 999px;
border: 3px solid #070707;
background: rgba(255,99,0,.42);
box-shadow: none;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
background: rgba(255,99,0,.68);
}
/* =========================================================
NUMBUX SCHOOL β CINEMATIC PREMIUM SECTION
========================================================= */
.section.schoolCinema{
position: relative;
width: min(var(--max), calc(100% - 40px));
margin: 34px auto 44px;
padding: clamp(34px, 5vw, 72px);
overflow: visible;
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
isolation: isolate;
}
.schoolCinema::before{
display: none;
}
.schoolGlow{
display: none;
}
.schoolNoise{
display: none;
}
.schoolCinemaShell{
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .88fr 1.12fr;
gap: clamp(28px, 4vw, 58px);
align-items: center;
}
/* ---------- Left intro ---------- */
.schoolIntro--cinema{
max-width: 540px;
}
.schoolEyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.28);
background: rgba(255,99,0,.08);
color: rgba(255,255,255,.76);
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
}
.schoolEyebrowDot{
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent);
box-shadow:
0 0 0 6px rgba(255,99,0,.12),
0 0 22px rgba(255,99,0,.65);
}
.schoolIntro--cinema h2{
margin: 0 0 16px;
font-size: clamp(40px, 5.1vw, 76px);
line-height: .96;
letter-spacing: -.055em;
}
.schoolLead{
margin: 0;
max-width: 54ch;
color: rgba(255,255,255,.72);
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.75;
}
.schoolLead strong{
color: #fff;
font-weight: 800;
}
.schoolHeroActions{
display: flex;
align-items: center;
gap: 14px;
margin-top: 26px;
flex-wrap: wrap;
}
.schoolMainCta{
min-width: 150px;
text-align: center;
justify-content: center;
}
.schoolOfferPill{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.34);
background:
radial-gradient(circle at 20% 0%, rgba(255,255,255,.14), transparent 38%),
rgba(255,99,0,.10);
color: rgba(255,255,255,.86);
font-size: 12px;
font-weight: 800;
line-height: 1.15;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 12px 34px rgba(255,99,0,.10);
}
.schoolMiniStats{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
margin-top: 30px;
}
.schoolMiniStats div{
padding: 14px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.22);
backdrop-filter: blur(10px);
}
.schoolMiniStats strong{
display: block;
color: #fff;
font-size: 18px;
letter-spacing: -.03em;
}
.schoolMiniStats span{
display: block;
margin-top: 4px;
color: rgba(255,255,255,.48);
font-size: 12px;
line-height: 1.25;
}
/* ---------- Right cinematic stage ---------- */
.schoolStage{
position: relative;
min-height: 540px;
}
.schoolStageGlow{
position:absolute;
inset: 12% 4% auto auto;
width: 460px;
height: 460px;
border-radius: 999px;
background:
radial-gradient(
closest-side,
rgba(255,99,0,.22),
rgba(255,99,0,.08) 48%,
transparent 72%
);
filter: blur(34px);
pointer-events: none;
z-index: 0;
}
.schoolScreen{
position: relative;
z-index: 2;
min-height: 340px;
padding: 18px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,.14);
background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
radial-gradient(520px 240px at 30% 16%, rgba(255,99,0,.25), transparent 65%),
rgba(5,5,5,.78);
box-shadow:
0 34px 90px rgba(0,0,0,.58),
inset 0 1px 0 rgba(255,255,255,.13);
backdrop-filter: blur(16px);
transform: perspective(1100px) rotateY(-6deg) rotateX(3deg);
transform-origin: center;
}
.schoolScreenTop{
display: flex;
align-items: center;
gap: 9px;
color: rgba(255,255,255,.72);
font-size: 12px;
font-weight: 700;
}
.schoolLiveDot{
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 6px rgba(255,99,0,.12);
}
.schoolScreenTag, .schoolScreenTagPhones{
margin-left: auto;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.26);
background: rgba(255,99,0,.09);
color: rgba(255,255,255,.78);
font-size: 11px;
}
.schoolFeaturedCourse{
margin-top: 20px;
max-width: 440px;
padding: 26px;
border-radius: 26px;
background:
linear-gradient(135deg, rgba(255,99,0,.20), rgba(255,255,255,.04)),
rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.13);
}
.schoolCourseKicker{
display: inline-flex;
margin-bottom: 14px;
color: #ff8f00;
font-size: 14px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.schoolFeaturedCourse h3{
margin: 0;
max-width: 10ch;
font-size: clamp(30px, 2vw, 44px);
line-height: 1;
letter-spacing: -.045em;
}
.schoolFeaturedCourse p{
margin: 14px 0 0;
max-width: 38ch;
color: rgba(255,255,255,.72);
line-height: 1.6;
font-size: clamp(15px, 1vw, 25px);
}
.schoolProgressLine{
height: 7px;
margin-top: 22px;
border-radius: 999px;
overflow: hidden;
background: rgba(255,255,255,.10);
}
.schoolProgressLine span{
display:block;
height:100%;
width: 68%;
border-radius: inherit;
background: linear-gradient(90deg, #ff6300, #ffb347);
box-shadow: 0 0 18px rgba(255,99,0,.55);
}
.schoolCourseRail{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
margin-top: 18px;
}
.schoolEpisode{
min-height: 92px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.035);
}
.schoolEpisode--active{
border-color: rgba(255,99,0,.38);
background: rgba(255,99,0,.11);
}
.schoolEpisode span{
display: block;
color: rgba(255,255,255,.38);
font-size: 11px;
font-weight: 800;
margin-bottom: 10px;
}
.schoolEpisode strong{
display: block;
color: #fff;
font-size: 13px;
line-height: 1.25;
}
/* ---------- Impact cards ---------- */
.schoolImpactGrid{
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
margin-top: -46px;
margin-left: clamp(18px, 5vw, 70px);
}
.schoolImpactCard{
position: relative;
overflow: hidden;
min-height: 160px;
padding: 18px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,.12);
background:
linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
rgba(5,5,5,.70);
box-shadow: 0 24px 64px rgba(0,0,0,.42);
backdrop-filter: blur(14px);
}
.schoolImpactCard::before{
content:"";
position:absolute;
inset: auto -40px -70px auto;
width: 150px;
height: 150px;
border-radius: 999px;
background: rgba(255,99,0,.12);
filter: blur(18px);
}
.schoolImpactCard--main{
grid-row: span 2;
min-height: 260px;
background:
radial-gradient(360px 180px at 16% 0%, rgba(255,99,0,.22), transparent 70%),
linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
rgba(5,5,5,.76);
}
.schoolImpactIcon{
width: 46px;
height: 46px;
display:grid;
place-items:center;
border-radius: 18px;
color: #fff;
background: rgba(255,99,0,.14);
border: 1px solid rgba(255,99,0,.34);
box-shadow: 0 0 0 7px rgba(255,99,0,.08);
}
.schoolImpactCard h3{
position: relative;
margin: 18px 0 8px;
color: #fff;
font-size: 22px;
letter-spacing: -.03em;
}
.schoolImpactCard p{
position: relative;
margin: 0;
color: rgba(255,255,255,.66);
line-height: 1.58;
font-size: 14px;
}
.schoolImpactCard--main h3{
font-size: 28px;
}
.schoolImpactCard--main p{
font-size: 15px;
max-width: 34ch;
}
.schoolScreenTagPhones{
display: none;
}
/* ---------- Responsive ---------- */
@media (max-width: 980px){
.section.schoolCinema{
padding: 36px 22px;
border-radius: 28px;
}
.schoolCinemaShell{
grid-template-columns: 1fr;
}
.schoolIntro--cinema{
max-width: 760px;
}
.schoolStage{
min-height: auto;
}
.schoolScreen{
transform: none;
}
.schoolImpactGrid{
margin: 18px 0 0;
grid-template-columns: 1fr 1fr;
}
.schoolImpactCard--main{
grid-column: 1 / -1;
min-height: 210px;
}
}
@media (max-width: 640px){
.section.schoolCinema{
width: calc(100% - 24px);
padding: 28px 16px;
margin-top: 24px;
border-radius: 24px;
}
.schoolIntro--cinema h2{
font-size: 42px;
}
.schoolLead{
font-size: 15px;
}
.schoolHeroActions{
align-items: stretch;
}
.schoolMainCta{
width: 100%;
}
.schoolOfferPill{
width: 100%;
}
.schoolMiniStats{
grid-template-columns: 1fr;
}
.schoolScreen{
min-height: auto;
padding: 14px;
border-radius: 24px;
}
.schoolScreenTop{
flex-wrap: wrap;
}
.schoolScreenTag{
margin-left: 0;
}
.schoolFeaturedCourse{
margin-top: 26px;
padding: 20px;
}
.schoolFeaturedCourse h3{
max-width: none;
font-size: 31px;
}
.schoolCourseRail{
grid-template-columns: 1fr;
}
.schoolEpisode{
min-height: auto;
}
.schoolImpactGrid{
grid-template-columns: 1fr;
}
.schoolImpactCard,
.schoolImpactCard--main{
min-height: auto;
}
}
@media (max-width: 480px){
.section.schoolCinema{
width: calc(100% - 20px);
padding: 24px 14px;
}
.schoolEyebrow{
font-size: 12px;
}
.schoolIntro--cinema h2{
font-size: 38px;
}
.schoolImpactCard h3,
.schoolImpactCard--main h3{
font-size: 22px;
}
}
/* =========================================================
NUMBUX SCHOOL β SCROLL STACK UNDER CTA (CSS ONLY FOR SCHOOL)
Shows one benefit card at a time below Solicitar / offer pill
========================================================= */
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid,
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid--scrollStack{
position: relative;
z-index: 8;
display: block;
width: min(100%, 540px);
min-height: 214px;
margin: 26px 0 0;
margin-left: 0;
padding: 0;
isolation: isolate;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid::before{
content: "";
position: absolute;
inset: -18px -18px -16px;
border-radius: 30px;
background:
radial-gradient(280px 140px at 16% 0%, rgba(255,99,0,.18), transparent 72%),
linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
border: 1px solid rgba(255,255,255,.07);
pointer-events: none;
z-index: -1;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard{
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 50px 1fr;
align-items: start;
column-gap: 16px;
min-height: 214px;
padding: 22px 22px 22px 20px;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.13);
background:
radial-gradient(340px 170px at var(--cardX, 18%) var(--cardY, 0%), rgba(255,99,0,.22), transparent 68%),
linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
rgba(5,5,5,.76);
box-shadow:
0 24px 70px rgba(0,0,0,.46),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(14px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(22px) scale(.965);
filter: blur(8px);
transition:
opacity .46s var(--ease),
visibility .46s var(--ease),
transform .46s var(--ease),
filter .46s var(--ease),
border-color .28s var(--ease),
box-shadow .28s var(--ease);
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard::before{
content: "";
position: absolute;
inset: auto -72px -96px auto;
width: 220px;
height: 220px;
border-radius: 999px;
background: rgba(255,99,0,.14);
filter: blur(28px);
opacity: .75;
pointer-events: none;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard::after{
content: "";
position: absolute;
left: 20px;
right: 20px;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,99,0,.75), transparent);
opacity: .75;
pointer-events: none;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard.schoolImpactCard--active{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
filter: blur(0);
border-color: rgba(255,99,0,.30);
box-shadow:
0 28px 86px rgba(0,0,0,.54),
0 0 0 1px rgba(255,99,0,.05),
inset 0 1px 0 rgba(255,255,255,.13);
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard--main{
grid-row: auto;
min-height: 214px;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactIcon{
position: relative;
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 18px;
color: #fff;
background:
radial-gradient(circle at 30% 0%, rgba(255,255,255,.22), transparent 38%),
rgba(255,99,0,.16);
border: 1px solid rgba(255,99,0,.40);
box-shadow:
0 0 0 7px rgba(255,99,0,.075),
0 12px 30px rgba(255,99,0,.12);
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCopy{
position: relative;
z-index: 1;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactLabel{
display: inline-flex;
align-items: center;
margin-bottom: 9px;
color: #ff8f00;
font-size: 11px;
font-weight: 850;
letter-spacing: .095em;
text-transform: uppercase;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard h3,
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard--main h3{
position: relative;
margin: 0 0 9px;
color: #fff;
font-size: clamp(24px, 2.1vw, 31px);
line-height: 1.02;
letter-spacing: -.04em;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard p,
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard--main p{
position: relative;
max-width: 38ch;
margin: 0;
color: rgba(255,255,255,.70);
font-size: 14px;
line-height: 1.62;
}
#school.schoolCinema .schoolScrollDots{
display: flex;
align-items: center;
gap: 8px;
margin-top: 18px;
}
#school.schoolCinema .schoolScrollDot{
width: 28px;
height: 5px;
padding: 0;
border: 0;
border-radius: 999px;
cursor: pointer;
background: rgba(255,255,255,.16);
transition:
width .28s var(--ease),
background .28s var(--ease),
box-shadow .28s var(--ease);
}
#school.schoolCinema .schoolScrollDot.is-active{
width: 46px;
background: rgba(255,99,0,.92);
box-shadow: 0 0 18px rgba(255,99,0,.36);
}
#school.schoolCinema .schoolScrollDot:focus-visible{
outline: none;
box-shadow: 0 0 0 5px rgba(255,99,0,.16);
}
@media (max-width: 980px){
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid,
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid--scrollStack{
width: min(100%, 680px);
min-height: 204px;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard,
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard--main{
min-height: 204px;
}
}
@media (max-width: 640px){
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid,
#school.schoolCinema .schoolIntro--cinema .schoolImpactGrid--scrollStack{
min-height: 244px;
margin-top: 22px;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard,
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard--main{
grid-template-columns: 1fr;
row-gap: 14px;
min-height: 244px;
padding: 20px;
}
#school.schoolCinema .schoolIntro--cinema .schoolImpactIcon{
width: 44px;
height: 44px;
}
#school.schoolCinema .schoolScrollDots{
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce){
#school.schoolCinema .schoolIntro--cinema .schoolImpactCard{
transition: none;
filter: none;
}
}
.schoolImpactGrid.schoolImpactGrid--showcase{
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.schoolImpactGrid--showcase .schoolScrollCard{
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.schoolStage[data-school-stage]{
transform: translateY(-30px);
}
/* =========================================================
NUMBUX SCHOOL β COMPACT BENEFIT CARDS INSIDE SCREEN
Replaces the old course rail and keeps the new cards small.
========================================================= */
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
position: relative;
z-index: 4;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: 100%;
margin: 18px 0 0;
margin-left: 0;
padding: 0;
min-height: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase::before{
display: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
position: relative;
inset: auto;
display: grid;
grid-template-columns: 28px 1fr;
align-items: start;
column-gap: 9px;
min-height: 108px;
padding: 11px 11px 12px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.10) !important;
background:
radial-gradient(180px 92px at var(--cardX, 18%) var(--cardY, 0%), rgba(255,99,0,.16), transparent 70%),
rgba(255,255,255,.035) !important;
box-shadow: none !important;
backdrop-filter: none !important;
transform: none;
filter: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
grid-row: auto;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard:hover{
border-color: rgba(255,99,0,.34) !important;
background:
radial-gradient(180px 92px at var(--cardX, 18%) var(--cardY, 0%), rgba(255,99,0,.22), transparent 70%),
rgba(255,99,0,.075) !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard::before,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard::after{
display: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactIcon{
width: 28px;
height: 28px;
border-radius: 10px;
color: #fff;
background: rgba(255,99,0,.14);
border: 1px solid rgba(255,99,0,.34);
box-shadow: 0 0 0 4px rgba(255,99,0,.055);
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactIcon svg{
width: 15px;
height: 15px;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCopy{
position: relative;
z-index: 1;
min-width: 0;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactLabel{
display: block;
margin: 0 0 5px;
color: #ff8f00;
font-size: 8px;
font-weight: 850;
line-height: 1.15;
letter-spacing: .075em;
text-transform: uppercase;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard h3,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main h3{
margin: 0 0 5px;
color: #fff;
font-size: 13px;
line-height: 1.05;
letter-spacing: -.025em;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard p,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main p{
margin: 0;
max-width: none;
color: rgba(255,255,255,.58);
font-size: 10px;
line-height: 1.32;
}
@media (max-width: 640px){
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
grid-template-columns: 1fr;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
min-height: auto;
grid-template-columns: 30px 1fr;
}
}
/* =========================================================
NUMBUX SCHOOL β SCROLL-CHANGING BENEFIT CARD
Keeps the cards in the same small position inside the screen,
but shows only one card at a time while the user scrolls.
========================================================= */
@media (min-width: 981px){
#school.schoolCinema{
min-height: 150vh;
}
#school.schoolCinema .schoolCinemaShell{
position: sticky;
top: calc(var(--header-h, 64px) + 28px);
}
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
position: relative !important;
display: block !important;
width: 100% !important;
min-height: 116px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase::before{
display: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
position: absolute !important;
inset: 0 !important;
display: grid !important;
grid-template-columns: 34px 1fr !important;
align-items: start !important;
column-gap: 11px !important;
min-height: 116px !important;
padding: 13px 14px !important;
border-radius: 18px !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.10) !important;
background:
radial-gradient(220px 110px at var(--cardX, 18%) var(--cardY, 0%), rgba(255,99,0,.18), transparent 72%),
linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.026)),
rgba(5,5,5,.50) !important;
box-shadow: none !important;
backdrop-filter: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(18px) scale(.985) !important;
filter: blur(8px) !important;
transition:
opacity .44s var(--ease),
transform .44s var(--ease),
filter .44s var(--ease),
visibility .44s var(--ease),
border-color .22s var(--ease),
background .22s var(--ease) !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard.is-active{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
filter: blur(0) !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard:first-child:not(.is-inactive):not(.is-active){
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
filter: blur(0) !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard.is-inactive{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard:hover{
border-color: rgba(255,99,0,.34) !important;
background:
radial-gradient(220px 110px at var(--cardX, 18%) var(--cardY, 0%), rgba(255,99,0,.24), transparent 72%),
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
rgba(255,99,0,.05) !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard::before,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard::after{
display: none !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactIcon{
width: 34px !important;
height: 34px !important;
border-radius: 12px !important;
color: #fff !important;
background: rgba(255,99,0,.14) !important;
border: 1px solid rgba(255,99,0,.34) !important;
box-shadow: 0 0 0 5px rgba(255,99,0,.055) !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactIcon svg{
width: 16px !important;
height: 16px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCopy{
position: relative !important;
z-index: 1 !important;
min-width: 0 !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactLabel{
display: block !important;
margin: 0 0 6px !important;
color: #ff8f00 !important;
font-size: 9px !important;
font-weight: 850 !important;
line-height: 1.15 !important;
letter-spacing: .075em !important;
text-transform: uppercase !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard h3,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main h3{
margin: 0 0 6px !important;
color: #fff !important;
font-size: 15px !important;
line-height: 1.05 !important;
letter-spacing: -.025em !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard p,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main p{
margin: 0 !important;
max-width: 46ch !important;
color: rgba(255,255,255,.62) !important;
font-size: 11px !important;
line-height: 1.34 !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolScrollDots{
position: absolute;
right: 12px;
bottom: 10px;
display: flex;
align-items: center;
gap: 5px;
z-index: 8;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolScrollDot{
width: 12px;
height: 4px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.18);
cursor: pointer;
transition: width .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolScrollDot.is-active{
width: 25px;
background: rgba(255,99,0,.92);
box-shadow: 0 0 12px rgba(255,99,0,.35);
}
@media (max-width: 980px){
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
min-height: 128px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
min-height: 128px !important;
}
}
@media (max-width: 640px){
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
min-height: 178px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
grid-template-columns: 1fr !important;
row-gap: 12px !important;
min-height: 178px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolScrollDots{
right: 14px;
bottom: 12px;
}
}
@media (prefers-reduced-motion: reduce){
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard{
transition: none !important;
filter: none !important;
}
}
.schoolIntro--cinema{
transform: translateY(-70px);
}
/* Keep NumbuX School visually fixed while cards change */
#school.schoolCinema{
min-height: 150vh;
}
#school.schoolCinema .schoolCinemaShell{
position: sticky;
top: 110px;
}
/* Bigger text only for the NumbuX School scrolling cards */
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard h3,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main h3{
font-size: 18px !important;
line-height: 1 !important;
letter-spacing: -0.045em !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard p,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main p{
font-size: 15px !important;
line-height: 1.5 !important;
max-width: 44ch !important;
}
/* Reduce space between NumbuX School and Tiendas Colaboradoras
without making the School cards change too fast */
#school.schoolCinema{
margin-bottom: -70px !important;
min-height: 150vh !important;
}
#locations.section{
padding-top: 0 !important;
margin-top: -60px;
}
/* Urgent but elegant NumbuX School offer pill */
.schoolOfferPill{
position: relative;
overflow: hidden;
min-height: 54px;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid rgba(255,99,0,.55);
background:
linear-gradient(180deg, rgba(255,99,0,.18), rgba(255,99,0,.08)),
rgba(10,10,10,.72);
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 1.12;
letter-spacing: .075em;
text-transform: uppercase;
box-shadow:
0 0 0 1px rgba(255,255,255,.05) inset,
0 12px 34px rgba(255,99,0,.18),
0 0 24px rgba(255,99,0,.14);
}
.schoolOfferPill::before{
content: "";
position: absolute;
inset: 3px;
border-radius: inherit;
border: 1px solid rgba(255,255,255,.08);
pointer-events: none;
}
.schoolOfferPill::after{
content: "";
position: absolute;
top: -40%;
bottom: -40%;
left: -45%;
width: 34%;
transform: rotate(18deg);
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);
animation: schoolOfferShine 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes schoolOfferShine{
0%, 42%{
left: -45%;
opacity: 0;
}
52%{
opacity: 1;
}
70%, 100%{
left: 120%;
opacity: 0;
}
}
.schoolOfferPill{
animation: schoolOfferPulse 2.8s ease-in-out infinite;
}
@keyframes schoolOfferPulse{
0%, 100%{
box-shadow:
0 0 0 1px rgba(255,255,255,.05) inset,
0 12px 34px rgba(255,99,0,.18),
0 0 24px rgba(255,99,0,.14);
}
50%{
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 14px 38px rgba(255,99,0,.24),
0 0 34px rgba(255,99,0,.24);
}
}
/* Fix step 04: no overlap, more time to read the sticky left phone */
@media (min-width: 981px){
#scrollExperience.scrollShowcase{
padding-bottom: 24svh !important;
}
#scrollExperience .scrollSteps{
padding-bottom: 28svh !important;
}
#scrollExperience .scrollSteps .scrollStep:nth-child(4){
margin-top: 0 !important;
}
}
/* Reduce gap between motion strip and demo video */
.motionStrip{
margin-bottom: 0 !important;
}
#demoVideo.section{
padding-top: 0 !important;
margin-top: -50px !important;
}
/* Scroll Showcase β move the whole card track higher, without overlap */
@media (min-width: 981px){
#scrollExperience .scrollSteps{
margin-top: -70px !important;
padding-top: 0 !important;
padding-bottom: 42svh !important;
gap: 28px !important;
}
#scrollExperience .scrollSteps .scrollStep{
min-height: 42svh !important;
}
/* Keep the first card still a little lower, but not too much */
#scrollExperience .scrollSteps .scrollStep:first-child{
margin-top: 250px !important;
}
/* Cancel old individual movement on card 04 */
#scrollExperience .scrollSteps .scrollStep:nth-child(4),
#scrollExperience .scrollSteps .scrollStep:nth-child(4).is-active{
margin-top: 0 !important;
transform: none !important;
}
}
/* =========================================================
NUMBUX SCHOOL β elegant dust transition between cards
========================================================= */
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
isolation: isolate;
}
/* Dust layer */
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase::after{
content: "";
position: absolute;
inset: -22px;
z-index: 20;
pointer-events: none;
opacity: 0;
background:
radial-gradient(circle at 12% 42%, rgba(255,143,0,.95) 0 1.2px, transparent 2.8px),
radial-gradient(circle at 18% 68%, rgba(255,255,255,.60) 0 1px, transparent 2.5px),
radial-gradient(circle at 27% 35%, rgba(255,99,0,.75) 0 1.4px, transparent 3px),
radial-gradient(circle at 35% 58%, rgba(255,190,120,.60) 0 1px, transparent 2.6px),
radial-gradient(circle at 44% 44%, rgba(255,143,0,.80) 0 1.2px, transparent 3px),
radial-gradient(circle at 56% 64%, rgba(255,255,255,.45) 0 1px, transparent 2.4px),
radial-gradient(circle at 66% 38%, rgba(255,99,0,.72) 0 1.4px, transparent 3px),
radial-gradient(circle at 74% 61%, rgba(255,180,95,.58) 0 1px, transparent 2.7px),
radial-gradient(circle at 84% 46%, rgba(255,143,0,.85) 0 1.2px, transparent 3px),
radial-gradient(circle at 91% 70%, rgba(255,255,255,.42) 0 1px, transparent 2.5px);
background-size:
120px 90px,
150px 110px,
130px 95px,
160px 120px,
140px 100px,
170px 130px,
125px 95px,
155px 115px,
135px 100px,
165px 125px;
mix-blend-mode: screen;
transform: translateY(10px) scale(.96);
filter: blur(.2px);
}
/* Triggered by JS */
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase.schoolDustBurst::after{
animation: schoolDustBurst .78s cubic-bezier(.2,.8,.2,1) both;
}
/* Small materialization of the new card content */
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase.schoolDustBurst .schoolImpactCard.is-active .schoolImpactIcon{
animation: schoolDustIconIn .58s cubic-bezier(.2,.8,.2,1) both;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase.schoolDustBurst .schoolImpactCard.is-active .schoolImpactCopy{
animation: schoolDustCopyIn .62s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes schoolDustBurst{
0%{
opacity: 0;
transform: translateY(12px) scale(.95);
filter: blur(1px);
}
18%{
opacity: .95;
}
52%{
opacity: .72;
transform: translateY(-4px) scale(1.03);
filter: blur(1.4px);
}
100%{
opacity: 0;
transform: translateY(-22px) scale(1.16);
filter: blur(5px);
}
}
@keyframes schoolDustIconIn{
0%{
opacity: .35;
transform: scale(.82) rotate(-5deg);
filter: blur(3px);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
filter: blur(0);
}
}
@keyframes schoolDustCopyIn{
0%{
opacity: .25;
transform: translateY(8px);
filter: blur(4px);
}
100%{
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
/* No dust animation for reduced-motion users */
@media (prefers-reduced-motion: reduce){
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase.schoolDustBurst::after,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase.schoolDustBurst .schoolImpactCard.is-active .schoolImpactIcon,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase.schoolDustBurst .schoolImpactCard.is-active .schoolImpactCopy{
animation: none !important;
}
}
/* =========================================================
NUMBUX SCHOOL β floating space effect for offer pill
========================================================= */
.schoolOfferPill{
transform-style: preserve-3d;
animation: schoolOfferFloatSpace 4.8s ease-in-out infinite;
will-change: transform, box-shadow, filter;
}
.schoolOfferPill::before{
box-shadow:
inset 0 0 18px rgba(255,255,255,.06),
inset 0 0 28px rgba(255,99,0,.10);
}
/* Small orbital glow behind the pill */
.schoolOfferPill{
box-shadow:
0 0 0 1px rgba(255,255,255,.05) inset,
0 14px 36px rgba(255,99,0,.18),
0 0 26px rgba(255,99,0,.18),
0 0 70px rgba(255,99,0,.08);
}
/* Floating movement */
@keyframes schoolOfferFloatSpace{
0%, 100%{
transform: translate3d(0, 0, 0) rotate(-1deg);
filter: drop-shadow(0 10px 24px rgba(255,99,0,.12));
}
25%{
transform: translate3d(4px, -7px, 0) rotate(1.2deg);
filter: drop-shadow(0 16px 32px rgba(255,99,0,.20));
}
50%{
transform: translate3d(0, -2px, 0) rotate(-.2deg);
filter: drop-shadow(0 20px 42px rgba(255,99,0,.24));
}
75%{
transform: translate3d(-4px, -6px, 0) rotate(.8deg);
filter: drop-shadow(0 14px 30px rgba(255,99,0,.18));
}
}
/* Optional: tiny stars around the pill */
.schoolOfferPill::after{
background:
radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 2px),
radial-gradient(circle, rgba(255,143,0,.75) 0 1px, transparent 2px),
radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 2px),
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);
background-size:
38px 28px,
54px 44px,
70px 52px,
100% 100%;
animation:
schoolOfferStars 5.8s linear infinite,
schoolOfferShine 3.2s ease-in-out infinite;
}
@keyframes schoolOfferStars{
0%{
background-position:
0 0,
12px 8px,
24px 14px,
0 0;
}
100%{
background-position:
38px -28px,
66px -36px,
94px -38px,
0 0;
}
}
@media (prefers-reduced-motion: reduce){
.schoolOfferPill,
.schoolOfferPill::after{
animation: none !important;
}
}
/* Tablet 768px β add space between header and hero */
@media (min-width: 641px) and (max-width: 980px){
.hero{
margin-top: 30px !important;
}
}
/* =========================================================
768px HERO β title/sub left, phone right, buttons below
========================================================= */
@media (min-width: 601px) and (max-width: 768px){
.hero{
width: calc(100% - 64px) !important;
max-width: none !important;
margin-top: 48px !important;
padding-top: 46px !important;
overflow: visible !important;
grid-template-columns: 1fr !important;
}
.heroLeft{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.88fr) !important;
grid-template-areas:
"title phone"
"sub phone"
"ctas phone" !important;
column-gap: 28px !important;
align-items: center !important;
position: relative !important;
margin-right: 0 !important;
padding-left: 0 !important;
}
.heroLeft .pill{
display: none !important;
}
.heroLeft .heroTitle{
grid-area: title !important;
margin: 0 0 0px !important;
font-size: clamp(54px, 7.2vw, 72px) !important;
line-height: 1.05 !important;
max-width: 10.5ch !important;
}
.heroLeft .sub{
grid-area: sub !important;
margin: 0 !important;
max-width: 34ch !important;
font-size: 18px !important;
line-height: 1.5 !important;
}
.heroLeft .heroCtas{
grid-area: ctas !important;
margin-bottom: 0 !important;
display: flex !important;
justify-content: flex-start !important;
}
.heroLeft .heroCtas .btn{
font-size: 15px !important;
}
.hero > .heroRight:not(.heroRight--tabletSlot){
display: none !important;
}
.heroRight--tabletSlot{
grid-area: phone !important;
display: block !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
align-self: center !important;
pointer-events: auto !important;
overflow: visible !important;
}
.heroRight--tabletSlot .glassCard{
padding: 0 !important;
box-shadow: none !important;
}
.heroRight--tabletSlot .cardHeader{
justify-content: flex-start !important;
margin-left: 0 !important;
margin-top: 12px !important;
transform: scale(.82);
transform-origin: left center;
}
.heroRight--tabletSlot .miniDash.imageDash{
overflow: visible !important;
padding: 0 !important;
}
.heroRight--tabletSlot .dashboardImage{
width: 145% !important;
max-width: none !important;
transform: translate(-8%, -40px) !important;
}
.heroRight--tabletSlot .storeBadges--onImage{
position: absolute !important;
top: 10% !important;
left: 0% !important;
right: auto !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
align-items: flex-start !important;
transform: scale(.9) !important;
transform-origin: top left !important;
}
.phoneGlow--high,
.phoneGlow--low{
transform: none !important;
}
.heroLeft{
grid-template-rows: max-content max-content max-content !important;
row-gap: 16px !important;
align-content: start !important;
min-height: 410px !important;
}
.heroRight--tabletSlot{
height: 0 !important;
min-height: 0 !important;
align-self: start !important;
overflow: visible !important;
}
.heroLeft .heroTitle{
margin-bottom: 0 !important;
}
.heroLeft .sub{
margin: 0 !important;
line-height: 1.35 !important;
}
.heroLeft .heroCtas{
margin-top: 8px !important;
align-self: start !important;
}
.hero{
padding-bottom: 0 !important;
margin-bottom: -100px !important;
min-height: 0 !important;
}
.motionStrip{
margin-top: 0 !important;
}
#scrollExperience.scrollShowcase{
width: calc(100% - 44px) !important;
max-width: none !important;
padding-top: 54px !important;
padding-bottom: 34px !important;
overflow: visible !important;
}
#scrollExperience .scrollShowcaseGrid{
display: grid !important;
grid-template-columns: minmax(275px, .95fr) minmax(260px, .9fr) !important;
gap: 8px !important;
align-items: start !important;
}
/* Left side: title + phone */
#scrollExperience .scrollSticky{
position: sticky !important;
top: 92px !important;
min-height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
#scrollExperience .scrollSticky h2{
max-width: 7.5ch !important;
margin: 0 0 14px !important;
font-size: clamp(38px, 5.6vw, 48px) !important;
line-height: .98 !important;
letter-spacing: -.055em !important;
}
/* Bigger phone */
#scrollExperience .livePhone{
width: 285px !important;
max-width: 285px !important;
margin-top: 8px !important;
margin-left: 0 !important;
margin-right: -18px !important;
}
#scrollExperience .livePhoneFrame{
min-height: 375px !important;
border-radius: 34px !important;
padding: 17px !important;
transform: rotateY(-7deg) rotateX(2deg) scale(.98) !important;
transform-origin: top left !important;
}
#scrollExperience .livePhoneTop{
width: 78px !important;
height: 15px !important;
margin: -15px auto 28px !important;
}
#scrollExperience .livePhoneStatus{
padding: 7px 10px !important;
font-size: 10.5px !important;
}
#scrollExperience .livePhoneTitle{
margin-top: 14px !important;
font-size: 27px !important;
line-height: 1.04 !important;
}
#scrollExperience .livePhoneText{
margin-top: 9px !important;
min-height: 44px !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
#scrollExperience .liveProgress{
margin-top: 20px !important;
height: 8px !important;
}
#scrollExperience .liveApps{
gap: 9px !important;
margin-top: 20px !important;
}
#scrollExperience .liveApps span{
border-radius: 14px !important;
}
/* Right side: vertical cards, closer to the phone */
#scrollExperience .scrollSteps{
display: grid !important;
gap: 16px !important;
padding: 0 !important;
margin-top: 12px !important;
justify-self: start !important;
width: min(100%, 305px) !important;
}
#scrollExperience .scrollStep{
min-height: 292px !important;
justify-content: center !important;
border-radius: 24px !important;
padding: 26px 22px !important;
}
#scrollExperience .stepKicker{
margin-bottom: 14px !important;
font-size: 12px !important;
}
#scrollExperience .scrollStep h3{
font-size: clamp(27px, 4.4vw, 34px) !important;
line-height: 1.02 !important;
margin-bottom: 10px !important;
}
#scrollExperience .scrollStep p{
font-size: 14px !important;
line-height: 1.55 !important;
max-width: 25ch !important;
}
#scrollExperience.scrollShowcase{
margin-bottom: 20px !important;
}
#demoVideo.section.demovideo{
margin-top: 0 !important;
padding-top: 0px !important;
top: 0 !important;
}
#school.schoolCinema{
width: calc(100% - 44px) !important;
max-width: none !important;
padding-top: 54px !important;
padding-bottom: 64px !important;
min-height: 140vh !important;
overflow: visible !important;
}
#school.schoolCinema .schoolCinemaShell{
display: grid !important;
grid-template-columns: minmax(285px, .9fr) minmax(335px, 1fr) !important;
gap: 24px !important;
align-items: center !important;
position: sticky !important;
top: 88px !important;
}
/* LEFT SIDE */
#school.schoolCinema .schoolIntro--cinema{
margin-top: 0 !important;
transform: none !important;
max-width: 300px !important;
}
#school.schoolCinema .schoolEyebrow{
width: max-content !important;
max-width: 100% !important;
margin-bottom: 14px !important;
padding: 8px 13px !important;
font-size: 10px !important;
line-height: 1.1 !important;
letter-spacing: .035em !important;
white-space: nowrap !important;
}
#school.schoolCinema .schoolEyebrowDot{
width: 7px !important;
height: 7px !important;
}
#school.schoolCinema #schoolTitle{
font-size: clamp(48px, 7.2vw, 62px) !important;
line-height: .92 !important;
letter-spacing: -.065em !important;
margin-bottom: 14px !important;
max-width: 7.2ch !important;
}
#school.schoolCinema .schoolLead{
max-width: 31ch !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
}
/* Buttons side-by-side and better proportioned */
#school.schoolCinema .schoolHeroActions{
margin-top: 20px !important;
gap: 10px !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
#school.schoolCinema .schoolMainCta{
min-width: 128px !important;
min-height: 52px !important;
padding: 13px 22px !important;
font-size: 15px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#school.schoolCinema .schoolOfferPill{
min-width: 142px !important;
min-height: 48px !important;
padding: 8px 14px !important;
font-size: 9.5px !important;
line-height: 1.08 !important;
letter-spacing: .075em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: left !important;
}
/* RIGHT SIDE */
#school.schoolCinema .schoolStage{
margin-top: 0 !important;
width: 100% !important;
max-width: 370px !important;
min-height: auto !important;
justify-self: end !important;
transform: translateX(4px) !important;
transform-origin: center !important;
}
#school.schoolCinema .schoolStageGlow{
width: 330px !important;
height: 330px !important;
inset: 8% 0 auto auto !important;
filter: blur(30px) !important;
}
#school.schoolCinema .schoolScreen{
padding: 15px !important;
border-radius: 28px !important;
min-height: auto !important;
/* Laptop-style cinematic rotation */
transform: perspective(1000px) rotateY(-6deg) rotateX(3deg) scale(.94) !important;
transform-origin: center center !important;
box-shadow:
0 26px 70px rgba(0,0,0,.58),
inset 0 1px 0 rgba(255,255,255,.13) !important;
}
#school.schoolCinema .schoolScreenTop{
gap: 6px !important;
font-size: 9.5px !important;
line-height: 1 !important;
}
#school.schoolCinema .schoolLiveDot{
width: 6px !important;
height: 6px !important;
box-shadow: 0 0 0 4px rgba(255,99,0,.12) !important;
}
#school.schoolCinema .schoolScreenTag{
padding: 4px 7px !important;
font-size: 8px !important;
white-space: nowrap !important;
}
#school.schoolCinema .schoolFeaturedCourse{
margin-top: 10px !important;
padding: 14px 15px !important;
border-radius: 19px !important;
max-width: none !important;
}
#school.schoolCinema .schoolCourseKicker{
margin-bottom: 7px !important;
font-size: 9px !important;
letter-spacing: .08em !important;
}
#school.schoolCinema .schoolFeaturedCourse h3{
max-width: 13ch !important;
font-size: clamp(24px, 3.2vw, 31px) !important;
line-height: .98 !important;
letter-spacing: -.055em !important;
}
#school.schoolCinema .schoolFeaturedCourse p{
margin-top: 8px !important;
max-width: 31ch !important;
font-size: 11.5px !important;
line-height: 1.42 !important;
}
#school.schoolCinema .schoolProgressLine{
height: 5px !important;
margin-top: 11px !important;
}
/* Impact card inside the screen */
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
margin-top: 12px !important;
min-height: 154px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
min-height: 154px !important;
padding: 16px 16px !important;
grid-template-columns: 46px 1fr !important;
column-gap: 14px !important;
border-radius: 20px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactIcon{
width: 44px !important;
height: 44px !important;
border-radius: 15px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactIcon svg{
width: 19px !important;
height: 19px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard h3,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main h3{
margin-bottom: 7px !important;
font-size: clamp(26px, 4.5vw, 34px) !important;
line-height: .98 !important;
letter-spacing: -.05em !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard p,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main p{
max-width: 25ch !important;
font-size: 12.5px !important;
line-height: 1.43 !important;
}
#school.schoolCinema .schoolScrollDots{
margin-top: 8px !important;
}
#school.schoolCinema .schoolFeaturedCourse p{
text-align: justify !important;
text-justify: inter-word;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard h3,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main h3{
font-size: 26px !important;
}
/* Reduce space between NumbuX School and Pricing */
#school.schoolCinema{
margin-top: -60px !important;
}
/* Reduce height of NumbuX School impact card box */
#school.schoolCinema .schoolScreen > .schoolImpactGrid.schoolImpactGrid--showcase{
min-height: 125px !important;
}
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard,
#school.schoolCinema .schoolScreen > .schoolImpactGrid--showcase .schoolImpactCard--main{
min-height: 125px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
}
/* =========================================================
Locations β order: title, map, text
========================================================= */
@media (min-width: 601px) and (max-width: 768px){
#locations .mapSplit{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
}
/* Makes h2, p, ul and note behave as direct children of .mapSplit */
#locations .mapInfo{
display: contents !important;
}
/* 1. Title */
#locations .mapInfo h2{
order: 1 !important;
margin: 0 0 4px !important;
font-size: clamp(38px, 4vw, 52px) !important;
line-height: .95 !important;
letter-spacing: -.055em !important;
}
/* 2. Map */
#locations .mapWrap{
order: 2 !important;
width: 100% !important;
margin: 0 !important;
}
#locations .mapBox{
min-height: 340px !important;
height: 340px !important;
border-radius: 24px !important;
}
/* 3. Text content */
#locations .mapInfo p{
order: 3 !important;
margin: 4px 0 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
max-width: 62ch !important;
}
#locations .mapInfo > br{
display: none !important;
}
#locations .mapInfo .bullet{
order: 4 !important;
margin-top: 10px !important;
}
#locations .mapInfo .note{
order: 5 !important;
margin-top: 14px !important;
}
#locations .mapInfo p{
order: 3 !important;
width: 100% !important;
max-width: 58ch !important;
margin: 8px 0 0 !important;
color: rgba(255,255,255,.72) !important;
font-size: 15px !important;
line-height: 1.65 !important;
text-align: left !important;
}
/* Remove the forced double
gap on tablet */
#locations .mapInfo p br{
display: none !important;
}
/* Hide locations bullet list */
#locations .mapInfo .bullet{
display: none !important;
}
}
/* Hidden by default: desktop/tablet keeps the 6 squares */
.livePhoneMobileSteps{
display: none;
}
@media (max-width: 600px){
.hero{
margin-top: 25px;
}
.hero .cardHeader{
display: none !important;
}
.heroRight .miniDash.imageDash,
.heroRight--tabletSlot .miniDash.imageDash{
position: relative !important;
top: -100px !important;
}
.heroRight .dashboardImage,
.heroRight--tabletSlot .dashboardImage{
width: 135% !important;
max-width: none !important;
/* first value = left/right, second value = up/down */
transform: translate(-3%, -110px) !important;
}
.heroRight .storeBadges--onImage,
.heroRight--tabletSlot .storeBadges--onImage{
transform: scale() !important;
}
.motionStrip{
margin-top: -52%;
}
.section.scrollShowcase{
margin-top: -11%;
}
#scrollExperience .scrollSticky h2{
display: none;
}
#scrollExperience .livePhone{
margin-top: 0 !important;
}
/* Keep the phone visible while the invisible steps drive the scroll */
#scrollExperience .scrollSticky{
position: sticky !important;
top: 82px !important;
z-index: 2 !important;
}
/* Hide the 6 squares only on mobile */
#scrollExperience .liveApps{
display: none !important;
}
/* Show the mobile step cards inside the phone */
#scrollExperience .livePhoneMobileSteps{
position: relative !important;
display: grid !important;
margin-top: 20px !important;
min-height: 178px !important;
}
#scrollExperience .livePhoneStepCard{
grid-area: 1 / 1;
min-height: 178px;
padding: 18px 16px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 15% 10%, rgba(255,99,0,.20), transparent 42%),
rgba(255,255,255,.045);
box-shadow:
0 18px 44px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.08);
opacity: 0;
transform: translateY(14px) scale(.96);
filter: blur(8px);
pointer-events: none;
transition:
opacity .42s var(--ease),
transform .42s var(--ease),
filter .42s var(--ease),
border-color .42s var(--ease);
}
#scrollExperience .livePhoneStepCard.is-active{
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
pointer-events: auto;
border-color: rgba(255,99,0,.45);
background:
radial-gradient(circle at 15% 10%, rgba(255,99,0,.28), transparent 42%),
rgba(255,99,0,.06);
}
#scrollExperience .livePhoneStepCard .stepKicker{
display: block;
margin-bottom: 10px;
color: var(--accent);
font-size: 11px;
font-weight: 900;
letter-spacing: .18em;
}
#scrollExperience .livePhoneStepCard h3{
margin: 0 0 8px;
color: #fff;
font-size: 24px;
line-height: 1.02;
letter-spacing: -.045em;
}
#scrollExperience .livePhoneStepCard p{
margin: 0;
color: rgba(255,255,255,.66);
font-size: 12.5px;
line-height: 1.45;
}
/*
Hide the outside cards visually on mobile,
but keep them in the layout so the scroll detection still works.
*/
#scrollExperience .scrollSteps{
display: grid !important;
gap: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#scrollExperience .scrollSteps .scrollStep{
min-height: 68svh !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
#scrollExperience .scrollShowcaseGrid{
display: block !important;
}
#scrollExperience .scrollSticky{
position: sticky !important;
top: 72px !important;
z-index: 2 !important;
}
/*
This is the key:
the invisible scroll driver starts higher,
so the phone cards change before the whole phone has moved away.
*/
#scrollExperience .scrollSteps{
margin-top: -150svh !important;
padding-top: 70svh !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#scrollExperience .scrollSteps .scrollStep{
min-height: 52svh !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
#demoVideo.section.demovideo{
margin-top: 10% !important;
position: relative !important;
top: 0 !important;
transform: none !important;
}
.schoolEyebrow{
display: none;
}
.schoolScreenTag{
display: none;
}
.schoolScreenTagPhones{
display: inline-flex;
}
.schoolScreen{
margin-top: -6%;
}
#schoolTitle{
font-size: 28px !important;
letter-spacing: -.02em !important;
margin-top: 5%;
margin-bottom: 2%;
}
/* Make NumbuX School use the same horizontal spacing as normal sections */
#school.schoolCinema{
width: min(var(--max), calc(100% - 40px)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#locations .mapSplit{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* Allows the h2, p and note to be ordered separately from mapInfo */
#locations .mapInfo{
display: contents !important;
}
/* 1 β Title first */
#locations .mapInfo h2{
order: 1 !important;
margin: 0 0 4px !important;
}
/* 2 β Map after title */
#locations .mapWrap{
order: 2 !important;
width: 100% !important;
margin: 0 !important;
}
#locations .mapBox{
height: 320px !important;
min-height: 320px !important;
border-radius: 22px !important;
}
/* 3 β Text after map */
#locations .mapInfo p{
order: 3 !important;
margin-top: 4px !important;
}
#locations .mapInfo .note{
order: 4 !important;
}
#locations .bullet{
display: none;
}
#locations.section{
margin-top: 7% !important;
}
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot)
.storeBadge--apple .storeMark{
width: 32px !important;
height: 32px !important;
margin-left: -17px !important;
}
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot)
.storeBadge--apple .storeMark svg{
width: 32px !important;
height: 32px !important;
}
.motionStrip{
margin-top: -53% !important;
margin-bottom: 5% !important;
}
}
@media (max-width: 380px) and (max-height: 520px){
body main#top section.hero{
width: calc(100% - 12px) !important;
margin-left: 20px !important;
margin-right: 0 !important;
max-width: none !important;
}
body main#top section.hero .heroLeft{
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
}
.hero .heroTitle{
font-size: 48px !important;
}
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot) .dashboardImage{
transform: translate(-11%, -110px) !important;
width: 145% !important;
}
.motionStrip{
margin-top: -57% !important;
margin-bottom: 5% !important;
}
#schoolTitle{
margin-bottom: 12px !important;
margin-top: 30px !important;
}
}
@media (max-width: 340px) and (max-height: 520px){
body main#top section.hero .heroLeft h1.heroTitle{
font-size: 42px !important;
line-height: 1.02 !important;
}
.hero > .heroRight:not(.heroRight--tabletSlot)
.storeBadges.storeBadges--onImage{
transform: scale(.8) translate(-4%, 12%) !important;
transform-origin: top left !important;
}
.motionStrip{
margin-top: -70% !important;
margin-bottom: 5% !important;
}
}
@media (min-width: 760px) and (max-width: 780px) and (orientation: portrait){
#locations.section{
margin-top: 60px !important;
}
}
/* =========================================================
iPad mini
========================================================= */
@media (min-width: 800px) and (max-width: 840px) and (orientation: portrait){
.cardHeader{
display: none;
}
}
/* =========================================================
iPad Air portrait β Hero image + store badges control
820px x 1180px
========================================================= */
@media (min-width: 800px) and (max-width: 840px) and (orientation: portrait){
/* Hero phone/image */
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot) .dashboardImage{
width: 110% !important;
max-width: none !important;
/* X = left/right, Y = up/down */
transform: translate(10%, -40%) scale(1.18) !important;
transform-origin: center top !important;
}
/* Google Play + App Store cards */
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot)
.storeBadges.storeBadges--onImage{
/* X = left/right, Y = up/down */
transform: translate(-4%, -120%) scale(1.43) !important;
transform-origin: top left !important;
z-index: 20 !important;
}
.motionStrip{
margin-top: -15% !important;
margin-bottom: -8% !important;
}
#scrollExperience.scrollShowcase{
margin-top: 90px !important;
padding-top: 70px !important;
padding-bottom: 80px !important;
overflow: visible !important;
}
#scrollExperience .scrollShowcaseGrid{
display: grid !important;
grid-template-columns: minmax(300px, .9fr) minmax(340px, 1fr) !important;
gap: 26px !important;
align-items: start !important;
}
/* Restore sticky left side */
#scrollExperience .scrollSticky{
position: sticky !important;
top: 110px !important;
min-height: calc(100svh - 140px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
#scrollExperience .scrollSticky h2{
font-size: clamp(42px, 5.2vw, 54px) !important;
line-height: .98 !important;
max-width: 8ch !important;
margin-bottom: 20px !important;
}
#scrollExperience .livePhone{
width: 310px !important;
max-width: 310px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#scrollExperience .livePhoneFrame{
min-height: 390px !important;
}
/* Restore scroll driver cards */
#scrollExperience .scrollSteps{
display: grid !important;
width: min(100%, 370px) !important;
gap: 28px !important;
padding: 18svh 0 42svh !important;
margin-top: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
#scrollExperience .scrollStep{
min-height: 28svh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
border-radius: 28px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background:
radial-gradient(circle at 15% 10%, rgba(255,99,0,.15), transparent 40%),
rgba(255,255,255,.035) !important;
box-shadow: 0 20px 60px rgba(0,0,0,.28) !important;
padding: 26px 24px !important;
}
#scrollExperience .scrollStep.is-active{
border-color: rgba(255,99,0,.5) !important;
background:
radial-gradient(circle at 15% 10%, rgba(255,99,0,.25), transparent 40%),
rgba(255,99,0,.055) !important;
box-shadow: 0 30px 90px rgba(255,99,0,.10), 0 28px 90px rgba(0,0,0,.42) !important;
}
/* This mobile-only card system should stay hidden on iPad Air */
#scrollExperience .livePhoneMobileSteps{
display: none !important;
}
#demoVideo.section.demovideo{
margin-top: -50% !important;
}
#school.section.schoolCinema{
margin-top: 8% !important;
}
#locations.section{
margin-top: 8% !important;
}
}
/* ipad pro */
@media (min-width: 1000px) and (max-width: 1040px) and (orientation: portrait){
.hero{
margin-top: -30%;
}
.motionStrip{
margin-top: -35% !important;
margin-bottom: -27% !important;
}
/* Make Scroll Showcase cards shorter */
#scrollExperience .scrollSteps{
gap: 22px !important;
padding-top: 10svh !important;
}
#scrollExperience .scrollSteps .scrollStep{
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
padding: 22px 24px !important;
justify-content: center !important;
}
#demoVideo.section.demovideo{
margin-top: -55% !important;
}
#locations.section{
margin-top: 5% !important;
}
}
/* Surface Pro 7 */
@media (min-width: 900px) and (max-width: 930px) and (orientation: portrait){
/* Move the whole hero phone block */
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot){
transform: scale(1.1) !important;
transform-origin: center top !important;
}
/* Make only the phone image bigger / move it */
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot) .dashboardImage{
width: 165% !important;
max-width: none !important;
transform: translate(-20%, -20%) scale(1.05) !important;
transform-origin: center top !important;
}
/* Move / resize Google Play + App Store cards */
body main#top section.hero > .heroRight:not(.heroRight--tabletSlot) .storeBadges.storeBadges--onImage{
transform: translate(0%, 70%) scale(1.05) !important;
transform-origin: top left !important;
z-index: 20 !important;
}
.cardHeader{
transform: translate(-10%, -100%) scale(1.05) !important;
}
/* Restore Scroll Showcase tablet/desktop behavior */
#scrollExperience.scrollShowcase{
margin-top: 70px !important;
padding-top: 60px !important;
padding-bottom: 50px !important;
overflow: visible !important;
}
#scrollExperience .scrollShowcaseGrid{
display: grid !important;
grid-template-columns: minmax(340px, .9fr) minmax(380px, 1fr) !important;
gap: 30px !important;
align-items: start !important;
}
#scrollExperience .scrollSticky{
position: sticky !important;
top: 110px !important;
min-height: calc(100svh - 140px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
#scrollExperience .scrollSticky h2{
font-size: clamp(46px, 5vw, 60px) !important;
line-height: .98 !important;
max-width: 8ch !important;
margin-bottom: 22px !important;
}
#scrollExperience .livePhone{
width: 345px !important;
max-width: 345px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#scrollExperience .livePhoneFrame{
min-height: 410px !important;
}
/* Cards: shorter and starting lower */
#scrollExperience .scrollSteps{
display: grid !important;
width: min(100%, 390px) !important;
gap: 22px !important;
padding: 16svh 0 34svh !important;
margin-top: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
#scrollExperience .scrollSteps .scrollStep{
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
padding: 22px 24px !important;
justify-content: center !important;
}
#scrollExperience .scrollStep h3{
font-size: 36px !important;
line-height: 1.03 !important;
}
#scrollExperience .scrollStep p{
font-size: 14.5px !important;
line-height: 1.5 !important;
}
#scrollExperience .livePhoneMobileSteps{
display: none !important;
}
#demoVideo.section.demovideo{
margin-top: -47% !important;
}
#precios.section{
margin-top: 6% !important;
}
#locations.section{
margin-top: 10% !important;
}
}
/* Surface Duo 540x720 CSS here */
@media (min-width: 520px) and (max-width: 560px) and (orientation: portrait){
.motionStrip{
margin-top: -40% !important;
margin-bottom: 8% !important;
}
}
/* =========================================================
Asus Zenbook portrait β 853px x 1280px
========================================================= */
@media (min-width: 840px) and (max-width: 870px) and (orientation: portrait){
.motionStrip{
margin-top: -5% !important;
margin-bottom: -7% !important;
}
/* Restore Scroll Showcase tablet/desktop behavior */
#scrollExperience.scrollShowcase{
margin-top: 70px !important;
padding-top: 60px !important;
padding-bottom: 50px !important;
overflow: visible !important;
}
#scrollExperience .scrollShowcaseGrid{
display: grid !important;
grid-template-columns: minmax(310px, .9fr) minmax(340px, 1fr) !important;
gap: 26px !important;
align-items: start !important;
}
#scrollExperience .scrollSticky{
position: sticky !important;
top: 110px !important;
min-height: calc(100svh - 140px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
#scrollExperience .scrollSticky h2{
font-size: clamp(42px, 5vw, 54px) !important;
line-height: .98 !important;
max-width: 8ch !important;
margin-bottom: 20px !important;
}
#scrollExperience .livePhone{
width: 315px !important;
max-width: 315px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#scrollExperience .livePhoneFrame{
min-height: 390px !important;
}
/* Cards: shorter and starting lower */
#scrollExperience .scrollSteps{
display: grid !important;
width: min(100%, 370px) !important;
gap: 22px !important;
padding: 16svh 0 34svh !important;
margin-top: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
#scrollExperience .scrollSteps .scrollStep{
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
padding: 22px 24px !important;
justify-content: center !important;
}
#scrollExperience .scrollStep h3{
font-size: 34px !important;
line-height: 1.03 !important;
}
#scrollExperience .scrollStep p{
font-size: 14px !important;
line-height: 1.5 !important;
}
#scrollExperience .livePhoneMobileSteps{
display: none !important;
}
#demoVideo.section.demovideo{
margin-top: -48% !important;
}
#precios.section{
margin-top: 3%;
}
#locations.section{
margin-top: 10% !important;
}
}
/* =========================================================
Mobile performance mode β reduce lag
========================================================= */
@media (max-width: 600px){
/* 1) Keep the marquee lightweight, but do not block its animated transform. */
.motionStripTrack,
.motionStripTrack--ghost{
display: flex !important;
animation: marquee 30s linear infinite !important;
will-change: transform;
backface-visibility: hidden;
}
.motionStrip::before,
.motionStrip::after{
display: block !important;
}
.motionStrip{
background: rgba(255,255,255,.025) !important;
contain: layout paint !important;
}
/* 2) Remove expensive blur from Scroll Showcase cards */
#scrollExperience .livePhoneStepCard{
filter: none !important;
transform: none !important;
transition:
opacity .22s ease,
border-color .22s ease,
background .22s ease !important;
box-shadow:
0 10px 24px rgba(0,0,0,.26),
inset 0 1px 0 rgba(255,255,255,.06) !important;
will-change: opacity !important;
}
#scrollExperience .livePhoneStepCard.is-active{
filter: none !important;
transform: none !important;
}
/* 3) Kill heavy glows / breathing effects on phones */
#scrollExperience .livePhoneGlow,
.phoneGlow--low,
.phoneGlow--high{
display: none !important;
animation: none !important;
filter: none !important;
}
/* 4) Avoid blur reveal cost on mobile */
.reveal{
filter: none !important;
transition:
opacity .32s ease,
transform .32s ease !important;
will-change: auto !important;
}
.reveal.on{
filter: none !important;
}
/* 5) Stop decorative infinite animations on phones */
.storeBadge,
.btn.primary,
.iconRing,
.schoolOfferPill,
.schoolOfferPill::after{
animation: none !important;
}
/* 6) Disable background decorative layers */
.cursorGlow,
.motionGrid{
display: none !important;
}
/* 7) Make Scroll Showcase cheaper */
#scrollExperience .livePhone,
#scrollExperience .livePhoneFrame,
#scrollExperience .scrollSticky{
will-change: auto !important;
backface-visibility: hidden !important;
}
}
@media (max-width: 600px){
#scrollExperience .scrollSticky{
top: 180px !important;
}
}
/* =========================================================
FIX 3120x1440 / ULTRAWIDE HORIZONTAL OVERFLOW - PADRES
The motionStrip is full-width, but main becomes a 2-column grid
at 2560px+. This forces the strip to span the whole grid safely.
========================================================= */
@media (min-width: 2560px){
main{
overflow-x: hidden;
}
@supports (overflow: clip){
main{
overflow-x: clip;
}
}
main > .motionStrip{
grid-column: 1 / -1;
width: 100vw !important;
max-width: 100vw !important;
margin-top: 20px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
/* same as the ultrawide left padding of main */
margin-left: calc(-1 * clamp(48px, 4vw, 96px)) !important;
overflow: hidden !important;
}
}
/* =========================================================
Pro plan β clean premium card style
Visual-only: CSS overrides for the existing Pro card.
========================================================= */
#precios .pricing{
grid-template-columns: minmax(0, 720px);
justify-content: center;
align-items: stretch;
gap: 24px;
margin-top: 34px;
}
#precios .priceCardHot{
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(24px, 3.2vw, 36px);
border-radius: 32px;
border: 1px solid rgba(255, 255, 255, .13);
background:
linear-gradient(135deg, rgba(255, 99, 0, .16), transparent 32%),
radial-gradient(520px 300px at 100% -8%, rgba(255, 99, 0, .16), transparent 64%),
linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) 52%, rgba(255, 255, 255, .04)),
rgba(8, 8, 8, .96);
box-shadow:
0 34px 86px rgba(0, 0, 0, .58),
0 0 0 1px rgba(255, 99, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .14);
backdrop-filter: blur(16px);
animation: none;
}
#precios .priceCardHot::before{
content:"";
position:absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(255, 99, 0, .92), rgba(255, 99, 0, .12) 42%, transparent 72%);
height: 3px;
box-shadow: 0 0 28px rgba(255, 99, 0, .34);
pointer-events:none;
}
#precios .priceCardHot::after{
content:"Plan recomendado";
position:absolute;
top: 22px;
right: 24px;
z-index: 0;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 99, 0, .36);
background: rgba(255, 99, 0, .10);
color: rgba(255, 206, 171, .92);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
pointer-events:none;
}
#precios .priceCardHot > *{
position:relative;
z-index:1;
}
#precios .priceCardHot .priceTop{
display:grid;
grid-template-columns: 1fr auto;
align-items:end;
gap: 22px;
padding: 18px 0 24px;
margin: 0 0 18px;
border-bottom: 1px solid rgba(255, 255, 255, .10);
}
#precios .priceCardHot .priceTop h3{
position:relative;
display:inline-flex;
align-items:center;
gap: 13px;
margin-bottom: 2%;
font-size: clamp(85px, 10vw, 95px);
line-height:.92;
letter-spacing:-.075em;
font-weight: 950;
color:#fff;
text-shadow: 0 20px 46px rgba(0, 0, 0, .40);
}
#precios .priceCardHot .priceTop h3::before{
content:"";
width: 13px;
height: 13px;
border-radius:999px;
background:#ff6300;
box-shadow:
0 0 0 7px rgba(255, 99, 0, .12),
0 0 26px rgba(255, 99, 0, .55);
flex: 0 0 auto;
}
#precios .priceCardHot .price{
display:flex;
align-items:baseline;
justify-content:flex-end;
gap: 5px;
min-width: 170px;
padding: 14px 17px;
border-radius: 18px;
border: 1px solid rgba(255, 99, 0, .30);
background:
linear-gradient(180deg, rgba(255, 99, 0, .15), rgba(255, 99, 0, .055));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 18px 36px rgba(0, 0, 0, .24);
color:#fff;
font-size: clamp(28px, 3.7vw, 39px);
font-weight: 950;
letter-spacing:-.045em;
white-space: nowrap;
}
#precios .priceCardHot .price span{
margin-left: 4px;
color: rgba(255, 255, 255, .56);
font-size: 13px;
font-weight: 750;
letter-spacing:.01em;
}
#precios .priceCardHot ul{
list-style:none;
padding:0;
margin: 0 0 26px;
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
color: rgba(255, 255, 255, .76);
}
#precios .priceCardHot li{
position:relative;
min-height: 43px;
padding: 12px 4px 12px 31px;
border-bottom: 1px solid rgba(255, 255, 255, .075);
line-height:1.36;
transition:
color .2s var(--ease),
transform .2s var(--ease),
border-color .2s var(--ease);
}
#precios .priceCardHot li::before{
content:"β";
position:absolute;
left: 0;
top: 11px;
width: 20px;
height: 20px;
display:grid;
place-items:center;
border-radius: 999px;
border: 1px solid rgba(255, 99, 0, .34);
background: rgba(255, 99, 0, .10);
color:#ff8a2a;
font-size: 12px;
font-weight: 950;
box-shadow: 0 0 18px rgba(255, 99, 0, .12);
}
#precios .priceCardHot li:hover{
color:#fff;
transform: translateX(3px);
border-bottom-color: rgba(255, 99, 0, .26);
}
#precios .priceCardHot .blink-offer{
color:#fff;
font-weight: 850;
}
#precios .priceCardHot .blink-offer:first-child{
color: rgba(255, 213, 184, .98);
}
#precios .priceCardHot .blink-offer:last-child{
grid-column: 1 / -1;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap: 6px;
margin-top: 16px;
padding: 15px 18px;
border: 1px solid rgba(255, 99, 0, .33);
border-radius: 18px;
background:
linear-gradient(90deg, rgba(255, 99, 0, .18), rgba(255, 255, 255, .035), rgba(255, 99, 0, .10));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
0 16px 36px rgba(0, 0, 0, .22);
text-align:center;
}
#precios .priceCardHot .blink-offer:last-child::before{
position: static;
content:"β
";
width: 24px;
height: 24px;
border-color: rgba(255, 99, 0, .40);
background: rgba(255, 99, 0, .16);
color:#ff9a42;
transform:none;
}
#precios .priceCardHot .blink-text{
display:inline;
margin-left: 2px;
color: rgba(255, 198, 156, .88);
font-size:.86em;
font-weight: 700;
animation: none;
}
#precios .priceCardHot .addToCart{
min-height: 62px;
border-radius: 18px;
border: 1px solid rgba(255, 151, 70, .88);
background:
linear-gradient(180deg, #ff8a2a, #ff6300);
color:#fff;
box-shadow:
0 22px 48px rgba(255, 99, 0, .25),
inset 0 1px 0 rgba(255, 255, 255, .30);
letter-spacing:.015em;
}
#precios .priceCardHot .addToCart:hover{
transform: translateY(-2px);
border-color: rgba(255, 193, 128, .96);
box-shadow:
0 28px 64px rgba(255, 99, 0, .32),
0 0 0 6px rgba(255, 99, 0, .08),
inset 0 1px 0 rgba(255, 255, 255, .36);
}
@media (max-width: 760px){
#precios .pricing{
grid-template-columns: 1fr;
margin-top: 24px;
}
#precios .priceCardHot{
border-radius: 25px;
padding: 22px;
}
#precios .priceCardHot::after{
position: relative;
top: auto;
right: auto;
display: inline-flex;
margin-bottom: 12px;
}
#precios .priceCardHot .priceTop{
grid-template-columns: 1fr;
align-items: start;
gap: 16px;
padding-top: 0;
}
#precios .priceCardHot .price{
justify-content:center;
width:100%;
}
#precios .priceCardHot ul{
grid-template-columns: 1fr;
gap: 0;
}
#precios .priceCardHot li:hover{
transform:none;
}
}
@media (prefers-reduced-motion: reduce){
#precios .priceCardHot li,
#precios .priceCardHot .addToCart{
transition:none !important;
}
}
/* =========================================================
Focus plan β darker contrast refinement
Visual-only: stronger black background + clearer orange contrast.
========================================================= */
#precios{
position: relative;
}
#precios::before{
content:"";
position:absolute;
inset: -70px -40px -40px;
z-index:-1;
pointer-events:none;
background:
radial-gradient(560px 220px at 50% 18%, rgba(255, 99, 0, .075), transparent 72%),
linear-gradient(180deg, rgba(0, 0, 0, .00), rgba(0, 0, 0, .42) 42%, rgba(0, 0, 0, .00));
}
#precios .priceCardHot{
border-color: rgba(255, 99, 0, .42);
background:
radial-gradient(520px 260px at 100% -6%, rgba(255, 99, 0, .135), transparent 66%),
radial-gradient(420px 240px at 0% 100%, rgba(255, 99, 0, .075), transparent 72%),
linear-gradient(180deg, rgba(13, 13, 13, .99), rgba(3, 3, 3, .99) 62%, rgba(0, 0, 0, 1));
box-shadow:
0 40px 100px rgba(0, 0, 0, .76),
0 0 0 1px rgba(255, 99, 0, .18),
0 0 52px rgba(255, 99, 0, .10),
inset 0 1px 0 rgba(255, 255, 255, .055);
}
#precios .priceCardHot::before{
height: 4px;
background:
linear-gradient(90deg, #ff6300, #ff8a2a 36%, rgba(255, 99, 0, .16) 68%, transparent 100%);
box-shadow:
0 0 36px rgba(255, 99, 0, .62),
0 0 14px rgba(255, 99, 0, .58);
}
#precios .priceCardHot::after{
border-color: rgba(255, 99, 0, .54);
background: rgba(0, 0, 0, .72);
color: #ffad6b;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 0 24px rgba(255, 99, 0, .16);
}
#precios .priceCardHot .priceTop{
border-bottom-color: rgba(255, 99, 0, .22);
}
#precios .priceCardHot .priceTop h3{
color:#ffffff;
text-shadow:
0 24px 46px rgba(0, 0, 0, .75),
0 0 22px rgba(255, 99, 0, .08);
}
#precios .priceCardHot .priceTop h3::before{
background:#ff6300;
box-shadow:
0 0 0 7px rgba(255, 99, 0, .16),
0 0 30px rgba(255, 99, 0, .72),
0 0 52px rgba(255, 99, 0, .34);
}
#precios .priceCardHot .price{
border-color: rgba(255, 99, 0, .56);
background:
linear-gradient(180deg, rgba(255, 99, 0, .19), rgba(255, 99, 0, .075)),
rgba(0, 0, 0, .62);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 18px 38px rgba(0, 0, 0, .46),
0 0 32px rgba(255, 99, 0, .10);
}
#precios .priceCardHot .price span{
color: rgba(255, 204, 168, .72);
}
#precios .priceCardHot ul{
color: rgba(255, 255, 255, .82);
}
#precios .priceCardHot li{
border-bottom-color: rgba(255, 255, 255, .055);
}
#precios .priceCardHot li::before{
border-color: rgba(255, 99, 0, .62);
background: rgba(255, 99, 0, .135);
color:#ff9b45;
box-shadow:
0 0 20px rgba(255, 99, 0, .20),
inset 0 1px 0 rgba(255, 255, 255, .07);
}
#precios .priceCardHot li:hover{
color:#fff;
border-bottom-color: rgba(255, 99, 0, .36);
}
#precios .priceCardHot .blink-offer:first-child{
color:#ffd0ad;
}
#precios .priceCardHot .blink-offer:last-child{
border-color: rgba(255, 99, 0, .52);
background:
linear-gradient(90deg, rgba(255, 99, 0, .18), rgba(0, 0, 0, .58) 42%, rgba(255, 99, 0, .12)),
rgba(0, 0, 0, .56);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 18px 38px rgba(0, 0, 0, .42),
0 0 34px rgba(255, 99, 0, .10);
}
#precios .priceCardHot .blink-offer:last-child::before{
border-color: rgba(255, 99, 0, .70);
background: rgba(255, 99, 0, .20);
color:#ff9a42;
}
#precios .priceCardHot .blink-text{
color: rgba(255, 194, 149, .95);
}
#precios .priceCardHot .addToCart{
border-color: rgba(255, 178, 102, .98);
background:
linear-gradient(180deg, #ff9a3c, #ff6300 62%, #e95700);
box-shadow:
0 24px 54px rgba(255, 99, 0, .34),
0 0 0 1px rgba(255, 99, 0, .18),
inset 0 1px 0 rgba(255, 255, 255, .34);
}
#precios .priceCardHot .addToCart:hover{
border-color: rgba(255, 214, 171, 1);
box-shadow:
0 30px 72px rgba(255, 99, 0, .42),
0 0 0 7px rgba(255, 99, 0, .10),
inset 0 1px 0 rgba(255, 255, 255, .40);
}
/* Pro plan duplicate CTA: keep both purchase buttons identical in width and behavior */
#precios .priceCardHot .proPlanCta{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
#precios .priceCardHot .proPlanCta--top{
margin-top: 0px;
margin-bottom: 20px;
}
/* =========================================================
Focus plan β definitive removal of the inner semicircle
Keeps the dark/high-contrast version, but removes the large
radial orange arc from inside the Focus card.
========================================================= */
#precios .priceCardHot,
#precios .priceCardHot:hover{
background:
linear-gradient(180deg, rgba(12, 12, 12, .99), rgba(3, 3, 3, .995) 58%, rgba(0, 0, 0, 1)) !important;
}
/* Keep only the thin premium top accent; prevent this layer from expanding
into a curved/semicircular decoration inside the card. */
#precios .priceCardHot::before{
inset: 0 0 auto 0 !important;
width: auto !important;
height: 4px !important;
border-radius: 32px 32px 0 0 !important;
background:
linear-gradient(90deg, #ff6300, #ff8a2a 36%, rgba(255, 99, 0, .18) 68%, transparent 100%) !important;
box-shadow:
0 0 30px rgba(255, 99, 0, .48),
0 0 10px rgba(255, 99, 0, .38) !important;
}
/* Keep the label as a normal pill only; no inherited circular hover glow. */
#precios .priceCardHot::after,
#precios .priceCardHot:hover::after{
opacity: 1 !important;
background: rgba(0, 0, 0, .78) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 0 20px rgba(255, 99, 0, .14) !important;
}
/* Remove the broad orange halo behind the pricing card so no arc appears
through or around the Focus card. */
#precios::before{
background:
linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .44) 42%, rgba(0, 0, 0, 0)) !important;
}
/* =========================================================
Focus plan β final cleanup
Removes the persistent decorative semicircle/arc completely.
No HTML or JS changes.
========================================================= */
/* No generated background halo around the pricing section. */
#precios::before,
#precios::after{
content: none !important;
display: none !important;
opacity: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* Remove all card-generated decorative layers permanently.
This removes the internal semicircle/arc instead of merely hiding it visually. */
#precios .priceCardHot::before,
#precios .priceCardHot::after,
#precios .priceCardHot:hover::before,
#precios .priceCardHot:hover::after{
content: none !important;
display: none !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
background: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Keep the darker high-contrast card, but without any large radial/orange arc. */
#precios .priceCardHot,
#precios .priceCardHot:hover{
background:
linear-gradient(180deg, rgba(12, 12, 12, .995), rgba(3, 3, 3, 1) 58%, rgba(0, 0, 0, 1)) !important;
border-color: rgba(255, 99, 0, .50) !important;
box-shadow:
0 38px 96px rgba(0, 0, 0, .78),
0 0 0 1px rgba(255, 99, 0, .18),
inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
/* Prevent touch/mobile hover from leaving any visual state stuck. */
@media (hover: none){
#precios .priceCardHot,
#precios .priceCardHot:hover,
#precios .priceCardHot .addToCart,
#precios .priceCardHot .addToCart:hover,
#precios .priceCardHot li,
#precios .priceCardHot li:hover{
transform: none !important;
}
}
/* =========================================================
Pro plan β premium NumbuX School offer
Replaces the old blinking/child-like offer treatment with
a quieter executive-style benefit card.
========================================================= */
#precios .priceCardHot li.premium-school-offer{
grid-column: 1 / -1;
position: relative;
isolation: isolate;
min-height: auto;
margin-top: 18px;
padding: 19px 22px 19px 82px;
overflow: hidden;
display: grid;
gap: 5px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 24px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 44%),
radial-gradient(360px 190px at 13% 0%, rgba(255, 99, 0, .26), rgba(255, 99, 0, 0) 70%),
linear-gradient(180deg, rgba(14, 14, 14, .94), rgba(3, 3, 3, .98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .11),
0 24px 56px rgba(0, 0, 0, .42),
0 0 0 1px rgba(255, 99, 0, .12);
color: #fff;
text-align: left;
transform: none;
}
#precios .priceCardHot li.premium-school-offer:hover{
transform: translateY(-1px);
border-color: rgba(255, 170, 102, .50);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
0 30px 68px rgba(0, 0, 0, .48),
0 0 38px rgba(255, 99, 0, .14);
}
#precios .priceCardHot li.premium-school-offer::before{
content: "PRO";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 15px;
border: 1px solid rgba(255, 151, 70, .72);
background:
linear-gradient(180deg, rgba(255, 99, 0, .24), rgba(255, 99, 0, .09)),
rgba(0, 0, 0, .34);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
0 12px 28px rgba(255, 99, 0, .12);
color: #ffd7bd;
font-size: 9px;
font-weight: 900;
letter-spacing: .16em;
}
#precios .priceCardHot li.premium-school-offer::after{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, transparent, rgba(255, 255, 255, .075), transparent);
transform: translateX(-65%) skewX(-14deg);
opacity: .46;
}
#precios .priceCardHot .premium-school-offer__eyebrow{
width: max-content;
max-width: 100%;
padding: 4px 9px;
border: 1px solid rgba(255, 99, 0, .30);
border-radius: 999px;
background: rgba(255, 99, 0, .075);
color: rgba(255, 215, 189, .92);
font-size: 10px;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
line-height: 1;
}
#precios .priceCardHot .premium-school-offer__title{
color: #fff;
font-size: clamp(18px, 2.1vw, 23px);
font-weight: 900;
letter-spacing: -.025em;
line-height: 1.08;
}
#precios .priceCardHot .premium-school-offer__meta{
color: rgba(255, 255, 255, .66);
font-size: 13px;
font-weight: 650;
letter-spacing: .01em;
line-height: 1.35;
}
@media (max-width: 640px){
#precios .priceCardHot li.premium-school-offer{
padding: 17px 18px 17px 70px;
border-radius: 20px;
}
#precios .priceCardHot li.premium-school-offer::before{
left: 16px;
width: 38px;
height: 38px;
border-radius: 14px;
}
#precios .priceCardHot .premium-school-offer__eyebrow{
font-size: 9px;
letter-spacing: .10em;
}
}
/* =========================================================
Pricing title emphasis
Makes "Elige tu Plan de ProtecciΓ³n" centered and more noticeable.
========================================================= */
#precios .sectionHead{
max-width: 100%;
width: 100%;
margin: 0 auto 10px;
text-align: center;
display: flex;
justify-content: center;
}
#precios .sectionHead h2{
position: relative;
display: inline-block;
margin: 0;
padding: 0 0 16px;
font-size: clamp(38px, 5vw, 58px);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.045em;
color: #fff;
text-align: center;
text-wrap: balance;
text-shadow:
0 0 28px rgba(255, 99, 0, .30),
0 10px 34px rgba(0, 0, 0, .45);
}
#precios .sectionHead h2::after{
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: min(220px, 62%);
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: translateX(-50%);
box-shadow: 0 0 24px rgba(255, 99, 0, .55);
}
@media (max-width: 760px){
#precios .sectionHead{
margin-bottom: 6px;
}
#precios .sectionHead h2{
font-size: clamp(34px, 10vw, 44px);
max-width: 11ch;
}
}
/* =========================================================
Plan Pro β toggle mensual/anual + precio anual premium
========================================================= */
#precios .sectionHead{
flex-direction: column;
align-items: center;
gap: 18px;
}
#precios .billingToggleWrap{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 2px;
}
#precios .billingToggle{
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 6px 8px 6px 18px;
border-radius: 999px;
border: 1px solid rgba(255, 99, 0, .48);
background:
linear-gradient(180deg, rgba(18, 18, 18, .96), rgba(2, 2, 2, .96)),
rgba(0, 0, 0, .72);
color: rgba(255, 255, 255, .78);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 20px 54px rgba(0, 0, 0, .42),
0 0 0 1px rgba(255, 99, 0, .08);
transition:
border-color .22s var(--ease),
box-shadow .22s var(--ease),
transform .18s var(--ease);
}
#precios .billingToggle:hover{
transform: translateY(-1px);
border-color: rgba(255, 151, 70, .82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
0 24px 62px rgba(0, 0, 0, .48),
0 0 34px rgba(255, 99, 0, .16);
}
#precios .billingToggle:focus-visible{
outline: none;
box-shadow:
0 0 0 4px rgba(255, 99, 0, .22),
0 20px 54px rgba(0, 0, 0, .42);
}
#precios .billingToggle__label{
position: relative;
z-index: 1;
font-size: 13px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
transition: color .2s var(--ease), opacity .2s var(--ease);
}
#precios .billingToggle__track{
position: relative;
width: 62px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(255, 99, 0, .58);
background:
linear-gradient(180deg, rgba(255, 99, 0, .18), rgba(255, 99, 0, .07)),
rgba(0, 0, 0, .72);
box-shadow:
inset 0 2px 10px rgba(0, 0, 0, .52),
0 0 22px rgba(255, 99, 0, .13);
}
#precios .billingToggle__thumb{
position: absolute;
top: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 999px;
background:
radial-gradient(circle at 32% 26%, #fff2e8, #ff9a3c 45%, #ff6300 100%);
box-shadow:
0 8px 18px rgba(255, 99, 0, .38),
0 0 0 1px rgba(255, 255, 255, .18),
inset 0 1px 0 rgba(255, 255, 255, .48);
transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
#precios .billingToggle.is-annual .billingToggle__thumb{
transform: translateX(28px);
}
#precios .billingToggle.is-monthly .billingToggle__label--monthly,
#precios .billingToggle.is-annual .billingToggle__label--annual{
color: #fff;
}
#precios .billingToggle.is-monthly .billingToggle__label--annual,
#precios .billingToggle.is-annual .billingToggle__label--monthly{
color: rgba(255, 255, 255, .48);
}
#precios .billingDiscountPill{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 13px;
border-radius: 999px;
border: 1px solid rgba(255, 151, 70, .58);
background:
linear-gradient(180deg, rgba(255, 99, 0, .20), rgba(255, 99, 0, .08)),
rgba(0, 0, 0, .72);
color: #ffd7bd;
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
0 0 24px rgba(255, 99, 0, .15);
}
#precios .priceCardHot .proPrice{
display: grid;
grid-template-columns: auto auto;
grid-template-areas:
"old old"
"current period"
"meta meta";
align-items: baseline;
justify-content: end;
gap: 3px 7px;
min-width: 216px;
text-align: right;
}
#precios .priceCardHot .proPrice .priceOriginal{
grid-area: old;
justify-self: end;
display: inline-flex;
align-items: baseline;
gap: 4px;
color: rgba(255, 255, 255, .44);
font-size: clamp(14px, 1.5vw, 17px);
font-weight: 800;
letter-spacing: -.02em;
text-decoration-color: rgba(255, 99, 0, .95);
text-decoration-thickness: 2px;
}
#precios .priceCardHot .proPrice .priceOriginal[hidden],
#precios .priceCardHot .proPrice .priceAnnualMeta[hidden]{
display: none !important;
}
#precios .priceCardHot .proPrice .priceOriginal span{
margin-left: 2px;
color: rgba(255, 255, 255, .38);
font-size: 11px;
font-weight: 750;
}
#precios .priceCardHot .proPrice .priceCurrent{
grid-area: current;
display: inline-block;
color: #fff;
font-size: clamp(30px, 4.1vw, 43px);
font-weight: 950;
line-height: .98;
letter-spacing: -.055em;
text-shadow: 0 0 22px rgba(255, 99, 0, .18);
}
#precios .priceCardHot .proPrice .pricePeriod{
grid-area: period;
align-self: end;
margin-left: 0;
padding-bottom: 3px;
color: rgba(255, 204, 168, .76);
font-size: 13px;
font-weight: 800;
letter-spacing: .01em;
}
#precios .priceCardHot .proPrice .priceAnnualMeta{
grid-area: meta;
justify-self: end;
margin-top: 2px;
color: rgba(255, 215, 189, .78);
font-size: 11px;
font-weight: 750;
letter-spacing: .02em;
}
#precios .priceCardHot.is-annual{
border-color: rgba(255, 128, 42, .72) !important;
box-shadow:
0 42px 104px rgba(0, 0, 0, .80),
0 0 0 1px rgba(255, 99, 0, .28),
0 0 44px rgba(255, 99, 0, .13),
inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
#precios .priceCardHot.is-annual .addToCart{
background:
linear-gradient(180deg, #ffad66, #ff6300 58%, #de5200);
box-shadow:
0 27px 62px rgba(255, 99, 0, .42),
0 0 0 1px rgba(255, 99, 0, .22),
inset 0 1px 0 rgba(255, 255, 255, .38);
}
@media (max-width: 760px){
#precios .billingToggleWrap{
gap: 10px;
}
#precios .billingToggle{
width: min(100%, 360px);
justify-content: center;
padding-left: 14px;
}
#precios .priceCardHot .proPrice{
width: 100%;
justify-content: center;
text-align: center;
}
#precios .priceCardHot .proPrice .priceOriginal,
#precios .priceCardHot .proPrice .priceAnnualMeta{
justify-self: center;
}
}
/* =========================================================
Plan Pro β hide duplicate bottom CTA on tablet and desktop
Keep the second purchase button only on mobile, where it is
useful after the long feature list.
========================================================= */
@media (min-width: 761px){
#precios .priceCardHot .proPlanCta--bottom{
display: none !important;
}
#precios .priceCardHot ul{
margin-bottom: 0;
}
}
/* =========================================================
MOBILE FIX β Pricing title visible above previous section
Fixes "Elige tu Plan de ProtecciΓ³n" looking faded/covered on phones.
========================================================= */
#precios{
position: relative;
z-index: 8;
isolation: isolate;
}
#precios .sectionHead{
position: relative;
z-index: 9;
}
#precios .sectionHead h2{
color: #fff;
opacity: 1;
}
@media (max-width: 760px){
#precios.section{
position: relative !important;
z-index: 20 !important;
isolation: isolate !important;
clear: both !important;
margin-top: 24px !important;
padding-top: 64px !important;
background: var(--bg) !important;
}
#precios .sectionHead,
#precios .sectionHead.reveal,
#precios .sectionHead.reveal.on{
opacity: 1 !important;
filter: none !important;
transform: none !important;
visibility: visible !important;
}
#precios .sectionHead{
margin-bottom: 24px !important;
overflow: visible !important;
}
#precios .sectionHead h2{
max-width: 12ch !important;
color: #fff !important;
text-shadow:
0 0 34px rgba(255, 99, 0, .46),
0 16px 44px rgba(0, 0, 0, .88) !important;
}
#precios .sectionHead h2::after{
opacity: 1 !important;
z-index: 1 !important;
}
}
/* =========================================================
MOBILE FIX β Keep discounted price period close to price
Fixes annual price layout such as "4,14 β¬ /mes" on phones.
========================================================= */
#precios .priceCardHot .proPrice{
grid-template-columns: max-content max-content !important;
column-gap: 4px !important;
row-gap: 3px !important;
}
#precios .priceCardHot .proPrice .priceCurrent,
#precios .priceCardHot .proPrice .pricePeriod{
white-space: nowrap !important;
}
#precios .priceCardHot .proPrice .pricePeriod{
margin-left: 0 !important;
padding-bottom: 2px !important;
}
#precios .priceCardHot .proPrice .priceOriginal span{
margin-left: 1px !important;
}
@media (max-width: 760px){
#precios .priceCardHot .proPrice{
width: max-content !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
justify-content: center !important;
justify-items: center !important;
column-gap: 3px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
#precios .priceCardHot .proPrice .priceCurrent{
font-size: clamp(36px, 12vw, 44px) !important;
letter-spacing: -.058em !important;
}
#precios .priceCardHot .proPrice .pricePeriod{
justify-self: start !important;
align-self: end !important;
transform: translateY(-2px) !important;
font-size: 13px !important;
}
}
/* =========================================================
FINAL OVERRIDE β Plan layout requested
1) Plan name centered and alone
2) Billing toggle directly under the name
3) Premium, simple price treatment without orange box
========================================================= */
#precios .sectionHead{
margin-bottom: 18px !important;
}
#precios .priceCardHot .priceTop,
#precios .priceCardHot .priceTop--centered{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 18px !important;
grid-template-columns: none !important;
padding: 8px 0 30px !important;
margin: 0 0 24px !important;
border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
#precios .priceCardHot .priceTop h3,
#precios .priceCardHot .priceTop--centered h3{
display: block !important;
width: 100% !important;
margin: 0 !important;
text-align: center !important;
font-size: clamp(64px, 10vw, 98px) !important;
line-height: .9 !important;
letter-spacing: -.08em !important;
font-weight: 950 !important;
margin-right: 5% !important;
}
#precios .priceCardHot .priceTop h3::before,
#precios .priceCardHot .priceTop--centered h3::before{
content: none !important;
display: none !important;
}
#precios .priceCardHot .priceTop .billingToggleWrap,
#precios .priceCardHot .priceTop--centered .billingToggleWrap{
width: 100% !important;
margin: 0 !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
margin-left: 18% !important;
}
#precios .priceCardHot .priceTop .billingToggle,
#precios .priceCardHot .priceTop--centered .billingToggle{
min-height: 46px !important;
border-color: rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.045) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 16px 42px rgba(0,0,0,.34) !important;
}
#precios .priceCardHot .priceTop .billingToggle:hover,
#precios .priceCardHot .priceTop--centered .billingToggle:hover{
border-color: rgba(255,255,255,.24) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 20px 52px rgba(0,0,0,.42) !important;
}
#precios .priceCardHot .priceTop .billingDiscountPill,
#precios .priceCardHot .priceTop--centered .billingDiscountPill{
background: rgba(255,255,255,.045) !important;
border-color: rgba(255,255,255,.12) !important;
color: rgba(255,215,189,.92) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#precios .priceCardHot .price,
#precios .priceCardHot .proPrice{
width: max-content !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 2px auto 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-align: center !important;
justify-content: center !important;
justify-items: center !important;
grid-template-columns: max-content max-content !important;
grid-template-areas:
"old old"
"current period"
"meta meta" !important;
column-gap: 5px !important;
row-gap: 4px !important;
}
#precios .priceCardHot .proPrice .priceCurrent{
font-size: clamp(46px, 6.6vw, 66px) !important;
line-height: .86 !important;
letter-spacing: -.065em !important;
font-weight: 950 !important;
color: #fff !important;
text-shadow:
0 0 26px rgba(255,99,0,.16),
0 16px 42px rgba(0,0,0,.50) !important;
}
#precios .priceCardHot .proPrice .pricePeriod{
align-self: end !important;
padding-bottom: 7px !important;
margin-left: 0 !important;
color: rgba(255,255,255,.58) !important;
font-size: 14px !important;
font-weight: 750 !important;
letter-spacing: .01em !important;
}
#precios .priceCardHot .proPrice .priceOriginal{
justify-self: center !important;
color: rgba(255,255,255,.38) !important;
text-decoration-color: rgba(255,99,0,.70) !important;
}
#precios .priceCardHot .proPrice .priceAnnualMeta{
justify-self: center !important;
margin-top: 6px !important;
color: rgba(255,255,255,.52) !important;
font-size: 12px !important;
font-weight: 650 !important;
}
@media (max-width: 760px){
#precios .priceCardHot .priceTop,
#precios .priceCardHot .priceTop--centered{
gap: 16px !important;
padding-top: 2px !important;
padding-bottom: 26px !important;
}
#precios .priceCardHot .priceTop h3,
#precios .priceCardHot .priceTop--centered h3{
font-size: clamp(58px, 19vw, 82px) !important;
}
#precios .priceCardHot .priceTop .billingToggleWrap,
#precios .priceCardHot .priceTop--centered .billingToggleWrap{
flex-direction: column !important;
gap: 10px !important;
}
#precios .priceCardHot .priceTop .billingToggle,
#precios .priceCardHot .priceTop--centered .billingToggle{
width: min(100%, 330px) !important;
justify-content: center !important;
}
#precios .priceCardHot .proPrice .priceCurrent{
font-size: clamp(44px, 15vw, 58px) !important;
}
#precios .priceCardHot .proPrice .pricePeriod{
padding-bottom: 5px !important;
transform: none !important;
justify-self: start !important;
}
}
/* =========================================================
FINAL OVERRIDE β Modern premium treatment for the Pro name
========================================================= */
#precios .priceCard--proPremium .priceTop,
#precios .priceCard--proPremium .priceTop--centered{
overflow: visible !important;
}
#precios .priceCard--proPremium .priceTop h3.proPlanTitle,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle{
position: relative !important;
isolation: isolate !important;
display: inline-grid !important;
place-items: center !important;
width: max-content !important;
max-width: min(100%, 420px) !important;
margin: 0 auto !important;
padding: 18px 32px 19px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: 30px !important;
background:
radial-gradient(180px 95px at 50% -18%, rgba(255, 159, 82, .34), rgba(255, 99, 0, 0) 70%),
linear-gradient(135deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .025) 43%, rgba(255, 99, 0, .075)),
rgba(6, 6, 6, .88) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
0 24px 70px rgba(0, 0, 0, .62),
0 0 0 1px rgba(255, 99, 0, .12),
0 0 54px rgba(255, 99, 0, .16) !important;
color: #fff !important;
text-align: center !important;
line-height: 1 !important;
letter-spacing: normal !important;
font-size: initial !important;
font-weight: inherit !important;
text-shadow: none !important;
transform: translateZ(0) !important;
}
#precios .priceCard--proPremium .priceTop h3.proPlanTitle::before,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle::before{
content: "" !important;
position: absolute !important;
inset: 1px !important;
display: block !important;
width: auto !important;
height: auto !important;
border: 1px solid rgba(255, 255, 255, .07) !important;
border-radius: 28px !important;
background:
linear-gradient(135deg, rgba(255,255,255,.12), transparent 34%, rgba(255,99,0,.08) 74%, transparent) !important;
box-shadow: none !important;
opacity: 1 !important;
transform: none !important;
pointer-events: none !important;
z-index: 0 !important;
}
#precios .priceCard--proPremium .priceTop h3.proPlanTitle::after,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle::after{
content: "" !important;
position: absolute !important;
inset: -45% auto -45% -55% !important;
width: 52% !important;
height: auto !important;
display: block !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent) !important;
filter: blur(1px) !important;
opacity: .72 !important;
transform: rotate(18deg) translateX(-20%) !important;
animation: proTitleSweep 5.4s var(--ease) infinite !important;
pointer-events: none !important;
z-index: 0 !important;
}
#precios .proPlanTitle__eyebrow,
#precios .proPlanTitle__badge{
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .18em;
font-size: 10px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
}
#precios .proPlanTitle__eyebrow{
margin-bottom: 7px;
color: rgba(255, 214, 183, .82);
}
#precios .proPlanTitle__word{
position: relative;
z-index: 1;
display: block;
font-size: clamp(72px, 11vw, 116px);
line-height: .78;
font-weight: 950;
letter-spacing: -.085em;
padding-right: .055em;
color: transparent;
background:
linear-gradient(180deg, #fff 0%, #ffe7d7 35%, #ff9b45 72%, #ff6300 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 0 34px rgba(255, 99, 0, .26),
0 18px 46px rgba(0, 0, 0, .70);
}
#precios .proPlanTitle__badge{
margin-top: 12px;
padding: 8px 12px 8px 14px;
border: 1px solid rgba(255, 151, 70, .36);
background:
linear-gradient(180deg, rgba(255, 99, 0, .20), rgba(255, 99, 0, .07)),
rgba(0, 0, 0, .48);
color: rgba(255, 228, 209, .95);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 0 28px rgba(255, 99, 0, .14);
}
#precios .priceCard--proPremium .priceTop .billingToggleWrap,
#precios .priceCard--proPremium .priceTop--centered .billingToggleWrap{
margin-left: 0 !important;
}
#precios .priceCard--proPremium .priceTop .billingDiscountPill,
#precios .priceCard--proPremium .priceTop--centered .billingDiscountPill{
transform: translateY(0) !important;
}
@keyframes proTitleSweep{
0%, 58%{
transform: rotate(18deg) translateX(-28%);
left: -58%;
opacity: 0;
}
68%{
opacity: .78;
}
100%{
transform: rotate(18deg) translateX(245%);
left: 72%;
opacity: 0;
}
}
@media (max-width: 760px){
#precios .priceCard--proPremium .priceTop h3.proPlanTitle,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle{
width: min(100%, 330px) !important;
padding: 16px 22px 18px !important;
border-radius: 26px !important;
}
#precios .proPlanTitle__word{
font-size: clamp(68px, 22vw, 92px);
}
#precios .proPlanTitle__badge{
margin-top: 10px;
padding: 7px 11px 7px 13px;
font-size: 9px;
}
}
@media (prefers-reduced-motion: reduce){
#precios .priceCard--proPremium .priceTop h3.proPlanTitle::after,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle::after{
animation: none !important;
opacity: 0 !important;
}
}
/* =========================================================
FINAL OVERRIDE β Pro name only, premium text without badge
User requested: no "NumbuX", no "Premium", no title background.
========================================================= */
#precios .priceCard--proPremium .priceTop h3.proPlanTitle,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle{
display: inline-block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
isolation: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
color: transparent !important;
text-align: center !important;
line-height: .78 !important;
letter-spacing: -.085em !important;
font-size: initial !important;
font-weight: inherit !important;
text-shadow: none !important;
transform: none !important;
}
#precios .priceCard--proPremium .priceTop h3.proPlanTitle::before,
#precios .priceCard--proPremium .priceTop h3.proPlanTitle::after,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle::before,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle::after{
content: none !important;
display: none !important;
opacity: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
animation: none !important;
}
#precios .proPlanTitle__word{
position: relative !important;
z-index: 1 !important;
display: block !important;
padding: 0 .055em 0 0 !important;
margin: 0 !important;
font-size: clamp(82px, 12vw, 126px) !important;
line-height: .78 !important;
font-weight: 950 !important;
letter-spacing: -.085em !important;
color: #ff6300 !important;
background:
linear-gradient(180deg, #ffd2a3 0%, #ff9a3d 28%, #ff6f12 58%, #ff6300 78%, #c53a00 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 0 12px rgba(255, 99, 0, .34)) drop-shadow(0 18px 30px rgba(0, 0, 0, .62));
}
#precios .proPlanTitle__eyebrow,
#precios .proPlanTitle__badge{
display: none !important;
}
@media (max-width: 760px){
#precios .priceCard--proPremium .priceTop h3.proPlanTitle,
#precios .priceCard--proPremium .priceTop--centered h3.proPlanTitle{
width: auto !important;
padding: 0 !important;
border-radius: 0 !important;
}
#precios .proPlanTitle__word{
font-size: clamp(72px, 24vw, 96px) !important;
}
}
/* FINAL COLOR TUNING β richer, less washed-out Pro title */
#precios .priceCard--proPremium .proPlanTitle__word{
color: #ff6300 !important;
background: linear-gradient(180deg, #ffd2a3 0%, #ff9a3d 28%, #ff6f12 58%, #ff6300 78%, #c53a00 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 0 12px rgba(255, 99, 0, .34)) drop-shadow(0 18px 30px rgba(0, 0, 0, .62)) !important;
}
/* =========================================================
FINAL OVERRIDE β Matte Pro title, no aura
User requested a matte aspect and no glow around the title.
========================================================= */
#precios .priceCard--proPremium .proPlanTitle__word{
color: #e56700 !important;
background: linear-gradient(180deg, #f2a34f 0%, #eb7f22 42%, #d96206 78%, #bf4d00 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: none !important;
text-shadow: none !important;
}
/* =========================================================
FINAL RESPONSIVE OVERRIDE β Hide discount pill on monthly
On small screens, hide "Ahorra 17%" only while monthly mode is active.
========================================================= */
@media (max-width: 425px){
#precios .priceCard--proPremium:has([data-billing-toggle][data-billing="monthly"]) .billingDiscountPill{
display: none !important;
}
}
/* =========================================================
FINAL FIX β Hide "Ahorra 17%" on mobile monthly mode
Uses JS-applied card class instead of :has() for reliable support.
========================================================= */
@media (max-width: 425px){
#precios .priceCard--proPremium.is-monthly .billingDiscountPill,
#precios .priceCardHot.is-monthly .billingDiscountPill{
display: none !important;
}
#precios .priceCard--proPremium.is-annual .billingDiscountPill,
#precios .priceCardHot.is-annual .billingDiscountPill{
display: inline-flex !important;
}
}
/* =========================================================
FINAL 425px FIX β Hide "Ahorra 17%" on monthly mode
Uses 430px to reliably include 425px layouts across browsers/devtools.
========================================================= */
@media (max-width: 430px){
#precios .priceCard--proPremium.is-monthly .billingDiscountPill,
#precios .priceCardHot.is-monthly .billingDiscountPill{
display: none !important;
}
#precios .priceCard--proPremium.is-annual .billingDiscountPill,
#precios .priceCardHot.is-annual .billingDiscountPill{
display: inline-flex !important;
}
#precios .priceCard--proPremium .proPrice{
transform: translateX(7%) !important;
}
}
/* =========================================================
FINAL MOBILE FIX β 425px and smaller
Adds breathing room between the pricing card and NumbuX School,
and keeps the NumbuX School title above nearby layers.
========================================================= */
@media (max-width: 430px){
#school.section.schoolCinema{
margin-top: 0% !important;
padding-top: 32px !important;
position: relative !important;
z-index: 30 !important;
overflow: visible !important;
}
#school.schoolCinema .schoolCinemaShell{
z-index: 40 !important;
overflow: visible !important;
}
#school.schoolCinema .schoolIntro--cinema{
position: relative !important;
z-index: 60 !important;
transform: none !important;
max-width: none !important;
}
#school.schoolCinema #schoolTitle{
position: relative !important;
z-index: 80 !important;
isolation: isolate !important;
margin-top: 0 !important;
margin-bottom: 18px !important;
transform: translateZ(0) !important;
}
.schoolOfferPill{
margin-bottom: 15% !important;
}
}
/* =========================================================
FINAL HERO TITLE FIX β mobile line breaks under 430px
========================================================= */
.heroTitleSegment{
display: inline;
}
@media (max-width: 430px){
body main#top section.hero .heroLeft h1.heroTitle{
font-size: clamp(42px, 11vw, 48px) !important;
line-height: 1.03 !important;
max-width: none !important;
width: 100% !important;
text-wrap: wrap !important;
overflow: visible !important;
}
body main#top section.hero .heroLeft h1.heroTitle .heroTitleSegment{
display: block !important;
}
body main#top section.hero .heroLeft h1.heroTitle .heroTitleSegment--control,
body main#top section.hero .heroLeft h1.heroTitle .heroTitleSegment--imposible{
white-space: nowrap !important;
}
body main#top section.hero .heroLeft h1.heroTitle .heroTitleSegment--desinstalar .accent{
text-transform: capitalize;
}
}
@media (max-width: 325px){
body main#top section.hero .heroLeft h1.heroTitle{
font-size: clamp(30px, 11vw, 48px) !important;
}
.schoolLiveDot{
width: 5px !important;
height: 5px !important;
}
.schoolnumbuxschool{
font-size: 10px !important;
margin-left: -1% !important;
}
.schoolScreenTagPhones{
font-size: 9px !important;
}
}
/* Prevent background gestures while a drawer/modal is open.
The exact scroll position is restored by app_padres.js. */
body.is-scroll-locked{
overscroll-behavior: none;
}
/* =========================================================
FINAL TABLET/MOBILE UX β moving strip + swipeable cart
========================================================= */
/* Keep the benefits strip moving from tablets downward. */
@media (max-width: 1024px){
.motionStripTrack,
.motionStripTrack--ghost{
display: flex !important;
animation-name: marquee !important;
animation-duration: 30s !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
animation-play-state: running !important;
will-change: transform;
backface-visibility: hidden;
}
.motionStrip::before,
.motionStrip::after{
display: block !important;
}
.motionStrip{
contain: layout paint !important;
}
}
/* Respect the visitor's accessibility preference. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce){
.motionStripTrack,
.motionStripTrack--ghost{
animation: none !important;
}
}
/* Drawer follows the finger without fighting vertical cart scrolling. */
@media (max-width: 1024px){
.drawerPanel{
touch-action: pan-y;
will-change: transform;
}
.drawer.is-swipe-dragging .drawerPanel,
.drawer.is-swipe-dragging .drawerOverlay{
transition: none !important;
}
.drawer.is-swipe-dragging .drawerPanel{
user-select: none;
}
.drawerSwipeHandle{
position: absolute;
left: -20px;
top: 50%;
width: 20px;
height: 72px;
transform: translateY(-50%);
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.13);
border-right: 0;
border-radius: 14px 0 0 14px;
background: rgba(10,10,10,.9);
box-shadow: -8px 10px 28px rgba(0,0,0,.3);
backdrop-filter: blur(10px);
pointer-events: none;
}
.drawerSwipeHandle span{
width: 3px;
height: 34px;
border-radius: 999px;
background: rgba(255,99,0,.9);
box-shadow: 0 0 14px rgba(255,99,0,.35);
}
}
@media (min-width: 1025px){
.drawerSwipeHandle{
display: none;
}
}
/* =========================================================
INSTAGRAM IN-APP BROWSER: CENTERED EXTERNAL-BROWSER PROMPT
========================================================= */
.externalBrowserPrompt[hidden]{
display:none !important;
}
.externalBrowserPrompt{
position:fixed;
inset:0;
z-index:99999;
display:grid;
place-items:center;
padding:
max(18px, env(safe-area-inset-top))
18px
max(18px, env(safe-area-inset-bottom));
background:rgba(0,0,0,.78);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
body.external-browser-prompt-open{
overscroll-behavior:none;
}
.externalBrowserPrompt__card{
position:relative;
width:min(440px, 100%);
max-height:min(680px, calc(100dvh - 36px));
overflow-y:auto;
overscroll-behavior:contain;
padding:28px 24px 22px;
border:1px solid rgba(255,255,255,.16);
border-radius:24px;
background:
radial-gradient(circle at 50% -20%, rgba(255,99,0,.24), transparent 45%),
rgba(8,8,8,.97);
box-shadow:
0 28px 90px rgba(0,0,0,.72),
0 0 0 1px rgba(255,255,255,.04) inset;
text-align:center;
}
.externalBrowserPrompt__icon{
width:54px;
height:54px;
margin:0 auto 16px;
display:grid;
place-items:center;
border:1px solid rgba(255,99,0,.48);
border-radius:18px;
background:rgba(255,99,0,.12);
color:var(--accent);
box-shadow:0 0 0 8px rgba(255,99,0,.06);
}
.externalBrowserPrompt__icon svg{
width:27px;
height:27px;
}
.externalBrowserPrompt__title{
margin:0;
color:#fff;
font-size:clamp(22px, 6vw, 29px);
line-height:1.12;
letter-spacing:-.025em;
}
.externalBrowserPrompt__text{
margin:14px auto 0;
max-width:350px;
color:rgba(255,255,255,.72);
font-size:14px;
line-height:1.55;
}
.externalBrowserPrompt__destination{
margin:14px 0 0;
padding:10px 12px;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
border-radius:13px;
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.56);
font-size:11px;
line-height:1.4;
text-overflow:ellipsis;
white-space:nowrap;
}
.externalBrowserPrompt__actions{
display:grid;
gap:10px;
margin-top:20px;
}
.externalBrowserPrompt__button{
min-height:48px;
width:100%;
padding:11px 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06);
color:#fff;
font:inherit;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:
transform .15s var(--ease),
border-color .2s var(--ease),
background .2s var(--ease),
box-shadow .2s var(--ease);
}
.externalBrowserPrompt__button:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.30);
background:rgba(255,255,255,.10);
}
.externalBrowserPrompt__button:active{
transform:translateY(0);
}
.externalBrowserPrompt__button:focus-visible{
outline:none;
border-color:rgba(255,99,0,.72);
box-shadow:0 0 0 5px rgba(255,99,0,.18);
}
.externalBrowserPrompt__button--primary{
border-color:rgba(255,99,0,.88);
background:var(--accent);
color:#070707;
box-shadow:0 16px 36px rgba(255,99,0,.20);
}
.externalBrowserPrompt__button--primary:hover{
border-color:#ff8a43;
background:#ff741f;
box-shadow:0 20px 42px rgba(255,99,0,.28);
}
.externalBrowserPrompt__button--link{
min-height:40px;
border-color:transparent;
background:transparent;
color:rgba(255,255,255,.68);
font-size:13px;
font-weight:600;
}
.externalBrowserPrompt__button--link:hover{
background:rgba(255,255,255,.05);
color:#fff;
}
.externalBrowserPrompt__status{
min-height:0;
margin:14px 0 0;
color:rgba(255,255,255,.74);
font-size:12px;
line-height:1.5;
}
.externalBrowserPrompt__status:empty{
display:none;
}
.externalBrowserPrompt__steps{
margin:14px 0 0;
padding:13px 14px;
border:1px solid rgba(255,99,0,.26);
border-radius:14px;
background:rgba(255,99,0,.07);
color:rgba(255,255,255,.78);
font-size:12px;
line-height:1.55;
text-align:left;
}
.externalBrowserPrompt__steps strong{
color:#fff;
}
/* Keep the complete message centered on phones too. */
@media (max-width:420px){
.externalBrowserPrompt{
place-items:center;
padding:
max(16px, env(safe-area-inset-top))
10px
max(16px, env(safe-area-inset-bottom));
}
.externalBrowserPrompt__card{
width:100%;
padding:24px 18px 18px;
border-radius:24px;
}
}
/* =========================================================
FINAL FOOTER SOCIAL RESPONSIVENESS β YouTube included
Keeps all five social icons aligned without overflow.
========================================================= */
.footerSocialIcons{
max-width: 100%;
}
@media (max-width: 1200px) and (min-width: 901px){
.footerRowDualContent{
gap: clamp(12px, 1.5vw, 20px);
}
.footerSocialIcons{
gap: 11px;
flex: 0 0 auto;
}
.footerRowContact{
gap: 8px;
}
.footerContactItem{
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 768px) and (min-width: 601px){
.footerRowDualContent{
gap: 14px;
}
.footerSocialIcons{
gap: 10px;
}
}
@media (max-width: 480px){
.footerRowLinks.footerSocialIcons{
width: 100%;
max-width: 100%;
gap: clamp(8px, 3vw, 14px) !important;
padding-left: 4px;
padding-right: 4px;
}
.footerRowLinks.footerSocialIcons .socialIcon{
padding: 5px;
}
}
@media (max-width: 340px){
.footerRowLinks.footerSocialIcons{
gap: 7px !important;
}
.footerRowLinks.footerSocialIcons .socialIcon{
padding: 4px;
}
.footerRowLinks.footerSocialIcons .socialIcon svg{
width: 14px;
height: 14px;
}
}