/* ============== RESET + BASE ============== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ============== PREMIUM CUSTOM CURSOR ============== */
/* Activated by .has-custom-cursor on (set in JS only when fine pointer + hover) */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor [role="button"],
html.has-custom-cursor summary,
html.has-custom-cursor .meal-card {
cursor: none;
}
.cursor-dot, .cursor-ring {
position: fixed; top: 0; left: 0; pointer-events: none;
z-index: 99999;
border-radius: 50%;
mix-blend-mode: difference;
will-change: transform, width, height, opacity;
}
.cursor-dot {
width: 6px; height: 6px;
background: #fff;
transform: translate3d(-50px, -50px, 0) translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}
.cursor-ring {
width: 34px; height: 34px;
border: 1.5px solid rgba(255,255,255,0.85);
transform: translate3d(-50px, -50px, 0) translate(-50%, -50%);
transition: width 0.28s cubic-bezier(.2,.8,.2,1), height 0.28s cubic-bezier(.2,.8,.2,1), border-color 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}
/* Hover-expanded state on interactive elements */
html.cursor-hover .cursor-ring {
width: 56px; height: 56px;
border-color: rgba(255,255,255,1);
background: rgba(255,255,255,0.05);
}
html.cursor-hover .cursor-dot {
width: 3px; height: 3px;
opacity: 0.6;
}
/* Pressed state */
html.cursor-pressed .cursor-ring {
width: 24px; height: 24px;
background: rgba(255,255,255,0.15);
}
/* On dark sections, switch to solid white — mix-blend-mode fails across
stacking contexts created by sticky/overflow-hidden parents (e.g. manifesto). */
html.cursor-on-dark .cursor-dot,
html.cursor-on-dark .cursor-ring {
mix-blend-mode: normal;
}
html.cursor-on-dark .cursor-dot {
background: #fff;
}
html.cursor-on-dark .cursor-ring {
border-color: rgba(255,255,255,0.9);
background: transparent;
}
html.cursor-on-dark.cursor-hover .cursor-ring {
background: rgba(255,255,255,0.08);
}
/* Hide when leaves window */
html.cursor-hidden .cursor-dot,
html.cursor-hidden .cursor-ring { opacity: 0; }
/* Reduced motion: keep native cursor */
@media (prefers-reduced-motion: reduce) {
html.has-custom-cursor,
html.has-custom-cursor * { cursor: auto !important; }
.cursor-dot, .cursor-ring { display: none; }
}
/* Touch devices never get it */
@media (hover: none), (pointer: coarse) {
.cursor-dot, .cursor-ring { display: none; }
}
:root {
/* ── Base (unchanged) ── */
--cream: #efe9da;
--cream-2: #e6dec9;
--ink: #161914;
--ink-2: #2a2e25;
--mute: #5b5d54;
--faint: #8a8c80;
--line: rgba(22,25,20,0.12);
--line-strong: rgba(22,25,20,0.22);
--paper: #fbf7ec;
/* ── Blue identity palette ── */
--blue: #2563eb;
--blue-deep: #1d4ed8;
--blue-mid: #3b82f6;
--blue-soft: #93c5fd;
--blue-light: #dbeafe;
--blue-navy: #0f172a;
--blue-glow: rgba(37,99,235,0.3);
/* ── Aliases: remap lime/terra → blue (covers all existing var() references) ── */
--lime: var(--blue);
--lime-deep: var(--blue-deep);
--terra: var(--blue-mid);
--terra-deep: var(--blue-deep);
/* ── Navy: kept for loader ── */
--navy: #1a1f6e;
--navy-deep: #0e1248;
--shadow-card: 0 24px 60px -24px rgba(22,25,20,0.18), 0 4px 12px -4px rgba(22,25,20,0.08);
--shadow-sticker: 0 8px 24px -6px rgba(22,25,20,0.25);
--shadow-blue: 0 12px 30px -10px var(--blue-glow);
}
/* ══════════════════════════════════════════════════════
BLUE IDENTITY — SEMANTIC OVERRIDES
Elements where lime/terra served as *background* need
text-color updates; or where hardcoded hex values were used.
══════════════════════════════════════════════════════ */
/* Marquee-big: was lime bg + dark text → now blue bg + cream text */
.marquee-big { border-color: var(--blue-deep); }
.marquee-big-track .item { color: var(--cream); }
.marquee-big-track span { color: var(--cream); }
/* Lime-mark highlight: use blue-light (very pale) so dark text stays readable */
.lime-mark::before,
.hero h1 .lime-mark::before,
.pillars-head h2 .lime-mark::before,
.how-head h2 .lime-mark::before,
.abundance h2 .lime-mark::before { background: rgba(219,234,254,0.25) !important; }
.abundance h2 .it { color: var(--blue-soft) !important; }
/* Stickers: explicit bg + text for each */
.sticker-1 { background: var(--blue-mid); color: var(--cream); }
.sticker-2 { background: var(--blue-light); color: var(--ink); }
.sticker-3 {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
color: #fff;
border: 1.5px solid rgba(147,197,253,0.4);
box-shadow: 0 8px 24px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Antes/Ahora column: was lime bg + dark text → blue bg + cream text */
.antes-col.now {
background: var(--blue); color: var(--cream);
border-color: var(--blue-deep);
}
.antes-col.now p { color: rgba(219,234,254,0.85); }
.antes-col.now h4 { color: rgba(219,234,254,0.55); }
.antes-col.now li::before {
background: var(--blue-deep);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px; background-position: center; background-repeat: no-repeat;
border: none;
}
.antes-col .col-label { background: var(--blue-mid); color: var(--cream); }
.antes-col.now .col-label { background: var(--blue-deep); color: var(--blue-light); }
/* btn-primary: update hover glow color */
.btn-primary:hover {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
border-color: #3b82f6 !important;
box-shadow: 0 14px 36px -8px rgba(37,99,235,0.65) !important;
transform: translateY(-2px);
}
/* CTA glow pulse animation */
@keyframes ctaGlowPulse {
0%, 100% { box-shadow: 0 12px 30px -10px rgba(37,99,235,0.4); }
50% { box-shadow: 0 16px 40px -8px rgba(37,99,235,0.7), 0 0 0 4px rgba(37,99,235,0.1); }
}
.btn-primary { animation: ctaGlowPulse 3s ease-in-out infinite; }
.btn-primary:hover { animation: none; }
/* btn-lime: was lime bg + dark → blue bg + cream */
.btn-lime { color: var(--cream); box-shadow: 0 12px 30px -10px rgba(37,99,235,0.45); }
.btn-lime:hover { background: var(--blue-deep); box-shadow: 0 18px 36px -10px rgba(37,99,235,0.55); }
/* nav-cta hover: terra → blue */
.nav-cta:hover { background: var(--blue-mid) !important; }
/* Abundance: text + bar overrides for blue gradient background */
.scale.us .bar-num { color: var(--cream) !important; }
.scale.us .bar .bar-fill { background: linear-gradient(180deg, var(--blue-soft) 0%, var(--blue) 100%) !important; border-color: var(--blue) !important; }
.abundance p { color: rgba(219,234,254,0.8) !important; }
.scale-vs { color: var(--blue-soft) !important; }
.scale.us .label { color: var(--blue-soft) !important; }
/* Gradient text for key italic accents in manifesto */
.manifesto-line em {
background: linear-gradient(135deg, #93c5fd 0%, #dbeafe 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
color: transparent;
}
.manifesto-line .strike em {
background: linear-gradient(135deg, #93c5fd 0%, #dbeafe 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Animated gradient bg keyframe — shared by hero + final CTA */
@keyframes heroBgShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Final CTA section: was lime bg → deep blue animated gradient */
.final {
background: linear-gradient(-45deg, #0f172a, #1d4ed8, #1e3a5f, #2563eb) !important;
background-size: 400% 400% !important;
border-top-color: rgba(255,255,255,0.08) !important;
border-bottom-color: rgba(255,255,255,0.08) !important;
animation: heroBgShift 10s ease infinite;
}
.final h2 { color: var(--cream); }
.final h2 .it { color: var(--blue-soft) !important; }
.final p { color: rgba(219,234,254,0.82) !important; }
.final-meta { border-top-color: rgba(255,255,255,0.15); color: rgba(219,234,254,0.6); }
.final-meta strong { color: var(--cream); }
/* Footer: brand glyph was lime → blue */
footer .brand-glyph { background: var(--blue); color: var(--cream); }
footer ul a:hover { color: var(--blue-soft); }
/* Cart */
.cart-fab:hover { background: var(--blue-mid); }
.cart-fab .count { background: var(--blue); color: var(--cream); }
.cart-item-qty .q:hover { background: var(--blue-mid); }
/* FAQ toggle */
.faq-item[open] .toggle { background: var(--blue) !important; color: var(--cream) !important; }
/* Hero stat sup accent */
.hero-stat .num sup { color: var(--blue-soft); }
/* Mobile menu active */
.mobile-menu-links a.active { color: var(--blue-soft); }
/* Bleed marquee italic accent */
.bleed-inner .it { color: var(--blue); }
/* Hero eyebrow pill */
.hero-eyebrow-row .pill strong { color: var(--blue); }
/* ============== LOADING SCREEN ============== */
.loader {
position: fixed; inset: 0; z-index: 9999;
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(26,31,110,0.10), transparent 60%),
radial-gradient(ellipse 80% 60% at 80% 90%, rgba(26,31,110,0.14), transparent 60%),
radial-gradient(circle at 50% 50%, #ffffff 0%, #eef2ff 60%, #dde4ff 100%);
display: grid; place-items: center;
overflow: hidden;
transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), visibility 1.1s ease;
}
.loader.done {
transform: translateY(-100%);
opacity: 0.96;
visibility: visible;
pointer-events: none;
transition:
transform 1.4s cubic-bezier(.7,0,.2,1),
opacity 1.4s cubic-bezier(.7,0,.2,1) 0.1s,
visibility 0s linear 1.5s;
}
.loader.done .loader-scene {
transform: translateY(-16px); opacity: 0;
transition: transform 0.7s cubic-bezier(.6,0,.3,1), opacity 0.5s ease;
}
/* ---- wordmark scene ---- */
.loader-scene {
display: flex; flex-direction: column; align-items: center;
transition: transform 0.7s cubic-bezier(.6,0,.3,1), opacity 0.5s ease;
overflow: visible;
padding-inline: 24px;
max-width: 100vw;
box-sizing: border-box;
}
/* On narrow viewports, scale the whole wordmark so italic edges never clip */
@media (max-width: 480px) {
.loader-row1, .loader-food {
max-width: 96vw;
padding-inline: 0.15em 0.28em;
box-sizing: border-box;
overflow: visible;
}
.lw-text, .lw-ohole, .loader-food {
font-size: clamp(44px, 13.5vw, 96px) !important;
letter-spacing: -0.02em !important;
}
.lw-ohole {
margin: 0 -0.18em 0 0.02em;
}
}
.loader-row1 {
display: flex; align-items: center;
line-height: 0.92;
transform: translateX(110vw); opacity: 0;
transition: transform 0.72s cubic-bezier(0.14, 0.84, 0.24, 1), opacity 0.3s ease;
}
.loader-row1.in { transform: translateX(0); opacity: 1; }
.lw-text {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: clamp(38px, 11vw, 188px);
font-style: italic;
font-variation-settings: "wdth" 58;
letter-spacing: -0.04em;
color: var(--navy);
line-height: 0.92;
text-transform: uppercase;
user-select: none;
display: inline-block;
}
/* slot sized to match cap height of the letters, tucked tight */
.lw-ohole {
display: inline-block; position: relative;
width: 1.2em; height: 1.2em;
font-size: clamp(38px, 11vw, 188px);
flex-shrink: 0;
overflow: visible;
margin: 0 -0.24em 0 -0.08em;
}
.lw-ball {
position: absolute; inset: 0;
color: var(--navy);
transform-origin: center bottom;
transform: translateY(-600%); opacity: 0;
will-change: transform, opacity;
}
.lw-ball img { width: 100%; height: 100%; display: block; object-fit: contain; }
.lw-ball.drop {
animation: ballDrop 1.3s cubic-bezier(.15,.4,.3,1) forwards;
}
@keyframes ballDrop {
0% { transform: translateY(-600%) scaleY(1) scaleX(1); opacity: 0; }
6% { opacity: 1; }
36% { transform: translateY(4%) scaleY(0.66) scaleX(1.34); }
50% { transform: translateY(-105%) scaleY(1.12) scaleX(0.91); }
66% { transform: translateY(2%) scaleY(0.82) scaleX(1.18); }
76% { transform: translateY(-24%) scaleY(1.05) scaleX(0.96); }
89% { transform: translateY(0%) scaleY(0.97) scaleX(1.03); }
100% { transform: translateY(0%) scaleY(1) scaleX(1); opacity: 1; }
}
.loader-food {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: clamp(38px, 11vw, 188px);
font-style: italic;
font-variation-settings: "wdth" 58;
letter-spacing: -0.04em;
color: var(--navy);
line-height: 0.88;
text-transform: uppercase;
margin-top: -0.03em;
transform: translateX(-110vw); opacity: 0;
transition: transform 0.72s cubic-bezier(0.14, 0.84, 0.24, 1), opacity 0.3s ease;
user-select: none;
}
.loader-food.in { transform: translateX(0); opacity: 1; }
/* ---- progress indicator ---- */
.loader-progress {
margin-top: clamp(24px, 3vw, 40px);
width: clamp(220px, 24vw, 340px);
display: flex; align-items: center; gap: 14px;
opacity: 0;
transition: opacity 0.5s ease;
}
.loader-progress.in { opacity: 1; }
.lp-bar {
flex: 1;
height: 2px;
background: rgba(26, 31, 110, 0.12);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.lp-bar-fill {
height: 100%;
width: 0%;
background: var(--navy);
border-radius: 999px;
box-shadow: 0 0 12px rgba(26, 31, 110, 0.35);
will-change: width;
}
.lp-counter {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--navy);
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lp-counter sup {
font-size: 0.7em;
opacity: 0.45;
margin-left: 1px;
top: -0.3em;
}
/* ---- in-page floating food shapes (shared) ---- */
.lshape {
position: absolute; pointer-events: none;
animation: lfloat var(--dur, 18s) ease-in-out infinite var(--delay, 0s);
}
.lshape-photo { overflow: visible; background: transparent; box-shadow: none; }
.lshape-photo img {
width: 100%; height: 100%; object-fit: contain; display: block;
filter: saturate(1.1) contrast(1.03) drop-shadow(0 8px 18px rgba(26,31,110,0.18));
transition: opacity 0.4s ease;
}
.lshape-photo.failed img { opacity: 0; }
.lshape-photo.failed { background: radial-gradient(circle at center, var(--navy) 30%, transparent 70%); }
@keyframes lfloat {
0% { transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); }
25% { transform: translate(20px,-32px) rotate(calc(var(--r, 0deg) + 30deg)) scale(1.05); }
50% { transform: translate(-24px,22px) rotate(calc(var(--r, 0deg) - 35deg)) scale(0.95); }
75% { transform: translate(30px,14px) rotate(calc(var(--r, 0deg) + 18deg)) scale(1.03); }
100% { transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); }
}
/* hide content behind loader to avoid flash */
body.loading { overflow: hidden; }
body.loading main, body.loading .top-ticker, body.loading .nav, body.loading .wa-fab, body.loading .cart-fab { opacity: 0; }
body.loaded main, body.loaded .top-ticker, body.loaded .nav, body.loaded .wa-fab, body.loaded .cart-fab {
animation: pageIn 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
/* ============== FLOATING DECORATIVE LAYER (in-page) ============== */
.float-layer {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.float-layer .lshape { animation-duration: var(--dur, 22s); }
.hero, .antes, .final, .menu, .pillars, .manifesto { position: relative; }
.hero > .container, .antes > .container, .final > .container, .menu > .container, .pillars > .container { position: relative; z-index: 2; }
.antes .antes-col {
backdrop-filter: blur(8px) saturate(110%);
-webkit-backdrop-filter: blur(8px) saturate(110%);
}
.final .final-inner {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ============== MANIFESTO (cinematic scroll-pinned) ============== */
.manifesto {
height: 380vh; /* 3 phrases — ~127vh per phrase */
background: var(--ink);
color: var(--cream);
overflow: visible;
}
.manifesto-sticky {
position: sticky; top: 0;
height: 100vh;
display: grid; place-items: center;
overflow: hidden;
}
.manifesto-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 55% 45% at 20% 25%, rgba(37,99,235,0.14), transparent 70%),
radial-gradient(ellipse 50% 50% at 80% 75%, rgba(59,130,246,0.10), transparent 70%),
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(37,99,235,0.06), transparent 70%),
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(26,31,110,0.22), transparent 60%);
}
.manifesto-bg-grid {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(239,233,218,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(239,233,218,0.025) 1px, transparent 1px);
background-size: 88px 88px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.manifesto-label {
position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
color: rgba(239,233,218,0.45);
z-index: 5;
display: flex; align-items: center; gap: 14px;
}
.manifesto-label .bar { width: 32px; height: 1px; background: rgba(239,233,218,0.25); }
.manifesto-stage {
position: relative; width: 100%; max-width: 1380px; padding: 0 24px;
text-align: center;
z-index: 2;
}
.manifesto-line {
position: absolute;
left: 0; right: 0; top: 50%;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: clamp(48px, 9.5vw, 152px);
letter-spacing: -0.045em;
font-variation-settings: "wdth" 72;
line-height: 0.92;
text-transform: uppercase;
opacity: 0;
transform: translateY(-50%) translateY(80px) scale(0.94);
transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.85,.25,1);
text-wrap: balance;
}
.manifesto-line.active {
opacity: 1;
transform: translateY(-50%) translateY(0) scale(1);
}
.manifesto-line.exit {
opacity: 0;
transform: translateY(-50%) translateY(-80px) scale(0.94);
}
.manifesto-line em {
font-family: 'Instrument Serif', serif;
font-style: italic; font-weight: 400;
color: var(--lime);
font-variation-settings: normal;
letter-spacing: -0.025em;
text-transform: none;
display: inline-block;
padding: 0.05em 0.12em 0.12em;
opacity: 0;
transform: translateX(-28px) scale(0.96);
filter: blur(8px);
transition: opacity 0.7s cubic-bezier(.2,.8,.2,1) 0.45s,
transform 0.8s cubic-bezier(.2,.8,.2,1) 0.45s,
filter 0.7s ease 0.45s;
}
.manifesto-line.active em {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
.manifesto-line.exit em {
opacity: 0;
transform: translateX(16px);
filter: blur(4px);
transition: opacity 0.3s ease, transform 0.35s ease, filter 0.3s ease;
}
.manifesto-line .strike em { color: var(--terra); position: relative; }
.manifesto-line .strike em::after {
content: ""; position: absolute; left: -2%; right: -2%; top: 56%;
height: 6px; background: var(--terra); transform: scaleX(0); transform-origin: left;
border-radius: 999px;
}
.manifesto-line.active .strike em::after { transform: scaleX(1); transition: transform 0.7s cubic-bezier(.2,.8,.2,1) 0.3s; }
.manifesto-progress {
position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
display: flex; gap: 10px;
z-index: 5;
}
.manifesto-dot {
width: 28px; height: 3px;
background: rgba(239,233,218,0.16);
border-radius: 2px;
transition: background 0.5s ease, width 0.5s cubic-bezier(.2,.8,.2,1);
}
.manifesto-dot.active { background: var(--lime); width: 48px; }
.manifesto-num {
position: absolute; bottom: 56px; right: 56px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
font-variation-settings: "wdth" 80;
color: rgba(239,233,218,0.5);
z-index: 5;
}
.manifesto-num strong { color: var(--lime); font-weight: 800; }
@media (max-width: 720px) {
.manifesto { height: 340vh; }
.manifesto-num { display: none; }
.manifesto-line {
font-size: clamp(38px, 10vw, 64px);
letter-spacing: -0.03em;
line-height: 1.0;
word-break: keep-all;
overflow-wrap: break-word;
padding: 0 16px;
}
}
.manifesto-progress, .manifesto-num { display: none !important; }
html, body { background: var(--cream); color: var(--ink); }
body {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 420;
font-optical-sizing: auto;
font-variation-settings: "wdth" 100;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
line-height: 1.4;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
/* Type utilities */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; }
.serif-it { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mute);
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
content: ""; width: 8px; height: 8px; background: var(--terra); border-radius: 50%;
flex-shrink: 0;
}
.eyebrow.lime::before { background: var(--lime-deep); }
h1, h2, h3, h4 {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
line-height: 0.92;
letter-spacing: -0.04em;
font-variation-settings: "wdth" 75;
text-wrap: balance;
}
h1 { font-size: clamp(56px, 11vw, 184px); }
h2 { font-size: clamp(44px, 7.5vw, 124px); }
h3 { font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.03em; }
h4 { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; font-variation-settings: "wdth" 90; }
p { color: var(--ink-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
/* ============== LAYOUT ============== */
.container { width: min(1380px, calc(100% - 48px)); margin: 0 auto; position: relative; }
.container-narrow { width: min(980px, calc(100% - 48px)); margin: 0 auto; }
section { padding: 100px 0; position: relative; }
@media (max-width: 720px) { section { padding: 80px 0; } }
/* ============== TICKER STRIP (top) ============== */
.top-ticker {
background: #ffffff;
color: var(--blue);
padding: 10px 0;
overflow: hidden;
border-bottom: 1px solid var(--blue-light);
}
.top-ticker-track {
display: flex; gap: 40px; white-space: nowrap;
animation: tick 60s linear infinite;
width: max-content;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.2em;
align-items: center;
}
.top-ticker-track span.dot { width: 4px; height: 4px; background: var(--blue-mid); border-radius: 50%; }
.top-ticker-track em { font-style: normal; color: var(--blue-deep); font-weight: 700; }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes ath-tick { to { transform: translateX(calc(-9 * (300px + 18px))); } }
/* ============== NAV ============== */
.nav {
position: fixed; top: 56px; left: 0; right: 0; z-index: 90;
display: flex; justify-content: center;
pointer-events: none;
}
.nav-inner {
pointer-events: auto;
width: min(1380px, calc(100% - 32px));
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
padding: 12px 14px 12px 22px;
background: rgba(251,247,236,0.78);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid var(--line);
border-radius: 999px;
transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.nav.scrolled .nav-inner {
background: rgba(251,247,236,0.92);
box-shadow: 0 8px 30px -10px rgba(22,25,20,0.12);
padding: 8px 10px 8px 18px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700; font-size: 14px; letter-spacing: -0.02em;
font-variation-settings: "wdth" 85;
text-transform: uppercase;
}
.brand-logo {
width: auto; height: 38px;
display: block;
object-fit: contain;
transition: transform 0.25s ease;
}
.brand:hover .brand-logo { transform: scale(1.04); }
.brand-foot {
display: block !important;
margin: 0;
padding: 0;
line-height: 0;
}
.brand-logo-foot {
width: 280px;
height: auto;
display: block;
margin: 0;
opacity: 1;
}
.brand-glyph {
width: 32px; height: 32px; border-radius: 50%;
background: var(--ink); color: var(--cream);
display: grid; place-items: center;
font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
font-family: 'Bricolage Grotesque', sans-serif;
}
.brand small {
display: block; font-size: 8px; letter-spacing: 0.25em; color: var(--mute);
font-weight: 400; margin-top: 2px;
font-family: 'JetBrains Mono', monospace;
font-variation-settings: normal;
}
.nav-links {
display: flex; gap: 4px; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-links a {
position: relative;
padding: 10px 14px 12px; color: var(--blue-deep); border-radius: 999px;
transition: color 0.25s ease;
}
.nav-links a::after {
content: ""; position: absolute;
left: 50%; bottom: 4px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--blue);
opacity: 0;
transform: translate(-50%, 6px) scale(0.6);
transition: opacity 0.35s cubic-bezier(.2,.8,.2,1), transform 0.4s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 0 0 0 rgba(37,99,235,0.18);
}
.nav-links a:hover { color: var(--blue); }
.nav-links a:hover::after { opacity: 0.35; transform: translate(-50%, 0) scale(0.85); }
.nav-links a.active { color: var(--blue); }
.nav-links a.active::after {
opacity: 1;
transform: translate(-50%, 0) scale(1);
box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
animation: navDotPulse 2.4s ease-in-out infinite;
}
@keyframes navDotPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,0.10); }
50% { box-shadow: 0 0 0 6px rgba(37,99,235,0.04); }
}
.nav-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--ink); color: var(--cream);
padding: 11px 16px 11px 18px; border-radius: 999px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s ease;
}
.nav-cta:hover { background: var(--blue) !important; transform: translateY(-1px); }
.nav-cta svg { width: 13px; height: 13px; }
/* ----- Burger button ----- */
.nav-burger {
display: none;
width: 40px; height: 40px;
background: transparent; border: 0;
flex-direction: column; align-items: center; justify-content: center;
gap: 5px;
cursor: pointer;
padding: 0;
margin-left: 8px;
position: relative;
z-index: 1001;
}
.nav-burger span {
display: block;
width: 22px; height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 880px) {
.nav-links { display: none; }
.nav-inner { grid-template-columns: 1fr auto auto; }
.nav-burger { display: inline-flex; }
.nav-cta { padding: 9px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
.nav-cta { display: none; }
.nav-inner { grid-template-columns: 1fr auto; }
}
/* ----- Mobile menu overlay ----- */
.mobile-menu {
position: fixed; inset: 0; z-index: 1000;
background: #f8f9ff;
color: var(--blue-deep);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 32px;
padding: 32px 24px;
visibility: hidden;
transform: translateY(-100%);
transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
}
.mobile-menu.open {
visibility: visible;
transform: translateY(0);
transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.mobile-menu-close {
position: absolute; top: 18px; right: 18px;
width: 44px; height: 44px;
background: transparent; border: 0;
color: var(--blue-deep);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 999px;
transition: background .2s ease;
}
.mobile-menu-close:hover { background: rgba(37,99,235,0.08); }
.mobile-menu-links {
display: flex; flex-direction: column;
align-items: center; gap: 22px;
width: 100%;
}
.mobile-menu-links a {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 600; font-size: 30px;
font-variation-settings: "wdth" 78;
color: var(--blue-deep);
text-decoration: none;
letter-spacing: -0.02em;
line-height: 1;
transition: color .2s ease, transform .2s ease;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus,
.mobile-menu-links a.active { color: var(--blue); }
.mobile-menu-cta {
display: inline-flex; align-items: center; gap: 10px;
background: #25d366; color: white;
font-weight: 600; font-size: 15px;
padding: 14px 24px; border-radius: 999px;
text-decoration: none;
margin-top: 8px;
letter-spacing: 0.01em;
box-shadow: 0 8px 24px rgba(37,211,102,0.28);
transition: transform .2s ease;
}
.mobile-menu-cta:hover { transform: translateY(-2px); }
body.menu-open { overflow: hidden; }
/* ============== HERO ============== */
.hero {
position: relative; padding: 160px 0 80px;
min-height: 100vh;
overflow: hidden;
display: flex; flex-direction: column; justify-content: center;
}
.hero-frame {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
position: relative; z-index: 2;
}
.hero-left { position: relative; }
.hero-eyebrow-row {
display: flex; align-items: center; gap: 18px; margin-bottom: 32px; flex-wrap: wrap;
}
.hero-eyebrow-row .pill {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink); padding: 7px 12px;
border: 1px solid var(--line-strong); border-radius: 999px;
background: var(--paper);
}
.hero-eyebrow-row .pill strong { color: var(--terra-deep); font-weight: 700; }
.hero h1 { margin-bottom: 28px; font-size: clamp(72px, 10vw, 152px); }
@media (max-width: 540px) { .hero h1 { font-size: clamp(48px, 13vw, 76px); } }
.hero h1 .it { font-variation-settings: "wdth" 90; letter-spacing: -0.05em; }
/* Global lime-mark — always dark text so contrast vs lime bg stays readable */
.lime-mark { color: var(--ink); position: relative; z-index: 1; }
.hero h1 .lime-mark {
position: relative; display: inline-block;
}
.hero h1 .lime-mark::before {
content: ""; position: absolute; inset: 0.1em -0.08em -0.06em -0.08em;
background: var(--lime); z-index: -1; transform: skewX(-6deg);
}
.hero-word-blue {
color: var(--blue-deep);
display: block;
font-size: 0.85em;
line-height: 0.9;
letter-spacing: -0.06em;
font-variation-settings: "wdth" 65;
margin: 0.04em 0;
white-space: nowrap;
}
.hero h1 .lime-mark {
color: var(--blue-deep) !important;
background: transparent !important;
}
.hero h1 .lime-mark::before {
display: none !important;
}
.hero-sub {
max-width: 480px; font-size: 19px; color: var(--ink-2); margin-bottom: 36px;
font-variation-settings: "wdth" 95;
}
.hero-sub strong { color: var(--blue-deep); font-weight: 600; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 22px; border-radius: 999px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s ease, box-shadow 0.25s ease;
cursor: pointer; white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #fff;
border: 1.5px solid #2563eb;
box-shadow: 0 8px 24px -6px rgba(37,99,235,0.45);
}
.btn-primary:hover { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(37,99,235,0.65); }
.btn-wa {
background: #25D366; color: white;
box-shadow: 0 12px 30px -10px rgba(37,211,102,0.4);
}
.btn-wa:hover { background: #1ba94f; transform: translateY(-2px); }
.btn-lime {
background: var(--lime); color: var(--ink);
box-shadow: 0 12px 30px -10px rgba(168,230,53,0.5);
}
.btn-lime:hover { background: var(--lime-deep); transform: translateY(-2px); }
.btn-outline {
background: transparent; color: var(--ink);
border: 1.5px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn .arrow { transition: transform 0.3s ease; }
.btn:hover .arrow { transform: translateX(4px); }
/* Right column - plate visual */
.hero-right { position: relative; height: 580px; }
.hero-plate {
position: absolute; inset: 0;
display: grid; place-items: center;
animation: bobPlate 6s ease-in-out infinite;
}
@keyframes bobPlate {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-14px) rotate(2deg); }
}
.hero-plate-img {
width: 100%; aspect-ratio: 1; max-width: 540px;
border-radius: 50%;
background: var(--paper);
box-shadow: 0 50px 100px -25px rgba(22,25,20,0.35), inset 0 0 0 1px var(--line);
overflow: hidden;
position: relative;
}
.hero-plate-img image-slot { width: 100%; height: 100%; --is-bg: var(--paper); --is-fg: var(--mute); }
/* Stickers */
.sticker {
position: absolute;
display: grid; place-items: center;
border-radius: 50%;
font-family: 'JetBrains Mono', monospace;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
box-shadow: var(--shadow-sticker);
z-index: 2;
}
.sticker svg { position: absolute; inset: 0; animation: stickerSpin 20s linear infinite; }
@keyframes stickerSpin { to { transform: rotate(360deg); } }
.sticker .core {
position: relative; z-index: 2;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; letter-spacing: -0.02em;
font-variation-settings: "wdth" 80;
}
.sticker-1 {
top: -10px; right: 20px;
width: 130px; height: 130px;
background: var(--terra); color: var(--paper);
transform: rotate(8deg);
animation: stickerBob 5s ease-in-out infinite;
}
.sticker-2 {
bottom: 60px; left: 8px;
width: 110px; height: 110px;
background: var(--lime); color: var(--ink);
transform: rotate(-12deg);
animation: stickerBob 5s ease-in-out infinite 1.5s;
}
.sticker-3 {
bottom: 60px; right: 4px;
width: 96px; height: 96px;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff;
transform: rotate(15deg);
animation: stickerBob 5s ease-in-out infinite 0.7s;
}
@keyframes stickerBob {
0%, 100% { transform: rotate(var(--r, 8deg)) translateX(var(--sx, 0px)) translateY(var(--sy, 0px)); }
50% { transform: rotate(var(--r, 8deg)) translateX(var(--sx, 0px)) translateY(calc(-8px + var(--sy, 0px))); }
}
.sticker-1 { --r: 8deg; }
.sticker-2 { --r: -12deg; }
.sticker-3 { --r: 15deg; }
.sticker .core { font-size: 22px; line-height: 0.95; padding: 0 14px; }
.sticker-2 .core, .sticker-3 .core { font-size: 18px; }
@media (max-width: 980px) {
.hero-frame { grid-template-columns: 1fr; gap: 40px; }
.hero-right { height: 480px; }
.sticker-1 { width: 100px; height: 100px; }
.sticker-2 { width: 86px; height: 86px; }
.sticker-3 { width: 80px; height: 80px; }
.sticker .core { font-size: 16px; }
}
/* hero floor stats */
.hero-stats {
margin-top: 80px; padding-top: 32px;
border-top: 1.5px solid var(--ink);
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
position: relative; z-index: 2;
}
.hero-stat .num {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: clamp(36px, 4.5vw, 64px);
letter-spacing: -0.04em; line-height: 0.9;
font-variation-settings: "wdth" 80;
}
.hero-stat .num sup { font-size: 0.4em; vertical-align: super; color: var(--terra); margin-left: 2px; font-weight: 600; }
.hero-stat .label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--blue-mid); margin-top: 10px;
}
@media (max-width: 720px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ============== MARQUEE BIG ============== */
.marquee-big {
border-top: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
background: var(--lime);
padding: 22px 0;
overflow: hidden;
}
.marquee-big-track {
display: flex; gap: 56px; white-space: nowrap;
animation: tick 40s linear infinite;
width: max-content;
align-items: center;
}
.marquee-big-track .item {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: clamp(42px, 5.5vw, 76px);
letter-spacing: -0.04em;
font-variation-settings: "wdth" 75;
line-height: 1;
text-transform: uppercase;
color: var(--ink);
}
.marquee-big-track .item em {
font-family: 'Instrument Serif', serif;
font-style: italic; font-weight: 400;
font-variation-settings: normal;
letter-spacing: -0.02em;
font-size: 1.05em;
}
.marquee-big-track .star {
flex-shrink: 0;
width: 56px; height: 56px;
color: var(--ink);
}
/* ============== PROBLEM/SOLUTION (Antes/Después) ============== */
.antes {
background: var(--ink); color: var(--cream);
padding: 100px 0;
}
.antes h2 { color: var(--cream); margin-bottom: 60px; max-width: 14ch; }
.antes h2 .it { color: var(--lime); }
.antes p { color: rgba(239,233,218,0.7); }
.antes-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
position: relative;
}
.antes-col {
padding: 36px 32px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.02);
position: relative;
}
.antes-col.now { background: var(--blue); color: var(--cream); border-color: var(--blue); }
.antes-col.now p { color: rgba(219,234,254,0.85); }
.antes-col h4 {
font-size: 14px; font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 28px;
font-weight: 500;
color: rgba(239,233,218,0.6);
font-variation-settings: normal;
}
.antes-col.now h4 { color: rgba(22,25,20,0.6); }
.antes-col ul { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.antes-col li {
font-size: 19px; line-height: 1.35;
font-weight: 500;
display: flex; gap: 12px; align-items: flex-start;
}
.antes-col li::before {
content: ""; flex-shrink: 0;
width: 18px; height: 18px; margin-top: 4px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
}
.antes-col.now li::before {
background: var(--ink);
border: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.antes-col .col-label {
position: absolute; top: -14px; left: 24px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
padding: 6px 12px; border-radius: 999px;
background: var(--terra); color: var(--paper);
text-transform: uppercase;
}
.antes-col.now .col-label { background: var(--ink); color: var(--lime); }
/* Antes/Ahora card hover microinteractions */
@keyframes nowGlow {
0%, 100% { box-shadow: 0 8px 32px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.15); }
50% { box-shadow: 0 16px 48px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.22); }
}
.antes-col {
background: rgba(255,255,255,0.03);
box-shadow: 0 4px 24px rgba(22,25,20,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}
.antes-col:hover {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 32px 64px rgba(37,99,235,0.2), 0 4px 16px rgba(22,25,20,0.08),
inset 0 1px 0 rgba(255,255,255,0.12);
}
.antes-col.now {
animation: nowGlow 4s ease-in-out infinite;
}
.antes-col.now:hover {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 32px 64px rgba(37,99,235,0.45), 0 4px 16px rgba(22,25,20,0.1),
inset 0 1px 0 rgba(255,255,255,0.2);
animation: none;
}
.antes-grid .antes-col:nth-child(1).r { transition-delay: 0s; }
.antes-grid .antes-col:nth-child(2).r { transition-delay: 0.18s; }
@media (max-width: 820px) {
.antes-grid { grid-template-columns: 1fr; }
.antes-col {
transform: translateY(40px);
opacity: 0;
filter: blur(4px);
transition: transform 1s cubic-bezier(.16,1,.3,1),
opacity 0.9s ease,
filter 0.8s ease,
box-shadow 0.6s ease;
}
.antes-col.in {
transform: translateY(0);
opacity: 1;
filter: blur(0);
box-shadow: 0 16px 40px -12px rgba(37,99,235,0.18),
0 4px 12px -4px rgba(15,23,42,0.08);
}
.antes-grid .antes-col:nth-child(1) { transition-delay: 0s; }
.antes-grid .antes-col:nth-child(2) { transition-delay: 0.15s; }
}
@media (max-width: 640px) {
.antes-col { padding: 28px 20px 24px; }
.antes-col h4 { font-size: 12px; letter-spacing: 0.1em; margin-bottom: 20px; }
.antes-col li { font-size: 16px; }
.antes-col .col-label { font-size: 12px; padding: 5px 10px; }
}
/* ============== DIFERENCIALES (5 pillars) ============== */
.pillars { padding: 100px 0; }
.pillars-head {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
align-items: end; margin-bottom: 44px;
}
.pillars-head h2 { max-width: 12ch; }
.pillars-head h2 .it { color: var(--blue); }
.pillars-head h2 .lime-mark {
position: relative; display: inline-block;
}
.pillars-head h2 .lime-mark::before {
content: ""; position: absolute; inset: 0.1em -0.1em 0 -0.1em;
background: var(--lime); z-index: -1; transform: skewX(-6deg);
}
.pillars-grid {
display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
}
.pillar {
border-radius: 28px;
background: var(--paper);
border: 1px solid var(--line);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform 0.5s cubic-bezier(.2,.8,.2,1),
box-shadow 0.5s ease,
border-color 0.5s ease;
display: flex; flex-direction: column;
min-height: 360px;
}
.pillar > * { position: relative; z-index: 2; }
.pillar::before {
content: ""; position: absolute; top: 0; left: -100%; bottom: 0; width: 60%;
background: linear-gradient(105deg,
transparent 0%, rgba(255,255,255,0.04) 35%,
rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 65%, transparent 100%);
transition: left 0.9s ease; pointer-events: none; z-index: 1;
}
.pillar:hover::before { left: 160%; }
.pillar::after {
content: ""; position: absolute;
bottom: -20px; right: -20px;
width: 140px; height: 140px;
background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
background-size: 12px 12px;
opacity: 0.35;
pointer-events: none;
z-index: 1;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.pillar:hover::after {
opacity: 0.65;
transform: translate(-8px, -8px);
}
.pillar:hover { transform: translateY(-6px); }
.pillar:nth-child(1) {
grid-column: span 5; color: var(--cream); border-color: var(--blue);
background: radial-gradient(circle at 100% 0%, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}
.pillar:nth-child(1) p { color: rgba(219,234,254,0.85); }
.pillar:nth-child(2) {
grid-column: span 4; color: var(--cream); border-color: var(--blue-deep);
background: radial-gradient(circle at 100% 0%, #1e3a8a 0%, #0f172a 60%, #060e1d 100%);
}
.pillar:nth-child(2) p { color: rgba(219,234,254,0.75); }
.pillar:nth-child(3) {
grid-column: span 3; color: var(--cream); border-color: var(--blue);
background: radial-gradient(circle at 100% 0%, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}
.pillar:nth-child(3) p { color: rgba(219,234,254,0.85); }
.pillar:nth-child(4) {
grid-column: span 4; color: var(--cream); border-color: var(--blue-deep);
background: radial-gradient(circle at 100% 0%, #1e3a8a 0%, #0f172a 60%, #060e1d 100%);
}
.pillar:nth-child(4) p { color: rgba(219,234,254,0.75); }
.pillar:nth-child(5) {
grid-column: span 8; color: var(--cream); border-color: var(--blue);
background: radial-gradient(circle at 100% 0%, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}
.pillar:nth-child(5) p { color: rgba(219,234,254,0.85); }
.pillar:nth-child(1):hover,
.pillar:nth-child(3):hover,
.pillar:nth-child(5):hover {
border-color: rgba(147,197,253,0.55);
box-shadow: 0 24px 60px -10px rgba(37,99,235,0.5),
0 0 0 1px rgba(147,197,253,0.25),
inset 0 1px 0 rgba(255,255,255,0.14);
}
.pillar:nth-child(2):hover,
.pillar:nth-child(4):hover {
border-color: rgba(147,197,253,0.35);
box-shadow: 0 24px 60px -10px rgba(15,23,42,0.8),
0 0 0 1px rgba(147,197,253,0.18),
inset 0 1px 0 rgba(255,255,255,0.08);
}
.pillar .pill-num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.2em;
opacity: 1;
margin-bottom: 24px;
display: inline-block;
align-self: flex-start;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
.pillar:hover .pill-num {
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.22);
transform: translateX(4px);
}
.pillar h3 {
font-size: clamp(28px, 3vw, 44px); margin-bottom: 14px;
font-variation-settings: "wdth" 80;
}
.pillar h3 .it {
font-family: 'Instrument Serif', serif;
font-style: italic; font-weight: 400;
font-variation-settings: normal;
letter-spacing: -0.02em;
}
.pillar p { font-size: 16px; margin-bottom: auto; }
.pillar .pill-data {
margin-top: 28px; padding-top: 20px;
border-top: 1px solid currentColor;
border-color: rgba(22,25,20,0.15);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
opacity: 0.7;
}
.pillar:nth-child(1) .pill-data,
.pillar:nth-child(2) .pill-data,
.pillar:nth-child(3) .pill-data,
.pillar:nth-child(4) .pill-data,
.pillar:nth-child(5) .pill-data { border-color: rgba(255,255,255,0.15); }
.pillar .pill-data strong { font-weight: 500; opacity: 1; }
.pillar:nth-child(1) .pill-data strong,
.pillar:nth-child(3) .pill-data strong,
.pillar:nth-child(5) .pill-data strong { color: var(--blue-soft); }
.pillar:nth-child(2) .pill-data strong,
.pillar:nth-child(4) .pill-data strong { color: var(--blue-soft); }
@media (max-width: 980px) {
.pillars-head { grid-template-columns: 1fr; }
.pillars-grid { grid-template-columns: 1fr 1fr; }
.pillar { grid-column: span 1 !important; min-height: 280px; }
}
@media (max-width: 640px) {
.pillars-grid { grid-template-columns: 1fr; }
}
/* ============== PLANES (reemplaza MENU / VIANDAS) ============== */
.planes {
padding: 100px 0;
background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 45%, #1d4ed8 100%);
position: relative; overflow: hidden;
border-top: 1.5px solid rgba(255,255,255,0.08);
border-bottom: 1.5px solid rgba(255,255,255,0.08);
}
.planes > .container { position: relative; z-index: 2; }
/* Background orbs */
.planes-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.planes-orb {
position: absolute; border-radius: 50%;
filter: blur(90px); opacity: 0.55;
}
.planes-orb-1 {
width: 700px; height: 700px; top: -300px; right: -200px;
background: radial-gradient(circle, rgba(37,99,235,0.65) 0%, transparent 70%);
animation: orbDrift1 24s ease-in-out infinite;
}
.planes-orb-2 {
width: 600px; height: 600px; bottom: -200px; left: -100px;
background: radial-gradient(circle, rgba(29,78,216,0.55) 0%, transparent 70%);
animation: orbDrift2 18s ease-in-out infinite;
}
/* Header */
.planes-head {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
align-items: end; margin-bottom: 64px;
}
@media (max-width: 820px) { .planes-head { grid-template-columns: 1fr; } }
.eyebrow-light { color: rgba(219,234,254,0.6); }
.eyebrow-light::before { background: var(--blue-soft); }
/* Cards grid */
.planes-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; align-items: start;
}
@media (max-width: 980px) {
.planes-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
/* Individual plan card — glassmorphism */
.plan-card {
position: relative; border-radius: 28px; padding: 36px 30px;
background: rgba(255,255,255,0.06);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,0.12);
display: flex; flex-direction: column;
overflow: hidden;
transition: transform 0.5s cubic-bezier(.2,.8,.2,1),
box-shadow 0.5s ease, border-color 0.4s ease;
}
.plan-card:hover {
z-index: 2;
transform: translateY(-10px);
box-shadow: 0 24px 60px rgba(37,99,235,0.35),
0 0 0 1px rgba(147,197,253,0.2),
inset 0 1px 0 rgba(255,255,255,0.12);
border-color: rgba(147,197,253,0.35);
background: rgba(255,255,255,0.09);
}
.plan-card::after {
content: ""; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%;
background: linear-gradient(105deg,
transparent 0%, rgba(255,255,255,0.03) 35%,
rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 65%, transparent 100%);
transition: left 0.8s ease; pointer-events: none; z-index: 2;
}
.plan-card:hover::after { left: 155%; }
/* Plan content */
.plan-eyebrow {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--blue-soft); margin-bottom: 16px;
}
.plan-name {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -0.03em; line-height: 1;
font-variation-settings: "wdth" 80; color: var(--cream); margin-bottom: 4px;
}
.plan-combo {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(219,234,254,0.35); margin-bottom: 16px;
}
.plan-viandas {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px; font-weight: 600; color: var(--blue-soft); margin-bottom: 28px;
font-variation-settings: "wdth" 90;
}
.plan-price {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
font-size: clamp(36px, 3.5vw, 52px); letter-spacing: -0.04em; line-height: 1;
font-variation-settings: "wdth" 75; color: var(--cream); margin-bottom: 4px;
}
.plan-price-label {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(219,234,254,0.5); margin-bottom: 28px;
}
.plan-divider { height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 24px; }
.plan-features {
list-style: none; display: flex; flex-direction: column; gap: 12px;
margin-bottom: 28px; flex: 1;
}
.plan-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 15px; color: rgba(219,234,254,0.85); line-height: 1.35;
}
.plan-features li::before {
content: ""; flex-shrink: 0; margin-top: 4px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--blue-deep);
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px; background-position: center; background-repeat: no-repeat;
}
/* CTA button on plan card */
.plan-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 15px 20px; border-radius: 999px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
background: rgba(255,255,255,0.12); color: var(--cream);
border: 1.5px solid rgba(255,255,255,0.2);
transition: background 0.3s ease, border-color 0.3s ease,
transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
cursor: pointer;
}
.plan-cta:hover {
background: var(--blue-mid); border-color: var(--blue-mid);
box-shadow: 0 8px 24px rgba(37,99,235,0.4); transform: translateY(-1px);
}
/* Secondary CTA — "Ver viandas" */
.plan-cta-secondary {
display: flex; align-items: center; justify-content: center;
width: 100%; margin-top: 10px; padding: 10px 20px; border-radius: 999px;
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: rgba(219,234,254,0.5);
background: none; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.plan-cta-secondary:hover { color: var(--blue-soft); border-color: rgba(147,197,253,0.35); }
/* Expand toggle */
.plan-expand-toggle {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; margin-top: 16px;
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(219,234,254,0.4);
background: none; border: none; cursor: pointer; padding: 8px 0;
transition: color 0.2s ease;
}
.plan-expand-toggle:hover { color: var(--blue-soft); }
.plan-expand-toggle svg {
width: 14px; height: 14px;
transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.plan-card.expanded .plan-expand-toggle svg { transform: rotate(180deg); }
.plan-expand-detail {
overflow: hidden; max-height: 0;
transition: max-height 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
opacity: 0;
}
.plan-card.expanded .plan-expand-detail { max-height: 400px; opacity: 1; }
.plan-expand-detail-inner {
padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 13px; color: rgba(219,234,254,0.6); line-height: 1.6;
}
/* Stagger entrance */
.planes-grid.r-stagger > * { transform: translateY(50px) scale(0.96); transition-duration: 0.95s; }
.planes-grid.r-stagger.in > * { transform: translateY(0) scale(1); }
.planes-grid.r-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.planes-grid.r-stagger.in > *:nth-child(2) { transition-delay: 0.18s; }
.planes-grid.r-stagger.in > *:nth-child(3) { transition-delay: 0.31s; }
/* MENU / VIANDAS (legacy — keep selectors to avoid console errors but visually empty) */
.menu { display: none; }
.menu-head {
display: flex; align-items: end; justify-content: space-between; gap: 32px;
margin-bottom: 64px; flex-wrap: wrap;
}
.menu-head h2 { max-width: 14ch; }
.menu-head h2 .it { color: var(--terra); }
.menu-head p { max-width: 380px; font-size: 17px; }
.menu-tabs {
display: inline-flex; padding: 5px;
background: var(--cream); border-radius: 999px;
border: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
margin-bottom: 40px;
}
.menu-tabs button {
padding: 9px 16px; border-radius: 999px;
color: var(--mute); transition: color 0.25s ease, background 0.25s ease;
}
.menu-tabs button.active { background: var(--ink); color: var(--lime); }
.menu-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 980px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .menu-grid { grid-template-columns: 1fr; } }
/* meal-card legacy — hidden (section replaced by planes) */
.meal-card {
display: none;
}
/* (meal-card and modal legacy rules removed — section replaced by planes) */
.meal-img image-slot { width: 100%; height: 100%; --is-bg: var(--cream-2); --is-fg: var(--mute); }
.meal-img .meal-photo {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.meal-card:hover .meal-img .meal-photo { transform: scale(1.06); }
.meal-img .tag {
position: absolute; top: 12px; left: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
background: var(--ink); color: var(--lime);
padding: 5px 10px; border-radius: 999px;
z-index: 2;
}
.meal-card .num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--mute);
}
.meal-card .name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
font-variation-settings: "wdth" 90;
}
.meal-card .name .it {
font-family: 'Instrument Serif', serif;
font-style: italic; font-weight: 400;
font-variation-settings: normal;
}
.meal-card .desc { font-size: 14px; color: var(--mute); margin-top: -6px; line-height: 1.4; }
.meal-card .footer {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 2px;
}
.meal-card .price {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 22px; letter-spacing: -0.03em;
font-variation-settings: "wdth" 80;
}
.meal-card .add {
display: inline-flex; align-items: center; gap: 6px;
background: var(--ink); color: var(--cream);
padding: 10px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
transition: background 0.2s ease, transform 0.2s ease;
}
.meal-card .add:hover { background: var(--terra); transform: scale(1.04); }
.meal-card .add svg { width: 14px; height: 14px; }
/* ============== MEAL DETAIL MODAL ============== */
.modal-backdrop {
position: fixed; inset: 0; z-index: 500;
background: rgba(22,25,20,0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
display: grid; place-items: center;
padding: 24px;
}
.modal-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
width: min(900px, 100%); max-height: 90vh; overflow: auto;
background: var(--cream); border-radius: 32px;
border: 1px solid var(--line);
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
position: relative;
transform: scale(0.92) translateY(20px);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
scrollbar-width: none;
}
.modal::-webkit-scrollbar { display: none; }
.modal-backdrop.open .modal { transform: scale(1) translateY(0); }
.modal-close {
position: absolute; top: 18px; right: 18px; z-index: 5;
width: 44px; height: 44px; border-radius: 50%;
background: var(--ink); color: var(--cream);
display: grid; place-items: center;
transition: transform 0.25s ease, background 0.25s ease;
}
.modal-close:hover { transform: rotate(90deg); background: var(--terra); }
.modal-img {
background: var(--paper);
aspect-ratio: 1;
position: relative; overflow: hidden;
border-radius: 32px 0 0 32px;
}
.modal-img image-slot { width: 100%; height: 100%; --is-bg: var(--paper); --is-fg: var(--mute); }
.modal-img .meal-photo {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.modal-img .tag {
position: absolute; top: 18px; left: 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
background: var(--ink); color: var(--lime);
padding: 6px 12px; border-radius: 999px;
z-index: 2;
}
/* Modal navigation arrows — outside the modal, flanking it */
.modal-arrow {
position: fixed; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(239,233,218,0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(26,31,110,0.12);
color: var(--navy);
display: none; align-items: center; justify-content: center;
cursor: pointer; z-index: 1001;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
box-shadow: 0 4px 20px rgba(26,31,110,0.15);
}
.modal-arrow:hover {
background: var(--navy);
color: var(--cream);
box-shadow: 0 8px 28px rgba(26,31,110,0.28);
}
.modal-arrow-prev { left: 24px; }
.modal-arrow-next { right: 24px; }
/* Only show when modal is open (desktop only) */
@media (min-width: 881px) {
.modal-backdrop.open .modal-arrow { display: flex; }
}
/* Mobile: hide arrows completely */
@media (max-width: 880px) {
.modal-arrow { display: none !important; }
}
/* Modal hint — "Deslizar para cambiar" */
.modal-hint {
margin-top: 16px;
color: rgba(26,31,110,0.45);
font-size: 12px; font-family: 'JetBrains Mono', monospace;
display: flex; align-items: center; justify-content: center; gap: 6px;
opacity: 0; transition: opacity 0.4s ease;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.modal-body .modal-hint {
opacity: 0;
animation: hintFadeIn 0.4s ease-out 1.2s both;
}
@keyframes hintFadeIn {
to { opacity: 1; }
}
/* Content fade transition when switching meals */
.modal-body.switching {
opacity: 0;
transform: translateX(8px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.modal-body {
transition: opacity 0.15s ease, transform 0.15s ease;
opacity: 1; transform: translateX(0);
}
.modal-body { padding: 40px 36px; display: flex; flex-direction: column; }
.modal-body .num {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute);
margin-bottom: 12px;
}
.modal-body h3 {
font-size: clamp(28px, 3vw, 38px); margin-bottom: 16px;
font-variation-settings: "wdth" 85;
}
.modal-body .desc { font-size: 15px; color: var(--ink-2); margin-bottom: 22px; }
.modal-body .ingr {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--mute); padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
line-height: 1.8;
margin-bottom: 22px;
}
.modal-body .macros {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin-bottom: 22px;
}
.macro {
padding: 12px 10px; border-radius: 14px;
background: var(--paper); border: 1px solid var(--line);
text-align: center;
}
.macro .v {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 22px; letter-spacing: -0.03em;
font-variation-settings: "wdth" 80;
}
.macro .v sup { font-size: 0.5em; color: var(--terra); vertical-align: super; margin-left: 1px; }
.macro .l {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--mute); margin-top: 4px;
}
.modal-price-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-bottom: 18px;
}
/* Brief "added" feedback on modal add-to-cart button */
.modal-body .btn-primary.added {
background: #2da84c;
color: white;
cursor: default;
pointer-events: none;
}
.modal-price {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 32px; letter-spacing: -0.03em;
font-variation-settings: "wdth" 80;
}
.modal-price small {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
font-weight: 400; display: block; margin-top: 2px;
}
.qty-control {
display: flex; align-items: center; gap: 12px;
padding: 6px; background: var(--paper);
border: 1px solid var(--line); border-radius: 999px;
}
.qty-btn {
width: 32px; height: 32px; border-radius: 50%;
background: var(--ink); color: var(--cream);
display: grid; place-items: center;
font-size: 16px; font-weight: 700;
transition: background 0.2s ease;
}
.qty-btn:hover { background: var(--terra); }
.qty-val {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700; font-size: 18px; min-width: 24px; text-align: center;
font-variation-settings: "wdth" 85;
}
@media (max-width: 880px) {
.modal-backdrop {
background: rgba(22,25,20,0.75);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.modal {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr;
}
.modal-img {
aspect-ratio: 16/10;
border-radius: 32px 32px 0 0;
min-height: 240px;
width: 100%;
flex-shrink: 0;
order: 1;
}
.modal-body {
padding: 24px 22px 28px;
width: 100%;
order: 2;
}
.modal-body h3 { margin-bottom: 12px; }
.modal-body .desc { display: none; }
}
/* ============== HOW IT WORKS (steps) ============== */
.how { padding: 100px 0; }
.how-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
align-items: end; margin-bottom: 52px;
}
.how-head h2 { color: var(--ink); }
.how-head h2 .it { color: var(--blue-deep); }
.how-head h2 .lime-mark {
position: relative; display: inline-block;
color: var(--blue-deep) !important;
background: transparent !important;
}
.how-head h2 .lime-mark::before {
display: none !important;
}
@media (max-width: 820px) {
.how-head { grid-template-columns: 1fr; gap: 24px; }
}
.steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
counter-reset: step;
}
@media (max-width: 980px) { .steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.step {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 28px 24px 24px;
position: relative;
overflow: hidden;
clip-path: inset(0 100% 0 0);
opacity: 0;
filter: blur(6px);
transform: translateY(16px);
min-height: 260px;
display: flex; flex-direction: column;
transition: clip-path 0.9s cubic-bezier(.16,1,.3,1),
opacity 0.6s ease,
filter 0.7s ease,
transform 0.7s cubic-bezier(.16,1,.3,1),
background 0.4s ease,
border-color 0.4s ease;
}
.step.step-in {
clip-path: inset(0 0% 0 0);
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
.step:hover { transform: translateY(-4px); background: var(--blue-light); border-color: rgba(147,197,253,0.5); }
.step .step-num {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 110px; letter-spacing: -0.06em;
line-height: 0.85;
font-variation-settings: "wdth" 70;
color: var(--blue-deep);
margin-bottom: 24px;
}
.step:nth-child(2) .step-num { color: var(--blue); }
.step:nth-child(3) .step-num { color: var(--blue-deep); }
.step:nth-child(4) .step-num { color: var(--blue); }
.step h4 { font-size: 22px; margin-bottom: 10px; font-variation-settings: "wdth" 85; }
.step p { font-size: 14px; color: var(--mute); }
.step .step-icon {
position: absolute; top: 22px; right: 22px;
width: 32px; height: 32px;
color: var(--blue-mid);
}
/* ============== STEPS — PREMIUM DESKTOP ANIMATION (ONLY ≥980px) ============== */
@media (min-width: 980px) {
/* Override mobile clip-path; use 3D perspective entrance instead */
.step {
perspective: 1200px;
transform-style: preserve-3d;
clip-path: none;
opacity: 0;
transform: perspective(1200px) rotateX(24deg) translateY(50px) scale(0.94);
filter: blur(10px);
transition: opacity 0.9s cubic-bezier(.2,.85,.25,1),
transform 1s cubic-bezier(.16,1,.3,1),
filter 0.8s ease,
background-color 0.4s ease,
border-color 0.4s ease,
box-shadow 0.5s ease;
background-color: var(--paper);
background-image: radial-gradient(
circle 240px at var(--mx, 50%) var(--my, 50%),
rgba(37,99,235,0.10),
transparent 60%
);
will-change: transform;
}
.step.step-in {
opacity: 1;
transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
filter: blur(0);
}
/* Choreographed internal reveal of sub-elements */
.step .step-num,
.step h4,
.step p,
.step .step-icon {
opacity: 0;
transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.16,1,.3,1), color 0.3s ease;
}
.step .step-num { transform: translateX(-24px) scale(0.7) rotate(-8deg); }
.step h4 { transform: translateY(10px); }
.step p { transform: translateY(8px); }
.step .step-icon { transform: translateX(20px) rotate(-15deg); }
.step.step-in .step-num { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); transition-delay: 0.35s; }
.step.step-in .step-icon { opacity: 1; transform: translateX(0) rotate(0deg); transition-delay: 0.45s; }
.step.step-in h4 { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.step.step-in p { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }
/* Hover: 3D tilt + spotlight + glow */
.step:hover {
transform: perspective(1200px)
rotateX(var(--rx, 0deg))
rotateY(var(--ry, 0deg))
translateY(-6px)
translateZ(8px);
background-color: var(--paper);
border-color: var(--blue-soft);
box-shadow: 0 30px 80px -20px rgba(37,99,235,0.32),
0 12px 28px -10px rgba(15,23,42,0.18),
inset 0 1px 0 rgba(255,255,255,0.5);
}
.step:hover .step-num {
color: var(--blue);
transform: translateX(2px) scale(1.04);
}
.step:hover .step-icon {
color: var(--blue);
transform: rotate(8deg) scale(1.12);
}
/* Animated connector line between the 4 cards */
.steps { position: relative; }
.steps::before {
content: '';
position: absolute;
top: 84px;
left: 6%;
right: 6%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--blue-light) 12%,
var(--blue-soft) 50%,
var(--blue-light) 88%,
transparent 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.6s cubic-bezier(.16,1,.3,1) 0.6s;
z-index: 0;
pointer-events: none;
}
.steps.steps-active::before { transform: scaleX(1); }
.steps::after {
content: '';
position: absolute;
top: 78px;
left: 6%;
right: 6%;
height: 14px;
background-image: radial-gradient(circle, var(--blue) 3px, transparent 4px);
background-size: 33.33% 14px;
background-repeat: no-repeat;
background-position: 16.66% center, 50% center, 83.33% center;
opacity: 0;
transition: opacity 0.6s ease 1.6s;
z-index: 0;
pointer-events: none;
}
.steps.steps-active::after { opacity: 1; }
}
/* ============== STEPS — MOBILE TEXT REVEAL (<980px) ============== */
@media (max-width: 979px) {
/* Reset: no clip-path en la card; animación coreografiada interna */
.step {
clip-path: none;
opacity: 0;
filter: blur(4px);
transform: translateY(24px);
transition: opacity 0.8s ease,
filter 0.8s ease,
transform 0.9s cubic-bezier(.16,1,.3,1),
background 0.4s ease,
border-color 0.4s ease;
}
.step.step-in {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* Sub-elementos: cada uno aparece con su propio efecto */
.step .step-num,
.step h4,
.step p,
.step .step-icon {
opacity: 0;
transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1);
}
.step .step-num { transform: scale(0.7) translateY(8px); }
.step .step-icon { transform: scale(0.7) rotate(-12deg); }
/* h4 + p arrancan visibles a nivel bloque — el reveal lo manejan los */
.step h4, .step p { opacity: 1; transform: none; }
/* Estado revelado: stagger por elemento (num + icon mantienen su entrada) */
.step.step-in .step-num { opacity: 1; transform: scale(1) translateY(0); transition-delay: 0.2s; }
.step.step-in .step-icon { opacity: 1; transform: scale(1) rotate(0); transition-delay: 0.3s; }
}
/* ============== STEPS — TEXT REVEAL POR PALABRA (todos los breakpoints) ============== */
/* Cada es una "ventana" overflow-hidden y el span interno
sube desde abajo con blur que se enfoca. Aplica en desktop + mobile. */
.step .reveal-word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: 1.1;
}
.step .reveal-word > span {
display: inline-block;
transform: translateY(110%);
opacity: 0;
filter: blur(6px);
transition: transform 0.75s cubic-bezier(.22,.61,.36,1),
opacity 0.6s ease,
filter 0.6s ease;
}
.step.step-in .reveal-word > span {
transform: translateY(0);
opacity: 1;
filter: blur(0);
transition-delay: calc(var(--i, 0) * 55ms + 0.3s);
}
/* El párrafo arranca un pelín después que el título para encadenar */
.step.step-in p .reveal-word > span {
transition-delay: calc(var(--i, 0) * 35ms + 0.55s);
}
/* ============== STEPS — TYPEWRITER CARET + OVERRIDE ============== */
/* Cuando JS tipea los pasos, h4/p deben ser visibles desde el toque para no
competir con la fade-in del CSS coreografiado (que aplica solo a .step-in
sin .typewriter-on). El cursor parpadea al final del texto que se está tipeando. */
.step.typewriter-on h4,
.step.typewriter-on p {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.step .typing-caret {
display: inline-block;
width: 2px;
height: 1em;
margin-left: 2px;
background: currentColor;
vertical-align: text-bottom;
animation: caretBlink 0.7s steps(2) infinite;
}
@keyframes caretBlink {
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.step .typing-caret { display: none; }
}
/* ============== ABUNDANCIA (peso comparison) ============== */
.abundance {
padding: 100px 0;
background: linear-gradient(160deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 100%);
color: var(--cream);
overflow: hidden;
}
.abundance h2 { color: var(--cream); margin-bottom: 40px; max-width: 14ch; }
.abundance h2 .lime-mark {
position: relative; display: inline-block;
}
.abundance h2 .lime-mark::before {
content: ""; position: absolute; inset: 0.1em -0.08em 0 -0.08em;
background: rgba(255,255,255,0.2); z-index: -1; transform: skewX(-6deg);
}
.abundance h2 .it { color: var(--blue-soft); }
.abundance p { color: rgba(219,234,254,0.85); max-width: 520px; font-size: 18px; }
.abundance .eyebrow { color: rgba(219,234,254,0.9); }
.abundance .eyebrow::before { background: rgba(219,234,254,0.6); }
.abundance .grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
margin-top: 64px; align-items: center;
}
.abundance-vs {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: end;
}
.scale {
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.scale.them .bar { height: 180px; }
.scale.us .bar { height: 320px; }
.scale .label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(239,233,218,0.6);
}
.scale.us .label { color: var(--lime); }
.scale-vs {
font-family: 'Instrument Serif', serif;
font-style: italic; font-size: 64px; line-height: 1;
color: var(--lime); padding-bottom: 80px;
}
@media (max-width: 820px) {
.abundance .grid { grid-template-columns: 1fr; }
}
/* ============== ATHLETES ============== */
.athletes { padding: 56px 0 100px; overflow: hidden; }
.athletes-head {
display: flex; align-items: end; justify-content: space-between; gap: 32px;
margin-bottom: 64px; flex-wrap: wrap;
}
.athletes-head h2 { max-width: 14ch; }
.athletes-head h2 .it { color: var(--blue); }
.athletes-head p { max-width: 400px; font-size: 17px; }
.ath-marquee {
overflow: hidden;
margin: 0 -24px;
padding: 20px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ath-track {
display: flex;
width: max-content;
animation: ath-tick 90s linear infinite;
animation-play-state: paused;
padding: 20px 0;
}
.ath-set { display: contents; }
@media (max-width: 768px) {
.ath-track { animation-duration: 35s; }
}
.ath-card {
flex: 0 0 300px; height: 420px;
margin-right: 18px;
border-radius: 24px;
background: var(--paper);
border: 1px solid var(--line);
padding: 14px 14px 22px;
display: flex; flex-direction: column; gap: 16px;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
position: relative;
}
.ath-card:nth-child(odd) { transform: rotate(-1.5deg); }
.ath-card:nth-child(even) { transform: rotate(1.5deg); }
.ath-card:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: var(--shadow-card); border-color: var(--blue-light); }
.ath-card .name { color: var(--blue-navy); }
.ath-photo {
width: 100%; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
background: var(--cream-2); position: relative;
}
.ath-photo image-slot { width: 100%; height: 100%; --is-bg: var(--cream-2); --is-fg: var(--mute); }
.ath-photo .pill {
position: absolute;
bottom: 10px; right: 10px; top: auto; left: auto;
z-index: 3;
display: inline-flex; align-items: center;
padding: 4px 9px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 10px; font-weight: 600; letter-spacing: 0;
color: var(--blue-deep);
background: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.9);
border-radius: 999px;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow: 0 4px 12px rgba(15,23,42,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}
@media (max-width: 768px) {
.ath-photo .pill { font-size: 9.5px; padding: 3px 8px; bottom: 8px; right: 8px; }
}
.ath-card .name {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700; font-size: 22px; letter-spacing: -0.025em;
font-variation-settings: "wdth" 85;
padding: 0 6px;
}
.ath-card .name { margin-top: -4px; }
/* ============== TESTIMONIAL QUOTES ============== */
.quotes { padding: 100px 0; background: var(--paper); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.quotes-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 980px) { .quotes-grid { grid-template-columns: 1fr; } }
.quote {
padding: 36px 32px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 24px;
display: flex; flex-direction: column; gap: 18px;
position: relative;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.quote:hover {
transform: translateY(-6px);
box-shadow: 0 0 0 1.5px var(--blue-light), 0 24px 56px -12px rgba(37,99,235,0.18);
border-color: var(--blue-light);
}
.quote .stars { display: inline-flex; gap: 3px; color: var(--terra); font-size: 16px; line-height: 1; }
.quote .stars .star { position: relative; line-height: 1; display: inline-block; }
.quote .stars .star.empty { color: rgba(15,23,42,0.18); }
.quote .stars .star.half {
background: linear-gradient(90deg, var(--terra) 50%, rgba(15,23,42,0.18) 50%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.quote .body {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 19px; line-height: 1.35;
font-weight: 500; color: var(--ink);
font-variation-settings: "wdth" 95;
}
.quote .body em {
font-family: 'Instrument Serif', serif;
font-style: italic; font-weight: 400;
font-variation-settings: normal;
}
.quote .who {
display: flex; align-items: center; gap: 12px; margin-top: auto;
padding-top: 18px; border-top: 1px solid var(--line);
}
.quote .avatar {
width: 40px; height: 40px; border-radius: 50%; background: var(--cream-2);
display: grid; place-items: center;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700; font-size: 16px;
letter-spacing: -0.02em;
}
.quote .who-meta { display: flex; flex-direction: column; }
.quote .who-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.quote .who-role {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-top: 2px;
}
/* ============== FAQ ============== */
.faq { padding: 100px 0; }
.faq-head { margin-bottom: 60px; max-width: 720px; }
.faq-head h2 .it { color: var(--blue); }
.faq-list {
display: flex; flex-direction: column; gap: 0;
border-top: 1.5px solid var(--blue-light);
}
.faq-item {
border-bottom: 1px solid var(--blue-light);
padding: 26px 0;
cursor: pointer;
transition: background 0.3s ease; border-radius: 8px;
}
.faq-item:hover:not([open]) { background: rgba(37,99,235,0.04); }
.faq-item summary {
display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 600; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em;
line-height: 1.2;
font-variation-settings: "wdth" 90;
color: var(--blue-navy);
list-style: none;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] > summary { color: var(--blue); }
.faq-item .toggle {
flex-shrink: 0;
width: 36px; height: 36px; border-radius: 50%;
border: 1.5px solid var(--blue-light);
color: var(--blue-deep);
display: grid; place-items: center;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.faq-item[open] .toggle { background: var(--blue); color: white; border-color: var(--blue); transform: rotate(45deg); }
.faq-item .body {
margin-top: 16px; max-width: 70ch;
font-size: 16px; color: var(--mute); line-height: 1.5;
}
/* ============== FINAL CTA ============== */
.final {
padding: 100px 0; background: var(--lime);
border-top: 1.5px solid rgba(255,255,255,0.2); border-bottom: 1.5px solid rgba(255,255,255,0.2);
position: relative; overflow: hidden;
color: var(--cream);
}
.final-inner {
text-align: center; max-width: 900px; margin: 0 auto;
position: relative;
}
.final h2 {
font-size: clamp(56px, 10vw, 160px);
margin-bottom: 30px;
}
.final .eyebrow { color: rgba(219,234,254,0.92); }
.final .eyebrow::before { background: var(--cream); }
.final h2 { color: var(--cream); }
.final h2 .it { color: var(--blue-light); }
.final p {
font-size: 19px; color: rgba(219,234,254,0.88); max-width: 560px;
margin: 0 auto 40px; font-weight: 500;
}
.final-actions {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.final .btn-outline { color: rgba(219,234,254,0.9); border-color: rgba(219,234,254,0.4); }
.final .btn-outline:hover { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.final-meta {
margin-top: 56px; padding-top: 36px;
border-top: 1.5px solid rgba(255,255,255,0.2);
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
text-align: left;
}
.final-meta strong {
display: block;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 22px; letter-spacing: -0.03em;
font-variation-settings: "wdth" 80;
margin-bottom: 4px;
text-transform: none;
}
@media (max-width: 720px) { .final-meta { grid-template-columns: 1fr; } }
/* ============== FOOTER ============== */
footer {
background: #f0f4ff url('img/footer-fondo.png') center center / cover no-repeat;
color: var(--blue-navy);
padding: 80px 0 32px;
position: relative;
}
@media (max-width: 820px) {
footer {
background-image: none;
}
}
footer .foot-top {
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
padding-bottom: 60px;
border-bottom: 1px solid var(--blue-light);
align-items: start;
}
@media (max-width: 820px) {
footer .foot-top { grid-template-columns: 1fr; }
}
footer .brand-glyph { background: var(--blue); color: white; }
footer .brand small { color: var(--blue-mid); }
footer .foot-blurb { margin-top: 18px; max-width: 360px; color: var(--mute); font-size: 15px; }
footer h5 {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-mid);
font-weight: 500;
margin-bottom: 18px;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
footer ul a { color: var(--blue-deep); transition: color 0.2s ease; }
footer ul a:hover { color: var(--blue); }
.foot-social {
display: flex; gap: 16px; align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid var(--blue-light);
}
.foot-social a {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 999px;
color: var(--blue-deep);
border: 1px solid var(--blue-light);
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.foot-social a:hover {
color: var(--blue);
border-color: var(--blue);
background: rgba(37,99,235,0.06);
}
/* Contact section social logos with brand colors */
.contact-social {
display: flex; gap: 24px; align-items: center; margin-top: 12px;
}
.social-logo {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%;
color: var(--blue-mid);
background: transparent;
border: 2px solid var(--blue-light);
transition: all 0.3s cubic-bezier(.2,.8,.2,1);
flex-shrink: 0;
}
.social-logo svg { width: 24px; height: 24px; }
.social-logo:hover {
transform: scale(1.12) translateY(-2px);
border-color: currentColor;
}
/* WhatsApp — Verde */
.social-logo[data-brand="whatsapp"] {
color: #25D366;
}
.social-logo[data-brand="whatsapp"]:hover {
background: rgba(37, 211, 102, 0.15);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}
/* Instagram — Multicolor degradado */
.social-logo[data-brand="instagram"] {
color: #E1306C;
}
.social-logo[data-brand="instagram"]:hover {
background: linear-gradient(135deg, rgba(225, 48, 108, 0.15), rgba(224, 98, 58, 0.15), rgba(245, 205, 51, 0.15));
box-shadow: 0 8px 24px rgba(225, 48, 108, 0.25);
}
/* Facebook — Azul */
.social-logo[data-brand="facebook"] {
color: #1877F2;
}
.social-logo[data-brand="facebook"]:hover {
background: rgba(24, 119, 242, 0.15);
box-shadow: 0 8px 24px rgba(24, 119, 242, 0.25);
}
/* Gmail — Rojo */
.social-logo[data-brand="gmail"] {
color: #EA4335;
}
.social-logo[data-brand="gmail"]:hover {
background: rgba(234, 67, 53, 0.15);
box-shadow: 0 8px 24px rgba(234, 67, 53, 0.25);
}
.foot-bottom {
padding-top: 24px;
display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; color: var(--blue-mid);
}
/* ============== HUGE TYPE BLEED (between sections) ============== */
.bleed {
padding: 80px 0;
text-align: center; overflow: hidden;
}
.bleed-inner {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: clamp(80px, 18vw, 320px);
letter-spacing: -0.06em; line-height: 0.85;
font-variation-settings: "wdth" 75;
color: var(--ink);
text-transform: uppercase;
white-space: nowrap;
}
.bleed-inner .it {
font-family: 'Instrument Serif', serif;
font-style: italic; font-weight: 400;
font-variation-settings: normal;
letter-spacing: -0.04em;
color: var(--terra);
}
/* ============== CART FAB + PANEL ============== */
.cart-fab {
position: fixed; bottom: 24px; right: 24px; z-index: 250;
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 18px 14px 16px;
background: var(--ink); color: var(--cream);
border-radius: 999px;
box-shadow: 0 12px 30px -10px rgba(22,25,20,0.5);
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s ease;
}
.cart-fab:hover { background: var(--terra); transform: translateY(-2px) scale(1.02); }
.cart-fab .icon { width: 20px; height: 20px; }
.cart-fab .count {
background: var(--lime); color: var(--ink);
min-width: 22px; height: 22px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; padding: 0 7px;
font-variation-settings: "wdth" 85;
}
.cart-fab[data-count="0"] .count { display: none; }
.wa-fab {
position: fixed; bottom: 84px; right: 24px; z-index: 250;
width: 52px; height: 52px; border-radius: 50%;
background: #25D366; color: white;
display: grid; place-items: center;
box-shadow: 0 12px 30px -10px rgba(37,211,102,0.5);
transition: transform 0.25s ease;
}
.wa-fab:hover { transform: scale(1.08); }
.cart-backdrop {
position: fixed; inset: 0; z-index: 399;
background: rgba(15,23,42,0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none;
transition: opacity 0.35s ease;
}
.cart-backdrop.visible { opacity: 1; pointer-events: auto; }
body.cart-open { overflow: hidden; }
.cart-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
width: min(420px, 100vw);
background: var(--cream);
border-left: 1px solid var(--line);
box-shadow: -20px 0 60px -20px rgba(22,25,20,0.2);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.cart-panel.open { transform: translateX(0); }
.cart-header {
padding: 22px 24px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
}
.cart-header h4 { font-size: 22px; font-variation-settings: "wdth" 85; }
.cart-header .close {
width: 36px; height: 36px; border-radius: 50%;
background: var(--paper); border: 1px solid var(--line);
display: grid; place-items: center;
transition: background 0.2s ease;
}
.cart-header .close:hover { background: var(--ink); color: var(--cream); }
.cart-items {
flex: 1; overflow-y: auto; padding: 16px 20px;
display: flex; flex-direction: column; gap: 10px;
scrollbar-width: thin;
}
.cart-empty {
margin: auto; text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mute);
padding: 60px 24px;
}
.cart-empty svg { width: 48px; height: 48px; color: var(--faint); margin: 0 auto 18px; opacity: 0.5; }
.cart-item {
display: flex; gap: 12px; align-items: center;
padding: 12px; border-radius: 16px;
background: var(--paper); border: 1px solid var(--line);
}
.cart-item-img {
width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
background: var(--cream-2); flex-shrink: 0;
}
.cart-item-img image-slot { width: 100%; height: 100%; --is-bg: var(--cream-2); --is-fg: var(--mute); }
.cart-item-img .meal-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-main { flex: 1; min-width: 0; }
.cart-item-name {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 600; font-size: 14px; letter-spacing: -0.01em; line-height: 1.2;
font-variation-settings: "wdth" 90;
}
.cart-item-price {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.04em; color: var(--mute); margin-top: 4px;
}
.cart-item-price strong { color: var(--ink); font-weight: 500; }
.cart-item-qty {
display: flex; align-items: center; gap: 6px;
background: var(--cream); border-radius: 999px; padding: 3px; border: 1px solid var(--line);
}
.cart-item-qty .q {
width: 24px; height: 24px; border-radius: 50%;
background: var(--ink); color: var(--cream);
display: grid; place-items: center; font-size: 12px; font-weight: 700;
transition: background 0.2s ease;
}
.cart-item-qty .q:hover { background: var(--terra); }
.cart-item-qty .qv {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700; font-size: 14px; min-width: 18px; text-align: center;
}
.cart-footer {
padding: 18px 20px 22px; border-top: 1px solid var(--line);
display: flex; flex-direction: column; gap: 12px;
}
.cart-name {
padding: 14px 16px; border-radius: 12px;
background: var(--paper); border: 1px solid var(--line);
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 14px; outline: none;
transition: border-color 0.2s ease;
}
.cart-name:focus { border-color: var(--ink); }
.cart-name::placeholder { color: var(--faint); }
.cart-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 4px 4px;
}
.cart-total-label {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
}
.cart-total-val {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: 26px; letter-spacing: -0.03em;
font-variation-settings: "wdth" 80;
}
.cart-buy {
width: 100%; justify-content: center;
}
.cart-buy:disabled {
opacity: 0.4; cursor: not-allowed; transform: none !important;
}
/* ============== WORD REVEAL ============== */
.word-reveal { display: inline-block; }
.word-reveal .word {
display: inline-block;
vertical-align: bottom;
overflow: hidden;
line-height: 0.92;
padding-right: 0.12em;
padding-bottom: 0.06em;
}
.word-reveal .word span {
display: inline-block;
transform: translateY(110%);
transition: transform 0.9s cubic-bezier(.2,.85,.25,1);
}
.word-reveal.in .word span { transform: translateY(0); }
.word-reveal.in .word:nth-child(1) span { transition-delay: 0.05s; }
.word-reveal.in .word:nth-child(2) span { transition-delay: 0.13s; }
.word-reveal.in .word:nth-child(3) span { transition-delay: 0.21s; }
.word-reveal.in .word:nth-child(4) span { transition-delay: 0.29s; }
.word-reveal.in .word:nth-child(5) span { transition-delay: 0.37s; }
.word-reveal.in .word:nth-child(6) span { transition-delay: 0.45s; }
/* ============== BAR GROW ANIMATION ============== */
.scale .bar {
position: relative;
width: 100%; max-width: 200px;
border-radius: 18px;
overflow: hidden;
background: transparent;
border: none;
}
.scale .bar .bar-fill {
position: absolute; left: 0; right: 0; bottom: 0;
height: 100%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 18px;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 1.4s cubic-bezier(.18,.86,.28,1);
}
.scale.us .bar .bar-fill {
background: var(--lime);
border-color: var(--lime);
}
.scale .bar.grow .bar-fill { transform: scaleY(1); }
.scale .bar-num {
position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
z-index: 2;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-size: clamp(36px, 4.5vw, 64px);
letter-spacing: -0.04em; line-height: 1;
font-variation-settings: "wdth" 75;
color: var(--cream);
opacity: 0; transform: translateY(8px);
transition: opacity 0.6s ease 0.7s, transform 0.6s cubic-bezier(.2,.8,.2,1) 0.7s;
}
.scale.us .bar-num { color: var(--ink); }
.scale .bar.grow .bar-num { opacity: 1; transform: translateY(0); }
/* Pillars: enhanced progressive entry */
.pillars-grid.r-stagger > * { transition-duration: 0.95s; }
.pillars-grid.r-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.pillars-grid.r-stagger.in > *:nth-child(2) { transition-delay: 0.18s; }
.pillars-grid.r-stagger.in > *:nth-child(3) { transition-delay: 0.31s; }
.pillars-grid.r-stagger.in > *:nth-child(4) { transition-delay: 0.44s; }
.pillars-grid.r-stagger.in > *:nth-child(5) { transition-delay: 0.57s; }
/* Steps: enhanced stagger */
.steps.r-stagger > * { transition-duration: 0.9s; transform: translateY(40px) scale(0.98); }
.steps.r-stagger.in > * { transform: translateY(0) scale(1); }
.steps.r-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.steps.r-stagger.in > *:nth-child(2) { transition-delay: 0.18s; }
.steps.r-stagger.in > *:nth-child(3) { transition-delay: 0.31s; }
.steps.r-stagger.in > *:nth-child(4) { transition-delay: 0.44s; }
/* Menu cards: smooth progressive entry with subtle scale */
.menu-grid.r-stagger > * { transform: translateY(40px) scale(0.96); transition-duration: 0.85s; }
.menu-grid.r-stagger.in > * { transform: translateY(0) scale(1); }
.menu-grid.r-stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.menu-grid.r-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.menu-grid.r-stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
.menu-grid.r-stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
.menu-grid.r-stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
.menu-grid.r-stagger.in > *:nth-child(6) { transition-delay: 0.44s; }
/* Menu section h2 — bigger reveal */
.menu-head h2, .pillars-head h2, .how-head h2, .abundance h2, .athletes-head h2 {
text-wrap: balance;
}
.r { opacity: 0; transform: translateY(40px); filter: blur(4px); transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1), filter 0.9s ease; }
.r.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.r-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1); }
.r-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.r-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.r-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.r-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.r-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
.r-stagger.in > *:nth-child(6) { transition-delay: 0.4s; }
.r-stagger.in > *:nth-child(7) { transition-delay: 0.48s; }
.r-stagger.in > *:nth-child(8) { transition-delay: 0.56s; }
.r-stagger.in > * { opacity: 1; transform: translateY(0); }
/* hero entry */
.hero-eyebrow-row, .hero h1, .hero-sub, .hero-actions, .hero-stats, .hero-right {
opacity: 0; transform: translateY(24px);
animation: heroIn 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-eyebrow-row { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.2s; }
.hero-sub { animation-delay: 0.4s; }
.hero-actions { animation-delay: 0.55s; }
.hero-stats { animation-delay: 0.7s; }
.hero-right { animation-delay: 0.3s; transform: translateY(40px) scale(0.95); }
@keyframes heroIn { to { opacity: 1; transform: translateY(0) scale(1); } }
/* image-slot non-interactive (clicks pass through to card) */
.meal-card image-slot { pointer-events: none; }
/* ════════════════════════════════════════════════
PREMIUM EFFECTS — Fase 4 + 5
════════════════════════════════════════════════ */
/* ── Scroll progress bar (top of viewport) ── */
.scroll-progress {
position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
width: 100%;
background: linear-gradient(90deg, var(--blue-deep), var(--blue-soft));
transform-origin: left; transform: scaleX(0);
pointer-events: none;
will-change: transform;
}
/* ── Grain / noise texture overlay ── */
body::after {
content: "";
position: fixed; inset: 0; z-index: 9997;
pointer-events: none;
opacity: 0.022;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px;
mix-blend-mode: overlay;
}
/* ── Hero: animated gradient background ── */
.hero {
background: linear-gradient(-45deg, #efe9da, #f0f6ff, #efe9da, #eaf2ff);
background-size: 400% 400%;
animation: heroBgShift 14s ease infinite;
}
/* ── Hero plate parallax wrapper ── */
.hero-plate-parallax {
position: absolute; inset: 0;
display: grid; place-items: center;
transform: translateX(var(--px, 0px)) translateY(var(--py, 0px));
transition: transform 0.15s ease-out;
will-change: transform;
}
/* ── Split-char reveal on H1 ── */
.sc {
display: inline-block;
opacity: 0; transform: translateY(0.25em);
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.sc-in .sc { opacity: 1; transform: translateY(0); }
/* ── Footer social icon glow + lift ── */
footer .social-logo svg {
transition: filter 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
footer .social-logo:hover svg {
filter: drop-shadow(0 0 8px currentColor);
transform: translateY(-2px) scale(1.1);
}
/* ── Footer logo watermark ── */
footer { position: relative; overflow: hidden; }
.footer-inner { position: relative; z-index: 1; }
.footer-watermark {
position: absolute; bottom: 0; left: 0; right: 0;
display: flex; justify-content: center; align-items: flex-end;
pointer-events: none; z-index: 0; overflow: hidden;
height: 100%;
}
.footer-watermark img {
width: 130%; max-width: 1500px;
opacity: 0.07;
filter: blur(2px);
object-fit: contain;
transform: translateY(15%);
}
.footer-watermark-veil {
position: absolute; inset: 0;
background: linear-gradient(to bottom,
rgba(240,244,255,0.92) 0%,
rgba(240,244,255,0.55) 40%,
rgba(240,244,255,0.10) 100%);
pointer-events: none; z-index: 0;
}
@media (max-width: 768px) {
.footer-watermark img {
width: 200%; max-width: none;
opacity: 0.09;
filter: blur(1.5px);
transform: translateY(20%);
}
}
/* ══════════ VIANDA MODAL ══════════ */
.vianda-modal-wrap {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.35s ease;
}
.vianda-modal-wrap.open {
opacity: 1; pointer-events: all;
}
.vianda-modal-backdrop {
position: absolute; inset: 0;
background: rgba(15,23,42,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.vianda-modal {
position: relative; z-index: 1;
width: min(780px, 94vw); max-height: 88vh;
background: rgba(15,23,42,0.93);
border: 1px solid rgba(147,197,253,0.2);
border-radius: 28px;
padding: 48px 40px;
overflow-y: auto; overflow-x: hidden;
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
transform: translateY(30px) scale(0.97);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(147,197,253,0.1);
}
.vianda-modal-wrap.open .vianda-modal {
transform: translateY(0) scale(1);
}
.vianda-modal-close {
position: absolute; top: 20px; right: 20px;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
color: var(--cream); cursor: pointer; display: grid; place-items: center;
transition: background 0.2s, transform 0.2s;
}
.vianda-modal-close:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }
.vianda-modal-close svg { width: 18px; height: 18px; }
.vianda-modal-head { margin-bottom: 32px; }
.vianda-modal-head .eyebrow { color: rgba(219,234,254,0.55); }
.vianda-modal-head h3 {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
font-size: clamp(24px, 3vw, 36px); color: var(--cream);
letter-spacing: -0.03em; margin: 12px 0 8px;
}
.vianda-modal-head p { color: rgba(219,234,254,0.65); font-size: 15px; line-height: 1.5; }
.vianda-modal-tabs {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.vianda-tab {
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; padding: 8px 16px; border-radius: 999px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
color: rgba(219,234,254,0.6); cursor: pointer;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.vianda-tab.active, .vianda-tab:hover {
background: var(--blue); border-color: var(--blue); color: #fff;
}
.vianda-modal-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.vianda-card {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px; padding: 0; overflow: hidden;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
}
.vianda-card:hover {
transform: translateY(-4px);
border-color: rgba(147,197,253,0.3);
box-shadow: 0 12px 30px rgba(37,99,235,0.2);
}
.vianda-card-img {
width: 100%; aspect-ratio: 4/3; overflow: hidden;
border-radius: 14px 14px 0 0;
}
.vianda-card-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.vianda-card:hover .vianda-card-img img { transform: scale(1.06); }
.vianda-card-body { padding: 14px 16px 16px; }
.vianda-card-name {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 15px; color: var(--cream); margin-bottom: 5px;
}
.vianda-card-ingr {
font-size: 12px; color: rgba(219,234,254,0.5); line-height: 1.4;
}
.vianda-card-desc {
font-size: 13px; color: rgba(219,234,254,0.6); line-height: 1.4; margin-bottom: 12px;
}
.vianda-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.vianda-tag {
font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em;
padding: 3px 8px; border-radius: 999px;
background: rgba(37,99,235,0.2); color: var(--blue-soft);
border: 1px solid rgba(37,99,235,0.3);
}
@media (max-width: 600px) {
.vianda-modal { padding: 32px 24px; }
.vianda-modal-grid { grid-template-columns: 1fr; }
}
/* ── "Cuidarte" section: blur-to-focus h2 reveal ── */
.antes h2.r {
transition: opacity 0.9s cubic-bezier(.2,.8,.2,1),
filter 0.9s ease,
transform 0.9s cubic-bezier(.2,.8,.2,1);
filter: blur(6px);
opacity: 0;
transform: translateY(30px);
}
.antes h2.r.in {
opacity: 1;
filter: blur(0px);
transform: translateY(0);
}
/* ── Hero stats: glow al completar conteo ── */
.hero-stat.counted .num {
text-shadow: 0 0 20px rgba(37,99,235,0.5);
transition: text-shadow 0.6s ease;
}
/* ── Hero stat num color ── */
.hero-stat .num { color: var(--blue); }
/* ── Pillars/athletes h2 .it overrides ── */
.pillars-head h2 .it { color: var(--blue) !important; }
.athletes-head h2 .it { color: var(--blue) !important; }
.hero-eyebrow-row .pill strong { color: var(--blue) !important; }
/* ══════════ WIZARD — PASO 1 (form) ══════════ */
.wizard-form {
display: grid; gap: 22px;
max-width: 640px; margin: 56px auto 0;
}
.wizard-field { display: block; }
.wizard-fieldset { border: 0; padding: 0; margin: 0; }
.wizard-fieldset legend {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--blue-soft); margin-bottom: 12px;
}
.wizard-form label {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--blue-soft); margin-bottom: 10px;
}
.wizard-form .wizard-optional {
text-transform: none; letter-spacing: 0;
color: rgba(219,234,254,0.4); font-size: 11px;
}
.wizard-form input[type="text"],
.wizard-form textarea {
width: 100%;
padding: 14px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(147,197,253,0.22);
border-radius: 14px;
color: var(--cream);
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.wizard-form input[type="text"]::placeholder,
.wizard-form textarea::placeholder { color: rgba(219,234,254,0.35); }
.wizard-form input[type="text"]:focus,
.wizard-form textarea:focus {
outline: none;
border-color: var(--blue-mid);
background: rgba(37,99,235,0.10);
box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}
.wizard-form textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
/* objetivo radios → pills */
.wizard-objetivo { display: flex; flex-wrap: wrap; gap: 10px; }
.wizard-objetivo input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.wizard-objetivo label {
position: relative;
display: inline-flex; align-items: center;
padding: 11px 20px; border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(147,197,253,0.30);
color: var(--cream); cursor: pointer; margin: 0;
font-family: 'Bricolage Grotesque', sans-serif;
text-transform: none; letter-spacing: 0; font-size: 14px;
overflow: visible;
transition: background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
box-shadow 0.35s ease,
padding 0.3s cubic-bezier(.2,.8,.2,1),
transform 0.3s cubic-bezier(.2,.8,.2,1);
will-change: transform, box-shadow;
}
.wizard-objetivo label:hover {
border-color: var(--blue-mid);
background: linear-gradient(135deg,
rgba(147,197,253,0.14),
rgba(37,99,235,0.10));
box-shadow: 0 0 0 1px rgba(147,197,253,0.6),
0 0 0 6px rgba(147,197,253,0.10),
0 10px 24px -10px rgba(37,99,235,0.55);
transform: translateY(-2px);
}
.wizard-objetivo label:active { transform: translateY(0); transition-duration: 0.12s; }
.wizard-objetivo input[type="radio"]:focus-visible + label {
outline: 2px solid rgba(147,197,253,0.85); outline-offset: 4px;
}
.wizard-objetivo input[type="radio"]:checked + label {
background: linear-gradient(135deg, var(--blue), var(--blue-mid));
border-color: var(--blue-soft);
color: #fff;
box-shadow: 0 0 0 4px rgba(37,99,235,0.18),
0 12px 28px -10px rgba(37,99,235,0.6);
padding-left: 36px;
transform: translateY(-1px);
}
.wizard-objetivo input[type="radio"]:checked + label::before {
content: "";
position: absolute; left: 13px; top: 50%;
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
transform: translateY(-50%);
animation: pillCheckIn 0.4s cubic-bezier(.2,.8,.2,1);
}
.wizard-objetivo input[type="radio"]:checked + label::after {
content: ""; position: absolute; inset: -2px;
border-radius: 999px; border: 2px solid var(--blue-soft);
opacity: 0;
animation: pillPulse 0.55s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
@keyframes pillCheckIn {
from { opacity: 0; transform: translateY(-50%) scale(0.55); }
to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes pillPulse {
0% { opacity: 0.85; transform: scale(1); }
100% { opacity: 0; transform: scale(1.18); }
}
.wizard-submit-row {
display: flex; justify-content: center; margin-top: 12px;
}
@media (max-width: 560px) {
.wizard-form { margin-top: 32px; }
.wizard-objetivo { flex-direction: column; }
.wizard-objetivo label { width: 100%; justify-content: center; }
}
/* ══════════ PASO 1 — form (solo index.html) ══════════ */
.planes-form-layout {
display: grid;
grid-template-columns: minmax(0, 620px);
gap: 36px; align-items: start; justify-content: center;
margin-top: 56px;
}
.planes-form-layout .wizard-form { margin: 0; max-width: none; }
@media (max-width: 900px) {
.planes-form-layout { grid-template-columns: 1fr; gap: 26px; }
.planes-form-layout .wizard-form { margin: 0 auto; max-width: 640px; }
}
/* ══════════ WIZARD — PASO 2 (modal) ══════════ */
/* Reutiliza .vianda-modal-wrap, .vianda-modal-backdrop, .vianda-modal, .vianda-modal-close, .vianda-modal-head ya definidos */
.wizard-modal { width: min(1080px, 96vw); padding: 48px 36px; }
@media (max-width: 600px) { .wizard-modal { padding: 32px 20px; } }
.wizard-plans-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 18px; align-items: stretch;
}
@media (max-width: 880px) {
.wizard-plans-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
/* Cartel verde — "más viandas = mejor valor por unidad" (Paso 2) */
.wizard-savings-banner {
display: flex; align-items: center; gap: 10px; width: fit-content;
margin: 0 auto 22px; padding: 13px 26px; border-radius: 999px;
font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 600;
color: #14250a; text-align: center;
background: linear-gradient(135deg, #bef264 0%, #a3e635 100%);
box-shadow: 0 0 24px rgba(163,230,53,0.50), 0 8px 22px rgba(132,204,22,0.30);
animation: wizardSavingsGlow 3.2s ease-in-out infinite;
}
.wizard-savings-banner strong { font-weight: 800; }
.wizard-savings-icon { width: 20px; height: 20px; flex-shrink: 0; }
@keyframes wizardSavingsGlow {
0%, 100% { box-shadow: 0 0 20px rgba(163,230,53,0.40), 0 8px 22px rgba(132,204,22,0.28); }
50% { box-shadow: 0 0 30px rgba(163,230,53,0.65), 0 10px 28px rgba(132,204,22,0.42); }
}
@media (max-width: 600px) {
.wizard-savings-banner { font-size: 13.5px; padding: 12px 20px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .wizard-savings-banner { animation: none; } }
/* Card override dentro del modal — más compacta */
.wizard-plan-card { padding: 28px 24px; }
.wizard-plan-card .plan-features { flex: 0 0 auto; margin-bottom: 10px; }
.wizard-plan-card .plan-features li { font-size: 14px; }
.wizard-plan-card .plan-cta { margin-top: auto; }
.wizard-plan-card .plan-price { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 4px; }
.wizard-plan-card .plan-viandas { margin-bottom: 20px; }
.wizard-plan-card .plan-divider { margin-bottom: 18px; }
/* Selector de horario dentro de la card */
.plan-combo-selector {
display: grid; gap: 8px; margin: 0 0 16px;
}
.plan-combo-opt {
position: relative;
display: flex; justify-content: space-between; align-items: center;
padding: 11px 14px; border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(147,197,253,0.2);
cursor: pointer;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 14px; color: var(--cream);
text-align: left;
transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.plan-combo-opt:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(147,197,253,0.4);
}
.plan-combo-opt.selected {
background: rgba(37,99,235,0.20);
border-color: var(--blue-mid);
box-shadow: inset 0 0 0 1px rgba(147,197,253,0.25);
}
.plan-combo-opt:focus-visible {
outline: 2px solid var(--blue-soft); outline-offset: 2px;
}
.plan-combo-opt[disabled],
.plan-combo-opt.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.plan-combo-opt.is-disabled:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(147,197,253,0.2);
}
.plan-combo-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px;
background: var(--blue); color: #fff; font-weight: 700;
box-shadow: 0 4px 12px rgba(37,99,235,0.45);
}
.plan-qty-row {
display: flex; flex-direction: column; align-items: stretch; gap: 8px;
margin: 0 0 18px;
}
.plan-qty-row > label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(219,234,254,0.55);
}
.plan-qty-stepper {
display: inline-flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(147,197,253,0.22);
border-radius: 999px;
align-self: flex-start;
}
.plan-qty-stepper .qty-btn {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(37,99,235,0.18);
border: 1px solid rgba(147,197,253,0.35);
color: var(--cream);
font: 700 18px/1 'Bricolage Grotesque', sans-serif;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
user-select: none;
}
.plan-qty-stepper .qty-btn:hover:not([disabled]) {
background: var(--blue-mid); border-color: var(--blue-mid);
box-shadow: 0 4px 14px rgba(37,99,235,0.45); transform: translateY(-1px);
}
.plan-qty-stepper .qty-btn:active:not([disabled]) { transform: translateY(0); }
.plan-qty-stepper .qty-btn[disabled],
.plan-qty-stepper .qty-btn.is-disabled {
opacity: 0.35; cursor: not-allowed; box-shadow: none; transform: none;
}
.plan-qty-stepper .qty-value {
min-width: 56px; text-align: center;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 22px; font-weight: 700; color: var(--cream);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.plan-qty-hint {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(147,197,253,0.55);
}
/* Destacado de ahorro — planes Estándar y Premium */
.plan-savings {
display: flex; flex-direction: column; gap: 2px;
margin: 0 0 22px; padding: 14px 18px; border-radius: 16px;
background: linear-gradient(135deg, rgba(37,99,235,0.30) 0%, rgba(29,78,216,0.16) 100%);
border: 1px solid rgba(147,197,253,0.35);
box-shadow: 0 0 0 1px rgba(147,197,253,0.08), 0 8px 24px rgba(37,99,235,0.22);
animation: planSavingsGlow 3.2s ease-in-out infinite;
}
@keyframes planSavingsGlow {
0%, 100% { box-shadow: 0 0 0 1px rgba(147,197,253,0.08), 0 8px 24px rgba(37,99,235,0.20); }
50% { box-shadow: 0 0 0 1px rgba(147,197,253,0.22), 0 12px 34px rgba(37,99,235,0.42); }
}
.plan-savings-label {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-soft);
}
.plan-savings-amount {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.05; color: #fff;
}
.plan-savings-equiv {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
font-size: 14px; color: var(--blue-soft);
}
@media (prefers-reduced-motion: reduce) { .plan-savings { animation: none; } }
/* ============== HOW TITLE — 3 líneas como una sola frase ============== */
.how-title { line-height: 1.05; letter-spacing: -0.02em; }
.how-title .how-final { white-space: nowrap; display: inline-block; }
/* ============== SHOWCASE — Galería editorial ============== */
.showcase {
padding: 100px 0;
background: var(--paper);
position: relative; overflow: hidden;
}
.showcase-head { max-width: 720px; margin-bottom: 56px; }
.showcase-head h2 {
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.05; letter-spacing: -0.02em;
}
.showcase-head h2 em.serif-it { color: var(--blue); }
.gallery-grid {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 16px;
perspective: 1400px;
perspective-origin: 50% 100%;
}
.gallery-thumb {
position: relative; aspect-ratio: 4/5;
border-radius: 20px; overflow: hidden;
border: 0; padding: 0; cursor: pointer;
background: var(--cream-2);
box-shadow: 0 16px 40px -18px rgba(15,23,42,0.30);
/* --- PREMIUM REVEAL INITIAL STATE --- */
opacity: 0;
transform: translateY(48px) scale(0.88) rotateX(8deg);
filter: blur(14px) brightness(0.7);
transform-origin: 50% 80%;
transition:
opacity 1.1s cubic-bezier(.16,1,.3,1),
transform 1.2s cubic-bezier(.16,1,.3,1),
filter 1.1s cubic-bezier(.16,1,.3,1),
box-shadow 0.3s ease;
transition-delay: calc(var(--i, 0) * 130ms);
}
.gallery-grid.in .gallery-thumb {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg);
filter: blur(0) brightness(1);
}
/* sweep editorial al revelarse */
.gallery-thumb::after {
content: ""; position: absolute; inset: 0; z-index: 3;
background: linear-gradient(110deg,
transparent 30%,
rgba(255,255,255,0.22) 50%,
transparent 70%);
transform: translateX(-100%);
pointer-events: none;
opacity: 0;
}
.gallery-grid.in .gallery-thumb::after {
animation: gallerySweep 1.4s cubic-bezier(.22,.61,.36,1) forwards;
animation-delay: calc(var(--i, 0) * 130ms + 0.45s);
}
@keyframes gallerySweep {
0% { transform: translateX(-100%); opacity: 0; }
40% { opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
.gallery-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
/* Hover: foco — siblings se opacan, el activo hace Ken Burns */
.gallery-grid:hover .gallery-thumb { filter: brightness(0.55) saturate(0.85); }
.gallery-grid .gallery-thumb:hover {
filter: brightness(1.02) saturate(1.05);
box-shadow: 0 30px 70px -20px rgba(15,23,42,0.5);
}
.gallery-grid .gallery-thumb:hover img { transform: scale(1.08); }
/* Thumb "ver más" */
.gallery-thumb-more::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,0.82) 100%);
pointer-events: none;
}
.gallery-more-overlay {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 18px 14px;
color: #fff;
pointer-events: none;
}
.gallery-more-count {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
.gallery-more-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
opacity: 0.85;
}
.gallery-more-overlay svg {
margin-top: 4px; opacity: 0.9;
transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
}
.gallery-thumb-more:hover .gallery-more-overlay svg { transform: translateX(4px); }
@media (max-width: 900px) {
.showcase { padding: 90px 0; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gallery-thumb-more { grid-column: 1 / -1; aspect-ratio: 16/9; }
.gallery-more-count { font-size: 26px; }
.gallery-more-label { font-size: 10px; }
}
/* ============== LIGHTBOX (galería completa) ============== */
.gallery-lightbox {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.35s ease;
}
.gallery-lightbox.open { opacity: 1; pointer-events: auto; }
.gallery-backdrop {
position: absolute; inset: 0;
background: rgba(8, 13, 28, 0.92);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.gallery-stage {
position: relative; z-index: 1;
max-width: min(90vw, 1100px);
max-height: 86vh;
display: flex; align-items: center; justify-content: center;
}
.gallery-current {
max-width: 100%; max-height: 86vh;
border-radius: 16px;
box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6);
opacity: 0; transform: scale(0.96);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,.61,.36,1);
}
.gallery-current.show { opacity: 1; transform: scale(1); }
.gallery-close, .gallery-nav {
position: absolute; z-index: 2;
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255,255,255,0.10); color: #fff;
border: 1px solid rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.gallery-close { top: 24px; right: 24px; }
.gallery-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.gallery-next { right: 24px; top: 50%; transform: translateY(-50%); }
.gallery-close:hover, .gallery-nav:hover {
background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.3);
}
.gallery-prev:hover { transform: translateY(-50%) translateX(-3px); }
.gallery-next:hover { transform: translateY(-50%) translateX(3px); }
.gallery-counter {
position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.18em;
color: rgba(255,255,255,0.75);
padding: 8px 14px; background: rgba(255,255,255,0.06);
border-radius: 999px; border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
}
@media (max-width: 720px) {
.gallery-close { top: 14px; right: 14px; width: 44px; height: 44px; }
.gallery-prev, .gallery-next { width: 44px; height: 44px; }
.gallery-prev { left: 10px; } .gallery-next { right: 10px; }
.gallery-counter { bottom: 16px; }
}
/* ============== VIDEO INTRO — 2 bloques horizontales (equipo + influencers) ============== */
.video-intro { padding: 80px 0; background: var(--cream); }
.video-intro-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
}
.video-intro-block {
border-radius: 28px;
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 32px;
position: relative;
}
.video-intro-block-light {
background: #ffffff;
box-shadow: 0 24px 60px -24px rgba(22,25,20,0.12),
0 4px 12px -4px rgba(22,25,20,0.06);
border: 1px solid rgba(15,23,42,0.06);
}
.video-intro-block-dark {
background:
radial-gradient(circle at 100% 0%, rgba(59,130,246,0.35) 0%, transparent 55%),
linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-navy) 100%);
color: var(--cream);
box-shadow: 0 30px 80px -28px rgba(15,23,42,0.5),
inset 0 1px 0 rgba(255,255,255,0.08);
overflow: hidden;
}
.video-intro-block-dark::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 0% 100%, rgba(147,197,253,0.18), transparent 60%);
pointer-events: none;
}
.video-intro-block-dark .video-intro-head h2 { color: var(--cream); }
.video-intro-block-dark .video-intro-head h2 .serif-it.it { color: #0b0d12; }
.video-intro-block-light .video-intro-head h2 .serif-it.it { color: var(--blue); }
.video-intro-block-dark .video-intro-head p { color: rgba(219,234,254,0.78); }
.video-intro-block-dark .video-card-label { color: var(--blue-soft); }
/* Heading alineado a la izquierda — editorial */
.video-intro-head {
text-align: left;
max-width: none;
margin: 0;
position: relative;
z-index: 1;
}
.video-intro-head h2 {
font-size: clamp(22px, 2.1vw, 30px);
margin-top: 14px;
line-height: 1.15;
}
.video-intro-head p {
color: var(--mute);
margin-top: 12px;
font-size: 15px;
}
/* Grid interno: 2 videos lado a lado en cada bloque, misma altura */
.video-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: stretch;
position: relative;
z-index: 1;
}
.video-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Variante con un solo video: centrado y algo más grande que el layout 2-col */
.video-intro-grid-solo { grid-template-columns: 1fr; justify-items: center; }
.video-intro-grid-solo .video-card { max-width: 62%; width: 100%; }
.video-card-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--blue-mid);
text-align: left;
}
.video-player {
position: relative;
width: 100%;
aspect-ratio: 9/16;
border-radius: 18px;
overflow: hidden;
background: #0b1220;
box-shadow: 0 24px 50px -24px rgba(15,23,42,0.45),
inset 0 0 0 1px rgba(255,255,255,0.05);
cursor: pointer;
}
.video-player video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.video-player-loop { cursor: default; }
.video-play-btn {
position: absolute; inset: 0; margin: auto;
width: 52px; height: 52px; border-radius: 50%; border: 0;
background: rgba(255,255,255,0.92); color: var(--blue-deep);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 28px rgba(0,0,0,0.32);
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s;
}
.video-play-btn::after {
content: ""; position: absolute; inset: -5px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
z-index: -1;
animation: videoPlayPulse 2.4s ease-out infinite;
}
.video-play-btn:hover { transform: scale(1.08); background: #fff; }
.video-play-btn svg { margin-left: 3px; width: 22px; height: 22px; }
.video-player.playing .video-play-btn { display: none; }
@keyframes videoPlayPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 980px) {
.video-intro-2col { grid-template-columns: 1fr; gap: 20px; }
.video-intro-block { padding: 32px 22px; gap: 24px; }
}
@media (max-width: 560px) {
.video-intro { padding: 60px 0; }
.video-intro-grid { gap: 10px; }
.video-intro-grid-solo .video-card { max-width: 100%; }
.video-intro-block { padding: 24px 16px; }
.video-play-btn { width: 42px; height: 42px; }
.video-play-btn svg { width: 18px; height: 18px; }
}
/* ============== WIZARD STEP 2 — VALIDATION STATES ============== */
.plan-combo-hint {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--terra);
min-height: 16px;
margin-top: 10px;
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.25s ease, transform 0.25s ease;
text-align: center;
}
.plan-combo-hint.show {
opacity: 1;
transform: translateY(0);
}
.plan-cta[data-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
filter: saturate(0.6);
}
.plan-cta[data-disabled="true"]:hover {
background: var(--blue);
border-color: var(--blue);
transform: none;
}
.plan-card-error .plan-combo-selector {
box-shadow: 0 0 0 1px rgba(217,119,87,0.45);
border-radius: 12px;
}
@keyframes sfShakeX {
10%, 90% { transform: translateX(-2px); }
20%, 80% { transform: translateX(3px); }
30%, 50%, 70% { transform: translateX(-5px); }
40%, 60% { transform: translateX(5px); }
}
.plan-card.shake { animation: sfShakeX 0.45s cubic-bezier(.36,.07,.19,.97); }