/* ============================================================ * Meefi landing — RESPONSIVE LAYER * Loaded AFTER styles.css so these rules win on equal specificity. * * Philosophy: desktop (≥1025px) is left exactly as designed. * Everything here only reflows the layout at narrower widths — * no new colors, type families, shadows or spacing values are * invented; we reuse the existing tokens and component looks. * * Breakpoints * · Tablet ≤1024px → 3/4-col grids become 2-col, tighter padding * · Mobile nav ≤760px → hamburger sheet OR fixed CTA bar * · Phone ≤640px → single column, full-width buttons * · Small phone ≤400px → final tightening * ============================================================ */ /* Guard against any accidental horizontal overflow at every width. */ html, body { max-width: 100%; } img, svg, video, canvas { max-width: 100%; } /* ============================================================ * MOBILE NAVIGATION * Two interchangeable variants, chosen by the "Nav móvil" tweak * (data-mobile-nav on ): "menu" (hamburger) | "fixed" (bar) * ============================================================ */ /* Hamburger button — hidden on desktop, revealed at the mobile bp */ .nav-burger { display: none; } .nav-burger-box { position: relative; display: block; width: 22px; height: 16px; } .nav-burger-line { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-out-soft), opacity 180ms ease, top 300ms var(--ease-out-soft); } .nav-burger-line:nth-child(1) { top: 0; } .nav-burger-line:nth-child(2) { top: 7px; } .nav-burger-line:nth-child(3) { top: 14px; } .nav-burger.is-open .nav-burger-line:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-burger.is-open .nav-burger-line:nth-child(2) { opacity: 0; } .nav-burger.is-open .nav-burger-line:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* Sheet + scrim are inert (hidden) unless we're at the mobile bp */ .mobile-scrim, .mobile-sheet, .mobile-cta-bar { display: none; } @media (min-width: 761px) { .mobile-scrim, .mobile-sheet, .mobile-cta-bar, .nav-burger { display: none !important; } } @media (max-width: 760px) { /* ---- Hamburger variant: header = logo + burger ---- */ [data-mobile-nav="menu"] .header-cta, [data-mobile-nav="menu"] .header-login { display: none !important; } [data-mobile-nav="menu"] .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; color: var(--fg-1); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ---- Slide-down nav sheet ---- */ .mobile-scrim { display: block; position: fixed; inset: 68px 0 0 0; z-index: 39; background: rgba(2,11,48,0.40); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 280ms ease; } .mobile-scrim.is-open { opacity: 1; visibility: visible; } .mobile-sheet { display: block; position: fixed; top: 68px; left: 0; right: 0; z-index: 41; background: #FFFFFF; border-bottom: 1px solid var(--border); box-shadow: 0 24px 48px -24px rgba(15,23,42,0.28); padding: 10px 20px max(22px, env(safe-area-inset-bottom)); transform: translateY(-14px); opacity: 0; visibility: hidden; transition: transform 320ms var(--ease-out-soft), opacity 240ms ease, visibility 320ms ease; max-height: calc(100dvh - 68px); overflow-y: auto; } .mobile-sheet.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-sheet-nav { display: flex; flex-direction: column; } .mobile-sheet-nav a { display: flex; align-items: center; min-height: 54px; font-family: var(--font-body); font-size: 17px; font-weight: 500; color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--line-soft); transition: color 180ms ease; } .mobile-sheet-nav a:active { color: var(--accent); } .mobile-sheet-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .mobile-sheet-login { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-1); font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--fg-1); text-decoration: none; } .mobile-sheet-cta { width: 100%; height: 52px; font-size: 15px; } /* ---- Fixed-button variant: header = logo + login; CTA pinned ---- */ [data-mobile-nav="fixed"] .site-nav, [data-mobile-nav="fixed"] .header-cta { display: none !important; } [data-mobile-nav="fixed"] .header-login { display: inline-flex !important; align-items: center; min-height: 44px; } .mobile-cta-bar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 42; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -18px rgba(15,23,42,0.25); } .mobile-cta-login { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-1); text-decoration: none; } .mobile-cta-btn { flex: 1; height: 50px; font-size: 15px; } /* Keep the pinned bar from covering the footer's last line */ [data-mobile-nav="fixed"] footer { padding-bottom: 92px; } } /* ============================================================ * FOOTER — stack the equal-track nav grid into a wrapping row * a bit earlier than the general tablet breakpoint, so the * desktop grid only applies when there's room for the 5 tracks * (brand + 4 × 224px min) without the widest column overflowing * its gap. Keeps every inter-column gap EXACTLY equal on desktop. * ============================================================ */ @media (max-width: 1119px) { .footer-cols { display: flex !important; flex-direction: column !important; gap: 40px !important; align-items: stretch !important; } .footer-nav-group { display: flex !important; flex-wrap: wrap !important; gap: 40px 28px !important; } .footer-nav-group nav { flex: 1 1 30% !important; min-width: 140px; } } /* ============================================================ * TABLET (≤1024px) — target ~768px * 3/4-col grids → 2-col · tighter side padding · titles already * fluid via clamp(), so they scale on their own. * ============================================================ */ @media (max-width: 1024px) { /* Security: single full-width column on tablet — cards elongate sideways (per request: one column rather than 2-then-1). */ .sec-grid { grid-template-columns: 1fr; } /* Footer column-stacking handled in its own (wider) breakpoint below. */ /* Legal band: disclaimer over big logos, logos left-aligned */ .footer-legal { grid-template-columns: 1fr !important; gap: 28px; } .footer-badges { justify-content: flex-start !important; } /* Gentle reduction of generous container side padding */ .wrap, .wrap-narrow, .wrap-tight, .spei-wrap, .audm-wrap, .transp-wrap, .cont-wrap { padding-left: 26px; padding-right: 26px; } } /* ============================================================ * TABLET ↓ — CENTERED EDITORIAL ALIGNMENT * Several sections are left-aligned on desktop (asymmetric, beside * a visual). Once those visuals stack, the copy reads better centered * — matching the Transparencia section's centered header treatment. * Desktop (≥1025px) keeps its original left alignment. * ============================================================ */ @media (max-width: 1024px) { /* ---- SPEI Global: center pill, headline, lede, routes + flag strip. (The globe in the right column is unaffected.) ---- */ .spei-col-left { text-align: center; } .spei-headline, .spei-lede { max-width: 100%; margin-left: auto; margin-right: auto; } .spei-routes { margin-left: auto; margin-right: auto; } .sr-foot { text-align: center; } /* ---- Continuidad operativa: center header + both comparison lists ---- */ .cont-header { max-width: 100%; text-align: center; } .cont-headline, .cont-lede { margin-left: auto; margin-right: auto; } .cont-col { text-align: center; } .cont-col-label { text-align: center; } .cont-list { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; /* keep each line readable inside the centered block */ } /* ---- Clientes (Testimonials): center badge, headline, rating strip. The client list + featured quote grid below stay as-is. ---- */ .tst-head { text-align: center; } .tst-headline { max-width: 100%; margin-left: auto; margin-right: auto; } .tst-badge, .tst-trust { justify-content: center; } } /* ============================================================ * TABLET — FINAL CTA: widen the lava-lamp card a touch so the * headline's first line ("Impulsa tu empresa con") stays intact. * Scoped to tablet only (phone keeps its own compact padding). * ============================================================ */ @media (min-width: 641px) and (max-width: 1024px) { .final-outer { max-width: 94vw !important; padding-left: 20px !important; padding-right: 20px !important; } .final-card { padding-left: 30px !important; padding-right: 30px !important; padding-top: 80px !important; padding-bottom: 80px !important; } } /* ============================================================ * TABLET — HERO: scale the whole hero down a touch so it breathes, * with more empty air on the sides. Subtle. * ============================================================ */ @media (min-width: 641px) and (max-width: 1024px) { #top .wrap-narrow { max-width: 84% !important; margin-left: auto !important; margin-right: auto !important; } #top .wrap { max-width: 88% !important; } #top .hero-title { font-size: clamp(2.3rem, 4.4vw + 0.5rem, 3.5rem) !important; } } /* ============================================================ * TABLET — FOOTER: nudge the column + trust text down a touch so * the (now 2-col) footer reads tidier and more proportionate. * Inline px sizes in the component need !important to override. * ============================================================ */ @media (max-width: 1024px) { .footer-cols h4, .footer-cols a { font-size: 13px !important; } .footer-legal p { font-size: 12px !important; } /* legal disclaimer */ .footer-mid span { font-size: 12px !important; } /* copyright · respaldo */ } /* ============================================================ * TABLET — TRUST METRICS (before the logos carousel): shrink the * blue figures + padding so the three stats sit on ONE line * instead of wrapping 2-then-1. * ============================================================ */ @media (min-width: 641px) and (max-width: 1024px) { .sec-trust-v { font-size: clamp(1.3rem, 1.2vw + 0.7rem, 1.55rem); } .sec-trust-l { font-size: 12.5px; } .sec-trust-item { padding-left: clamp(10px, 1.8vw, 20px); padding-right: clamp(10px, 1.8vw, 20px); } } /* ============================================================ * PHONE (≤640px) — target 375px * Everything stacks to one column; primary actions go full-width. * ============================================================ */ /* ---- GLOBAL "ZOOM OUT" for phones ---- The desktop composition is dense; squeezed into 375px the elements (type, padding, fixed-px dashboards/diagrams) felt cramped. `zoom` lets the page lay out in a roomier logical width (~422px) and paint it scaled down to fit — so everything shrinks proportionally and gains breathing room while keeping the exact same arrangement. innerWidth is unaffected by zoom, so the phone breakpoints below still match (no feedback loop). Desktop/tablet untouched. */ @media (max-width: 640px) { :root { zoom: 0.86; } } @media (max-width: 640px) { /* ---- Containers: tighten side padding so content breathes without crowding the screen edges ---- */ .wrap, .wrap-narrow, .wrap-tight, .spei-wrap, .audm-wrap, .transp-wrap, .cont-wrap { padding-left: 20px; padding-right: 20px; } /* ---- Vertical rhythm: trim section padding so the page doesn't feel cavernous on a small screen (not so tight it crowds) ---- */ main > section { padding-top: 76px; padding-bottom: 76px; } .spei-section, .audm-section, .transp-section, .cont-section, .tst-section, .features-dark, .disc-section { padding-top: 76px; padding-bottom: 76px; } /* ---- Grids → single column ---- */ .sec-grid { grid-template-columns: 1fr; } .footer-cols { display: flex !important; flex-direction: column !important; gap: 32px !important; align-items: stretch !important; } .footer-nav-group { display: flex !important; flex-wrap: wrap !important; gap: 28px 24px !important; } .footer-nav-group nav { flex: 1 1 40% !important; min-width: 130px; } /* Mid bar: stack copyright/social over the partner, left-aligned */ .footer-mid { flex-direction: column; align-items: flex-start !important; gap: 20px; } /* ---- Trust metrics: keep all three on ONE horizontal line ---- The labels are too long to sit beside their number three-across on a phone, so each item stacks its number over its label. With flex-wrap disabled and equal-width thirds, the row never breaks into a pyramid and never reflows as the counter climbs to +100. */ .sec-trust { flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 0; max-width: none; } .sec-trust-item { flex: 1 1 0; min-width: 0; padding: 0 4px; flex-direction: column; align-items: center; text-align: center; gap: 4px; white-space: normal; } .sec-trust-v { font-size: clamp(1.15rem, 5.4vw, 1.5rem); } .sec-trust-l { font-size: 11px; white-space: normal; line-height: 1.3; } /* ---- Buttons: primary CTAs go full-width & comfortably tall ---- */ .hero-cta-row { flex-direction: column; align-items: stretch; gap: 12px; } .hero-cta-row .btn-magnetic { width: 100%; height: 50px; font-size: 15px; } /* Magnetic translate can nudge buttons sideways → disable the pull on touch so full-width buttons never cause horizontal jiggle. */ .btn-magnetic { transform: none !important; } /* ---- Hero: keep it impactful in portrait ---- */ .hero-title { white-space: normal !important; } .hero-subnote { white-space: normal !important; } /* ---- Final CTA card: reduce its heavy desktop padding ---- */ .final-card { padding: 56px 24px !important; border-radius: 24px; } /* ---- Footer bottom row: stack the three trust items, left-aligned ---- */ .footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 18px; } /* ---- Touch targets: ensure tappable controls clear 44px ---- */ .audm-tab { min-height: 44px; } .site-header .wrap { padding-left: 20px; padding-right: 20px; } /* ---- Logos marquee: a touch smaller so more brands read per pass ---- */ .logos-rail { padding: 14px 0; } } /* ============================================================ * SMALL PHONE (≤400px) — final polish at the 375px target * ============================================================ */ @media (max-width: 400px) { .wrap, .wrap-narrow, .wrap-tight, .spei-wrap, .audm-wrap, .transp-wrap, .cont-wrap, .site-header .wrap { padding-left: 16px; padding-right: 16px; } .hero-title { font-size: clamp(2.05rem, 9vw, 2.5rem) !important; } .final-card { padding: 48px 20px !important; } } /* ============================================================ * PHONE — TOUCH-TARGET COMPENSATION * The 0.86 page zoom shrinks every tappable control by ~14%, which * would push them under 44px in real device px. Bump their logical * size so that AFTER the zoom they still clear a comfortable ~44px. * Placed last so it wins over the base sizes above. * ============================================================ */ @media (max-width: 640px) { [data-mobile-nav="menu"] .nav-burger { width: 52px; height: 52px; } .hero-cta-row .btn-magnetic { height: 54px; } .mobile-sheet-nav a { min-height: 58px; } .mobile-sheet-login { min-height: 52px; } .mobile-sheet-cta { height: 56px; } .mobile-cta-btn { height: 54px; } .mobile-cta-login { min-height: 52px; } .audm-tab { min-height: 52px; } } /* ============================================================ * PHONE + TABLET — HIDE SCROLLBAR * On touch devices the vertical scrollbar is unnecessary chrome; hiding it * removes the asymmetric gutter on the right so content sits truly * centred in the viewport. Scroll still works (touch / wheel). * ============================================================ */ @media (max-width: 1024px) { html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } body::-webkit-scrollbar { width: 0; height: 0; display: none; } } /* ============================================================ * PHONE — PER-SECTION SCALE TUNING * The sections below read a touch large once stacked into a single * phone column. We scale each section's *content wrapper* down with * `zoom` (compounds with the global 0.86 page zoom): the full-bleed * background stays edge-to-edge, while type, padding and the inner * "windows"/diagrams shrink proportionally and keep the exact same * arrangement. A slightly wider side padding gives the shrunken * content comfortable margins on both edges. * * Different amounts per section, matching how oversized each felt. * ============================================================ */ @media (max-width: 640px) { /* ---- Section headings: the "statement" line carries an inline white-space:nowrap (for the desktop two-line composition). On a phone that single line can't fit and overflows / clips (Seguridad + Features titles). Let it wrap here. ---- */ .section-h h2 span { white-space: normal !important; } /* ---- Transparencia: Banco vs Meefi windows were too big ---- */ .transp-wrap { zoom: 0.91; padding-left: 24px; padding-right: 24px; } /* ---- Continuidad: oversized AND text ran off the right edge ---- */ .cont-wrap { zoom: 0.90; padding-left: 24px; padding-right: 24px; } /* Kill the tablet `width: max-content` here — on a narrow phone it let the longest line push the list past the screen edge. Fill the column instead so every line wraps inside the viewport. */ .cont-list { width: 100% !important; max-width: 100% !important; } /* ---- Features: design was fine, just slightly large; give it air ---- */ .features-dark .wrap { zoom: 0.92; padding-left: 22px; padding-right: 22px; } /* ---- Seguridad: title overflowed + uneven right margin on cards. (Hiding the scrollbar already evened out the right gutter; a light zoom pulls the long title fully on-screen.) ---- */ #security .wrap { zoom: 0.93; padding-left: 24px; padding-right: 24px; } /* ---- Preguntas frecuentes: scale down to match the rest ---- */ #faq .wrap-tight { zoom: 0.93; padding-left: 22px; padding-right: 22px; } /* ---- CTA final: make the lava-lamp the WHOLE section ---- On desktop the effect lives inside a rounded "window" card. On a phone that window forces the copy into a cramped column. Here we let the card go full-bleed so the lava lamp fills the entire section, drop the rounded frame/shadow, and give the centred copy generous breathing room top-to-bottom. */ .final-section { padding: 0 !important; } .final-section .final-outer { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .final-section .final-card { border-radius: 0 !important; box-shadow: none !important; padding: 104px 30px !important; min-height: 78vh; display: flex; align-items: center; } } /* ============================================================ * PHONE — PARA QUIÉN (Audiences) STACKED LAYOUT * ≤640px the component renders a vertical stack (see Audiences.jsx * `stack` branch) instead of shrinking the 2-column hub-and-spoke * artboard to a tiny miniature. We reuse the existing .audx-box / * .audx-sphere looks; here we just reflow them into one column with * readable, full-width rows. Tablet + desktop are untouched (they * never render .audx-stack). * ============================================================ */ @media (max-width: 640px) { .audx-scroll { margin-top: 32px; } .audx-stack { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 360px; margin: 0 auto; } .audx-stack-col { display: flex; flex-direction: column; gap: 10px; } .audx-stack-list { display: flex; flex-direction: column; gap: 10px; } /* Group label — same eyebrow treatment as the desktop .audx-side */ .audx-stack-label { align-self: center; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* Reuse .audx-box but reflow it from a fixed centered chip into a full-width list row (title left, currency/flag right). */ .audx-stack .audx-box { width: 100%; height: auto; min-height: 50px; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; border-radius: 14px; } .audx-stack .audx-box-title { white-space: normal; } .audx-stack .audx-box-sub { white-space: nowrap; } /* Middle node: meefi sphere + "Tu empresa", flanked by short connectors */ .audx-stack-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0; } .audx-stack-mid .audx-sphere { width: 96px; height: 96px; } .audx-stack-mid .audx-sphere::before { width: 104px; height: 104px; } .audx-stack-company { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); } .audx-stack-arrow { width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, rgba(5,48,206,0.45), rgba(5,48,206,0.04)); } } /* ============================================================ * PHONE — CASOS DE USO: one card at a time * The coverflow's lateral cards (rel ±1, blurred at 50% opacity) * bleed in at the screen edges on a phone and read as clutter. * Here we hide every non-focused card so only the centered card * shows; the dots still navigate and adjacent cards cross-fade. * Inline transforms/opacity from the component need !important. * Desktop/tablet keep the full 3D coverflow. * ============================================================ */ @media (max-width: 600px) { .cu-card:not(.is-active) { opacity: 0 !important; pointer-events: none !important; } /* No peeking siblings → let the focused card use a touch more width */ .cu-section { --cu-card-w: min(360px, 92vw); } } /* Very narrow phones: the Startups title wraps to 4 lines, pushing the FX panel's footer into the anchor row inside the fixed-height card. Give the card (and its stage) a little more height so nothing collides. */ @media (max-width: 400px) { .cu-section { --cu-card-h: 532px; --cu-stage-h: 576px; } }