/* ============================================================ landing.css — landing público de ZentyPay. NOTA DE DISEÑO: el landing usa MÁS contraste que el backoffice (sombras, fondos alternos, cards marcadas). El manual de marca pide "solo fondo y borde", que funciona para una herramienta de trabajo, pero en un landing aplana la jerarquía y nada resalta. Aquí la jerarquía es funcional: guía al usuario al CTA. Consume zentypay.css (tokens --zp-* y componentes .btn/.card/.badge). Cargar DESPUÉS de zentypay.css. Todo bajo .ld. ============================================================ */ .btn-secondary{ background:transparent; border-color:var(--zp-primary); color:var(--zp-primary); } .btn-secondary:hover{ background:var(--zp-primary-soft); color:var(--zp-primary); } .ld{ background:var(--zp-bg-page); color:var(--zp-text-primary); } /* Anti-desborde horizontal (causa clásica del "se pierde" en móvil) */ html, body{ overflow-x:hidden; max-width:100%; } .ld img{ max-width:100%; height:auto; } .ld *{ min-width:0; } /* ── CARDS: deben LEERSE como cards (era el feedback de UX) ── */ .ld .card{ background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-radius:var(--zp-radius-lg); box-shadow:0 1px 2px rgba(17,24,39,.06), 0 4px 10px rgba(17,24,39,.04); transition:border-color .15s, box-shadow .15s; } .ld .card:hover{ border-color:var(--zp-primary); box-shadow:0 2px 6px rgba(17,24,39,.08), 0 8px 20px rgba(17,24,39,.06); } /* Secciones con fondo alterno: crean ritmo y separan bloques */ .ld-flowsec, .ld-how, .ld-audience{ background:var(--zp-bg-subtle); } .ld-products, .ld-security, .ld-compare, .ld-contact{ background:var(--zp-bg-page); } /* Link con flecha (reemplaza el botón que parecía deshabilitado) */ .ld-link-arrow{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; color:var(--zp-primary); padding:14px 2px; } .ld-link-arrow span{ transition:transform .15s; display:inline-block; } .ld-link-arrow:hover{ color:var(--zp-primary-dark); } .ld-link-arrow:hover span{ transform:translateX(3px); } .ld .wrap{ max-width:1160px; margin:0 auto; padding:0 24px; } /* FIX: el header sticky tapaba el inicio de la sección al usar anclas (#como, #seguridad, #contacto). scroll-margin-top deja el espacio del header. */ /* FIX: el header sticky (68px) tapaba el inicio de las secciones al usar anclas (#como, #seguridad, #contacto). scroll-padding-top en es la forma robusta: reserva ese espacio para CUALQUIER destino de ancla. */ html{ scroll-behavior:smooth; scroll-padding-top:96px; } .ld section[id]{ scroll-margin-top:96px; } .ld section{ padding:72px 0; } .ld h1{ font-size:42px; font-weight:600; line-height:1.15; letter-spacing:-1.2px; color:var(--zp-text-primary); } .ld h2{ font-size:30px; font-weight:600; line-height:1.25; letter-spacing:-.6px; color:var(--zp-text-primary); } .ld h3{ font-size:16px; font-weight:600; color:var(--zp-text-primary); } .ld .lead{ font-size:16px; color:var(--zp-text-secondary); line-height:1.6; } .ld-section-head{ max-width:640px; margin:0 auto 44px; text-align:center; } .ld-section-head h2{ margin-bottom:10px; } .ld-grid{ display:grid; gap:18px; } .ld-g4{ grid-template-columns:repeat(4,1fr); } /* Logo */ .ld-logo{ display:inline-flex; align-items:center; gap:9px; font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--zp-text-primary); } .ld-logo b{ color:var(--zp-primary); font-weight:700; } .ld-logo-mark{ width:28px; height:28px; border-radius:8px; background:var(--zp-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; } .ld-logo-mark.xs{ width:20px; height:20px; font-size:11px; border-radius:6px; } .ld-logo-mark.sm{ width:20px; height:20px; font-size:11px; border-radius:6px; } .ld-logo-mark.lg{ width:46px; height:46px; font-size:23px; border-radius:12px; background:#fff; color:var(--zp-primary); } /* Header */ .ld-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:var(--zp-bg-card); border-bottom:1px solid var(--zp-border-strong); box-shadow:0 1px 3px rgba(17,24,39,.06); } .ld{ padding-top:68px; } .ld-nav{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px; } .ld-nav-links{ display:flex; align-items:center; gap:26px; } .ld-nav-links a{ font-size:14px; color:var(--zp-text-secondary); } .ld-nav-links a:hover{ color:var(--zp-text-primary); } .ld-nav-cta{ display:flex; align-items:center; gap:10px; } .ld-nav-toggle{ display:none; background:none; border:none; cursor:pointer; font-size:24px; color:var(--zp-text-primary); } .ld-mobile-menu{ display:none; flex-direction:column; padding:12px 24px 18px; border-bottom:1px solid var(--zp-border-strong); background:var(--zp-bg-card); box-shadow:0 4px 10px rgba(17,24,39,.06); } .ld-mobile-menu a{ padding:11px 0; font-size:15px; color:var(--zp-text-secondary); } /* Hero */ .ld-hero{ padding:64px 0 56px; } .ld-hero-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; } .ld-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--zp-primary-soft); color:var(--zp-primary-dark); font-size:12px; font-weight:500; padding:6px 13px; border-radius:999px; margin-bottom:20px; } .ld-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--zp-primary); } .ld-hero h1{ margin-bottom:18px; } .ld-hero h1 .p{ color:var(--zp-primary); } .ld-hero .lead{ margin-bottom:28px; max-width:480px; } .ld-hero-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:26px; } /* El CTA principal: el morado solido ya es suficiente jerarquia. Sin glow ni sombras de color (se veia artificial). */ .ld-hero-note{ padding:12px 14px; background:var(--zp-bg-subtle); border-left:2px solid var(--zp-primary); border-radius:0 var(--zp-radius-sm) var(--zp-radius-sm) 0; } .ld-hero-note p{ font-size:13px; color:var(--zp-text-secondary); margin:0; line-height:1.55; } .ld-hero-note b{ color:var(--zp-text-primary); font-weight:500; } .ld-hero-img{ width:100%; border-radius:var(--zp-radius-lg); border:1px solid var(--zp-border); box-shadow:0 4px 16px rgba(17,24,39,.07); } /* ── Mock del panel (inspirado en el dashboard real) ── */ .ld-mock{ background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-radius:var(--zp-radius-lg); overflow:hidden; box-shadow:0 4px 16px rgba(17,24,39,.07); } .ld-mock-top{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--zp-border); background:var(--zp-bg-page); } .ld-mock-logo{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; } .ld-mock-logo .nm{ letter-spacing:-.2px; } .ld-mock-logo b{ color:var(--zp-primary); } .ld-mock-merchant{ font-size:11px; color:var(--zp-text-secondary); } .ld-mock-body{ padding:16px; } .ld-mock-k{ font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--zp-text-muted); margin-bottom:8px; } .ld-mock-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; } .ld-mock-stats > div{ background:var(--zp-bg-subtle); border-radius:var(--zp-radius); padding:11px 12px; display:flex; flex-direction:column; gap:3px; } .ld-mock-stats .l{ font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--zp-text-secondary); } .ld-mock-stats .v{ font-size:14px; font-weight:600; color:var(--zp-text-primary); } .ld-mock-stats .v.purple{ color:var(--zp-primary); } .ld-mock-stats .v.green{ color:var(--zp-success); } .ld-mock-panel{ border:1px solid var(--zp-border); border-radius:var(--zp-radius); padding:12px; margin-bottom:10px; } .ld-mock-panel:last-child{ margin-bottom:0; } .ld-mock-h{ font-size:11.5px; font-weight:600; margin-bottom:10px; color:var(--zp-text-primary); } .ld-mock-bar-row{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; margin-bottom:9px; } .ld-mock-bar-row .n{ font-size:10.5px; color:var(--zp-text-secondary); } .ld-mock-bar-row .p{ font-size:10.5px; font-weight:600; color:var(--zp-text-primary); } .ld-mock-bar-row .bar{ grid-column:1 / -1; height:4px; border-radius:2px; background:var(--zp-bg-subtle); overflow:hidden; } .ld-mock-bar-row .bar i{ display:block; height:100%; background:var(--zp-primary); border-radius:2px; } .ld-mock-row{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--zp-border); } .ld-mock-row:first-of-type{ border-top:none; } .ld-mock-row .id{ font-size:10px; color:var(--zp-text-secondary); font-family:ui-monospace,Menlo,monospace; } .ld-mock-row .badge{ font-size:9px; } .ld-mock-row .amt{ font-size:11px; font-weight:600; text-align:right; } .ld-mock-row .amt em{ font-style:normal; font-weight:400; color:var(--zp-text-muted); font-size:9px; } /* ── Proveedores por país ── */ .ld-providers{ background:var(--zp-bg-card); border-top:.5px solid var(--zp-border); border-bottom:.5px solid var(--zp-border); } .ld-countries{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; } .ld-country{ display:inline-flex; align-items:center; gap:9px; background:var(--zp-bg-page); border:1px solid var(--zp-border-strong); border-radius:999px; padding:8px 18px; font-family:inherit; font-size:14px; font-weight:500; color:var(--zp-text-secondary); cursor:pointer; transition:all .15s; } .ld-country:hover{ border-color:var(--zp-primary); color:var(--zp-primary); } .ld-country.active{ background:var(--zp-primary); border-color:var(--zp-primary); color:#fff; } /* Bandera como imagen (los emoji no renderizan en algunos navegadores/SO) */ .ld-flag{ width:22px; height:16px; object-fit:cover; border-radius:3px; display:block; box-shadow:0 0 0 .5px rgba(0,0,0,.08); } .ld-country-panel{ display:none; } .ld-country-panel.active{ display:block; animation:ldFade .25s ease; } @keyframes ldFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .ld-logos{ display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; margin-bottom:24px; } .ld-logo-item img{ height:30px; width:auto; max-width:130px; object-fit:contain; opacity:.9; } .ld-logo-txt{ font-size:17px; font-weight:700; color:var(--zp-text-secondary); letter-spacing:-.3px; } .ld-methods-line{ text-align:center; font-size:13px; color:var(--zp-text-secondary); } .ld-methods-line b{ color:var(--zp-text-primary); font-weight:500; } .ld-soon-line{ text-align:center; font-size:13px; color:var(--zp-text-muted); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; } .ld-soon-line a{ color:var(--zp-primary); text-decoration:underline; } /* ── Flujo: integra una vez, conecta múltiples ── */ .ld-flow{ display:flex; align-items:stretch; justify-content:center; gap:10px; margin-bottom:26px; } .ld-flow-box{ flex:1; min-width:0; background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-radius:var(--zp-radius-lg); padding:20px 18px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; box-shadow:0 1px 3px rgba(17,24,39,.05); } /* Badge numerado de cada paso */ .ld-step-tag{ font-size:9.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--zp-primary-dark); background:var(--zp-primary-soft); padding:4px 10px; border-radius:999px; } .ld-step-tag.light{ background:rgba(255,255,255,.22); color:#fff; } .ld-flow-title{ font-size:14px; font-weight:600; color:var(--zp-text-primary); line-height:1.35; } .ld-flow-lbl{ font-size:12px; color:var(--zp-text-secondary); line-height:1.45; } .ld-flow-lbl b{ color:var(--zp-text-primary); font-weight:600; } /* Caja de ZentyPay (el centro) */ .ld-flow-zp{ background:var(--zp-primary); border-color:var(--zp-primary); flex:0 0 190px; justify-content:center; } .ld-flow-zp .ld-flow-title{ color:#fff; font-size:17px; } .ld-flow-list{ list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:4px; text-align:left; width:100%; } .ld-flow-list li{ font-size:11.5px; color:#fff; opacity:.92; padding-left:14px; position:relative; } .ld-flow-list li::before{ content:""; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:#fff; } /* Logos de pasarelas en cajitas */ .ld-flow-psp{ flex:1.5; } .ld-flow-logos{ display:none; } .ld-flow-logos.active{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; width:100%; animation:ldFade .25s ease; } .ld-flow-logos .lg-box{ display:flex; align-items:center; justify-content:center; background:var(--zp-bg-page); border:1px solid var(--zp-border); border-radius:var(--zp-radius-sm); padding:9px 8px; min-height:38px; } .ld-flow-logos img{ height:17px; width:auto; max-width:78px; object-fit:contain; } .ld-flow-txt{ font-size:11px; font-weight:600; color:var(--zp-text-primary); } .ld-flow-more{ font-size:10.5px; color:var(--zp-text-muted); border:1px dashed var(--zp-border-strong); border-radius:var(--zp-radius-sm); padding:6px 10px; width:100%; } /* Flechas discretas */ .ld-flow-arrow{ align-self:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-radius:50%; color:var(--zp-primary); font-size:15px; line-height:1; box-shadow:0 1px 3px rgba(17,24,39,.06); } /* Pills con título + descripción */ .ld-pills{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .ld-pill{ display:block; text-align:left; background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-radius:var(--zp-radius); padding:14px 15px; font-size:12px; color:var(--zp-text-secondary); line-height:1.5; box-shadow:0 1px 3px rgba(17,24,39,.05); } .ld-pill b{ display:block; font-size:13px; color:var(--zp-text-primary); font-weight:600; margin-bottom:3px; } /* ── Comparativa ── */ .ld-compare-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:18px; } .ld-compare-card{ padding:28px; } .ld-compare-cols{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; } .ld-col-trad{ padding:20px; border-radius:var(--zp-radius); } /* Panel destacado con la dinámica de color de la marca (como el encabezado) */ .ld-col-zp{ padding:20px; border-radius:var(--zp-radius); background:var(--zp-primary-soft); border:1px solid var(--zp-primary); } .ld-ct{ font-size:14px; margin-bottom:16px; display:flex; align-items:center; gap:8px; } .ld-ct.trad{ color:var(--zp-text-secondary); } .ld-ct.zp{ color:var(--zp-primary-dark); } .ld-vs{ align-self:center; width:38px; height:38px; border-radius:50%; background:var(--zp-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; } .ld-clist{ list-style:none; display:flex; flex-direction:column; gap:11px; } .ld-clist li{ display:flex; gap:9px; font-size:13px; color:var(--zp-text-secondary); align-items:flex-start; } .ld-clist li i{ font-size:16px; flex-shrink:0; color:var(--zp-text-muted); margin-top:1px; } .ld-clist.ok li{ color:var(--zp-primary-dark); } .ld-clist.ok li i{ color:var(--zp-primary); } .ld-highlight{ background:var(--zp-primary); border-radius:var(--zp-radius-lg); padding:32px; display:flex; flex-direction:column; justify-content:center; } .ld-highlight h3{ font-size:20px; line-height:1.3; margin-bottom:10px; color:#fff; } .ld-highlight p{ font-size:14px; color:var(--zp-primary-soft); margin:0; } /* ── Productos ── */ .ld-prod{ display:flex; flex-direction:column; align-items:flex-start; } .ld-prod h3{ margin-bottom:8px; font-size:17px; } .ld-prod p{ font-size:13px; color:var(--zp-text-secondary); margin-bottom:14px; flex:1; } /* ── Así funciona ── */ .ld-steps5{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } .ld-step5{ background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-radius:var(--zp-radius-lg); padding:24px 18px; text-align:center; box-shadow:0 1px 2px rgba(17,24,39,.06), 0 4px 10px rgba(17,24,39,.04); } .ld-step5 .n{ width:32px; height:32px; border-radius:50%; background:var(--zp-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; margin:0 auto 14px; } .ld-step5 h3{ font-size:14px; margin-bottom:7px; } .ld-step5 p{ font-size:12px; color:var(--zp-text-secondary); } /* ── Seguridad ── */ .ld-sec5{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .ld-sec5 .item{ display:flex; flex-direction:column; gap:8px; background:var(--zp-bg-card); border:1px solid var(--zp-border-strong); border-top:3px solid var(--zp-primary); border-radius:var(--zp-radius-lg); padding:18px 16px; box-shadow:0 1px 2px rgba(17,24,39,.06), 0 4px 10px rgba(17,24,39,.04); } .ld-sec5 h3{ font-size:14px; } .ld-sec5 p{ font-size:12px; color:var(--zp-text-secondary); } /* ── Audiencias + LatAm ── */ .ld-aud-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:18px; } .ld-aud-card{ padding:32px; } .ld-aud-card h2{ font-size:22px; margin-bottom:22px; } .ld-aud-item{ margin-bottom:18px; padding-left:14px; border-left:2px solid var(--zp-border-strong); } .ld-aud-item b{ display:block; font-size:14px; color:var(--zp-primary); margin-bottom:3px; font-weight:500; } .ld-aud-item p{ font-size:13px; color:var(--zp-text-secondary); margin:0; } .ld-latam{ position:relative; padding:32px; background:var(--zp-primary-soft); border:none; overflow:hidden; } .ld-latam h2{ font-size:22px; margin-bottom:12px; max-width:340px; } .ld-latam p{ font-size:14px; color:var(--zp-text-secondary); margin-bottom:20px; max-width:400px; } .ld-latam .ld-clist{ position:relative; z-index:1; } .ld-latam-img{ position:absolute; right:-10px; bottom:-10px; width:230px; opacity:.35; pointer-events:none; } /* ── CTA ── */ .ld-ctabar-wrap{ padding:0 0 72px; } .ld-ctabar{ background:var(--zp-primary); border-radius:var(--zp-radius-xl); padding:34px 38px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .ld-ctabar-copy{ flex:1; min-width:220px; } .ld-ctabar-copy h3{ color:#fff; font-size:20px; margin-bottom:5px; } .ld-ctabar-copy p{ color:var(--zp-primary-soft); font-size:14px; margin:0; } .ld-ctabar-btns{ display:flex; gap:10px; flex-wrap:wrap; } .ld-btn-white{ background:#fff; color:var(--zp-primary-dark); border-color:#fff; } .ld-btn-white:hover{ background:var(--zp-primary-soft); color:var(--zp-primary-dark); } .ld-btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); } .ld-btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff; } /* ── Formulario ── */ .ld-form-card{ max-width:760px; margin:0 auto; padding:36px; border:1px solid var(--zp-primary) !important; box-shadow:0 1px 3px rgba(17,24,39,.06) !important; } .ld-form-card:hover{ transform:none !important; } .ld-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .ld-form-card .field-row{ margin-bottom:16px; } .ld-form-card label .req{ color:var(--zp-error); } .ld-form-card label .opt{ color:var(--zp-text-muted); font-weight:400; } .ld-form-card textarea{ resize:vertical; } .ld-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .ld-check{ display:flex; align-items:flex-start; gap:10px; margin:8px 0 20px; } .ld-check input[type="checkbox"]{ margin-top:3px; flex-shrink:0; } .ld-check label{ font-size:13px; color:var(--zp-text-secondary); margin:0; font-weight:400; line-height:1.5; } .ld-check label a{ color:var(--zp-primary); text-decoration:underline; } .ld-recaptcha{ margin-bottom:20px; } .ld-form-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .ld-form-note{ font-size:12px; color:var(--zp-text-muted); } .ld-form-err{ display:none; margin-top:16px; padding:12px 14px; background:var(--zp-error-bg); color:var(--zp-error-text); border-radius:var(--zp-radius-sm); font-size:13px; line-height:1.5; } .ld-form-ok{ display:none; align-items:flex-start; gap:14px; padding:8px; } .ld-form-ok i{ font-size:28px; color:var(--zp-success); flex-shrink:0; } .ld-form-ok b{ font-size:16px; color:var(--zp-text-primary); display:block; margin-bottom:4px; } .ld-form-ok p{ font-size:14px; color:var(--zp-text-secondary); margin:0; } /* ── Footer ── */ /* Footer CLARO: el manual dice "nunca negro como fondo principal". El footer oscuro rompía la paleta del resto del sitio. */ .ld-footer{ background:var(--zp-bg-subtle); border-top:1px solid var(--zp-border); padding:52px 0 28px; } .ld-foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:32px; margin-bottom:36px; } .ld-footer .ld-logo{ margin-bottom:12px; } .ld-foot-brand p{ font-size:13px; color:var(--zp-text-secondary); max-width:270px; } .ld-foot-grid h4{ font-size:12px; color:var(--zp-text-primary); margin-bottom:14px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; } .ld-foot-grid a{ display:block; font-size:13px; color:var(--zp-text-secondary); margin-bottom:10px; } .ld-foot-grid a:hover{ color:var(--zp-primary); } .ld-foot-legal{ border-top:1px solid var(--zp-border); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } .ld-foot-legal p{ font-size:12px; color:var(--zp-text-muted); } /* ── Cookies ── */ .ld-cookies{ position:fixed; left:0; right:0; bottom:0; z-index:100; background:var(--zp-bg-card); border-top:.5px solid var(--zp-border-strong); padding:16px 24px; display:flex; align-items:center; gap:20px; } .ld-cookies p{ font-size:13px; color:var(--zp-text-secondary); flex:1; } .ld-cookies a{ color:var(--zp-primary); text-decoration:underline; } .ld-cookies .cbtns{ display:flex; gap:10px; flex-shrink:0; } .ld-hidden{ display:none !important; } /* ══════════════════ RESPONSIVE ══════════════════ */ /* ── TABLET (≤1024px): grids a 1 columna, flujo vertical ── */ @media (max-width:1024px){ .ld-hero-grid, .ld-compare-grid, .ld-aud-grid{ grid-template-columns:1fr; } /* El TEXTO del hero primero; el panel debajo */ .ld-hero-copy{ order:1; } .ld-hero-visual{ order:2; } .ld-hero .lead{ max-width:none; } .ld-steps5{ grid-template-columns:repeat(3,1fr); } .ld-sec5{ grid-template-columns:repeat(3,1fr); } .ld-g4{ grid-template-columns:repeat(2,1fr); } .ld-foot-grid{ grid-template-columns:1fr 1fr; } .ld-pills{ grid-template-columns:repeat(2,1fr); } /* FLUJO VERTICAL — flechas hacia abajo */ .ld-flow{ flex-direction:column; align-items:stretch; gap:10px; } .ld-flow-box{ flex:none !important; /* BUG: flex:0 0 190px fijaba la ALTURA en columna */ width:100%; padding:20px; } .ld-flow-arrow{ transform:rotate(90deg); } .ld-flow-logos.active{ grid-template-columns:repeat(3,1fr); } .ld-flow-list{ max-width:260px; } /* El mapa decorativo estorba en pantallas medianas */ .ld-latam-img{ opacity:.18; width:180px; } } /* ── MÓVIL (≤768px): header compacto, tipografía y cards ── */ @media (max-width:768px){ /* Header fijo más bajo */ .ld-nav-links, .ld-nav-cta{ display:none; } .ld-nav-toggle{ display:block; } .ld-nav{ height:60px; } .ld{ padding-top:60px; } html{ scroll-padding-top:76px; } .ld section[id]{ scroll-margin-top:76px; } .ld .wrap{ padding:0 18px; } .ld section{ padding:48px 0; } .ld h1{ font-size:29px; letter-spacing:-.8px; } .ld h2{ font-size:22px; letter-spacing:-.4px; } .ld h3{ font-size:15px; } .ld .lead{ font-size:14px; } .ld-section-head{ margin-bottom:28px; } .ld-hero{ padding:36px 0 32px; } .ld-hero-grid{ gap:30px; } /* Comparativa: apilada, el VS en medio */ .ld-compare-grid{ gap:14px; } .ld-compare-card{ padding:18px; } .ld-compare-cols{ grid-template-columns:1fr; gap:14px; } .ld-vs{ justify-self:center; } .ld-col-trad, .ld-col-zp{ padding:16px; } .ld-highlight{ padding:24px; } .ld-highlight h3{ font-size:18px; } /* Audiencias / LatAm: mantienen aspecto de card */ .ld-aud-card{ padding:22px; } .ld-latam{ padding:22px; border:1px solid var(--zp-border-strong); } .ld-aud-card h2, .ld-latam h2{ font-size:19px; max-width:none; } .ld-latam p{ max-width:none; } } /* ── MÓVIL CHICO (≤640px): una columna, todo compacto ── */ @media (max-width:640px){ .ld-steps5, .ld-sec5, .ld-g4, .ld-form-grid, .ld-foot-grid, .ld-pills{ grid-template-columns:1fr; } /* CARDS: en móvil deben leerse claramente (feedback UX) */ .ld .card, .ld-step5, .ld-flow-box, .ld-sec5 .item, .ld-pill{ border:1px solid var(--zp-border-strong); box-shadow:0 1px 2px rgba(17,24,39,.06), 0 4px 10px rgba(17,24,39,.05); } .ld .card{ padding:18px; } .ld-step5{ padding:18px 16px; } .ld-step5 .n{ width:28px; height:28px; font-size:13px; margin-bottom:10px; } .ld-grid{ gap:12px; } .ld-steps5{ gap:10px; } .ld-sec5{ gap:12px; } /* HERO: CTA a ancho completo */ .ld-hero-cta{ flex-direction:column; align-items:stretch; gap:6px; } .ld-hero-cta .btn{ width:100%; } .ld-link-arrow{ justify-content:center; } .ld-hero-note{ padding:12px; } /* PANEL (mock): compacto y legible */ .ld-mock-body{ padding:13px; } .ld-mock-stats{ grid-template-columns:1fr 1fr; gap:6px; } .ld-mock-stats > div:last-child{ grid-column:1 / -1; } .ld-mock-stats .v{ font-size:13px; } .ld-mock-row{ grid-template-columns:1fr auto; gap:6px; } .ld-mock-row .badge{ display:none; } .ld-mock-row .id{ font-size:9px; } .ld-mock-merchant{ display:none; } /* PROVEEDORES: selector y logos controlados */ .ld-countries{ gap:8px; margin-bottom:24px; } .ld-country{ padding:7px 14px; font-size:13px; } .ld-flag{ width:19px; height:14px; } .ld-logos{ gap:18px 24px; } .ld-logo-item img{ height:21px; max-width:88px; } .ld-logo-txt{ font-size:14px; } .ld-methods-line, .ld-soon-line{ font-size:12px; } .ld-soon-line{ flex-direction:column; gap:4px; } /* FLUJO: caja compacta, logos 2 por fila */ .ld-flow-box{ padding:18px 16px; } .ld-flow-zp{ padding:20px 16px; } .ld-flow-logos.active{ grid-template-columns:repeat(2,1fr); gap:7px; } .ld-flow-logos img{ height:16px; max-width:70px; } .ld-flow-list{ max-width:200px; } .ld-logo-mark.lg{ width:38px; height:38px; font-size:19px; } .ld-flow-arrow{ width:26px; height:26px; font-size:13px; } /* CTA final */ .ld-ctabar{ flex-direction:column; text-align:center; padding:26px 20px; gap:14px; } .ld-ctabar-copy h3{ font-size:18px; } .ld-ctabar-btns{ width:100%; } .ld-ctabar-btns .btn{ width:100%; } /* FORMULARIO */ .ld-form-card{ padding:20px; } .ld-form-actions{ flex-direction:column; align-items:stretch; gap:10px; } .ld-form-actions .btn{ width:100%; } .ld-form-note{ text-align:center; } .ld-recaptcha{ transform:scale(.85); transform-origin:left top; margin-bottom:8px; } /* COOKIES */ .ld-cookies{ flex-direction:column; align-items:stretch; padding:14px 18px; gap:10px; } .ld-cookies .cbtns{ width:100%; } .ld-cookies .cbtns .btn{ flex:1; } /* FOOTER */ .ld-latam-img{ display:none; } .ld-foot-legal{ flex-direction:column; gap:8px; } .ld-foot-grid{ gap:24px; } } /* ── PANTALLAS MUY CHICAS (≤380px) ── */ @media (max-width:380px){ .ld h1{ font-size:25px; } .ld h2{ font-size:20px; } .ld .wrap{ padding:0 14px; } .ld-logos{ gap:14px 18px; } .ld-logo-item img{ height:18px; max-width:74px; } .ld-mock-stats{ grid-template-columns:1fr; } .ld-mock-stats > div:last-child{ grid-column:auto; } .ld-country{ padding:6px 12px; font-size:12px; } .ld-recaptcha{ transform:scale(.78); } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .ld *{ transition:none !important; animation:none !important; } }