:root{ --navy:#071c42;--navy-2:#0b2b67;--blue:#2469e8;--blue-2:#2b7cf0;--cyan:#22b8c9;--cyan-2:#7ce6ef; --ink:#0c1e3f;--muted:#657591;--line:#dce7f4;--soft:#f5f9ff;--soft-2:#eef6ff;--white:#fff; --green:#14b87a;--green-soft:#e9fbf4;--danger:#d64545;--shadow:0 24px 70px rgba(9,35,78,.12); --shadow-sm:0 12px 36px rgba(9,35,78,.09);--radius:24px;--radius-sm:16px;--max:1280px; } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button,input{font:inherit}.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;left:-9999px;top:12px}.skip-link:focus{left:12px;z-index:9999;background:#fff;padding:10px 14px;border-radius:10px} .site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(213,226,242,.8);transition:.25s}.site-header.scrolled{box-shadow:0 8px 30px rgba(9,35,78,.08)}.header-inner{height:86px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px}.brand img{width:174px;height:auto}.main-nav{display:flex;justify-content:center;gap:31px}.main-nav a{font-size:15px;font-weight:500;color:#334767;transition:.2s}.main-nav a:hover{color:var(--blue)}.header-actions{display:flex;align-items:center;gap:18px}.login-link{font-weight:600;color:var(--navy)}.menu-toggle{display:none;background:none;border:0;width:42px;height:42px;padding:8px}.menu-toggle span{display:block;height:2px;background:var(--navy);margin:6px 0;border-radius:2px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:13px 20px;font-weight:600;transition:.22s;border:1px solid transparent;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 12px 28px rgba(36,105,232,.22)}.btn-secondary{background:#fff;border-color:#cfdcf0;color:var(--navy);box-shadow:0 8px 20px rgba(14,42,80,.05)}.btn-light{background:#fff;color:var(--navy)}.btn-outline{background:#fff;border-color:#bed0ea;color:var(--navy)}.btn-small{padding:11px 17px}.btn-large{padding:15px 23px;font-size:16px}.btn-full{width:100%} .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#eef5ff 0%,#f8fbff 45%,#e7fbff 100%);padding:76px 0 84px}.hero-glow{position:absolute;border-radius:50%;filter:blur(20px);opacity:.6}.hero-glow-a{width:430px;height:430px;background:#bdd4ff;left:-180px;top:40px}.hero-glow-b{width:380px;height:380px;background:#bff9fb;right:-90px;top:70px}.hero-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:9px;color:#0e61d8;font-size:13px;line-height:1.2;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.status-dot{width:10px;height:10px;border-radius:50%;background:#20cf8b;box-shadow:0 0 0 7px rgba(32,207,139,.12)}.hero h1{font-size:clamp(48px,5.3vw,76px);line-height:.98;letter-spacing:-.055em;margin:24px 0 24px;max-width:700px}.hero h1 span{color:var(--blue)}.hero-lead{font-size:19px;line-height:1.7;color:#5d6f8c;max-width:650px;margin:0 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#4d617f;font-size:14px}.hero-trust span{color:var(--green);font-weight:900}.hero-visual{position:relative;padding:20px 18px 36px}.app-window{background:#fff;border:1px solid #cfddf0;border-radius:25px;padding:10px;box-shadow:0 32px 80px rgba(27,71,132,.16);transform:perspective(1400px) rotateY(-1deg)}.app-window-top{height:52px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 10px}.window-dots{display:flex;gap:7px}.window-dots i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.window-dots i:nth-child(2){background:#ffc94b}.window-dots i:nth-child(3){background:#29c889}.fake-url{justify-self:center;min-width:240px;text-align:center;border:1px solid #dbe7f5;border-radius:12px;padding:8px 14px;color:#60708a;font-size:13px}.system-badge{font-size:12px;font-weight:800;color:#0a7a55;display:flex;align-items:center;gap:9px}.app-window-body{overflow:hidden;border-radius:17px;border:1px solid #e1eaf5}.app-window-body img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.floating-card{position:absolute;background:#fff;border:1px solid #dbe8f6;border-radius:17px;padding:14px 16px;display:flex;gap:11px;align-items:center;box-shadow:var(--shadow-sm);min-width:220px}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:14px}.floating-card small{font-size:12px;color:#75849b}.floating-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef5ff;color:var(--blue);font-weight:900}.floating-card-a{right:-35px;top:90px}.floating-card-b{right:-8px;bottom:5px}.floating-card-c{left:-30px;bottom:22px}.floating-card-c .floating-icon{color:var(--green)} .logo-strip{border-block:1px solid #edf2f8;background:#fff}.logo-strip-grid{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}.logo-strip-grid span{padding:18px 10px;font-size:14px;font-weight:700;color:#000000;border-right:1px solid #edf2f8}.logo-strip-grid span:last-child{border-right:0} .section{padding:100px 0}.section-soft{background:linear-gradient(180deg,#f7faff,#eef6ff)}.section-heading{max-width:840px;margin-bottom:46px}.section-heading.centered{text-align:center;margin-inline:auto}.section-heading h2,.trust-copy h2,.demo-copy h2,.final-cta h2{font-size:clamp(36px,4vw,56px);line-height:1.08;letter-spacing:-.04em;margin:14px 0 18px}.section-heading p,.trust-copy p,.demo-copy p{font-size:18px;color:var(--muted);margin:0}.split-heading{max-width:none;display:grid;grid-template-columns:1.05fr .75fr;gap:80px;align-items:end}.split-heading p{padding-bottom:7px}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.benefit-card{padding:30px 28px 32px;border:1px solid #d9e5f2;border-radius:20px;background:#fff;transition:.25s}.benefit-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}.benefit-card .number{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#eaf3ff;color:var(--blue);font-weight:900;margin-bottom:26px}.benefit-card h3{font-size:21px;line-height:1.25;margin:0 0 12px}.benefit-card p{margin:0;color:#62738e} .feature-showcase{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:stretch;background:linear-gradient(135deg,#0d2d6b,#135cba 62%,#1db6c8);border-radius:28px;padding:34px;color:#fff;overflow:hidden}.feature-copy{padding:25px 18px}.feature-tag{font-size:12px;font-weight:700;letter-spacing:.12em;color:#8eeaf0}.feature-copy h3{font-size:38px;line-height:1.1;letter-spacing:-.03em;margin:12px 0 18px}.feature-copy p{color:#dceaff;font-size:16px}.feature-points{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:24px;font-size:14px}.feature-image{border-radius:21px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#fff}.feature-image img{width:100%;height:100%;min-height:390px;object-fit:cover;object-position:top}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}.feature-card{background:#fff;border:1px solid #dbe6f2;border-radius:23px;overflow:hidden;box-shadow:0 12px 35px rgba(9,35,78,.05)}.feature-card-image{height:230px;overflow:hidden;background:#edf4fb}.feature-card-image img{width:100%;height:100%;object-fit:cover;object-position:top}.feature-card-copy{padding:24px}.feature-card-copy .feature-tag{color:var(--blue)}.feature-card-copy h3{font-size:22px;line-height:1.25;margin:9px 0 10px}.feature-card-copy p{margin:0;color:var(--muted)} .demo-section{background:radial-gradient(circle at 80% 20%,#164fa7 0%,#0b2e6b 33%,#071c42 78%);color:#fff;overflow:hidden}.demo-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:60px;align-items:center}.section-kicker.light{color:#8de6ee}.demo-copy p{color:#c8d8f3}.demo-list{display:grid;gap:10px;margin:26px 0 30px;color:#e9f1ff}.video-shell{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:12px;background:rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.2)}.video-shell video{width:100%;display:block;border-radius:19px;background:#0b1731;aspect-ratio:16/9;object-fit:cover}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:0;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 14px 40px rgba(0,0,0,.24);font-size:24px;cursor:pointer}.video-caption{position:absolute;left:28px;right:28px;bottom:26px;background:rgba(7,28,66,.84);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 15px;display:flex;justify-content:space-between;gap:20px;font-size:13px}.video-caption span{color:#c8d8f3} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step-card{position:relative;padding:28px 25px;border:1px solid #dbe6f2;border-radius:20px;background:#fff}.step-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:900;margin-bottom:22px}.step-card h3{font-size:20px;margin:0 0 10px}.step-card p{margin:0;color:var(--muted)} .section-pricing{background:linear-gradient(180deg,#f2f7ff,#edf6ff 70%,#fff)}.billing-toggle{width:max-content;margin:0 auto 38px;padding:6px;border-radius:15px;background:#e3edf9;display:flex}.billing-btn{border:0;background:transparent;padding:13px 26px;border-radius:11px;color:#5d6d87;font-weight:600;cursor:pointer}.billing-btn small{display:block;font-size:10px;color:#10a66d}.billing-btn.active{background:#fff;color:var(--navy);box-shadow:0 6px 17px rgba(9,35,78,.08)}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;gap:22px;align-items:stretch}.price-card{position:relative;background:#fff;border:1px solid #d6e2f0;border-radius:24px;padding:34px 32px;box-shadow:0 12px 40px rgba(9,35,78,.05)}.price-card.featured{border:2px solid var(--blue);box-shadow:0 20px 58px rgba(36,105,232,.14)}.popular-badge{position:absolute;top:-17px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;border-radius:20px;padding:7px 18px;font-size:11px;font-weight:900;letter-spacing:.06em}.plan-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:#0d62db}.price-card h3{font-size:30px;margin:9px 0 7px}.price-card-top p{color:var(--muted);min-height:54px}.price-row{display:flex;align-items:flex-end;gap:5px;margin:22px 0 7px}.currency{font-size:22px;font-weight:900;align-self:flex-start;margin-top:12px}.price-value{font-size:58px;line-height:1;font-weight:700;letter-spacing:-.05em}.price-cycle{font-size:14px;color:#5c6c86;margin-bottom:8px}.daily-price{display:inline-block;background:#e7f8ef;color:#087d50;border-radius:15px;padding:7px 11px;font-size:12px;font-weight:700}.daily-price.blue{background:#e9f2ff;color:#1264d6}.plan-list{list-style:none;padding:0;margin:28px 0 30px;display:grid;gap:13px}.plan-list li{position:relative;padding-left:28px;color:#455872}.plan-list li:before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e7f8ef;color:#09a56a;font-size:12px;font-weight:900}.pricing-note{text-align:center;margin-top:26px;color:#687993}.pricing-note a{color:var(--blue);font-weight:800} .trust-section{background:#fff}.trust-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mini-trust-card{padding:24px;border:1px solid #dce7f3;border-radius:18px}.mini-trust-card span{color:var(--blue);font-weight:900}.mini-trust-card h3{margin:10px 0 6px;font-size:18px}.mini-trust-card p{margin:0;color:var(--muted);font-size:14px} .faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.faq-intro h2{font-size:44px;margin:14px 0 14px}.faq-intro p{color:var(--muted);font-size:17px;margin-bottom:24px}.faq-list{display:grid;gap:12px}.faq-item{background:#fff;border:1px solid #dbe6f2;border-radius:16px;overflow:hidden}.faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:#fff;padding:20px 21px;font-weight:500;color:var(--ink);cursor:pointer}.faq-item button i{font-style:normal;font-size:24px;color:var(--blue);transition:.2s}.faq-answer{max-height:0;overflow:hidden;transition:max-height .28s ease}.faq-answer p{margin:0;padding:0 21px 20px;color:var(--muted)}.faq-item.open .faq-answer{max-height:220px}.faq-item.open button i{transform:rotate(45deg)} .final-cta{padding:0 0 90px;background:#fff}.final-cta-inner{background:linear-gradient(135deg,#0b2c6a 0%,#166bd5 55%,#1bb8c5 100%);border-radius:28px;padding:52px 56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:50px;box-shadow:0 24px 65px rgba(19,78,158,.2)}.final-cta h2{font-size:42px;margin-bottom:12px}.final-cta p{margin:0;color:#dbe9ff}.final-cta-actions{display:grid;gap:13px;min-width:220px}.final-login{text-align:center;font-weight:800;color:#fff} .site-footer{background:#07172f;color:#c3d0e2;padding:56px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr .75fr 1fr;gap:70px}.footer-brand img{filter:brightness(0) invert(1);opacity:.95}.footer-brand p{max-width:380px;color:#95a8c2}.site-footer h4{color:#fff;margin:0 0 14px}.site-footer a{display:block;margin:8px 0;color:#b6c5d9}.site-footer a:hover{color:#fff}.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:13px;color:#8295af}.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:900;background:#0fb56f;color:#fff;display:flex;align-items:center;gap:8px;padding:11px 15px 11px 9px;border-radius:999px;box-shadow:0 12px 32px rgba(11,130,81,.28)}.whatsapp-float span{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:12px;font-weight:900}.whatsapp-float strong{font-size:13px} .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.12s} @media (max-width:1100px){.main-nav{gap:18px}.header-actions .btn{display:none}.hero-grid{grid-template-columns:1fr;gap:44px}.hero-copy{text-align:center}.hero h1,.hero-lead{margin-inline:auto}.hero-actions,.hero-trust{justify-content:center}.hero-visual{max-width:850px;margin-inline:auto}.benefit-grid,.steps-grid{grid-template-columns:1fr 1fr}.feature-showcase,.demo-grid,.trust-grid{grid-template-columns:1fr}.feature-showcase{gap:10px}.split-heading,.faq-layout{grid-template-columns:1fr;gap:24px}.feature-grid{grid-template-columns:1fr 1fr}.floating-card-a{right:-10px}.floating-card-c{left:-8px}} @media (max-width:820px){.container{width:min(100% - 28px,var(--max))}.header-inner{height:74px;grid-template-columns:auto auto;justify-content:space-between}.brand img{width:152px}.menu-toggle{display:block}.main-nav{position:fixed;left:14px;right:14px;top:84px;display:grid;gap:0;background:#fff;border:1px solid #dbe6f3;border-radius:18px;padding:10px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.22s}.main-nav.open{opacity:1;visibility:visible;transform:none}.main-nav a{padding:14px 12px;border-bottom:1px solid #edf2f7}.main-nav a:last-child{border-bottom:0}.header-actions{display:none}.hero{padding:50px 0 62px}.hero h1{font-size:48px}.hero-lead{font-size:17px}.app-window-top{grid-template-columns:auto 1fr}.system-badge{display:none}.fake-url{min-width:auto}.floating-card{display:none}.logo-strip-grid{grid-template-columns:repeat(2,1fr)}.logo-strip-grid span:nth-child(5){grid-column:1/-1}.section{padding:72px 0}.benefit-grid,.steps-grid,.feature-grid,.pricing-grid,.footer-grid{grid-template-columns:1fr}.pricing-grid{max-width:520px;margin-inline:auto}.feature-image img{min-height:300px}.feature-showcase{padding:22px}.feature-copy{padding:15px 6px}.feature-copy h3{font-size:32px}.feature-card-image{height:210px}.final-cta-inner{display:grid;padding:36px 28px}.final-cta-actions{min-width:0}.footer-grid{gap:30px}.footer-bottom{flex-direction:column;gap:8px}.trust-cards{grid-template-columns:1fr 1fr}.video-caption{position:static;margin-top:10px}.video-play{width:64px;height:64px}.whatsapp-float strong{display:none}.whatsapp-float{padding:8px;right:15px;bottom:15px}} @media (max-width:520px){.container{width:calc(100% - 24px)}.hero{padding-top:38px}.eyebrow,.section-kicker{font-size:11px}.hero h1{font-size:40px;line-height:1.02;margin-top:18px}.hero-lead{font-size:16px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.hero-trust{display:grid;gap:8px;text-align:left;width:max-content;max-width:100%;margin-inline:auto}.hero-visual{padding:4px 0 0}.app-window{padding:7px;border-radius:18px}.app-window-top{height:42px}.window-dots{display:none}.fake-url{font-size:11px;padding:6px 8px}.section-heading h2,.trust-copy h2,.demo-copy h2{font-size:34px}.section-heading p,.trust-copy p,.demo-copy p{font-size:16px}.benefit-grid,.steps-grid,.trust-cards{grid-template-columns:1fr}.benefit-card{padding:24px}.feature-showcase{border-radius:20px;padding:16px}.feature-copy h3{font-size:29px}.feature-points{grid-template-columns:1fr}.feature-image img{min-height:240px}.feature-card-image{height:190px}.billing-toggle{width:100%}.billing-btn{flex:1;padding-inline:12px}.price-card{padding:30px 22px}.price-value{font-size:52px}.faq-intro h2{font-size:35px}.final-cta{padding-bottom:60px}.final-cta-inner{padding:30px 22px;border-radius:20px}.final-cta h2{font-size:34px}.whatsapp-float{right:12px;bottom:12px}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn:hover{transform:none}} /* ========================================================= LA PIEZA 32 · COMPACT UX PRO · 2026 PEGAR AL FINAL DE lp32-home-pro.css ========================================================= */ /* ========================================================= 1. HERO - TODO VISIBLE EN UNA PANTALLA PC ========================================================= */ @media (min-width:1101px){ .hero{ min-height:calc(100vh - 86px); padding:38px 0 24px; display:flex; align-items:center; } .hero-grid{ grid-template-columns:.88fr 1.12fr; gap:52px; align-items:center; } .hero-copy{ transform:translateY(-10px); } .eyebrow{ margin-bottom:0; } .hero h1{ font-size:clamp(48px,4.6vw,68px); line-height:.98; margin:18px 0 18px; max-width:640px; } .hero-lead{ font-size:17px; line-height:1.58; max-width:610px; margin-bottom:22px; } .hero-actions{ gap:10px; } .hero-actions .btn-large{ padding:13px 21px; font-size:15px; } .hero-trust{ margin-top:20px; gap:18px; font-size:13px; } .hero-visual{ padding:5px 8px 18px; } .app-window{ border-radius:22px; padding:8px; } .app-window-top{ height:44px; } /* ========================================================= HERO · CAPTURA NÍTIDA SIN DISTORSIÓN ========================================================= */ .app-window{ background:#fff; border:1px solid #cfddf0; border-radius:23px; padding:8px; box-shadow: 0 28px 70px rgba(27,71,132,.15); overflow:visible; } .app-window-body{ width:100%; height:auto !important; overflow:hidden; border-radius:15px; border:1px solid #e1eaf5; background:#f5f8fc; } .app-window-body img{ display:block; width:100% !important; height:auto !important; max-width:100%; aspect-ratio:auto !important; object-fit:contain !important; object-position:top center !important; image-rendering:auto; transform:none !important; } .floating-card{ padding:11px 13px; min-width:200px; } .floating-card-a{ right:-18px; top:62px; } .floating-card-b{ right:-4px; bottom:0; } .floating-card-c{ left:-18px; bottom:12px; } .floating-icon{ width:38px; height:38px; } .floating-card strong{ font-size:13px; } .floating-card small{ font-size:11px; } } /* ========================================================= 2. FRANJA INFERIOR HERO ========================================================= */ .logo-strip-grid span{ padding:13px 10px; } /* ========================================================= 3. REDUCIR ALTURA GENERAL DE TODAS LAS SECCIONES ========================================================= */ .section{ padding:72px 0; } .section-heading{ margin-bottom:32px; } .section-heading h2, .trust-copy h2, .demo-copy h2{ font-size:clamp(34px,3.4vw,49px); line-height:1.07; margin:11px 0 14px; } .section-heading p, .trust-copy p, .demo-copy p{ font-size:16px; line-height:1.6; } /* ========================================================= 4. MENOS TAREAS, MÁS CONTROL CARDS UX MÁS DINÁMICAS ========================================================= */ .benefit-grid{ gap:16px; } .benefit-card{ position:relative; overflow:hidden; min-height:230px; padding:24px 23px 25px; border-radius:22px; border:1px solid #d9e6f5; background: linear-gradient(145deg,#ffffff 0%,#fbfdff 100%); box-shadow:0 10px 30px rgba(12,42,90,.045); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .benefit-card::before{ content:""; position:absolute; width:130px; height:130px; border-radius:50%; right:-60px; top:-60px; background:linear-gradient( 135deg, rgba(36,105,232,.12), rgba(34,184,201,.05) ); transition:.3s ease; } .benefit-card::after{ content:""; position:absolute; left:0; bottom:0; height:4px; width:0; background:linear-gradient( 90deg, var(--blue), var(--cyan) ); transition:.32s ease; } .benefit-card:hover{ transform:translateY(-8px); border-color:#bed5f3; box-shadow:0 22px 48px rgba(18,65,135,.11); } .benefit-card:hover::after{ width:100%; } .benefit-card:hover::before{ transform:scale(1.18); } .benefit-card .number{ position:relative; z-index:2; width:46px; height:46px; margin-bottom:20px; border-radius:14px; background:linear-gradient(135deg,#e8f2ff,#edfaff); border:1px solid #d8e9fb; color:#1768df; box-shadow:0 7px 18px rgba(36,105,232,.08); } .benefit-card h3{ position:relative; z-index:2; font-size:19px; line-height:1.25; margin-bottom:9px; } .benefit-card p{ position:relative; z-index:2; font-size:14px; line-height:1.65; } /* ========================================================= 5. VIDEO DENTRO DE LAPTOP ========================================================= */ .demo-section{ padding:68px 0; } .demo-grid{ grid-template-columns:.78fr 1.22fr; gap:50px; } .demo-copy h2{ max-width:500px; } .demo-copy p{ max-width:520px; } .demo-list{ margin:20px 0 24px; gap:7px; font-size:15px; } /* carcasa laptop */ .video-shell{ position:relative; padding:30px 26px 43px; border-radius:28px 28px 18px 18px; background: linear-gradient( 145deg, #243c66, #10284e 65%, #0b1c38 ); border:1px solid rgba(255,255,255,.22); box-shadow: 0 30px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); } .video-shell::before{ content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#557095; left:50%; top:11px; transform:translateX(-50%); box-shadow: 0 0 0 2px #0a1932, 0 0 8px rgba(255,255,255,.2); } .video-shell::after{ content:""; position:absolute; left:-5%; right:-5%; bottom:-19px; height:22px; background: linear-gradient( 180deg, #cbd6e4 0%, #8798ae 48%, #4c5d73 100% ); border-radius:3px 3px 18px 18px; box-shadow:0 12px 25px rgba(0,0,0,.24); } .video-shell video{ position:relative; z-index:2; width:100%; aspect-ratio:16/9; border-radius:9px; border:2px solid #09172d; object-fit:cover; background:#07152c; } .video-play{ z-index:5; width:68px; height:68px; } .video-caption{ z-index:4; left:42px; right:42px; bottom:51px; padding:9px 13px; } /* ========================================================= 6. ACTIVACIÓN SIMPLE - CARDS PRO ========================================================= */ .steps-grid{ gap:16px; } .step-card{ overflow:hidden; position:relative; min-height:218px; padding:24px 22px; border-radius:22px; background: linear-gradient(145deg,#fff,#fbfdff); border:1px solid #d9e5f3; transition:.28s ease; } .step-card::before{ content:""; position:absolute; right:-40px; bottom:-55px; width:130px; height:130px; border-radius:50%; background:rgba(36,105,232,.055); } .step-card:hover{ transform:translateY(-7px); box-shadow:0 20px 42px rgba(10,48,105,.1); border-color:#bcd6f5; } .step-icon{ position:relative; z-index:2; width:43px; height:43px; margin-bottom:19px; border-radius:13px; box-shadow:0 9px 20px rgba(36,105,232,.17); } .step-card h3{ position:relative; z-index:2; font-size:18px; margin-bottom:8px; } .step-card p{ position:relative; z-index:2; font-size:14px; line-height:1.6; } @media (min-width:1101px){ .hero-grid{ grid-template-columns: .92fr 1.08fr !important; gap:42px !important; } .hero-visual{ max-width:760px; width:100%; justify-self:end; padding: 0 4px 15px !important; } } /* pequeña línea visual que conecta los pasos */ @media (min-width:1101px){ .steps-grid{ position:relative; } .steps-grid::before{ content:""; position:absolute; height:2px; left:8%; right:8%; top:45px; background: linear-gradient( 90deg, transparent, #d1e3f9 8%, #b8d7fa 50%, #d1e3f9 92%, transparent ); z-index:0; } .step-card{ z-index:1; } } /* ========================================================= 7. PLANES MÁS HORIZONTALES Y COMPACTOS ========================================================= */ .section-pricing{ padding:68px 0 70px; } .section-pricing .section-heading{ margin-bottom:26px; } .section-pricing .section-heading h2{ font-size:clamp(36px,3.3vw,48px); } .billing-toggle{ margin-bottom:28px; } .pricing-grid{ grid-template-columns:repeat(2,minmax(0,480px)); gap:20px; } .price-card{ padding:27px 28px 26px; border-radius:22px; } .price-card h3{ font-size:27px; line-height:1.15; margin:7px 0 6px; } .price-card-top p{ font-size:14px; line-height:1.5; min-height:auto; margin:8px 0 0; } .price-row{ margin:15px 0 5px; } .currency{ font-size:19px; margin-top:8px; } .price-value{ font-size:50px; } .price-cycle{ font-size:13px; margin-bottom:6px; } .daily-price{ padding:5px 9px; } .plan-list{ margin:20px 0 22px; gap:9px; display:grid; grid-template-columns:1fr 1fr; column-gap:18px; } .plan-list li{ padding-left:25px; font-size:13px; line-height:1.42; } .plan-list li::before{ width:18px; height:18px; font-size:10px; } /* ========================================================= 8. NUEVO BLOQUE DE AMPLIACIÓN SUCURSALES + DOCTORES ========================================================= */ .plan-upgrade{ max-width:982px; margin:22px auto 0; padding:16px 20px; border-radius:18px; background: linear-gradient( 135deg, #edf5ff, #ecfbfd ); border:1px solid #cfe2f7; display:flex; align-items:center; justify-content:space-between; gap:22px; } .plan-upgrade-copy{ display:flex; align-items:center; gap:14px; } .plan-upgrade-icon{ flex:0 0 auto; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#fff; border:1px solid #d4e7f8; color:var(--blue); font-size:22px; font-weight:900; } .plan-upgrade strong{ display:block; color:var(--navy); font-size:15px; margin-bottom:2px; } .plan-upgrade p{ margin:0; font-size:13px; color:#637591; } .plan-upgrade .btn{ white-space:nowrap; padding:11px 17px; font-size:13px; } /* ========================================================= 9. HECHO PARA ODONTOLOGÍA ========================================================= */ .trust-section{ padding:72px 0; } .trust-grid{ grid-template-columns:.88fr 1.12fr; gap:55px; } .trust-copy h2{ font-size:clamp(38px,3.5vw,52px); } .trust-cards{ gap:14px; } .mini-trust-card{ position:relative; overflow:hidden; min-height:170px; padding:22px 21px; border-radius:20px; background: linear-gradient( 145deg, #fff, #fbfdff ); box-shadow:0 9px 28px rgba(12,44,91,.04); transition:.28s ease; } .mini-trust-card::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:linear-gradient( 90deg, var(--blue), var(--cyan) ); transition:.3s ease; } .mini-trust-card:hover{ transform:translateY(-6px); box-shadow:0 19px 40px rgba(12,52,111,.1); border-color:#bdd6f3; } .mini-trust-card:hover::after{ width:100%; } .mini-trust-card > span{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#edf5ff; font-size:13px; } .mini-trust-card h3{ font-size:17px; margin:11px 0 5px; } .mini-trust-card p{ line-height:1.55; font-size:13px; } /* ========================================================= 10. TABLET ========================================================= */ @media (max-width:1100px){ .hero{ min-height:auto; padding:48px 0 55px; } .section{ padding:62px 0; } .plan-list{ grid-template-columns:1fr; } .plan-upgrade{ max-width:520px; flex-direction:column; align-items:flex-start; } .plan-upgrade .btn{ width:100%; } } /* ========================================================= 11. MÓVIL ========================================================= */ @media (max-width:820px){ .hero{ padding:34px 0 38px; } .hero-copy{ transform:none; } .section{ padding:54px 0; } .benefit-card, .step-card{ min-height:auto; } .demo-section{ padding:54px 0 64px; } .video-shell{ padding:24px 14px 33px; border-radius:20px 20px 13px 13px; } .video-shell::after{ bottom:-13px; height:16px; } .video-caption{ position:static; margin-top:9px; } .price-card{ padding:27px 22px; } .plan-list{ grid-template-columns:1fr; } .trust-section{ padding:55px 0; } } /* ========================================================= 12. MÓVIL PEQUEÑO ========================================================= */ @media (max-width:520px){ .hero h1{ font-size:38px; } .hero-lead{ line-height:1.55; } .section-heading h2, .trust-copy h2, .demo-copy h2{ font-size:32px; } .benefit-card, .step-card, .mini-trust-card{ padding:21px 19px; } .price-card h3{ font-size:25px; } .price-value{ font-size:47px; } .plan-upgrade{ padding:15px; } .plan-upgrade-copy{ align-items:flex-start; } } /* ========================================================= LA PIEZA 32 HERO PRODUCT FLOW · UX PRO ========================================================= */ /* ========================================================= HERO GENERAL ========================================================= */ .hero-product{ position:relative; overflow:hidden; background: radial-gradient( circle at 88% 18%, rgba(120,238,244,.28), transparent 34% ), radial-gradient( circle at 4% 62%, rgba(88,142,255,.18), transparent 38% ), linear-gradient( 135deg, #eef5ff 0%, #f9fbff 48%, #e9fbff 100% ); } /* ========================================================= PC ========================================================= */ @media (min-width:1101px){ .hero-product{ min-height:calc(100vh - 86px); height:calc(100vh - 86px); padding: 20px 0 18px !important; display:flex; align-items:center; } .hero-product .hero-grid{ width:min( var(--max), calc(100% - 40px) ); grid-template-columns: .88fr 1.12fr !important; gap:44px !important; align-items:center; } .hero-product .hero-copy{ transform: translateY(-5px); } .hero-product .hero h1{ margin: 17px 0 17px !important; font-size: clamp( 47px, 4.4vw, 66px ) !important; line-height:.98 !important; } .hero-product .hero-lead{ margin-bottom: 20px !important; font-size: 16.5px !important; line-height: 1.58 !important; } .hero-product .hero-trust{ margin-top: 17px !important; } } /* ========================================================= CONTENEDOR VISUAL ========================================================= */ .hero-product-visual{ position:relative; width:100%; max-width:760px; height: clamp( 505px, 63vh, 610px ); justify-self:end; } /* pequeño estado superior */ .hero-product-status{ position:absolute; top:9px; right:16px; z-index:40; display:flex; align-items:center; gap:9px; padding: 8px 13px; border: 1px solid rgba(194,224,227,.9); border-radius: 999px; background: rgba(255,255,255,.91); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(18,65,120,.08); color:#087b58; font-size:11px; font-weight:800; } /* ========================================================= ÁREA DE SCROLL VISUAL ========================================================= */ .hero-product-flow{ position:relative; width:100%; height:100%; overflow:hidden; padding: 38px 20px 34px; isolation:isolate; } /* fade superior */ .hero-product-flow::before{ content:""; position:absolute; z-index:20; pointer-events:none; left:0; right:0; top:0; height:115px; background: linear-gradient( to bottom, #f1f9ff 0%, rgba(241,249,255,.96) 23%, rgba(241,249,255,.72) 48%, rgba(241,249,255,0) 100% ); } .hero-product-flow::after{ content:""; position:absolute; z-index:20; pointer-events:none; left:0; right:0; bottom:0; height:125px; background: linear-gradient( to top, #eefaff 0%, rgba(238,250,255,.97) 24%, rgba(238,250,255,.68) 52%, rgba(238,250,255,0) 100% ); } /* ========================================================= TRACK ========================================================= */ .hero-product-track{ display:flex; flex-direction:column; gap:19px; will-change:transform; animation: lp32HeroProductFlow 32s linear infinite; } .hero-product-flow:hover .hero-product-track{ animation-play-state: paused; } .hero-product-flow.is-paused .hero-product-track{ animation-play-state: paused; } /* ========================================================= CAPTURAS ========================================================= */ .hero-shot{ width:100%; max-width:720px; aspect-ratio:16 / 9; overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 22px 55px rgba(21,67,126,.10); } .hero-shot:hover{ transform: translateY(-3px) scale(1.006); box-shadow: 0 28px 58px rgba(11,51,105,.16); } /* tamaño grande */ .hero-shot-wide{ width:94%; } /* tamaño principal */ .hero-shot-large{ width:88%; margin-left: 2%; } /* tamaño secundario */ .hero-shot-medium{ width:73%; margin-left: 3%; } /* alineación derecha */ .hero-shot-right{ margin-left:auto; } /* ========================================================= TITULO DE CADA CAPTURA ========================================================= */ .hero-shot-bar{ display:flex; align-items:center; justify-content: space-between; gap:15px; min-height:30px; padding: 2px 7px 6px; color:#193352; font-size:10.5px; } .hero-shot-bar span{ font-weight:800; } .hero-shot-bar small{ color:#7890aa; font-size:9px; white-space:nowrap; } /* ========================================================= IMPORTANTE: IMAGEN SIN DISTORSIÓN ========================================================= */ .hero-shot img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; object-position:center; image-rendering:auto; } /* ========================================================= CHIPS FLOTANTES ========================================================= */ .hero-product-chip{ position:absolute; z-index:45; display:flex; align-items:center; gap:10px; min-width:195px; padding: 10px 12px; background: rgba(255,255,255,.95); backdrop-filter: blur(16px); border: 1px solid rgba(210,226,242,.92); border-radius:16px; box-shadow: 0 17px 40px rgba(13,55,112,.11); } .hero-product-chip > span{ flex: 0 0 auto; width:37px; height:37px; display:grid; place-items:center; border-radius:11px; background: linear-gradient( 145deg, #eef5ff, #edfaff ); color:#166be1; font-weight:900; } .hero-product-chip strong, .hero-product-chip small{ display:block; } .hero-product-chip strong{ font-size:12px; color:#173252; line-height:1.25; } .hero-product-chip small{ margin-top:2px; font-size:10px; color:#7588a1; line-height:1.25; } .hero-chip-one{ top:78px; right:-5px; } .hero-chip-two{ right:10px; bottom:61px; } /* ========================================================= MOVIMIENTO ========================================================= */ @keyframes lp32HeroProductFlow{ 0%{ transform: translate3d( 0, 0, 0 ); } 100%{ transform: translate3d( 0, -50%, 0 ); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .hero-product{ height:auto !important; min-height:auto !important; padding: 42px 0 46px !important; } .hero-product-visual{ width:100%; max-width:850px; height:530px; margin: 0 auto; } .hero-product-flow{ padding: 25px 17px; } .hero-chip-one{ right:3px; } .hero-chip-two{ right:9px; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width:820px){ .hero-product{ padding: 31px 0 32px !important; } .hero-product .hero-grid{ gap:30px !important; } .hero-product-visual{ height:420px; max-width:620px; } .hero-product-flow{ padding: 20px 5px; } .hero-product-track{ gap:13px; animation-duration: 36s; } .hero-shot{ padding:5px; border-radius:15px; } .hero-shot-wide{ width:96%; } .hero-shot-large{ width:90%; } .hero-shot-medium{ width:78%; } .hero-shot-bar{ min-height:26px; font-size:9.5px; } .hero-shot-bar small{ font-size:8px; } .hero-shot img{ border-radius:10px; } .hero-product-chip{ display:none; } .hero-product-status{ right:9px; top:3px; } .hero-product-flow::before, .hero-product-flow::after{ height:72px; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media (max-width:520px){ .hero-product-visual{ height:330px; } .hero-product .hero-copy{ text-align:center; } .hero-product .hero-actions{ display:grid; } .hero-product .hero-actions .btn{ width:100%; } .hero-product-flow{ padding: 14px 0; } .hero-product-status{ font-size:9px; padding: 6px 9px; } .hero-product-status .status-dot{ width:7px; height:7px; } .hero-shot{ box-shadow: 0 13px 30px rgba(11,51,105,.10); } .hero-shot-wide{ width:98%; } .hero-shot-large{ width:94%; } .hero-shot-medium{ width:83%; } .hero-shot-bar{ padding: 1px 5px 4px; } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (prefers-reduced-motion:reduce){ .hero-product-track{ animation:none !important; transform:none !important; } .hero-product-flow{ overflow-y:auto; } } /* ========================================================= HERO FLOW · TAMAÑO UNIFORME + NITIDEZ FINAL LA PIEZA 32 · 2026 ========================================================= */ /* ========================================================= CONTENEDOR GENERAL ========================================================= */ .hero-product-visual{ position:relative; width:100%; max-width:760px; height:clamp(510px,63vh,610px); justify-self:end; } /* ========================================================= ÁREA VISIBLE DEL CARRUSEL ========================================================= */ .hero-product-flow{ position:relative; width:100%; height:100%; overflow:hidden; padding:14px 8px 18px; isolation:isolate; } /* ========================================================= FADE SUPERIOR / INFERIOR MÁS SUAVE PARA NO LAVAR LAS CAPTURAS ========================================================= */ .hero-product-flow::before, .hero-product-flow::after{ content:""; position:absolute; left:0; right:0; z-index:20; pointer-events:none; height:54px; } .hero-product-flow::before{ top:0; background: linear-gradient( to bottom, rgba(242,249,255,.88) 0%, rgba(242,249,255,.36) 48%, rgba(242,249,255,0) 100% ); } .hero-product-flow::after{ bottom:0; background: linear-gradient( to top, rgba(238,250,255,.90) 0%, rgba(238,250,255,.34) 48%, rgba(238,250,255,0) 100% ); } /* ========================================================= TRACK DE CAPTURAS ========================================================= */ .hero-product-track{ display:flex; flex-direction:column; gap:18px; animation: lp32HeroFlowSharp 36s linear infinite; /* * No utilizamos translate3d. * Evita suavizado innecesario en Chrome/Edge. */ will-change:auto; transform:none; } /* PAUSA AL PASAR EL MOUSE */ .hero-product-flow:hover .hero-product-track{ animation-play-state:paused; } .hero-product-flow.is-paused .hero-product-track{ animation-play-state:paused; } /* ========================================================= TODAS LAS CAPTURAS MISMO ANCHO VISUAL ========================================================= */ .hero-shot, .hero-shot-wide, .hero-shot-large, .hero-shot-medium, .hero-shot-right{ position:relative; width:700px !important; max-width:100% !important; height:auto !important; /* * MUY IMPORTANTE * NO FORZAR 16:9. * * Cada WebP mantiene su proporción original. */ aspect-ratio:auto !important; margin: 0 auto !important; flex:none; overflow:hidden; padding:0; background:#fff; border: 1px solid rgba(205,220,238,.92); border-radius:16px; box-shadow: 0 16px 38px rgba(11,51,105,.09); transform:none !important; transition: box-shadow .25s ease, border-color .25s ease; } /* ========================================================= HOVER SIN SCALE PARA NO BORRAR TEXTO ========================================================= */ .hero-shot:hover{ transform:none !important; border-color: rgba(190,211,236,.98); box-shadow: 0 19px 42px rgba(11,51,105,.11); } /* ========================================================= CABECERA DE CADA CAPTURA ========================================================= */ .hero-shot-bar{ min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 7px 11px; color:#173252; background:#fff; border-bottom: 1px solid #edf2f7; } .hero-shot-bar span{ font-size:11px; line-height:1.2; font-weight:800; } .hero-shot-bar small{ font-size:9.5px; line-height:1.2; color:#7c8da5; white-space:nowrap; } /* ========================================================= IMAGEN REAL NITIDEZ Y PROPORCIÓN ORIGINAL ========================================================= */ .hero-shot img{ display:block; width:100% !important; height:auto !important; max-width:100% !important; /* * NO estirar. * NO recortar. * NO forzar 16:9. */ aspect-ratio:auto !important; object-fit:contain !important; object-position: center top !important; margin:0; padding:0; border:0; border-radius:0; background:#fff; opacity:1 !important; filter:none !important; transform:none !important; image-rendering:auto; -webkit-backface-visibility:visible; backface-visibility:visible; } /* Chrome / Edge: cuando está disponible, ayuda a conservar detalle en capturas de interfaz */ @supports (image-rendering:-webkit-optimize-contrast){ .hero-shot img{ image-rendering: -webkit-optimize-contrast; } } /* ========================================================= MOVIMIENTO VERTICAL ========================================================= */ @keyframes lp32HeroFlowSharp{ 0%{ transform: translateY(0); } 100%{ transform: translateY(-50%); } } /* ========================================================= PC ========================================================= */ @media (min-width:1101px){ .hero-product-visual{ max-width:760px; height: clamp( 510px, 63vh, 610px ); } .hero-product-flow{ padding: 14px 8px 18px; } .hero-shot, .hero-shot-wide, .hero-shot-large, .hero-shot-medium, .hero-shot-right{ width: 700px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .hero-product-visual{ width:100%; max-width:760px; height:520px; margin: 0 auto; } .hero-product-flow{ padding: 12px 6px 16px; } .hero-shot, .hero-shot-wide, .hero-shot-large, .hero-shot-medium, .hero-shot-right{ width: 680px !important; max-width: 100% !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width:820px){ .hero-product-visual{ width:100%; max-width:100%; height:400px; margin: 0 auto; } .hero-product-flow{ padding: 10px 0; } .hero-product-track{ gap:12px; animation-duration:40s; } .hero-shot, .hero-shot-wide, .hero-shot-large, .hero-shot-medium, .hero-shot-right{ width: 100% !important; max-width: 100% !important; border-radius:13px; } .hero-shot img{ width: 100% !important; height: auto !important; aspect-ratio: auto !important; } .hero-product-flow::before, .hero-product-flow::after{ height:38px; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media (max-width:520px){ .hero-product-visual{ height:320px; } .hero-product-flow{ padding: 8px 0; } .hero-product-track{ gap:10px; animation-duration:42s; } .hero-shot-bar{ min-height:29px; padding: 5px 8px; } .hero-shot-bar span{ font-size:10px; } .hero-shot-bar small{ font-size:8.5px; } .hero-shot, .hero-shot-wide, .hero-shot-large, .hero-shot-medium, .hero-shot-right{ border-radius:11px; box-shadow: 0 12px 26px rgba(11,51,105,.08); } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (prefers-reduced-motion:reduce){ .hero-product-track{ animation:none !important; transform:none !important; } .hero-product-flow{ overflow-y:auto; } } /* ========================================================= HERO · AJUSTE FINAL DE POSICIÓN Mover capturas ligeramente a la derecha ========================================================= */ @media (min-width:1101px){ .hero-product .hero-grid{ grid-template-columns: .91fr 1.09fr !important; gap:54px !important; } .hero-product-visual{ position:relative; max-width:760px; justify-self:end; transform: translateX(35px); } } /* ========================================================= HERO · POSICIÓN FINAL MÁS A LA DERECHA ========================================================= */ @media (min-width:1101px){ .hero-product .hero-grid{ grid-template-columns:.95fr 1.05fr !important; gap:30px !important; } .hero-product-visual{ max-width:760px !important; justify-self:end !important; transform:translateX(72px) !important; } } /* ========================================================= MENOS TAREAS, MÁS CONTROL · LP32 PRO ========================================================= */ .lp32-features-pro{ position: relative; width: 100%; padding: 54px 0 68px; background: radial-gradient(circle at 10% 15%, rgba(36, 112, 235, .055), transparent 26%), radial-gradient(circle at 90% 88%, rgba(32, 185, 205, .055), transparent 25%), #ffffff; overflow: hidden; } .lp32-container{ width: min(1420px, calc(100% - 48px)); margin: 0 auto; } /* CABECERA */ .lp32-features-heading{ max-width: 980px; margin: 0 auto 42px; text-align: center; } .lp32-eyebrow{ display: inline-block; margin-bottom: 14px; color: #1263df; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 2.3px; } .lp32-features-heading h2{ margin: 0; color: #071a3d; font-size: clamp(38px, 3.3vw, 57px); line-height: 1.04; font-weight: 700; letter-spacing: -1.7px; } .lp32-features-heading p{ max-width: 900px; margin: 20px auto 0; color: #62718c; font-size: 18px; line-height: 1.65; } /* GRID */ .lp32-feature-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* CARD */ .lp32-feature-card{ position: relative; min-height: 292px; padding: 30px 28px 28px; background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 58%, rgba(244,249,255,.92) 100% ); border: 1px solid #d7e6f6; border-radius: 25px; box-shadow: 0 12px 34px rgba(13, 50, 104, .035); overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .lp32-feature-card:hover{ transform: translateY(-7px); border-color: rgba(31, 111, 235, .32); box-shadow: 0 22px 50px rgba(11, 55, 117, .10); } /* DECORACIÓN */ .lp32-feature-decoration{ position: absolute; z-index: 0; top: -49px; right: -43px; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient( 145deg, rgba(229,240,253,.9), rgba(237,247,254,.65) ); pointer-events: none; } /* ICONO */ .lp32-feature-icon{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin-bottom: 24px; border-radius: 22px; color: #1266df; background: linear-gradient( 145deg, #f1f8ff 0%, #e8f4ff 100% ); border: 1px solid #d7e9fb; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 16px rgba(35, 107, 203, .06); } .lp32-feature-icon svg{ display: block; width: 52px; height: 52px; overflow: visible; } /* TEXTO */ .lp32-feature-card h3{ position: relative; z-index: 2; margin: 0 0 13px; color: #071a3d; font-size: 21px; line-height: 1.17; font-weight: 700; letter-spacing: -.35px; } .lp32-feature-card p{ position: relative; z-index: 2; margin: 0; color: #60718d; font-size: 15.5px; line-height: 1.6; } /* PEQUEÑA LÍNEA INTERACTIVA */ .lp32-feature-card::after{ content: ""; position: absolute; left: 28px; bottom: 0; width: 0; height: 3px; border-radius: 10px; background: linear-gradient( 90deg, #236fe7, #20b9cd ); transition: width .28s ease; } .lp32-feature-card:hover::after{ width: 72px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px){ .lp32-features-pro{ padding: 48px 0 58px; } .lp32-feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp32-feature-card{ min-height: 260px; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 640px){ .lp32-features-pro{ padding: 42px 0 48px; } .lp32-container{ width: min(100% - 28px, 1420px); } .lp32-features-heading{ margin-bottom: 30px; } .lp32-eyebrow{ margin-bottom: 10px; font-size: 12px; letter-spacing: 1.8px; } .lp32-features-heading h2{ font-size: 31px; line-height: 1.08; letter-spacing: -.8px; } .lp32-features-heading p{ margin-top: 15px; font-size: 15.5px; line-height: 1.6; } .desktop-only{ display: none; } .lp32-feature-grid{ grid-template-columns: 1fr; gap: 14px; } .lp32-feature-card{ min-height: auto; padding: 22px 20px 23px; border-radius: 20px; } .lp32-feature-icon{ width: 64px; height: 64px; margin-bottom: 18px; border-radius: 18px; } .lp32-feature-icon svg{ width: 43px; height: 43px; } .lp32-feature-card h3{ margin-bottom: 8px; font-size: 19px; } .lp32-feature-card p{ font-size: 14.5px; line-height: 1.55; } .lp32-feature-decoration{ width: 95px; height: 95px; top: -40px; right: -35px; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media (max-width: 380px){ .lp32-container{ width: calc(100% - 22px); } .lp32-features-heading h2{ font-size: 28px; } } /* ============================================================ UNA PLATAFORMA, TODA TU OPERACIÓN LA PIEZA 32 ============================================================ */ .lp32-operation{ position: relative; width: 100%; padding: 78px 0 100px; background: #ffffff; overflow: hidden; } .lp32-operation-container{ width: min(1420px, calc(100% - 48px)); margin: 0 auto; } /* ============================================================ CABECERA ============================================================ */ .lp32-operation-head{ max-width: 1050px; margin: 0 auto 80px; text-align: center; } .lp32-operation-eyebrow{ display: inline-block; margin-bottom: 17px; color: #1263df; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 2.3px; } .lp32-operation-head h2{ margin: 0; color: #071a3d; font-size: clamp(42px, 3.6vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -1.8px; } .lp32-operation-head p{ max-width: 850px; margin: 22px auto 0; color: #63728d; font-size: 18px; line-height: 1.65; } /* ============================================================ FILAS ============================================================ */ .lp32-operation-row{ position: relative; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 72px; min-height: 520px; padding: 48px 0; } /* separación entre bloques */ .lp32-operation-row + .lp32-operation-row{ margin-top: 45px; } /* FILA INVERTIDA */ .lp32-operation-row-reverse .lp32-operation-copy{ grid-column: 2; grid-row: 1; } .lp32-operation-row-reverse .lp32-operation-visual{ grid-column: 1; grid-row: 1; } /* ============================================================ TEXTO ============================================================ */ .lp32-operation-copy{ position: relative; z-index: 3; max-width: 540px; } .lp32-operation-label{ display: block; margin-bottom: 16px; color: #1baec7; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 1.7px; } .lp32-operation-copy h3{ margin: 0 0 22px; color: #071a3d; font-size: clamp(34px, 3vw, 49px); line-height: 1.09; font-weight: 700; letter-spacing: -1.4px; } .lp32-operation-copy > p{ max-width: 520px; margin: 0 0 28px; color: #61718c; font-size: 17px; line-height: 1.7; } /* ============================================================ CHECKS ============================================================ */ .lp32-operation-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 25px; margin-top: 10px; } .lp32-operation-list span{ position: relative; display: block; color: #203755; font-size: 16px; line-height: 1.45; font-weight: 500; } /* check verde/turquesa */ .lp32-operation-list span::first-letter{ color: #10a9b9; } /* ============================================================ ZONA VISUAL ============================================================ */ .lp32-operation-visual{ position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; } /* mancha decorativa detrás */ .lp32-operation-visual::before{ content: ""; position: absolute; width: 90%; height: 85%; left: 8%; top: 8%; border-radius: 50%; background: radial-gradient( circle, rgba(44, 197, 216, .13) 0%, rgba(44, 197, 216, .06) 45%, rgba(44, 197, 216, 0) 72% ); filter: blur(3px); pointer-events: none; } /* ============================================================ IMAGEN ============================================================ */ .lp32-operation-image-card{ position: relative; z-index: 2; width: 100%; border-radius: 24px; background: #ffffff; border: 1px solid rgba(190, 213, 239, .72); box-shadow: 0 28px 65px rgba(15, 63, 125, .11), 0 5px 15px rgba(15, 63, 125, .045); overflow: hidden; transform: translateZ(0); } /* IMPORTANTÍSIMO: No estirar ni deformar las capturas */ .lp32-operation-image-card img{ display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: center; image-rendering: auto; transform: translateZ(0); backface-visibility: hidden; } /* pequeño efecto premium */ .lp32-operation-image-card{ transition: transform .4s ease, box-shadow .4s ease; } .lp32-operation-row:hover .lp32-operation-image-card{ transform: translateY(-5px); box-shadow: 0 34px 75px rgba(15, 63, 125, .14), 0 8px 20px rgba(15, 63, 125, .055); } /* ============================================================ FONDOS ALTERNADOS ============================================================ */ .lp32-operation-row:nth-of-type(3)::before{ content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient( 90deg, rgba(242, 248, 255, .65), rgba(244, 252, 253, .52) ); border-radius: 40px; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1100px){ .lp32-operation{ padding: 65px 0 80px; } .lp32-operation-head{ margin-bottom: 55px; } .lp32-operation-row{ grid-template-columns: .9fr 1.1fr; gap: 40px; min-height: 440px; } .lp32-operation-copy h3{ font-size: 36px; } .lp32-operation-list{ grid-template-columns: 1fr; gap: 10px; } } /* ============================================================ MÓVIL ============================================================ */ @media (max-width: 760px){ .lp32-operation{ padding: 48px 0 60px; } .lp32-operation-container{ width: calc(100% - 28px); } /* CABECERA */ .lp32-operation-head{ margin-bottom: 40px; } .lp32-operation-eyebrow{ margin-bottom: 11px; font-size: 12px; letter-spacing: 1.6px; } .lp32-operation-head h2{ font-size: 32px; line-height: 1.08; letter-spacing: -.9px; } .lp32-operation-head h2 br{ display: none; } .lp32-operation-head p{ margin-top: 16px; font-size: 15.5px; line-height: 1.6; } /* TODAS LAS FILAS EN UNA COLUMNA */ .lp32-operation-row, .lp32-operation-row-reverse{ display: flex; flex-direction: column; min-height: auto; gap: 28px; padding: 32px 0; } .lp32-operation-row + .lp32-operation-row{ margin-top: 20px; } /* texto */ .lp32-operation-copy{ max-width: 100%; width: 100%; } .lp32-operation-label{ margin-bottom: 11px; font-size: 12px; } .lp32-operation-copy h3{ margin-bottom: 15px; font-size: 29px; line-height: 1.1; letter-spacing: -.7px; } .lp32-operation-copy h3 br{ display: none; } .lp32-operation-copy > p{ margin-bottom: 20px; font-size: 15px; line-height: 1.62; } /* checks */ .lp32-operation-list{ grid-template-columns: 1fr; gap: 9px; margin-top: 0; } .lp32-operation-list span{ font-size: 14.5px; } /* IMAGEN */ .lp32-operation-visual{ width: 100%; } .lp32-operation-image-card{ width: 100%; border-radius: 17px; box-shadow: 0 18px 40px rgba(15, 63, 125, .10); } /* En móvil mantenemos: TEXTO -> IMAGEN para que sea más fácil de entender */ .lp32-operation-row-reverse .lp32-operation-copy, .lp32-operation-row-reverse .lp32-operation-visual{ grid-column: auto; grid-row: auto; } } /* ============================================================ MÓVIL PEQUEÑO ============================================================ */ @media (max-width: 390px){ .lp32-operation-container{ width: calc(100% - 22px); } .lp32-operation-head h2{ font-size: 29px; } .lp32-operation-copy h3{ font-size: 27px; } } /* ============================================================ RESEÑAS LA PIEZA 32 ============================================================ */ .lp32-reviews{ width:100%; position:relative; padding:90px 0 105px; background:#ffffff; overflow:hidden; } .lp32-reviews-container{ width:min(1420px, calc(100% - 48px)); margin:0 auto; } /* ============================================================ CABECERA ============================================================ */ .lp32-reviews-head{ text-align:center; max-width:1000px; margin:0 auto 105px; } .lp32-reviews-eyebrow{ display:block; margin-bottom:18px; color:#1263df; font-size:14px; line-height:1.2; font-weight:700; letter-spacing:2.2px; } .lp32-reviews-head h2{ margin:0; color:#071a3d; font-size:clamp(40px, 3.7vw, 58px); line-height:1.08; font-weight:700; letter-spacing:-1.6px; } .lp32-reviews-head h2 span{ color:#1baec7; } .lp32-reviews-head p{ max-width:780px; margin:20px auto 0; color:#66758e; font-size:17px; line-height:1.65; } /* ============================================================ SLIDER ============================================================ */ .lp32-reviews-slider{ position:relative; width:100%; } .lp32-reviews-track{ display:flex; gap:28px; align-items:stretch; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; padding-top:70px; margin-top:-70px; } .lp32-reviews-track::-webkit-scrollbar{ display:none; } .lp32-review-card{ flex:0 0 calc((100% - 56px) / 3); scroll-snap-align:start; } /* ============================================================ TARJETA ============================================================ */ .lp32-review-card{ position:relative; min-height:385px; padding: 82px 34px 36px; text-align:center; background:#ffffff; border: 1px solid rgba(185, 210, 235, .85); border-radius:20px; box-shadow: 0 18px 45px rgba(22, 80, 140, .055); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .lp32-review-card:hover{ transform:translateY(-6px); border-color: rgba(47, 183, 207, .48); box-shadow: 0 25px 55px rgba(22, 80, 140, .11); } /* ============================================================ FOTO CIRCULAR ============================================================ */ .lp32-review-photo{ position:absolute; top:-67px; left:50%; width:132px; height:132px; transform:translateX(-50%); border-radius:50%; background:#eef6fb; border:7px solid #ffffff; box-shadow: 0 12px 28px rgba(14, 64, 119, .13); overflow:hidden; } .lp32-review-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; image-rendering:auto; } /* ============================================================ PERSONA ============================================================ */ .lp32-review-person h3{ margin:0; color:#132d43; font-size:22px; line-height:1.25; font-weight:700; } .lp32-review-person span{ display:block; margin-top:7px; color:#617286; font-size:16px; line-height:1.4; } /* ============================================================ DIVISOR ============================================================ */ .lp32-review-divider{ position:relative; height:1px; margin:24px 0 20px; background:#dbe9f2; } .lp32-review-divider::before, .lp32-review-divider::after{ content:""; position:absolute; top:50%; width:6px; height:6px; border-radius:50%; background:#d0e4ef; transform:translateY(-50%); } .lp32-review-divider::before{ left:0; } .lp32-review-divider::after{ right:0; } /* ============================================================ ESTRELLAS ============================================================ */ .lp32-review-stars{ margin-bottom:14px; color:#ff9f1a; font-size:18px; letter-spacing:3px; } /* ============================================================ TESTIMONIO ============================================================ */ .lp32-review-card blockquote{ max-width:390px; margin:0 auto; padding:0; border:0; color:#465b70; font-size:15.5px; line-height:1.58; font-weight:400; } /* ============================================================ FLECHAS ============================================================ */ .lp32-review-arrow{ position:absolute; z-index:10; top:50%; width:54px; height:54px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:6px; background:#102d40; color:#ffffff; font-size:25px; line-height:1; cursor:pointer; transform:translateY(-50%); box-shadow: 0 10px 25px rgba(8, 45, 73, .14); transition: background .25s ease, transform .25s ease; } .lp32-review-arrow:hover{ background:#1263df; transform: translateY(-50%) scale(1.05); } .lp32-review-prev{ left:-27px; } .lp32-review-next{ right:-27px; } /* ============================================================ NOTA ============================================================ */ .lp32-review-note{ margin:34px 0 0; text-align:center; color:#8190a4; font-size:13px; } /* ============================================================ TABLET ============================================================ */ @media (max-width:1100px){ .lp32-reviews{ padding: 70px 0 85px; } .lp32-reviews-head{ margin-bottom:95px; } .lp32-reviews-track{ gap:18px; } .lp32-review-card{ padding: 75px 22px 30px; min-height:390px; } .lp32-review-photo{ width:118px; height:118px; top:-59px; } .lp32-review-person h3{ font-size:19px; } .lp32-review-person span{ font-size:14px; } .lp32-review-card blockquote{ font-size:14px; } } /* ============================================================ MÓVIL ============================================================ */ @media (max-width:760px){ .lp32-reviews{ padding: 55px 0 65px; } .lp32-reviews-container{ width:calc(100% - 28px); } /* CABECERA */ .lp32-reviews-head{ margin-bottom:90px; } .lp32-reviews-eyebrow{ margin-bottom:12px; font-size:12px; letter-spacing:1.7px; } .lp32-reviews-head h2{ font-size:32px; letter-spacing:-.8px; } .lp32-reviews-head h2 br{ display:none; } .lp32-reviews-head p{ margin-top:15px; font-size:15px; } /* carrusel horizontal */ .lp32-reviews-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding: 70px 2px 25px; margin-top:-70px; scrollbar-width:none; } .lp32-reviews-track::-webkit-scrollbar{ display:none; } .lp32-review-card{ flex: 0 0 calc(100% - 12px); min-height:360px; scroll-snap-align:center; padding: 75px 25px 30px; } .lp32-review-photo{ width:116px; height:116px; top:-58px; } .lp32-review-person h3{ font-size:20px; } .lp32-review-person span{ font-size:15px; } .lp32-review-card blockquote{ font-size:15px; line-height:1.6; } /* flechas móvil */ .lp32-review-arrow{ width:44px; height:44px; top:auto; bottom:-32px; transform:none; font-size:21px; } .lp32-review-arrow:hover{ transform:none; } .lp32-review-prev{ left:calc(50% - 52px); } .lp32-review-next{ right:calc(50% - 52px); } .lp32-review-note{ margin-top:70px; } } /* ========================================================== BOTÓN INICIAR SESIÓN HEADER PONER AL FINAL DEL CSS ========================================================== */ a.lp32-btn-login, .lp32-btn-login{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:52px !important; padding:0 24px !important; margin:0 8px 0 0 !important; background:#ffffff !important; color:#1263df !important; border:2px solid #1263df !important; border-radius:13px !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; text-decoration:none !important; box-shadow:0 5px 16px rgba(18,99,223,.08) !important; transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important; } a.lp32-btn-login:hover, .lp32-btn-login:hover{ background:#1263df !important; color:#ffffff !important; transform:translateY(-2px); box-shadow: 0 9px 22px rgba(18,99,223,.20) !important; } /* móvil */ @media (max-width:768px){ a.lp32-btn-login, .lp32-btn-login{ min-height:44px !important; padding:0 15px !important; font-size:14px !important; border-radius:11px !important; } } /* ========================================================= LA PIEZA 32 PLANES · FUNDADOR + AMPLIACIONES SEPTIEMBRE 2026 ========================================================= */ /* ========================================================= PRECIO + BLOQUE DE AMPLIACIÓN ========================================================= */ .price-zone{ display:grid !important; grid-template-columns: minmax(155px, .72fr) minmax(220px, 1.28fr) !important; gap:18px !important; align-items:center !important; margin: 18px 0 18px !important; } /* ========================================================= PRECIO PRINCIPAL ========================================================= */ .price-main{ min-width:0; } .price-main .price-row{ margin: 5px 0 6px !important; display:flex; align-items:flex-end; gap:5px; } .price-main .currency{ font-size:21px !important; line-height:1; margin-top:11px; } .price-main .price-value{ font-size:53px !important; line-height:.92 !important; font-weight:700 !important; letter-spacing:-.055em; } .price-main .price-cycle{ margin-bottom:5px !important; font-size:13px !important; color:#657591; } /* ========================================================= PRECIO FUNDADOR ========================================================= */ .founder-badge{ display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:100%; padding: 6px 10px; margin-bottom:5px; border-radius:999px; background: linear-gradient( 135deg, #fff0d8, #fff7e9 ); border: 1px solid #ffd89a; color:#a05b00; font-size:10px; line-height:1; font-weight:700; letter-spacing:.045em; } .founder-badge-blue{ background: linear-gradient( 135deg, #eaf3ff, #eafcff ); border-color:#c8e0fa; color:#1264d6; } /* precio anterior */ .regular-price{ display:flex; align-items:center; gap:5px; min-height:18px; color:#8190a6; font-size:10.5px; line-height:1.2; } .regular-price del{ color:#7b889b; font-weight:700; } /* ========================================================= PRECIO DIARIO ========================================================= */ .price-main .daily-price{ padding: 5px 9px !important; font-size: 10.5px !important; line-height:1.2 !important; } /* ========================================================= AMPLIACIONES ========================================================= */ .capacity-upsell-pro{ position:relative; min-height:120px; padding: 14px 14px 13px 48px !important; display:flex; flex-direction:column; justify-content:center; border: 1px solid #cde0f5 !important; border-radius: 17px !important; background: linear-gradient( 135deg, #f1f6ff 0%, #f0fdff 100% ) !important; box-shadow: 0 8px 24px rgba(24,78,147,.055); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .capacity-upsell-pro:hover{ transform: translateY(-3px); border-color: #abccec !important; box-shadow: 0 14px 30px rgba(24,78,147,.10); } /* + */ .capacity-upsell-pro::before{ content:"+"; position:absolute; left:14px; top:50%; transform: translateY(-50%); width:26px; height:26px; display:grid; place-items:center; border-radius:9px; background: linear-gradient( 135deg, #2469e8, #22b8c9 ); color:#fff; font-size:18px; line-height:1; font-weight:900; box-shadow: 0 7px 17px rgba(36,105,232,.18); } /* textos */ .capacity-upsell-pro > strong{ display:block; margin: 0 0 2px; color:#0c1e3f; font-size: 12px !important; line-height:1.25; font-weight:800; } .capacity-upsell-pro > span{ display:block; margin-bottom:5px; color:#64758e; font-size: 10.7px !important; line-height:1.35; } /* ========================================================= MINI PRECIOS ADD-ONS ========================================================= */ .addon-mini-list{ display:flex; flex-wrap:wrap; gap: 5px 10px; margin: 3px 0 4px; } .addon-mini-list span{ display:inline-flex; align-items:center; gap:4px; color:#4c617e; font-size: 10.4px !important; line-height:1.25; } .addon-mini-list b{ color:#1264d6; font-weight:700; } /* link ampliaciones */ .capacity-upsell-pro a{ display:inline-flex; width:max-content; max-width:100%; margin-top:3px; color:#1264d6; font-size: 10.7px !important; line-height:1.25; font-weight:800; } .capacity-upsell-pro a:hover{ text-decoration:underline; } /* ========================================================= LISTA DEL PLAN ========================================================= */ .price-card .plan-list{ margin: 16px 0 15px !important; display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px 14px !important; } .price-card .plan-list li{ font-size: 12px !important; line-height: 1.35 !important; padding-left: 24px !important; } /* ========================================================= NOTA DE CAPACIDAD ========================================================= */ .plan-manual-note{ display:flex; align-items:center; gap:9px; min-height:43px; margin: 0 0 13px; padding: 8px 10px; border-radius: 12px; background:#f7faff; border: 1px solid #e2ebf6; } .plan-manual-note > span{ flex: 0 0 25px; width:25px; height:25px; display:grid; place-items:center; border-radius: 8px; background:#eaf3ff; color:#1768df; font-size:17px; line-height:1; font-weight:900; } .plan-manual-note p{ margin:0 !important; color:#64758e; font-size: 10.5px !important; line-height: 1.35 !important; } .plan-manual-note strong{ color:#203553; } /* ========================================================= BOTONES PLANES ========================================================= */ .price-card .plan-link{ min-height:51px; font-size:14px; font-weight:700; border-radius:14px; } /* ========================================================= FRANJA INFERIOR CRECIMIENTO ========================================================= */ .pricing-growth-note{ max-width:1018px; margin: 20px auto 0; padding: 13px 16px; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:13px; border: 1px solid #d4e5f6; border-radius: 17px; background: linear-gradient( 135deg, #f2f7ff, #eefcfd ); } .pricing-growth-icon{ width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:#fff; border: 1px solid #d8e5f3; color:#1768df; font-size:22px; line-height:1; font-weight:900; } .pricing-growth-note strong{ display:block; color:#102340; font-size:12.5px; } .pricing-growth-note span{ display:block; color:#687993; font-size:11px; line-height:1.4; } .pricing-growth-note a{ padding: 9px 13px; white-space:nowrap; border: 1px solid #cbdcf0; border-radius:11px; background:#fff; color:#1264d6; font-size:11px; font-weight:700; transition:.2s ease; } .pricing-growth-note a:hover{ transform: translateY(-1px); border-color:#9fc4ee; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1100px){ .price-zone{ grid-template-columns: 155px minmax(0,1fr) !important; } } @media(max-width:760px){ .price-zone{ grid-template-columns: 1fr !important; gap:12px !important; } .capacity-upsell-pro{ min-height:auto; padding: 14px 14px 14px 48px !important; } .price-card .plan-list{ grid-template-columns: 1fr !important; } .pricing-growth-note{ grid-template-columns: auto 1fr; } .pricing-growth-note a{ grid-column: 1 / -1; text-align:center; justify-self:stretch; } } @media(max-width:480px){ .price-main .price-value{ font-size: 48px !important; } .founder-badge{ font-size: 9.5px; } .addon-mini-list{ display:grid; } } /* ========================================================= PLANES RÁPIDOS · CTA FINAL ========================================================= */ .quick-pricing{ padding:76px 0 90px; background:linear-gradient(180deg,#f4f8ff,#eef6ff); } .quick-pricing-heading{ text-align:center; max-width:820px; margin:0 auto 34px; } .quick-pricing-heading > span{ display:block; margin-bottom:10px; color:#1264d6; font-size:12px; font-weight:900; letter-spacing:.16em; } .quick-pricing-heading h2{ margin:0 0 10px; color:#0c1e3f; font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-.04em; } .quick-pricing-heading p{ margin:0; color:#687993; font-size:16px; } /* GRID */ .quick-pricing-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,480px)); justify-content:center; gap:22px; } /* CARD */ .quick-plan-card{ background:#fff; border:1px solid #d6e3f2; border-radius:22px; padding:25px 27px 27px; box-shadow:0 12px 32px rgba(9,35,78,.045); } .quick-plan-card.featured{ border:2px solid #2469e8; box-shadow:0 18px 45px rgba(36,105,232,.10); } /* CABECERA */ .quick-plan-head{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; } .quick-plan-head h3{ margin:0 0 6px; color:#071c42; font-size:23px; } .quick-plan-head p{ margin:0; color:#657591; font-size:13px; line-height:1.5; } .quick-plan-badge{ flex:0 0 auto; padding:6px 11px; border-radius:999px; background:#eaf3ff; color:#1264d6; font-size:10px; font-weight:900; } /* PRECIO */ .quick-plan-price{ margin:20px 0 13px; } .quick-founder{ display:inline-block; padding:5px 9px; margin-bottom:5px; border-radius:999px; background:#fff3df; color:#9b5b00; font-size:9px; font-weight:900; letter-spacing:.05em; } .quick-regular{ color:#8794a8; font-size:11px; } .quick-regular del{ font-weight:700; } .quick-price-row{ display:flex; align-items:flex-end; gap:6px; margin-top:2px; } .quick-price-row strong{ color:#071c42; font-size:38px; line-height:1; letter-spacing:-.04em; } .quick-price-row span{ margin-bottom:3px; color:#657591; font-size:12px; } /* AMPLIACIONES */ .quick-addon{ margin:0 0 15px; padding:8px 11px; border-radius:10px; background:#f2f7ff; color:#526984; font-size:11px; font-weight:600; } /* MÓVIL */ @media(max-width:760px){ .quick-pricing{ padding:60px 0 70px; } .quick-pricing-grid{ grid-template-columns:1fr; } .quick-plan-head{ gap:10px; } .quick-plan-card{ padding:22px 20px; } } /* ========================================================= FIX MOBILE · VIDEO LAPTOP + HECHO PARA ODONTOLOGÍA SOLO MÓVIL ========================================================= */ @media (max-width: 760px){ /* ===================================================== 1. MIRA EL SISTEMA EN ACCIÓN ===================================================== */ #demo, .demo-section, .system-demo, .video-section, .lp32-demo{ overflow:hidden; } #demo .container, .demo-section .container, .system-demo .container, .video-section .container, .lp32-demo .container{ width:100%; max-width:100%; padding-left:14px; padding-right:14px; } /* convierte el bloque en UNA sola columna */ #demo .demo-grid, #demo .demo-inner, #demo .demo-content, .demo-section .demo-grid, .system-demo .demo-grid, .video-section .demo-grid, .lp32-demo-grid{ display:grid !important; grid-template-columns:1fr !important; gap:28px !important; width:100% !important; } /* TEXTO */ #demo .demo-copy, .demo-section .demo-copy, .system-demo .demo-copy, .video-section .demo-copy, .lp32-demo-copy{ width:100% !important; max-width:100% !important; min-width:0 !important; padding:0 !important; } #demo h2, .demo-section h2, .system-demo h2, .video-section h2, .lp32-demo h2{ font-size:34px !important; line-height:1.08 !important; letter-spacing:-1.2px !important; max-width:100% !important; word-break:normal !important; } #demo p, .demo-section p, .system-demo p, .video-section p, .lp32-demo p{ font-size:16px !important; line-height:1.65 !important; } /* ===================================================== LAPTOP ===================================================== */ #demo .laptop, #demo .laptop-wrap, #demo .laptop-frame, .demo-section .laptop, .demo-section .laptop-wrap, .system-demo .laptop, .video-section .laptop, .lp32-laptop, .lp32-laptop-wrap{ position:relative !important; width:100% !important; max-width:340px !important; margin:0 auto !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; } /* pantalla interior */ #demo .laptop-screen, #demo .screen, .demo-section .laptop-screen, .system-demo .laptop-screen, .video-section .laptop-screen, .lp32-laptop-screen{ position:relative !important; width:100% !important; max-width:100% !important; overflow:hidden !important; } /* VIDEO */ #demo video, .demo-section video, .system-demo video, .video-section video, .lp32-laptop video{ display:block !important; width:100% !important; height:auto !important; max-width:100% !important; object-fit:contain !important; object-position:center !important; transform:none !important; } /* imagen poster del video */ #demo video[poster], .demo-section video[poster]{ object-fit:contain !important; } /* botón play */ #demo .play-button, #demo .video-play, .demo-section .play-button, .system-demo .play-button, .video-section .play-button{ width:66px !important; height:66px !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; } /* botón CTA del demo */ #demo .btn, .demo-section .btn, .system-demo .btn, .video-section .btn{ width:auto !important; max-width:100% !important; } /* ===================================================== 2. HECHO PARA ODONTOLOGÍA ===================================================== */ .why-section, .dentistry-section, .hecho-odontologia, .lp32-dentistry{ overflow:hidden; } .why-section .container, .dentistry-section .container, .hecho-odontologia .container, .lp32-dentistry .container{ width:100%; max-width:100%; padding-left:16px; padding-right:16px; } /* IMPORTANTE: texto + cards pasan de 2 columnas a 1 columna */ .why-grid, .dentistry-grid, .hecho-odontologia-grid, .lp32-dentistry-grid{ display:grid !important; grid-template-columns:1fr !important; gap:30px !important; width:100% !important; } /* texto superior */ .why-copy, .dentistry-copy, .hecho-odontologia-copy, .lp32-dentistry-copy{ width:100% !important; max-width:100% !important; min-width:0 !important; text-align:left !important; } .why-copy h2, .dentistry-copy h2, .hecho-odontologia-copy h2, .lp32-dentistry-copy h2{ font-size:34px !important; line-height:1.08 !important; letter-spacing:-1.2px !important; max-width:100% !important; } .why-copy p, .dentistry-copy p, .hecho-odontologia-copy p, .lp32-dentistry-copy p{ font-size:16px !important; line-height:1.65 !important; } /* ===================================================== CARDS 01 02 03 04 ===================================================== */ .why-cards, .dentistry-cards, .hecho-odontologia-cards, .lp32-dentistry-cards{ display:grid !important; grid-template-columns:1fr !important; gap:14px !important; width:100% !important; } .why-card, .dentistry-card, .hecho-odontologia-card, .lp32-dentistry-card{ width:100% !important; min-width:0 !important; max-width:none !important; padding:20px !important; min-height:auto !important; border-radius:18px !important; } .why-card h3, .dentistry-card h3, .hecho-odontologia-card h3, .lp32-dentistry-card h3{ font-size:19px !important; line-height:1.25 !important; margin-bottom:8px !important; } .why-card p, .dentistry-card p, .hecho-odontologia-card p, .lp32-dentistry-card p{ font-size:14px !important; line-height:1.55 !important; } } /* ========================================================= MÓVIL MUY PEQUEÑO · 320 - 390 ========================================================= */ @media (max-width: 390px){ #demo h2, .demo-section h2, .system-demo h2, .video-section h2, .lp32-demo h2, .why-copy h2, .dentistry-copy h2, .hecho-odontologia-copy h2, .lp32-dentistry-copy h2{ font-size:31px !important; } #demo .laptop, #demo .laptop-wrap, #demo .laptop-frame, .demo-section .laptop, .demo-section .laptop-wrap, .system-demo .laptop, .video-section .laptop, .lp32-laptop, .lp32-laptop-wrap{ max-width:326px !important; } } /* ========================================================= FIX REAL MOBILE HECHO PARA ODONTOLOGÍA ========================================================= */ @media (max-width: 760px){ /* sección completa */ .trust-section{ padding: 55px 0 !important; overflow: hidden !important; } /* TEXTO + CARDS: en PC son 2 columnas en móvil pasa a 1 columna */ .trust-section .trust-grid{ display: grid !important; grid-template-columns: 1fr !important; gap: 32px !important; width: 100% !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box !important; } /* ========================= BLOQUE DE TEXTO ========================= */ .trust-section .trust-copy{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .trust-section .trust-copy h2{ width: 100% !important; max-width: 100% !important; font-size: 32px !important; line-height: 1.08 !important; letter-spacing: -1px !important; margin: 10px 0 16px !important; } .trust-section .trust-copy p{ width: 100% !important; max-width: 100% !important; font-size: 16px !important; line-height: 1.65 !important; margin: 0 !important; } /* ========================= CONTENEDOR DE LAS 4 CARDS ========================= */ .trust-section .trust-cards{ display: grid !important; /* ESTO ELIMINA LAS 2 COLUMNAS */ grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================= CADA CARD ========================= */ .trust-section .mini-trust-card{ display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 20px !important; box-sizing: border-box !important; } .trust-section .mini-trust-card span{ display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 16px !important; } .trust-section .mini-trust-card h3{ font-size: 19px !important; line-height: 1.25 !important; margin: 0 0 8px !important; } .trust-section .mini-trust-card p{ font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; } } /* móviles pequeños */ @media (max-width: 390px){ .trust-section .trust-grid{ padding-left: 14px !important; padding-right: 14px !important; } .trust-section .trust-copy h2{ font-size: 30px !important; } } /* ===== WHATSAPP ==== */ .whatsapp-action { position: fixed; bottom: 10px; left: 10px; width: 64px; height: 64px; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-hover:hover { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } .whatsapp-widget { position: fixed; bottom: 55px; right: 15px; width: 95px; height: 75px; background-image: url("https://lapieza32.com/whatsapp-movil.webp"); background-repeat: no-repeat; background-position: center center; background-size: 100%; z-index: 9999; } @media (min-width: 450px) { .whatsapp-widget { right: 25px; bottom: 15px; width: 200px; height: 160px; background-image: url("https://lapieza32.com/whatsappfooter.webp"); } } /* ===== FIN WHATSAPP ==== */ /* ========================================================= LP32 · AMPLIACIONES DE PLANES Sede / Especialista / Usuario ========================================================= */ .addon-mini-list{ display:flex; flex-direction:column; gap:4px; margin-top:6px; } .addon-mini-list span{ display:flex; align-items:center; gap:4px; font-size:11.2px; line-height:1.35; color:#60728e; } .addon-mini-list span b{ color:#1264d6; font-weight:700; } .capacity-upsell{ min-height:112px; } /* características de planes */ .plan-list li{ min-height:20px; } /* móvil */ @media(max-width:520px){ .capacity-upsell{ min-height:auto; padding:14px 14px 14px 48px!important; } .addon-mini-list{ gap:5px; } .addon-mini-list span{ font-size:11px; } }