/* PrintReal — landing page 60-30-10: neutral surfaces carry the page, blue is the brand/structure color, orange is reserved for the two primary CTAs and nothing else. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #2563EB; --primary-dark: #1D4ED8; --primary-soft: #EFF6FF; --cta: #F97316; --cta-dark: #EA580C; --bg: #F8FAFC; --surface: #FFFFFF; --text: #0F172A; --muted: #64748B; --border: #E2E8F0; --success: #10B981; --radius: 12px; --radius-lg: 16px; --container: 1120px; --header-h: 56px; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header-inner { height: 100%; display: flex; align-items: center; gap: 14px; } .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--primary); } .logo-icon { display: flex; } .logo-icon svg { width: 20px; height: 20px; } .logo-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; } .tagline { font-size: 14px; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--border); } /* ── Header nav ──────────────────────────────────────────────────────────── */ .site-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; } .nav-link { font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.15s; } .nav-link:hover, .nav-link:focus-visible, .nav-link.active { color: var(--primary); } .nav-link.active { font-weight: 600; } .nav-link:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; } /* Hamburger — mobile only (see the media query at the bottom) */ .nav-toggle { display: none; margin-left: auto; padding: 6px; background: none; border: none; border-radius: 8px; color: var(--muted); cursor: pointer; } .nav-toggle:hover { color: var(--primary); background: var(--primary-soft); } .nav-toggle-icon { display: flex; } .nav-toggle-icon svg { width: 22px; height: 22px; } /* The sticky header would otherwise cover the top of whatever an anchor scrolls to. */ #como-funciona, #caracteristicas, #faq { scroll-margin-top: calc(var(--header-h) + 16px); } /* ── Hero ────────────────────────────────────────────────────────────────── */ /* Deliberately short on the bottom: the top of the "Tres pasos" cards should be peeking above the fold, so the page reads as having more below. */ .hero { padding: 64px 0 48px; background: radial-gradient(60% 55% at 50% 0%, #EFF6FF 0%, rgba(239, 246, 255, 0) 70%), var(--bg); } /* Fade-in on load: JS flips .is-ready on after the DOM settles. */ .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; } body.is-ready .hero-inner { opacity: 1; transform: none; } .hero h1 { font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; /* In ch units the Spanish headline (the longer of the two) breaks into four lines; a fixed cap keeps both languages at two. */ max-width: 840px; text-wrap: balance; } .hero-sub { margin-top: 20px; font-size: 20px; color: var(--muted); max-width: 60ch; text-wrap: pretty; } /* ── Drop zone (primary action) ──────────────────────────────────────────── */ .drop-zone { width: 100%; max-width: 640px; margin-top: 40px; padding: 40px 24px 32px; background: var(--surface); border: 2px dashed #BFDBFE; border-radius: var(--radius-lg); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05); cursor: pointer; user-select: none; transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s, background 0.18s; } .drop-zone:hover, .drop-zone:focus-visible { transform: scale(1.02); border-color: var(--primary); box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12); outline: none; } .drop-zone.dragover { transform: scale(1.02); border-color: var(--primary); border-style: solid; background: var(--primary-soft); box-shadow: 0 12px 32px rgba(37, 99, 235, 0.16); } .dz-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } .dz-icon svg { width: 26px; height: 26px; } .dz-label { margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .dz-sub { margin-top: 4px; font-size: 14px; color: var(--muted); } /* The one orange element above the fold. */ .btn-cta { margin-top: 22px; padding: 13px 30px; background: var(--cta); color: #fff; border: none; border-radius: 10px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(249, 115, 22, 0.28); transition: background 0.18s, box-shadow 0.18s, transform 0.18s; } .btn-cta:hover { background: var(--cta-dark); box-shadow: 0 10px 24px rgba(249, 115, 22, 0.36); transform: translateY(-1px); } .btn-cta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3); } .dz-loading { margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--primary); } .drop-zone.busy { cursor: progress; } .drop-zone.busy .btn-cta { opacity: 0.55; pointer-events: none; } /* ── Trust badges ────────────────────────────────────────────────────────── */ .badges { list-style: none; margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; } .badges li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .badge-icon { display: flex; color: var(--success); } .badge-icon svg { width: 16px; height: 16px; } /* ── Section headings ────────────────────────────────────────────────────── */ /* One continuous canvas from the hero down to the footer: every section sits on --bg and the only white surfaces are the cards, the drop zone and the FAQ rows. The old white "steps" band drew a hard seam under the hero for no reason — the card shadows already separate the content. The single deliberate break is the blue CTA. */ .steps, .features, .faq { padding: 80px 0; } .steps, .features, .faq { background: var(--bg); } .steps h2, .features h2, .faq h2 { font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 48px; text-wrap: balance; } /* ── How it works ────────────────────────────────────────────────────────── */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step-card { padding: 28px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .step-card:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); border-color: #CBD5E1; transform: translateY(-2px); } .step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; } .step-icon { display: flex; color: var(--primary); opacity: 0.5; } .step-icon svg { width: 26px; height: 26px; } .step-card h3, .feature h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; } .step-card p, .feature p { font-size: 15px; color: var(--muted); text-wrap: pretty; } /* ── Features ────────────────────────────────────────────────────────────── */ .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feature { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .feature:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); border-color: #CBD5E1; transform: translateY(-2px); } .feature-icon { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); } .feature-icon svg { width: 22px; height: 22px; } .feature h3 { align-self: center; margin-bottom: 4px; } /* ── Final CTA ───────────────────────────────────────────────────────────── */ .cta { padding: 80px 0; background: var(--primary); color: #fff; } .cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .cta h2 { font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } .cta p { margin-top: 10px; font-size: 18px; color: #DBEAFE; } /* Solid orange on the blue band — the strongest contrast pair on the page, and the same colour as the hero's CTA so the two primary actions read as one. */ .btn-cta-final { margin-top: 28px; padding: 15px 36px; background: var(--cta); color: #fff; border: none; border-radius: 10px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 24px rgba(249, 115, 22, 0.4); transition: transform 0.18s, box-shadow 0.18s, background 0.18s; } .btn-cta-final:hover { background: #EA6C0A; transform: translateY(-2px); box-shadow: 0 10px 34px rgba(249, 115, 22, 0.55); } .btn-cta-final:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6); } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .faq-item.open { border-color: #CBD5E1; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; background: none; border: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; transition: background 0.15s; } .faq-q:hover { background: var(--bg); } .faq-q:focus-visible { outline: none; background: var(--primary-soft); } /* A "+" built from two bars, so opening rotates the vertical one away and leaves a "−" — no icon swap, no font dependency. */ .faq-icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; color: var(--muted); transition: color 0.2s; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .faq-icon::before { left: 2px; right: 2px; top: 9px; height: 2px; } .faq-icon::after { top: 2px; bottom: 2px; left: 9px; width: 2px; } .faq-item.open .faq-icon { color: var(--primary); } .faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; } /* max-height animates (auto doesn't); JS sets the exact scrollHeight on open so the value is never a guess that clips long answers or lags short ones. */ .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-a p { padding: 0 20px 20px; font-size: 15px; color: var(--muted); text-wrap: pretty; } /* Pulse when the CTA sends the user back up to the drop zone. */ @keyframes dz-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); } 100% { box-shadow: 0 0 0 18px rgba(37, 99, 235, 0); } } .drop-zone.pulse { border-color: var(--primary); animation: dz-pulse 900ms ease-out 2; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { padding: 32px 0 40px; background: var(--bg); border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 14px; } .footer-link { margin-top: 4px; font-size: 13px; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Nav collapses into the hamburger: the links become a panel that drops out of the header. The header is sticky (= positioned), so the panel anchors to it. */ .nav-toggle { display: flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px 10px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .site-nav.open { display: flex; } .site-nav .nav-link { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--border); } .site-nav .nav-link:last-child { border-bottom: none; } .hero { padding: 40px 0 40px; } .hero h1 { font-size: 32px; max-width: none; } .hero-sub { font-size: 17px; margin-top: 16px; } .drop-zone { max-width: none; margin-top: 32px; padding: 32px 20px 28px; } /* A tap on a touch screen fires :hover; scaling under the finger reads as a glitch, so the lift is desktop-only. */ .drop-zone:hover { transform: none; } .btn-cta { width: 100%; } .badges { flex-direction: column; align-items: center; gap: 10px; } .steps, .features, .faq { padding: 56px 0; } .steps h2, .features h2, .faq h2 { font-size: 27px; margin-bottom: 32px; } .steps-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .faq-q { padding: 16px; font-size: 15px; } .faq-a p { padding: 0 16px 16px; } .cta { padding: 56px 0; } .cta h2 { font-size: 27px; } .cta p { font-size: 16px; } .btn-cta-final { width: 100%; } .tagline { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-inner { opacity: 1; transform: none; } }