/* public/brand/landing.css — v7 Paleta eléctrica (azul profundo + magenta), header oscuro, botones animados, fondo con carrusel, y modo oscuro auto. */ /* =================== Variables base =================== */ :root{ --b1:#1d2b64; /* deep blue */ --b2:#8a2387; /* magenta violeta */ --b3:#3b82f6; /* azul vivo */ --b4:#c026d3; /* fucsia */ --ink:#0f172a; --page-bg:#0b1020; --glass: rgba(255,255,255,.08); --ring: rgba(59,130,246,.5); } /* Modo oscuro automático (clase .auto-dark en ) */ .auto-dark :root, .auto-dark body{ --page-bg:#070b16; } /* =================== Fondo (usamos rotador; apagamos el pseudo) =================== */ body{ position: relative; background: var(--page-bg); } /* Si tenías un pseudo con imagen, lo apagamos para no “luchar” con el rotador */ body::before{ opacity:0 !important; } .bg-rotator{ position: fixed; inset:0; z-index:-1; overflow:hidden; } .bg-rotator .bg-layer{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,16,32,.42), rgba(11,16,32,.42)), var(--img) center/cover no-repeat; opacity:0; transition: opacity 1s ease; filter: saturate(120%) contrast(108%) brightness(108%); } .bg-rotator .bg-layer.active{ opacity:.42; } /* =================== Cabecera oscura =================== */ .header-dark/outer{ background: radial-gradient(900px 360px at 40% -120px, rgba(138,35,135,.35), transparent 60%), linear-gradient(180deg, rgba(11,16,32,.92), rgba(11,16,32,.92)); position: sticky; top:0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); } .header-dark, .header-dark a{ color:#fff; } .brandmark-wrap{ width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 12px; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: hidden; border-radius: 999px; } .brandmark{ width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 999px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.38)); } /* Neón sutil solo en auto-dark */ @keyframes neonRing { 0% { box-shadow: 0 0 0 rgba(99,102,241,0), 0 0 0 rgba(236,72,153,0); } 50% { box-shadow: 0 0 24px rgba(99,102,241,.35), 0 0 34px rgba(236,72,153,.25); } 100% { box-shadow: 0 0 0 rgba(99,102,241,0), 0 0 0 rgba(236,72,153,0); } } .auto-dark .brandmark-wrap{ animation: neonRing 3.2s ease-in-out infinite; outline: 1px solid rgba(255,255,255,.08); } @media (max-width: 640px){ .brandmark-wrap{ width: 52px; height: 52px; flex-basis: 52px; } } /* =================== Hero y preview =================== */ .hero{ padding-block: 1.5rem 2rem; } .grad-txt{ background: linear-gradient(90deg, #60a5fa 0%, #a855f7 45%, #ec4899 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow: 0 2px 22px rgba(168,85,247,.25); } .hero h1{ text-shadow: 0 2px 22px rgba(0,0,0,.35); } .preview-card{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); color:#e5e7eb; } .preview-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; } .tpl-tabs{ display:flex; gap:.375rem; flex-wrap: wrap; } .tpl-tabs .tab{ appearance:none; border:1px solid rgba(255,255,255,.18); cursor:pointer; padding:.45rem .7rem; border-radius:9999px; background: rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:.85rem; transition: all .22s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } .tpl-tabs .tab:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.18); } .tpl-tabs .tab.active{ background: linear-gradient(90deg, #60a5fa, #a855f7); border-color: transparent; box-shadow: 0 12px 28px rgba(96,165,250,.35); } .open-new{ color:#c7d2fe; font-size:.85rem; text-decoration: none; } .open-new:hover{ text-decoration: underline; } .frame-wrap{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#fff; } .frame{ width:100%; height:600px; display:block; border:0; background:#fff; border-radius:12px; } .caption{ color:#cbd5e1; font-size:.75rem; margin-top:.4rem; } /* =================== Botones “eléctricos” =================== */ @keyframes glowShift { 0% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(96,165,250,0)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 14px rgba(96,165,250,.45)); } 100% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(96,165,250,0)); } } .btn{ --g1: var(--b1); --g2: var(--b2); --g3: var(--b3); position: relative; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:2.25rem; padding:0 0.9rem; border-radius:12px; border:1px solid transparent; font-weight:800; letter-spacing:.2px; transition: transform .16s ease, box-shadow .16s ease, background-position .6s ease, filter .2s ease, opacity .2s ease; box-shadow: 0 6px 18px rgba(0,0,0,.08); user-select:none; will-change: transform, background-position, box-shadow, filter; } .btn.lg{ height:2.7rem; padding:0 1.15rem; border-radius:14px; } .btn.primary{ color:#fff; background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%); background-size: 200% 200%; opacity:.98; } .btn.primary:hover{ transform: translateY(-1px) scale(1.015); animation: glowShift 1.8s ease-in-out both; opacity:1; } .btn.primary:active{ animation: none; transform: translateY(0) scale(.985); box-shadow: 0 6px 16px rgba(96,165,250,.20) inset; filter: brightness(1.05); } .btn.ghost{ color:#0f172a; background:#fff; border-color:#e2e8f0; } .btn.ghost:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(30,41,59,.18); } .btn.ghost.invert{ color:#fff; background: transparent; border-color: rgba(255,255,255,.32); } .btn.ghost.invert:hover{ background: rgba(255,255,255,.14); box-shadow: 0 10px 26px rgba(0,0,0,.35); } /* Foco accesible */ .btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px rgba(255,255,255,.9); } /* ===== v8 – Fix visibilidad de CTAs del header y link "Abrir en nueva pestaña" ===== */ /* El header siempre por encima del contenido */ .header-dark\/outer{ z-index: 120 !important; } /* Botones del header en modo oscuro: fondo translúcido y borde más presente */ .header-dark .btn.ghost.invert{ color:#fff !important; background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.42) !important; box-shadow: 0 8px 26px rgba(0,0,0,.35) !important; backdrop-filter: blur(4px); } .header-dark .btn.ghost.invert:hover{ background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.58) !important; } /* El link "Abrir en nueva pestaña →" dentro del preview: más contraste */ .open-new{ color:#E8ECFF !important; font-weight:700; text-shadow: 0 1px 10px rgba(0,0,0,.45); } /* Por si alguna tarjeta se superpone, el hero queda por debajo del header */ .hero{ position: relative; z-index: 1; } /* ===== v9 – Limitar estilos del header y restaurar tabs del preview ===== */ /* Mantengo el look de los CTAs del header… */ .header-dark .btn.ghost.invert{ color:#fff !important; background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.42) !important; box-shadow: 0 8px 26px rgba(0,0,0,.35) !important; backdrop-filter: blur(4px); } .header-dark .btn.ghost.invert:hover{ background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.58) !important; } /* …pero NO tocar nada dentro del preview */ .preview-card .btn.ghost.invert{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: none !important; color: #fff !important; } /* Tabs del selector de plantilla (preview) como los tenías */ .preview-card .tpl-tabs .tab{ appearance:none; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:.85rem; border-radius:9999px; padding:.45rem .7rem; transition:all .22s ease; box-shadow:0 0 0 rgba(0,0,0,0); } .preview-card .tpl-tabs .tab:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.18); } .preview-card .tpl-tabs .tab.active{ background: linear-gradient(90deg,#60a5fa,#a855f7); border-color: transparent; box-shadow: 0 12px 28px rgba(96,165,250,.35); } /* Asegura la cabecera encima del hero y fondo */ .header-dark{ position: sticky; top:0; z-index: 60; } /* Botones invertidos en cabecera oscura: más contraste */ .btn.ghost.invert{ color:#fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,0); } .btn.ghost.invert:hover{ background: rgba(255,255,255,.12); box-shadow: 0 10px 26px rgba(0,0,0,.35); } /* El botón "Registro" (primario) con brillo moderado */ .btn.primary{ color:#fff; background: linear-gradient(120deg, #1d2b64 0%, #8a2387 45%, #3b82f6 100%); background-size: 200% 200%; opacity:.98; } .btn.primary:hover{ transform: translateY(-1px) scale(1.015); } /* ==== Visibilidad/contraste en la zona de preview ==== */ .preview-card { position: relative; z-index: 10; } /* Tira sutil detrás de tabs + link "Abrir en nueva pestaña" para que no se pierdan con el fondo */ .preview-top{ background: linear-gradient(180deg, rgba(8,12,24,.35), rgba(8,12,24,0)); padding: .5rem .5rem .25rem; border-radius: 12px; } /* Tabs bien contrastados */ .tpl-tabs .tab{ color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); } .tpl-tabs .tab:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); } .tpl-tabs .tab.active{ background: linear-gradient(90deg, #60a5fa, #a855f7); border-color: transparent; box-shadow: 0 6px 16px rgba(96,165,250,.35); } /* Link "Abrir en nueva pestaña" visible */ .open-new{ color:#c7d2fe!important; text-shadow: 0 1px 0 rgba(0,0,0,.35); } .open-new:hover{ text-decoration: underline; } /* Flechas del carrusel del preview (más pedidos) */ .js-bs-nav{ color:#fff; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); box-shadow: 0 6px 12px rgba(0,0,0,.35); z-index: 5; } .js-bs-nav:hover{ background: rgba(0,0,0,.75); } /* ===== v10 - Landing comercial Wifya Menus ===== */ .marketing-shell{ padding-block: 2rem 3rem; } .launch-badge{ display:inline-flex; align-items:center; max-width:100%; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.12); color:#fff; border-radius:999px; padding:.55rem .85rem; font-size:.86rem; font-weight:900; box-shadow:0 16px 35px rgba(0,0,0,.24); backdrop-filter:blur(8px); } .proof-pill, .audience-chip{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); border-radius:14px; padding:.72rem .85rem; color:#f8fafc; box-shadow:0 10px 24px rgba(0,0,0,.14); } .audience-chip{ border-radius:999px; padding:.48rem .75rem; font-size:.82rem; font-weight:800; background:rgba(255,255,255,.13); } .landing-preview-card{ margin-top:.5rem; } .landing-preview-card .frame{ height:560px; } .marketing-band{ padding:4rem 0; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)); } .marketing-band-soft{ background:linear-gradient(135deg, rgba(255,247,237,.98), rgba(239,246,255,.98)); } .section-heading{ text-align:center; max-width:760px; margin:0 auto 2rem; } .section-heading.left{ text-align:left; margin:0; } .section-heading p{ color:#ea580c; font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .section-heading h2{ margin-top:.5rem; color:#0f172a; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.02; font-weight:1000; letter-spacing:0; } .section-heading span{ display:block; margin-top:1rem; color:#475569; font-size:1rem; line-height:1.65; } .feature-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; } .feature-tile, .plan-card, .conversion-strip, .faq-grid details{ background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 18px 45px rgba(15,23,42,.08); } .feature-tile{ padding:1.25rem; } .feature-tile h3, .plan-card h3{ color:#0f172a; font-size:1.08rem; font-weight:1000; } .feature-tile p, .plan-card p, .faq-grid p{ margin-top:.5rem; color:#475569; line-height:1.55; font-size:.94rem; } .plan-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; } .plan-card{ padding:1.25rem; min-height:100%; } .plan-card strong{ display:block; margin-top:.65rem; color:#ea580c; font-size:1.35rem; font-weight:1000; } .plan-card ul{ margin-top:1rem; display:grid; gap:.45rem; color:#334155; font-size:.9rem; } .plan-card li::before{ content:""; display:inline-block; width:.45rem; height:.45rem; margin-right:.45rem; border-radius:999px; background:linear-gradient(135deg,#ef4444,#f59e0b); vertical-align:middle; } .conversion-strip{ padding:1.5rem; display:flex; gap:1.25rem; align-items:center; justify-content:space-between; background: radial-gradient(900px 240px at 0% 0%, rgba(245,158,11,.22), transparent 60%), linear-gradient(135deg,#0f172a,#111827); border-color:rgba(255,255,255,.12); } .conversion-strip p{ color:#fbbf24; font-size:.8rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .conversion-strip h2{ margin-top:.35rem; color:#fff; font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.08; font-weight:1000; } .faq-section{ padding:4rem 0; background:#fff; } .faq-grid{ display:grid; gap:.75rem; } .faq-grid details{ padding:1rem 1.15rem; } .faq-grid summary{ cursor:pointer; color:#0f172a; font-weight:950; } @media (max-width: 1023px){ .feature-grid, .plan-grid{ grid-template-columns:1fr; } .conversion-strip{ align-items:flex-start; flex-direction:column; } } @media (max-width: 640px){ .marketing-shell{ padding-block:1.25rem 2rem; } .hero h1{ font-size:2.55rem; } .landing-preview-card .frame{ height:520px; } .preview-top{ align-items:flex-start; gap:.75rem; flex-direction:column; } .marketing-band, .faq-section{ padding:2.75rem 0; } } /* ===== tailwind-fallback-20260809: utilidades locales para no depender de cdn.tailwindcss.com ===== */ *,::before,::after{box-sizing:border-box}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}body{margin:0}a{color:inherit;text-decoration:none}img,svg,video,canvas,iframe{display:block;max-width:100%}button,input,textarea,select{font:inherit}button{cursor:pointer}.min-h-screen{min-height:100vh}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bg-\[var\(--page-bg\)\]{background:var(--page-bg)}.text-slate-900{color:#0f172a}.text-white{color:#fff}.text-white\/70{color:rgba(255,255,255,.70)}.text-white\/82{color:rgba(255,255,255,.82)}.text-white\/84{color:rgba(255,255,255,.84)}.text-gray-500{color:#64748b}.text-gray-600{color:#475569}.max-w-7xl{max-width:80rem}.max-w-5xl{max-width:64rem}.max-w-2xl{max-width:42rem}.mx-auto{margin-left:auto;margin-right:auto}.px-4{padding-left:1rem;padding-right:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.pt-4{padding-top:1rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mb-3{margin-bottom:.75rem}.block{display:block}.inline-grid{display:inline-grid}.flex{display:flex}.grid{display:grid}.hidden{display:none}.shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.place-items-center{place-items:center}.flex-wrap{flex-wrap:wrap}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.h-12{height:3rem}.h-16{height:4rem}.overflow-hidden{overflow:hidden}.leading-tight{line-height:1.08}.tracking-tight{letter-spacing:0}.tracking-widest{letter-spacing:.12em}.uppercase{text-transform:uppercase}.text-center{text-align:center}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-4xl{font-size:2.25rem;line-height:1.05}.font-semibold{font-weight:700}.font-black{font-weight:900}.border-t{border-top:1px solid}.border-white\/10{border-color:rgba(255,255,255,.10)}.hover\:text-white:hover{color:#fff}.scroll-smooth{scroll-behavior:smooth} @media (min-width:640px){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:text-5xl{font-size:3rem;line-height:1.04}} @media (min-width:1024px){.lg\:grid-cols-\[1fr_0\.95fr\]{grid-template-columns:1fr .95fr}.lg\:grid-cols-\[0\.85fr_1\.15fr\]{grid-template-columns:.85fr 1.15fr}.lg\:pt-10{padding-top:2.5rem}} @media (min-width:1280px){.xl\:text-6xl{font-size:3.75rem;line-height:1}} @media (max-width:639px){.header-dark .h-16{height:auto;min-height:4rem;padding:.45rem 0}.header-dark .h-12{height:auto;min-height:3.25rem}.header-dark .max-w-7xl{padding-left:.75rem;padding-right:.75rem}.hero.marketing-shell{padding-top:1.25rem}.text-4xl{font-size:2.15rem}.preview-card{margin-top:1.25rem}.landing-preview-card .frame{height:520px}.feature-grid,.plan-grid{grid-template-columns:1fr}.conversion-strip{grid-template-columns:1fr!important}} /* ===== header-selector-fix-20260809: selector robusto para clase con slash ===== */ [class~=header-dark/outer]{ background: radial-gradient(900px 360px at 40% -120px, rgba(138,35,135,.35), transparent 60%), linear-gradient(180deg, rgba(11,16,32,.92), rgba(11,16,32,.92)); position:sticky; top:0; z-index:120; border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px); }  /* ===== login-ux-fallback-20260809: soporte local para login sin Tailwind CDN ===== */ .max-w-md{max-width:28rem}.rounded-2xl{border-radius:1rem}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px;border-style:solid}.border-0{border-width:0}.border-white\/10{border-color:rgba(255,255,255,.1)}.border-green-300\/50{border-color:rgba(134,239,172,.5)}.border-rose-300\/50{border-color:rgba(253,164,175,.5)}.shadow-\[0_20px_60px_rgba\(0\,0\,0\,\.28\)\]{box-shadow:0 20px 60px rgba(0,0,0,.28)}.bg-white\/5{background:rgba(255,255,255,.05)}.bg-white{background:#fff}.bg-green-50{background:#f0fdf4}.bg-rose-50{background:#fff1f2}.backdrop-blur{backdrop-filter:blur(8px)}.p-3{padding:.75rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.pt-6{padding-top:1.5rem}.pb-4{padding-bottom:1rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.space-y-4>*+*{margin-top:1rem}.w-full{width:100%}.w-5{width:1.25rem}.h-5{height:1.25rem}.pr-11{padding-right:2.75rem}.relative{position:relative}.absolute{position:absolute}.inset-y-0{top:0;bottom:0}.right-0{right:0}.text-xl{font-size:1.25rem}.text-slate-900{color:#0f172a}.text-slate-500{color:#64748b}.text-slate-700{color:#334155}.text-green-800{color:#166534}.text-rose-800{color:#9f1239}.text-indigo-200{color:#c7d2fe}.text-white\/80{color:rgba(255,255,255,.8)}.text-white\/90{color:rgba(255,255,255,.9)}.placeholder\:text-slate-500::placeholder{color:#64748b}.font-medium{font-weight:500}.font-extrabold{font-weight:800}.list-disc{list-style-type:disc}.list-inside{list-style-position:inside}.hover\:underline:hover{text-decoration:underline}.hover\:text-slate-700:hover{color:#334155}.focus\:ring-2:focus{outline:0;box-shadow:0 0 0 3px rgba(99,102,241,.45)} .login-register-help{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;border-top:1px solid rgba(159,18,57,.18);padding-top:.75rem;font-weight:700}.login-register-help a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#9f1239;color:#fff;padding:.45rem .8rem;text-decoration:none}.login-register-help a:hover{background:#7f1d1d}.toggle-eye{height:100%;background:transparent;border:0}.toggle-eye svg{display:block}.toggle-eye .hidden{display:none!important}