/* ============================================================ BUMPHO — Sistema de diseño del ecosistema Hoja de estilos compartida por todas las páginas. Tema por marca: añade una clase al (theme-bumpho | theme-hazlofacil | theme-facturhek) Nota: SEO·GEO es un módulo de Hazlo Fácil y usa el tema theme-hazlofacil. ============================================================ */ /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none} ul{list-style:none} /* ---------- Tokens base (tema Bumpho por defecto) ---------- */ :root{ --bg:#ffffff; --soft:#f4f5fb; --ink:#0b0f1c; --ink-2:#48506a; --ink-3:#9aa0b5; --line:#e7e9f2; --dark:#0a0d18; --dark-2:#121732; --dark-card:rgba(255,255,255,.05); --dark-line:rgba(255,255,255,.12); --accent:#6c5cff; --accent-2:#1fc8e3; --hl:#ffb020; /* highlight secundario */ --grad:linear-gradient(120deg,#7257ff 0%,#19c6e6 100%); --grad-soft:linear-gradient(120deg,rgba(114,87,255,.14),rgba(25,198,230,.14)); --ring:rgba(108,92,255,.30); --maxw:1180px; /* (continúa abajo) */ --r:18px; --r-sm:12px; --shadow:0 18px 50px -20px rgba(12,16,40,.30); --shadow-sm:0 6px 24px -12px rgba(12,16,40,.28); --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --display:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } /* ---------- Temas por marca ---------- */ .theme-hazlofacil{ --accent:#1f8a5b;--accent-2:#25d366;--hl:#e8622a; --grad:linear-gradient(120deg,#0f5132 0%,#22c069 100%); --grad-soft:linear-gradient(120deg,rgba(15,81,50,.12),rgba(37,211,102,.14)); --ring:rgba(37,211,102,.32); --dark:#0a1f17;--dark-2:#0f2e22; } .theme-facturhek{ --accent:#1a3a5c;--accent-2:#e8a020;--hl:#e8a020; --grad:linear-gradient(135deg,#1a3a5c 0%,#0d2540 100%); --grad-soft:linear-gradient(120deg,rgba(26,58,92,.10),rgba(232,160,32,.14)); --ring:rgba(26,58,92,.28); --dark:#0b1c30;--dark-2:#0d2540; } /* ---------- Base ---------- */ body{ font-family:var(--font);color:var(--ink);background:var(--bg); line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:hidden; } .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} section{padding:88px 0} .lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-2);max-width:60ch} h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--ink)} h1{font-size:clamp(2.3rem,5.2vw,4rem)} h2{font-size:clamp(1.8rem,3.6vw,2.7rem)} h3{font-size:1.18rem} p{color:var(--ink-2)} .eyebrow{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--accent)} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* sobre el hero oscuro: resaltado en color sólido y brillante para asegurar contraste */ .hero .grad-text{background:none;color:var(--accent-2);-webkit-text-fill-color:var(--accent-2)} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} /* ---------- Botones ---------- */ .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.4rem;border-radius:999px; font-weight:600;font-size:.95rem;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s; white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px -10px var(--ring)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--ring)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{transform:translateY(-2px)} .btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:#fff} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-on-dark{background:rgba(255,255,255,.10);color:#fff;border:1.5px solid rgba(255,255,255,.22)} .btn-on-dark:hover{background:rgba(255,255,255,.18)} .btn-lg{padding:.95rem 1.8rem;font-size:1rem} /* ---------- Navbar ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)} .nav-inner{display:flex;align-items:center;gap:18px;height:68px; max-width:var(--maxw);margin:0 auto;padding:0 24px} .brand{display:inline-flex;align-items:center;gap:.55rem;flex-shrink:0} .brand-mark{width:34px;height:34px;flex-shrink:0} .brand-logo{height:34px;width:auto;display:block} .brand-iso{height:38px;width:38px;display:block;flex-shrink:0} .brand-word{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.03em;color:var(--ink)} @media (max-width:760px){.brand-logo{height:29px}} .brand-sep{color:var(--ink-3);font-size:1rem;margin:0 -4px} .brand-product{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--accent);letter-spacing:-.01em} .nav-links{display:flex;align-items:center;gap:26px;margin-left:auto} .nav-links a{font-size:.93rem;font-weight:500;color:var(--ink-2);transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-cta{display:flex;align-items:center;gap:12px;margin-left:8px} /* desplegable de navegación (escritorio) */ .nav-dd{position:relative;display:inline-flex;align-items:center} .nav-dd-btn{font-family:var(--font);font-size:.93rem;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:.32rem;cursor:pointer;transition:color .15s} .nav-dd-btn:hover{color:var(--ink)} .nav-dd .caret{font-size:.62rem;transition:transform .15s} .nav-dd:hover .caret,.nav-dd:focus-within .caret{transform:rotate(180deg)} .nav-dd::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:16px} .nav-dd-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:238px;background:#fff; border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px; display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s ease,transform .16s ease;z-index:70} .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-dd-menu a{padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s} .nav-dd-menu a:hover{background:var(--soft);color:var(--ink)} /* etiqueta de grupo en el menú móvil */ .nav-panel-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:12px 4px 2px} /* menú móvil sin JS (checkbox hack). Oculto por defecto en todas las resoluciones. */ .nav-panel{display:none} .nav-toggle,.nav-burger{display:none} .nav-burger{width:44px;height:44px;margin-left:auto;border-radius:10px;border:1px solid var(--line); align-items:center;justify-content:center} .nav-burger span{position:relative;width:18px;height:2px;background:var(--ink);border-radius:2px} .nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px} .nav-burger span::before{top:-6px}.nav-burger span::after{top:6px} /* ---------- Hero ---------- */ .hero{position:relative;background:var(--dark);color:#fff;overflow:hidden; padding:96px 0 104px} .hero::before{content:"";position:absolute;inset:0;z-index:0; background: radial-gradient(60% 70% at 78% 8%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 60%), radial-gradient(55% 60% at 8% 90%,color-mix(in srgb,var(--accent-2) 30%,transparent),transparent 60%)} .hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:48px 48px;mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent 80%)} .hero .wrap{position:relative;z-index:1} .hero h1{color:#fff;max-width:18ch} .hero p{color:rgba(255,255,255,.78)} .hero .eyebrow{color:#fff;opacity:.85} .hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:999px; font-size:.82rem;font-weight:600;background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);color:#fff} .pill .dot{width:8px;height:8px;border-radius:999px;background:var(--accent-2)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} /* hero stats */ .hero-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:46px; padding-top:30px;border-top:1px solid rgba(255,255,255,.12)} .hero-stats .s .n{font-family:var(--display);font-size:1.7rem;font-weight:800;color:#fff} .hero-stats .s .l{font-size:.8rem;color:rgba(255,255,255,.6)} /* ---------- Badge / chips de sección ---------- */ .tag{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .8rem;border-radius:999px; font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; background:var(--grad-soft);color:var(--accent)} /* ---------- Grid de soluciones (ecosistema) ---------- */ .sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px} .sol-grid.three{grid-template-columns:repeat(3,1fr)} @media (max-width:980px){.sol-grid.three{grid-template-columns:1fr 1fr}} .sol{position:relative;display:flex;flex-direction:column;gap:14px; background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px; box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s;overflow:hidden} .sol::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sol-grad,var(--grad))} .sol:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .sol-top{display:flex;align-items:center;gap:14px} .sol-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex-shrink:0; background:var(--sol-soft,var(--grad-soft));font-size:1.5rem} .sol h3{font-size:1.32rem;font-family:var(--display)} .sol .role{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sol-color,var(--accent))} .sol p{font-size:.95rem;flex:1} .sol .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{font-size:.74rem;font-weight:600;padding:.28rem .65rem;border-radius:8px;background:var(--soft);color:var(--ink-2)} .sol-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem; color:var(--sol-color,var(--accent));margin-top:2px} .sol-link svg{transition:transform .15s} .sol:hover .sol-link svg{transform:translateX(4px)} /* colores por marca dentro del grid */ .sol.s-bumpho{--sol-grad:linear-gradient(120deg,#7257ff,#19c6e6);--sol-color:#6c5cff;--sol-soft:rgba(114,87,255,.12)} .sol.s-hazlofacil{--sol-grad:linear-gradient(120deg,#0f5132,#25d366);--sol-color:#1f8a5b;--sol-soft:rgba(37,211,102,.14)} .sol.s-facturhek{--sol-grad:linear-gradient(135deg,#1a3a5c,#e8a020);--sol-color:#1a3a5c;--sol-soft:rgba(232,160,32,.16)} /* ---------- Grid de features genérico ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} .feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:24px;transition:box-shadow .2s,transform .2s} .feat:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)} .feat .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px; background:var(--grad-soft);font-size:1.3rem} .feat h3{font-size:1.04rem;margin-bottom:6px} .feat p{font-size:.92rem} .feat .mtag{display:inline-block;margin-top:12px;font-size:.7rem;font-weight:700;text-transform:uppercase; letter-spacing:.04em;color:var(--accent);background:var(--grad-soft);padding:.18rem .55rem;border-radius:7px} .feat .mtag.soon{color:#6b7280;background:#eef0f4} /* dos columnas / soft section */ .soft{background:var(--soft)} .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .stack-gap>*+*{margin-top:14px} /* lista con checks */ .checks{display:flex;flex-direction:column;gap:14px;margin-top:8px} .checks li{display:flex;gap:12px;font-size:.96rem;color:var(--ink-2)} .checks li b{color:var(--ink)} .checks .ck{flex-shrink:0;width:24px;height:24px;border-radius:7px;background:var(--grad-soft); display:grid;place-items:center;color:var(--accent);font-weight:800;font-size:.8rem} /* ---------- Pasos / flujo ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:24px} .step .num{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff; display:grid;place-items:center;font-weight:800;font-size:.95rem;margin-bottom:12px} .step h4{font-size:1rem;margin-bottom:6px} .step p{font-size:.88rem} /* ---------- Diagrama ecosistema ---------- */ .flow{display:flex;align-items:stretch;gap:14px;margin-top:24px} .flow-card{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;position:relative} .flow-card .k{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .flow-card h3{margin:8px 0 6px} .flow-card p{font-size:.9rem} .flow-arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.7rem;font-weight:800} .flow-note{margin-top:22px;background:var(--grad-soft);border-radius:var(--r);padding:20px 24px; font-size:.95rem;color:var(--ink-2)} .flow-note b{color:var(--ink)} /* ---------- Stats band ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:26px;text-align:center} .stat .n{font-family:var(--display);font-size:2.1rem;font-weight:800;color:var(--accent)} .stat .l{font-size:.84rem;color:var(--ink-2);margin-top:4px} /* ---------- Precios ---------- */ .price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px} .price-grid.three{grid-template-columns:repeat(3,1fr)} @media (max-width:980px){.price-grid.three{grid-template-columns:1fr}} .price{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:#fff} .price.feat-price{border-color:var(--accent);box-shadow:0 0 0 4px var(--grad-soft)} .price .pname{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .price .pval{font-family:var(--display);font-size:2.4rem;font-weight:800;margin:.2rem 0;color:var(--ink)} .price .pval small{font-size:1rem;font-weight:500;color:var(--ink-3)} .price ul{margin-top:16px;display:flex;flex-direction:column;gap:10px} .price li{display:flex;gap:10px;font-size:.92rem;color:var(--ink-2)} .price li::before{content:"✓";color:var(--accent);font-weight:800} /* ---------- FAQ ---------- */ .faq{max-width:780px;margin:36px auto 0} .faq details{border-bottom:1px solid var(--line);padding:18px 0} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer; font-weight:700;color:var(--ink);font-size:1rem;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;font-weight:700;line-height:1} .faq details[open] summary::after{content:"–"} .faq details p{margin-top:12px;font-size:.94rem} /* ---------- CTA band ---------- */ .cta-band{position:relative;background:var(--dark);color:#fff;border-radius:26px; padding:64px 48px;text-align:center;overflow:hidden;margin:0 24px} .cta-band::before{content:"";position:absolute;inset:0; background:radial-gradient(60% 120% at 80% 0%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 60%)} .cta-band>*{position:relative;z-index:1} .cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.78);max-width:54ch;margin:14px auto 0} .cta-band .hero-cta{justify-content:center} /* ---------- Footer ---------- */ .footer{background:#070a13;color:rgba(255,255,255,.6);padding:64px 0 30px} .footer .brand-word{color:#fff} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .footer-desc{font-size:.9rem;margin-top:14px;max-width:34ch;line-height:1.7} .footer h4{color:rgba(255,255,255,.9);font-family:var(--font);font-size:.78rem;font-weight:700; text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px} .footer ul{display:flex;flex-direction:column;gap:9px} .footer ul a{font-size:.9rem;color:rgba(255,255,255,.6);transition:color .15s} .footer ul a:hover{color:#fff} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);font-size:.82rem} .footer-badges{display:flex;gap:8px;flex-wrap:wrap} .fbadge{font-size:.72rem;padding:.25rem .6rem;border-radius:7px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.7)} /* ---------- Utilidades ---------- */ .section-head{max-width:62ch} .section-head.center{margin:0 auto} .mt-s{margin-top:10px}.mt-m{margin-top:22px}.mt-l{margin-top:34px} .muted{color:var(--ink-2)} .divider{height:1px;background:var(--line);border:0;margin:0} /* reveal animación suave */ [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}} /* ---------- Responsive ---------- */ @media (max-width:920px){ .split{grid-template-columns:1fr;gap:32px} .feat-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .flow{flex-direction:column} .flow-arrow{transform:rotate(90deg)} .stats{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ section{padding:64px 0} .hero{padding:62px 0 70px} .nav-links,.nav-cta{display:none} .nav-burger{display:flex} .nav:has(.nav-toggle:checked) .nav-panel{display:flex} .nav-panel{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:4px; background:#fff;border-bottom:1px solid var(--line);padding:14px 24px 22px;box-shadow:var(--shadow-sm)} .nav-panel a{padding:11px 4px;font-size:1rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)} .nav-panel .btn{margin-top:12px;justify-content:center} .sol-grid,.price-grid{grid-template-columns:1fr} .cta-band{padding:48px 24px;margin:0 16px} } @media (max-width:600px){ /* en móvil, la cabecera muestra solo el logo de Bumpho (el hero ya nombra la marca) */ .brand-sep,.brand-product{display:none} .sol-grid.three{grid-template-columns:1fr} } @media (max-width:520px){ .feat-grid,.steps,.stats{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .hero-stats{gap:22px} .nav-inner{gap:10px} } /* ---------- Páginas legales ---------- */ .page-head{background:var(--soft);border-bottom:1px solid var(--line);padding:52px 0 38px} .page-head .eyebrow{color:var(--accent)} .page-head h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-top:10px} .page-head .updated{margin-top:10px;font-size:.85rem;color:var(--ink-3)} .legal{max-width:820px;margin:0 auto;padding:54px 24px 76px} .legal h2{font-size:1.32rem;margin:36px 0 12px;scroll-margin-top:86px} .legal h2:first-child{margin-top:0} .legal h3{font-size:1.05rem;margin:24px 0 8px} .legal p{margin:0 0 14px;color:var(--ink-2)} .legal ul{margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px} .legal ul li{position:relative;padding-left:22px;color:var(--ink-2)} .legal ul li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)} .legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-word} .legal strong{color:var(--ink)} .legal .lcard{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:0 0 26px} .legal .lcard p{margin:5px 0} .legal table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.88rem} .legal table th,.legal table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} .legal table th{background:var(--soft);font-weight:700;color:var(--ink);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em} .legal table td{color:var(--ink-2)} .legal .toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px} .legal .toc a{font-size:.84rem;padding:.34rem .8rem;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--ink-2);text-decoration:none;transition:border-color .15s,color .15s} .legal .toc a:hover{border-color:var(--accent);color:var(--accent)} @media (max-width:560px){ .legal table,.legal table tbody,.legal table tr,.legal table td{display:block;width:100%} .legal table thead{display:none} .legal table tr{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:6px 10px} .legal table td{border:0;padding:5px 2px} .legal table td::before{content:attr(data-th) ": ";font-weight:700;color:var(--ink)} }