:root { --primary: #f63f72; --primary-soft: #ffe6ee; --on-primary: #ffffff; --ink: #25282b; --ink-2: #1a1c1e; --canvas: #ffffff; --canvas-soft: #f4f4f3; --body: #6e7174; --mute: #bebebe; --on-dark: #ffffff; --line: #e6e6e4; --line-dark: rgba(255,255,255,0.18); --pill-lg: 60px; --pill-md: 32px; --card: 6px; --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 24px; --sp-3xl: 32px; --sp-4xl: 48px; --sp-5xl: 64px; --sp-6xl: 96px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ─── type ─── */ .t-display-hero { font-weight: 900; font-size: clamp(48px, 7.5vw, 104px); line-height: 0.94; letter-spacing: -2px; } .t-display-xxl { font-weight: 900; font-size: clamp(44px, 6vw, 88px); line-height: 0.96; letter-spacing: -1.5px; } .t-display-xl { font-weight: 900; font-size: clamp(36px, 4.5vw, 68px); line-height: 1; letter-spacing: -1px; } /* Display font swaps — applied via [data-display-font] on */ body[data-display-font="bricolage"] .t-display-hero, body[data-display-font="bricolage"] .t-display-xxl, body[data-display-font="bricolage"] .t-display-xl, body[data-display-font="bricolage"] .t-display-lg, body[data-display-font="bricolage"] .t-display-md, body[data-display-font="bricolage"] .portrait-title, body[data-display-font="bricolage"] .stat-num, body[data-display-font="bricolage"] .ticker-item { font-family: "Bricolage Grotesque", "Inter", sans-serif; font-stretch: 75%; font-weight: 800; letter-spacing: -1.5px; } body[data-display-font="bricolage"] .t-display-hero { letter-spacing: -2px; line-height: 0.92; } body[data-display-font="anton"] .t-display-hero, body[data-display-font="anton"] .t-display-xxl, body[data-display-font="anton"] .t-display-xl { font-family: "Anton", "Inter", sans-serif; font-weight: 400; letter-spacing: -0.5px; text-transform: uppercase; } body[data-display-font="archivo"] .t-display-hero, body[data-display-font="archivo"] .t-display-xxl, body[data-display-font="archivo"] .t-display-xl { font-family: "Archivo Black", "Inter", sans-serif; font-weight: 400; letter-spacing: -1.5px; } .t-display-lg { font-weight: 800; font-size: clamp(36px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.8px; } .t-display-md { font-weight: 800; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.5px; } .t-display-md-light { font-weight: 300; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -0.3px; } .t-display-sm { font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.4px; } .t-display-xs { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.2px; } .t-upper-heavy { text-transform: uppercase; font-weight: 900; letter-spacing: -1px; } .t-eyebrow { font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; } .t-body-lg { font-weight: 400; font-size: 21px; line-height: 1.5; } .t-body-md { font-weight: 400; font-size: 17px; line-height: 1.6; } .t-body-sm { font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--body); } .t-caption { font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--body); } .t-caption-upper { font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .t-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } /* ─── buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-weight: 500; font-size: 17px; line-height: 1; border-radius: var(--pill-lg); border: 1px solid transparent; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn-sm { padding: 11px 20px; font-size: 14px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .btn-primary:hover { background: color-mix(in oklab, var(--primary) 88%, black); } .btn-outline-red { background: var(--canvas); color: var(--primary); border-color: var(--primary); } .btn-outline-red:hover { background: var(--primary-soft); } .btn-outline-dark { background: var(--canvas); color: var(--ink); border-color: var(--ink); } .btn-outline-dark:hover { background: var(--ink); color: var(--on-dark); } .btn-outline-on-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark); } .btn-outline-on-dark:hover { background: var(--on-dark); color: var(--ink); } .btn-icon-circular { width: 80px; height: 80px; padding: 0; justify-content: center; background: var(--canvas); color: var(--ink); border: 1px solid var(--canvas); border-radius: 9999px; } .btn-icon-circular:hover { transform: scale(1.04); } /* ─── layout ─── */ .band { padding: var(--sp-5xl) var(--sp-3xl); } .band-tight { padding: var(--sp-4xl) var(--sp-3xl); } .band-ink { background: var(--ink); color: var(--on-dark); } .band-ink-2 { background: var(--ink-2); color: var(--on-dark); } .band-light{ background: var(--canvas); color: var(--ink); } .band-primary { background: var(--primary); color: var(--on-primary); } .band-soft { background: var(--canvas-soft); color: var(--ink); } .container { max-width: 1320px; margin: 0 auto; width: 100%; } .container-narrow { max-width: 980px; margin: 0 auto; width: 100%; } /* ─── nav ─── */ .nav { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--on-dark); padding: 14px var(--sp-3xl); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2xl); border-bottom: 1px solid rgba(255,255,255,0.08); } .nav-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.3px; font-size: 18px; flex-wrap: nowrap; white-space: nowrap; } .nav-logo-img { height: 22px; width: auto; display: block; } .nav-logo .nav-suborg { opacity: 0.6; font-size: 14px; font-weight: 500; margin-left: 2px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-link { font-size: 14px; font-weight: 500; opacity: 0.85; } .nav-link:hover { opacity: 1; } .nav-right { display: flex; align-items: center; gap: 14px; } @media (max-width: 1180px) { .nav-cohorte { display: none; } } @media (max-width: 1100px) { .nav-links { display: none; } } @media (max-width: 720px) { .nav-logo .nav-suborg { display: none; } .nav { padding: 12px 20px; } } /* ─── hero ─── */ .hero { position: relative; background: var(--ink); color: var(--on-dark); padding: var(--sp-5xl) var(--sp-3xl); overflow: hidden; } .hero-eyebrow-row, .hero-top, .hero-band { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; width: 100%; } .hero-eyebrow-row { padding-left: 4px; margin-bottom: 18px; } .hero-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-4xl); align-items: start; } @media (max-width: 1024px) { .hero-top { grid-template-columns: 1fr; gap: var(--sp-3xl); } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; max-width: 100%; } .hero-eyebrow .dot { width: 8px; height: 8px; background: var(--primary); border-radius: 2px; flex: 0 0 8px; } .hero-title { margin: 0; max-width: 14ch; } .hero-title .accent { color: var(--primary); } .hero-band { margin-top: var(--sp-4xl); padding-top: var(--sp-4xl); border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 26px; } .hero-subhead { margin: 0; color: rgba(255,255,255,0.92); font-weight: 300; max-width: none; line-height: 1.15; } .hero-copy { display: flex; flex-direction: column; gap: 14px; max-width: none; } .hero-copy p { margin: 0; color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.65; max-width: 88ch; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 6px; } .hero-divider { width: 100%; max-width: 1320px; height: 1px; background: var(--line-dark); margin: 8px 0; } .hero-meta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin: 0; } .hero-meta-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill-md); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); font-size: 13px; } .hero-bottom-note { color: rgba(255,255,255,0.55); font-style: italic; margin: 0; max-width: 80ch; text-align: left; } .hero-vsl { aspect-ratio: 16/9; border-radius: var(--card); background: linear-gradient(160deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55)), repeating-linear-gradient(135deg, #3a3d40 0 16px, #2b2e31 16px 32px); position: relative; overflow: hidden; } .hero-vsl-label { position: absolute; left: 18px; bottom: 18px; color: rgba(255,255,255,0.7); letter-spacing: 0.18em; } .hero-vsl .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .hero-vsl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .hero-vsl-col { display: flex; flex-direction: column; gap: 14px; } .hero-vsl-col > .btn { width: 100%; } /* ─── eyebrow w/ rule ─── */ .section-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; } .section-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--primary); } .band-light .section-eyebrow { color: var(--ink); } .band-ink .section-eyebrow, .band-ink-2 .section-eyebrow { color: var(--on-dark); } .band-ink .section-eyebrow::before, .band-ink-2 .section-eyebrow::before { background: var(--primary); } /* ─── badge chip ─── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--canvas-soft); color: var(--ink); border-radius: var(--pill-md); font-weight: 600; font-size: 12px; } .chip-dark { background: rgba(255,255,255,0.1); color: var(--on-dark); border: 1px solid rgba(255,255,255,0.18); } .chip-primary { background: var(--primary); color: white; } /* ─── bandeau (social proof) ─── */ .bandeau { background: var(--canvas-soft); color: var(--ink); padding: var(--sp-4xl) var(--sp-3xl); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .bandeau-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 36px; } @media (max-width: 800px) { .bandeau-head { grid-template-columns: 1fr; } } .bandeau-stats { display: flex; gap: 36px; flex-wrap: wrap; } .bandeau-stat-num { font-weight: 900; font-size: clamp(32px, 4vw, 54px); letter-spacing: -1px; line-height: 1; } .bandeau-stat-label { color: var(--body); font-size: 13px; margin-top: 6px; max-width: 22ch; } /* ─── testimonial cards (short) ─── */ .quote-card { background: var(--canvas); border-radius: var(--card); padding: 22px 22px 18px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } /* ─── carousel of short testimonials ─── */ .quote-carousel { position: relative; overflow: hidden; padding: 6px 0; margin-left: calc(-1 * var(--sp-3xl)); margin-right: calc(-1 * var(--sp-3xl)); -webkit-mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%); } .quote-track { display: flex; gap: 18px; width: max-content; padding: 4px var(--sp-3xl); animation: quote-marquee 80s linear infinite; animation-direction: var(--carousel-dir, normal); } .quote-carousel:hover .quote-track, .quote-carousel:focus-within .quote-track { animation-play-state: paused; } .quote-track .quote-card { flex: 0 0 360px; height: 100%; min-height: 220px; } @media (max-width: 600px) { .quote-track .quote-card { flex-basis: 280px; } } @keyframes quote-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .quote-track { animation: none; } .quote-carousel { overflow-x: auto; } } .quote-mark { width: 28px; height: 28px; border-radius: var(--card); background: var(--primary); color: white; display: grid; place-items: center; font-weight: 900; font-size: 18px; line-height: 1; } .quote-text { font-size: 16px; line-height: 1.5; font-weight: 500; font-style: italic; } .quote-attribution { display: flex; align-items: center; gap: 12px; } .quote-attr-text { display: flex; flex-direction: column; gap: 2px; } .quote-name { font-weight: 700; font-size: 13px; } .quote-role { font-size: 12px; color: var(--body); } /* ─── avatar placeholders ─── */ .avatar { border-radius: 9999px; display: grid; place-items: center; font-weight: 800; letter-spacing: -0.5px; flex: 0 0 auto; overflow: hidden; background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 24%, white), color-mix(in oklab, var(--primary) 8%, white) 70%); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 20%, white); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.avatar-sm { width: 40px; height: 40px; font-size: 13px; } .avatar.avatar-md { width: 56px; height: 56px; font-size: 17px; } .avatar.avatar-lg { width: 72px; height: 72px; font-size: 22px; } .avatar.on-dark { background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 65%, black), color-mix(in oklab, var(--primary) 35%, black) 70%); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); } /* ─── two portraits ─── */ .portraits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); margin-top: var(--sp-4xl); } @media (max-width: 900px) { .portraits { grid-template-columns: 1fr; } } .portrait-card { background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: var(--card); padding: var(--sp-3xl); display: flex; flex-direction: column; gap: 16px; } .portrait-card.alt { background: var(--ink); color: var(--on-dark); border-color: var(--ink); } .portrait-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--pill-md); background: var(--canvas-soft); color: var(--ink); align-self: flex-start; } .portrait-card.alt .portrait-tag { background: rgba(255,255,255,0.1); color: var(--on-dark); } .portrait-title { font-weight: 800; font-size: 26px; letter-spacing: -0.4px; line-height: 1.15; } .portrait-card p { font-size: 16px; line-height: 1.6; margin: 0; } .portrait-card.alt p { color: rgba(255,255,255,0.78); } .portrait-card.standard p { color: var(--body); } /* ─── three capas (reframe) ─── */ .capas-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: var(--sp-4xl); } @media (max-width: 1024px) { .capas-grid { grid-template-columns: 1fr; } } .capa { background: var(--ink); color: var(--on-dark); border-radius: var(--card); padding: var(--sp-3xl); display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } .capa-num { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; } .capa-num-bg { width: 36px; height: 36px; border-radius: var(--card); background: var(--primary); color: white; display: grid; place-items: center; font-weight: 900; font-size: 14px; } .capa-title { font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.3px; } .capa p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0; } .capa-tag { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); } /* ─── mechanism / martes ─── */ .martes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5xl); margin-top: var(--sp-3xl); align-items: start; } @media (max-width: 1024px) { .martes { grid-template-columns: 1fr; gap: var(--sp-3xl); } } .martes-timeline { display: flex; flex-direction: column; gap: 18px; } .martes-step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); } .martes-step:first-child { border-top: none; padding-top: 0; } .martes-time { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 14px; color: var(--primary); padding-top: 2px; } .martes-step-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; } .martes-step-body { color: var(--body); font-size: 15px; line-height: 1.55; } .martes-screen { background: var(--ink); color: var(--on-dark); border-radius: var(--card); overflow: hidden; box-shadow: 0 1px 0 var(--line); } .martes-screen-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2); } .martes-screen-dot { width: 10px; height: 10px; border-radius: 9999px; } .martes-screen-body { padding: 22px; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.65; } .martes-screen-body .ok { color: #6fcf97; } .martes-screen-body .agent { color: var(--primary); } .martes-screen-body .dim { color: rgba(255,255,255,0.45); } /* ─── pricing CTA banner (recurring) ─── */ .price-banner { background: var(--ink); color: var(--on-dark); border-radius: var(--card); padding: var(--sp-3xl); display: grid; grid-template-columns: 1.4fr auto; gap: var(--sp-3xl); align-items: center; } @media (max-width: 800px) { .price-banner { grid-template-columns: 1fr; } } .price-banner-title { font-weight: 800; font-size: 22px; letter-spacing: -0.3px; line-height: 1.25; } .price-banner-meta { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 8px; } .price-banner-price { font-weight: 900; font-size: 30px; margin-top: 12px; letter-spacing: -0.5px; } .price-banner-price .alt { color: rgba(255,255,255,0.6); font-weight: 500; font-size: 16px; margin-left: 8px; } /* ─── year overview ─── */ .year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: var(--sp-3xl); } @media (max-width: 900px) { .year-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .year-grid { grid-template-columns: 1fr; } } .year-cell { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--card); padding: 22px; display: flex; flex-direction: column; gap: 12px; } .year-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .year-cell-tag { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 11px; color: var(--primary); letter-spacing: 0.1em; } .year-cell-meses { color: var(--body); font-size: 12px; } .year-cell-title { font-weight: 800; font-size: 20px; letter-spacing: -0.3px; line-height: 1.2; } .year-cell ul { padding: 0; margin: 6px 0 0; list-style: none; } .year-cell li { font-size: 14px; line-height: 1.5; color: var(--body); padding: 4px 0; border-top: 1px dashed var(--line); } .year-cell li:first-child { border-top: none; } .year-callout { background: var(--ink); color: var(--on-dark); border-radius: var(--card); padding: var(--sp-3xl); margin-top: var(--sp-3xl); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; } @media (max-width: 700px) { .year-callout { grid-template-columns: 1fr; } } .year-callout-num { font-weight: 900; font-size: 64px; color: var(--primary); letter-spacing: -2px; line-height: 1; } /* ─── trimester detail ─── */ .trim-detail { border-top: 1px solid var(--line); padding: var(--sp-3xl) 0; display: grid; grid-template-columns: 0.4fr 1fr; gap: var(--sp-3xl); align-items: start; } @media (max-width: 900px) { .trim-detail { grid-template-columns: 1fr; gap: 18px; } } .trim-detail-tag { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 12px; color: var(--primary); letter-spacing: 0.1em; } .trim-detail-title { font-weight: 800; font-size: 30px; letter-spacing: -0.5px; line-height: 1.15; margin: 12px 0 0; max-width: 22ch; } .trim-detail-hook { font-weight: 700; font-size: 19px; line-height: 1.4; max-width: 60ch; } .trim-detail p { color: var(--body); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 70ch; } .trim-detail-outputs { margin-top: 22px; } .trim-detail-outputs-label { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } .trim-detail-outputs ul { padding: 0; margin: 0; list-style: none; } .trim-detail-outputs li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 15px; } .trim-detail-outputs li:first-child { border-top: none; } .trim-detail-outputs li::before { content: ""; width: 12px; height: 12px; background: var(--primary); border-radius: 3px; margin-top: 5px; flex: 0 0 12px; } /* ─── how it operates ─── */ .ops-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: var(--sp-3xl); } @media (max-width: 1024px) { .ops-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .ops-grid { grid-template-columns: 1fr; } } .ops-card { background: var(--canvas-soft); border-radius: var(--card); padding: 22px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); } .ops-card-title { font-weight: 800; font-size: 16px; } .ops-card-body { color: var(--body); font-size: 14px; line-height: 1.55; } .ops-card-when { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--primary); letter-spacing: 0.1em; } /* ─── founder ─── */ .founder { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: var(--sp-4xl); margin-top: var(--sp-3xl); align-items: start; } @media (max-width: 900px) { .founder { grid-template-columns: 1fr; gap: var(--sp-3xl); } } .founder-photo { aspect-ratio: 4/5; border-radius: var(--card); overflow: hidden; position: relative; background: #2b2e31; max-width: 360px; } .founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .founder-photo-label { position: absolute; left: 18px; bottom: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.18em; } .founder-credit { margin-top: 14px; max-width: 360px; } .founder-credit-name { font-weight: 800; font-size: 17px; letter-spacing: -0.2px; } .founder-credit-role { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; } .team-divider { height: 1px; background: rgba(255,255,255,0.12); margin: var(--sp-5xl) 0 var(--sp-4xl); } .team-header { margin-bottom: var(--sp-3xl); } .team-grid-large { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); } @media (max-width: 900px) { .team-grid-large { grid-template-columns: 1fr; gap: var(--sp-4xl); } } .team-member { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-2xl); align-items: start; } @media (max-width: 1024px) { .team-member { grid-template-columns: 1fr; } } .team-member image-slot, .team-member-photo { border-radius: var(--card); overflow: hidden; width: 100%; max-width: 220px; background: transparent; } .team-member-photo img { width: 100%; height: auto; object-fit: contain; display: block; } .team-member-body { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; } .team-member-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--primary); text-transform: uppercase; } .team-member-name { margin: 0; font-weight: 800; font-size: 24px; letter-spacing: -0.4px; line-height: 1.15; } .team-member-bio { margin: 8px 0 0; color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.6; } /* ─── long testimonials ─── */ .testimonials-long { display: grid; gap: 22px; margin-top: var(--sp-3xl); } .testimonial-long { background: var(--canvas-soft); border: 1px solid var(--line); border-radius: var(--card); padding: var(--sp-3xl); display: grid; grid-template-columns: 0.32fr 1fr; gap: 36px; align-items: start; } .testimonial-long.flip { grid-template-columns: 1fr 0.32fr; } .testimonial-long.flip .t-meta { order: 2; } @media (max-width: 900px) { .testimonial-long, .testimonial-long.flip { grid-template-columns: 1fr; gap: 22px; } .testimonial-long.flip .t-meta { order: 0; } } .t-meta { display: flex; flex-direction: column; gap: 8px; } .t-meta-name { font-weight: 900; font-size: 18px; letter-spacing: -0.3px; } .t-meta-role { font-size: 13px; color: var(--body); line-height: 1.5; } .t-meta-num { font-weight: 800; color: var(--primary); font-size: 22px; margin-top: 6px; letter-spacing: -0.5px; } .t-body { font-size: 17px; line-height: 1.6; font-style: italic; } .t-body p { margin: 0 0 14px; } .t-body p:last-child { margin-bottom: 0; } /* ─── pricing table ─── */ .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--sp-3xl); } @media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } } .price-card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--card); padding: var(--sp-3xl); display: flex; flex-direction: column; gap: 14px; } .price-card.featured { background: var(--ink); color: var(--on-dark); border-color: var(--ink); } .price-tag { display: inline-flex; align-self: flex-start; padding: 5px 12px; border-radius: var(--pill-md); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .price-card .price-tag { background: var(--canvas-soft); color: var(--body); } .price-card.featured .price-tag { background: var(--primary); color: white; } .price-amount { font-weight: 900; font-size: 56px; letter-spacing: -2px; line-height: 1; } .price-amount .unit { font-weight: 600; font-size: 22px; } .price-detail { font-size: 14px; color: var(--body); } .price-card.featured .price-detail { color: rgba(255,255,255,0.7); } .price-card ul { list-style: none; padding: 0; margin: 6px 0 0; } .price-card li { display: flex; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; } .price-card.featured li { border-top-color: rgba(255,255,255,0.12); } .price-card li:first-child { border-top: none; } .price-card li::before { content: ""; width: 8px; height: 8px; background: var(--primary); border-radius: 2px; margin-top: 7px; flex: 0 0 8px; } .price-foot { margin-top: var(--sp-3xl); padding: var(--sp-2xl); background: var(--canvas-soft); border: 1px solid var(--line); border-radius: var(--card); font-size: 14px; color: var(--body); line-height: 1.6; } /* ─── filters (good fit / not) ─── */ .filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--sp-3xl); } @media (max-width: 800px) { .filter-grid { grid-template-columns: 1fr; } } .filter-card { border-radius: var(--card); padding: var(--sp-3xl); display: flex; flex-direction: column; gap: 14px; } .filter-card.yes { background: var(--ink); color: var(--on-dark); } .filter-card.no { background: var(--canvas-soft); color: var(--ink); border: 1px solid var(--line); } .filter-card h3 { margin: 0; font-weight: 900; font-size: 24px; letter-spacing: -0.4px; } .filter-card ul { list-style: none; padding: 0; margin: 6px 0 0; } .filter-card li { display: flex; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; } .filter-card.yes li { border-top-color: rgba(255,255,255,0.12); } .filter-card li:first-child { border-top: none; } .filter-mark { width: 22px; height: 22px; border-radius: 9999px; flex: 0 0 22px; display: grid; place-items: center; margin-top: 1px; } .filter-card.yes .filter-mark { background: var(--primary); color: white; } .filter-card.no .filter-mark { background: white; color: var(--ink); border: 1px solid var(--ink); } /* ─── FAQ ─── */ .faq-list { margin-top: var(--sp-3xl); border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.2px; } .faq-q:hover { color: var(--primary); } .faq-icon { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 32px; transition: transform .25s ease, background .15s ease, color .15s ease; } .faq-item[data-open="true"] .faq-icon { background: var(--primary); color: white; border-color: var(--primary); transform: rotate(45deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease, padding .25s ease; color: var(--body); font-size: 16px; line-height: 1.65; } .faq-item[data-open="true"] .faq-a { max-height: 800px; padding: 0 0 26px; } /* ─── bifurcation ─── */ .bifur-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--sp-3xl); } @media (max-width: 900px) { .bifur-grid { grid-template-columns: 1fr; } } .bifur-card { border-radius: var(--card); padding: var(--sp-4xl) var(--sp-3xl); display: flex; flex-direction: column; gap: 16px; min-height: 320px; } .bifur-card.dim { background: var(--canvas-soft); color: var(--ink); border: 1px solid var(--line); } .bifur-card.live { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; } .bifur-card.live::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 6px; background: var(--primary); opacity: 0.15; transform: rotate(8deg); } .bifur-card h3 { margin: 0; font-weight: 900; font-size: 28px; letter-spacing: -0.5px; max-width: 18ch; } .bifur-card p { font-size: 16px; line-height: 1.6; margin: 0; } .bifur-card.dim p { color: var(--body); } .bifur-card.live p { color: rgba(255,255,255,0.8); } .bifur-card .btn { margin-top: auto; align-self: flex-start; } /* ─── personal close ─── */ .close-block { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--sp-5xl); margin-top: var(--sp-3xl); align-items: start; } @media (max-width: 900px) { .close-block { grid-template-columns: 1fr; gap: var(--sp-3xl); } } .close-photo { aspect-ratio: 1/1; border-radius: var(--card); overflow: hidden; position: relative; background: #2b2e31; } .close-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .close-photo-label { position: absolute; left: 18px; bottom: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.18em; } .close-text p { font-size: 18px; line-height: 1.65; margin: 0 0 14px; } .close-text p:last-child { margin-bottom: 0; } .close-sig { font-weight: 800; font-size: 22px; margin-top: 26px; letter-spacing: -0.3px; } .close-sig-org { color: var(--body); font-weight: 500; font-size: 14px; margin-top: 2px; } /* ─── footer ─── */ .footer { background: var(--ink-2); color: var(--on-dark); padding: var(--sp-5xl) var(--sp-3xl) var(--sp-2xl); } .footer-inner { max-width: 1320px; margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5xl); padding-bottom: var(--sp-4xl); border-bottom: 1px solid rgba(255,255,255,0.14); align-items: start; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-4xl); } } .footer-brand-col { display: flex; flex-direction: column; gap: 22px; max-width: 46ch; } .footer-brand-row { display: flex; align-items: center; gap: 14px; } .footer-brand-name-large { font-weight: 800; font-size: 22px; letter-spacing: -0.3px; color: white; } .footer-tag { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.6; margin: 0; max-width: 44ch; } .footer-cohorte-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--pill-md); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.85); align-self: flex-start; } .footer-cohorte-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent); } .footer-nav-col { display: flex; flex-direction: column; gap: 18px; } .footer-col-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); font-weight: 700; } .footer-nav-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; } @media (max-width: 480px) { .footer-nav-list { grid-template-columns: 1fr; } } .footer-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 15px; color: rgba(255,255,255,0.85); transition: color .15s ease, transform .15s ease; } .footer-link-arrow { opacity: 0; transform: translateX(-6px); color: var(--primary); transition: opacity .15s ease, transform .15s ease; } .footer-link:hover { color: var(--primary); } .footer-link:hover .footer-link-arrow { opacity: 1; transform: translateX(0); } .footer-bottom { padding-top: var(--sp-2xl); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,0.45); font-size: 12px; } .footer-copy { white-space: nowrap; } .footer-legal a { color: rgba(255,255,255,0.55); transition: color .15s ease; } .footer-legal a:hover { color: var(--primary); } .footer-legal-sep { color: rgba(255,255,255,0.2); } /* ─── helpers ─── */ .underline-accent { background-image: linear-gradient(transparent 80%, var(--primary) 80%); background-size: 100% 100%; background-repeat: no-repeat; padding: 0 4px; } .accent { color: var(--primary); } .text-mute { color: var(--body); } .divider-rule { height: 1px; background: var(--line); } /* ─── responsive fixes móvil (accesibilidad pantallas pequeñas) ─── */ .footer-grid--3col { grid-template-columns: 1.4fr 1fr 1fr; } @media (max-width: 860px) { .footer-grid--3col { grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); } } @media (max-width: 560px) { .footer-grid--3col { grid-template-columns: 1fr; gap: var(--sp-3xl); } } @media (max-width: 600px) { .btn { white-space: normal; line-height: 1.25; text-align: center; } .btn .ico, .btn svg { flex: 0 0 auto; } } .price-banner > div { min-width: 0; } @media (max-width: 800px) { .price-banner .btn { width: 100%; justify-content: center; } .price-banner > div:last-child { width: 100%; } } html, body { overflow-x: hidden; max-width: 100%; }