/* ============================================================================ GestAyA · Redesign System (2026) Sistema de diseño compartido por index.html · colabora.html · crm.html Se carga DESPUÉS de main.css (Arsha) y sobrescribe su look. Theming por página con la clase del : theme-gestaya | theme-colabora | theme-inmobiliario ============================================================================ */ /* ---------- Tokens ---------- */ :root { /* Neutrales (slate) */ --ink-950:#020617; --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569; --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-100:#f1f5f9; --ink-50:#f8fafc; --paper:#ffffff; /* Marca por defecto (Colabora índigo) — se re-define por tema */ --brand:#6366f1; --brand-2:#8b5cf6; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-ink:#3730a3; --brand-rgb:99,102,241; --radius-xs:10px; --radius-sm:14px; --radius:20px; --radius-lg:28px; --radius-xl:36px; --shadow-xs:0 1px 2px rgba(15,23,42,.06); --shadow-sm:0 2px 4px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.06); --shadow-md:0 12px 34px -14px rgba(15,23,42,.28); --shadow-lg:0 34px 70px -24px rgba(15,23,42,.42); --shadow-brand:0 24px 60px -18px rgba(var(--brand-rgb),.55); --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); } body.theme-colabora{ --brand:#6366f1;--brand-2:#8b5cf6;--brand-600:#4f46e5;--brand-700:#4338ca;--brand-50:#eef2ff;--brand-100:#e0e7ff;--brand-ink:#3730a3;--brand-rgb:99,102,241; } body.theme-gestaya{ --brand:#3b82f6;--brand-2:#6366f1;--brand-600:#2563eb;--brand-700:#1d4ed8;--brand-50:#eff6ff;--brand-100:#dbeafe;--brand-ink:#1e40af;--brand-rgb:59,130,246; } body.theme-inmobiliario{ --brand:#0ea5e9;--brand-2:#2563eb;--brand-600:#0284c7;--brand-700:#0369a1;--brand-50:#f0f9ff;--brand-100:#e0f2fe;--brand-ink:#075985;--brand-rgb:14,165,233; } /* Alinear variables de Arsha con la marca */ body[class*="theme-"]{ --accent-color:var(--brand); --heading-color:var(--ink-900); --nav-hover-color:var(--brand); --background-color:var(--paper); --default-color:var(--ink-600); } /* ---------- Base ---------- */ body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; color:var(--ink-600); background:var(--paper); } ::selection{ background:rgba(var(--brand-rgb),.18); } img{ max-width:100%; } a{ color:var(--brand); text-decoration:none; } a:hover{ color:var(--brand-600); } h1,h2,h3,h4,h5{ color:var(--ink-900); font-family:var(--heading-font); letter-spacing:-.02em; } .container,.container-xl{ max-width:1220px; } /* Ritmo de secciones */ .section{ padding:96px 0; position:relative; } @media (max-width:768px){ .section{ padding:64px 0; } } .light-background{ --background-color:var(--ink-50); background:var(--ink-50) !important; } /* Helpers */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--nav-font); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100); padding:7px 14px; border-radius:999px; margin-bottom:18px; } .eyebrow i{ font-size:.85rem; } .gradient-text{ background:linear-gradient(100deg,var(--brand) 0%,var(--brand-2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* Section title */ .section-title{ padding-bottom:52px; max-width:720px; margin-inline:auto; } .section-title h2{ font-size:2.4rem; font-weight:700; line-height:1.15; margin:0 0 14px; } .section-title p{ font-size:1.05rem; color:var(--ink-500); margin:0; } @media (max-width:768px){ .section-title h2{ font-size:1.9rem; } } /* ---------- Botones ---------- */ .btn-pill,.btn-demo-primary,.btn-demo-ghost{ display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:999px; font-family:var(--nav-font); font-weight:600; font-size:.95rem; letter-spacing:.2px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .btn-demo-primary i,.btn-demo-ghost i,.btn-pill i{ transition:transform .3s var(--ease); } .btn-demo-primary:hover i,.btn-demo-ghost:hover i,.btn-pill:hover i{ transform:translateX(3px); } .btn-demo-primary,.btn-pill.primary{ background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%); color:#fff !important; box-shadow:var(--shadow-brand); } .btn-demo-primary:hover,.btn-pill.primary:hover{ color:#fff !important; transform:translateY(-2px); box-shadow:0 30px 66px -18px rgba(var(--brand-rgb),.7); } .btn-demo-ghost,.btn-pill.ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); color:#fff !important; backdrop-filter:blur(8px); } .btn-demo-ghost:hover,.btn-pill.ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff !important; transform:translateY(-2px); } /* Ghost sobre fondo claro */ .on-light .btn-demo-ghost,.btn-pill.ghost-light{ background:#fff; border-color:var(--ink-200); color:var(--ink-800) !important; box-shadow:var(--shadow-sm); backdrop-filter:none; } .on-light .btn-demo-ghost:hover,.btn-pill.ghost-light:hover{ border-color:var(--brand); color:var(--brand-700) !important; } /* ---------- Header / Nav (glass) ---------- */ .header{ background:transparent; padding:14px 0; transition:all .35s var(--ease); } body.scrolled .header{ background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); box-shadow:0 1px 0 rgba(15,23,42,.06), 0 10px 30px -18px rgba(15,23,42,.25); padding:8px 0; } /* Links del nav: por defecto blancos (hero oscuro), oscuros al hacer scroll */ .navmenu ul a{ color:rgba(255,255,255,.9); font-family:var(--nav-font); font-weight:500; font-size:.94rem; position:relative; padding:8px 4px; transition:color .25s var(--ease); } .navmenu ul a::after{ content:""; position:absolute; left:4px; right:4px; bottom:2px; height:2px; background:var(--brand); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .navmenu ul a:hover::after,.navmenu ul a.active::after{ transform:scaleX(1); } .navmenu ul a:hover,.navmenu ul a.active{ color:#fff; } body.scrolled .navmenu ul a{ color:var(--ink-600); } body.scrolled .navmenu ul a:hover,body.scrolled .navmenu ul a.active{ color:var(--brand-700); } body.scrolled .logo span:first-child{ color:var(--ink-900) !important; } body.scrolled .by-gestaya{ color:var(--ink-400) !important; } .btn-access-system{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:999px; background:linear-gradient(120deg,var(--brand),var(--brand-2)); color:#fff !important; font-family:var(--nav-font); font-weight:600; font-size:.9rem; box-shadow:var(--shadow-brand); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .btn-access-system:hover{ transform:translateY(-2px); } .btn-back-home{ color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:7px 15px; font-family:var(--nav-font); font-size:.85rem; font-weight:500; display:inline-flex; align-items:center; gap:7px; transition:all .25s var(--ease); } .btn-back-home:hover{ color:#fff; border-color:rgba(255,255,255,.6); } body.scrolled .btn-back-home{ color:var(--ink-500); border-color:var(--ink-200); } body.scrolled .btn-back-home:hover{ color:var(--brand-700); border-color:var(--brand); } .header-divider{ width:1px; height:24px; background:rgba(255,255,255,.25); margin:0 4px; } body.scrolled .header-divider{ background:var(--ink-200); } .by-gestaya{ font-family:var(--nav-font); font-size:.7rem; font-weight:500; color:rgba(255,255,255,.6); letter-spacing:.02em; } /* ---------- HERO ---------- */ .hero-modern{ position:relative; overflow:hidden; padding:150px 0 110px; background: radial-gradient(60% 55% at 82% 6%, rgba(var(--brand-rgb),.28), transparent 60%), radial-gradient(50% 50% at 8% 88%, rgba(var(--brand-rgb),.20), transparent 60%), linear-gradient(180deg,#0b1220 0%, #0d1526 55%, #0b1220 100%); } .hero-modern .container{ position:relative; z-index:2; } .hero-grain{ position:absolute; inset:0; z-index:1; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px; mask-image:linear-gradient(180deg,#000,transparent 75%); } .hero-blob{ position:absolute; border-radius:50%; filter:blur(70px); z-index:0; opacity:.55; } .hero-blob.b1{ width:520px; height:520px; top:-120px; right:-80px; background:radial-gradient(circle,var(--brand),transparent 70%); } .hero-blob.b2{ width:420px; height:420px; bottom:-140px; left:-100px; background:radial-gradient(circle,var(--brand-2),transparent 70%); } .hero-kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:8px 16px; border-radius:999px; font-family:var(--nav-font); font-weight:500; font-size:.82rem; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); } .hero-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.25); } .hero-modern h1{ color:#fff; font-size:3.4rem; line-height:1.06; font-weight:700; margin:0 0 20px; letter-spacing:-.03em; } .hero-modern h1 .gradient-text{ background:linear-gradient(100deg,#a5b4fc,#c4b5fd 60%,#f0abfc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-modern .lead{ color:rgba(226,232,240,.82); font-size:1.16rem; line-height:1.6; max-width:560px; margin:0 0 32px; } .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; } .hero-trust{ display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; color:rgba(226,232,240,.7); font-size:.86rem; } .hero-trust .t{ display:inline-flex; align-items:center; gap:8px; } .hero-trust i{ color:#4ade80; font-size:1rem; } @media (max-width:992px){ .hero-modern{ padding:130px 0 80px; } .hero-modern h1{ font-size:2.5rem; } } /* ---------- App frame (mockup navegador) ---------- */ .app-frame{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(15,23,42,.04); } .app-frame .bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:linear-gradient(180deg,#f8fafc,#eef2f7); border-bottom:1px solid #e5e9f0; } .app-frame .bar .dot{ width:11px; height:11px; border-radius:50%; } .app-frame .bar .r{ background:#ff5f57; } .app-frame .bar .y{ background:#febc2e; } .app-frame .bar .g{ background:#28c840; } .app-frame .bar .url{ flex:1; margin-left:10px; height:22px; border-radius:7px; background:#fff; border:1px solid #e2e8f0; display:flex; align-items:center; padding:0 10px; font-size:.72rem; color:#94a3b8; font-family:var(--nav-font); } .app-frame img{ display:block; width:100%; } .hero-shot{ position:relative; } .hero-shot .app-frame{ transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); transition:transform .6s var(--ease-out); } .hero-shot:hover .app-frame{ transform:perspective(1600px) rotateY(0) rotateX(0); } .float-badge{ position:absolute; z-index:3; background:#fff; border-radius:14px; box-shadow:var(--shadow-md); padding:12px 15px; display:flex; align-items:center; gap:11px; font-family:var(--nav-font); } .float-badge .ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:1.05rem; } .float-badge .k{ font-size:.7rem; color:var(--ink-400); font-weight:500; } .float-badge .v{ font-size:1rem; color:var(--ink-900); font-weight:700; line-height:1.1; } .float-badge.one{ top:-22px; left:-26px; animation:floaty 5s ease-in-out infinite; } .float-badge.two{ bottom:-24px; right:-20px; animation:floaty 6s ease-in-out infinite .5s; } @media (max-width:992px){ .hero-shot .app-frame{ transform:none; } .float-badge{ display:none; } } /* ---------- Trust / logos strip ---------- */ .trust-strip{ padding:34px 0; border-top:1px solid var(--ink-100); border-bottom:1px solid var(--ink-100); background:#fff; } .trust-strip p{ text-align:center; color:var(--ink-400); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin:0 0 18px; } .trust-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; } .trust-chip{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-500); font-family:var(--nav-font); font-weight:600; font-size:.92rem; padding:9px 16px; border:1px solid var(--ink-100); border-radius:999px; background:var(--ink-50); } .trust-chip i{ color:var(--brand); } /* ---------- Stats band ---------- */ .stats-band{ position:relative; overflow:hidden; padding:70px 0; background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%); } .stats-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% -20%, rgba(255,255,255,.22), transparent 60%); } .stats-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .stat b{ display:block; color:#fff; font-family:var(--heading-font); font-weight:700; font-size:2.9rem; line-height:1; letter-spacing:-.02em; } .stat span{ display:block; color:rgba(255,255,255,.82); font-size:.95rem; margin-top:8px; } @media (max-width:768px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:30px 16px; } .stat b{ font-size:2.2rem; } } /* ---------- Cards genéricas ---------- */ .module-card,.r-card{ background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius); padding:32px 28px; height:100%; box-shadow:var(--shadow-xs); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); position:relative; overflow:hidden; } .module-card::before,.r-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); opacity:0; transition:opacity .35s var(--ease); } .module-card:hover,.r-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--brand-100); } .module-card:hover::before,.r-card:hover::before{ opacity:1; } .module-icon,.r-icon{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; font-size:1.5rem; color:#fff; margin-bottom:20px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow-brand); } .module-icon.tramites{ background:linear-gradient(135deg,#0ea5e9,#2563eb); } .module-icon.gerencial{ background:linear-gradient(135deg,#8b5cf6,#d946ef); } .module-card h4,.r-card h4{ font-size:1.2rem; font-weight:700; margin:0 0 10px; } .module-card p,.r-card p{ color:var(--ink-500); font-size:.96rem; line-height:1.6; margin:0; } /* ---------- Feature / screenshot blocks ---------- */ .screenshot-block{ padding:44px 0; } .screenshot-block h3{ font-size:1.7rem; font-weight:700; margin:0 0 14px; } .screenshot-block > .row > div p{ color:var(--ink-500); font-size:1rem; line-height:1.65; } .screenshot-block ul{ list-style:none; padding:0; margin:18px 0 0; } .screenshot-block ul li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; color:var(--ink-700); font-size:.96rem; } .screenshot-block ul li i{ color:var(--brand); font-size:1.15rem; flex-shrink:0; margin-top:1px; } .feat-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--nav-font); font-weight:600; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100); padding:6px 13px; border-radius:999px; margin-bottom:14px; } .ia-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--nav-font); font-weight:600; font-size:.76rem; letter-spacing:.04em; color:#fff; background:linear-gradient(120deg,#8b5cf6,#d946ef); padding:6px 14px; border-radius:999px; margin-bottom:14px; box-shadow:0 10px 24px -10px rgba(139,92,246,.6); } /* Marco de imagen dentro de features */ .shot-wrap{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--ink-100); background:#fff; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .shot-wrap:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } .shot-wrap img{ display:block; width:100%; } /* ---------- Acordeón (why-us + faq) ---------- */ .faq-item{ background:#fff; border:1px solid var(--ink-100); border-radius:16px; padding:22px 26px; margin-bottom:14px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .faq-item:hover{ border-color:var(--brand-100); box-shadow:var(--shadow-sm); } .faq-item.faq-active{ border-color:var(--brand); box-shadow:var(--shadow-sm); } .faq-item h3{ font-size:1.06rem; font-weight:600; color:var(--ink-900); } .faq-item .faq-toggle{ color:var(--ink-400); transition:transform .3s var(--ease), color .3s var(--ease); } .faq-item.faq-active .faq-toggle{ transform:rotate(90deg); color:var(--brand); } .faq-item .faq-content p{ color:var(--ink-500); } .why-us .faq-item span:first-child{ color:var(--brand); font-weight:700; } .faq-icon{ color:var(--brand) !important; } /* ---------- CTA oscuro ---------- */ .call-to-action.dark-background{ background:linear-gradient(120deg,#0d1526,#131c31) !important; border-radius:0; } .call-to-action{ overflow:hidden; } .call-to-action h3{ color:#fff; font-size:2rem; font-weight:700; } .call-to-action p{ color:rgba(226,232,240,.8); } /* ---------- Cross-sell ---------- */ .cross-sell{ padding:90px 0; background:var(--ink-50); } .cross-sell-card{ background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; display:flex; align-items:stretch; max-width:960px; margin-inline:auto; } .cross-sell-icon{ flex:0 0 210px; display:grid; place-items:center; font-size:4rem; color:#fff; background:linear-gradient(135deg,#0ea5e9,#2563eb); } .cross-sell-body{ padding:34px 38px; } .cross-sell-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--nav-font); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:#0369a1; background:#e0f2fe; padding:5px 12px; border-radius:999px; margin-bottom:12px; } .cross-sell-body h3{ font-size:1.4rem; font-weight:700; margin:0 0 10px; } .cross-sell-body p{ color:var(--ink-500); } .cross-sell-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; } .btn-know{ padding:11px 22px; border-radius:999px; background:#0369a1; color:#fff !important; font-family:var(--nav-font); font-weight:600; font-size:.9rem; } .btn-go{ padding:11px 22px; border-radius:999px; border:1.5px solid var(--ink-200); color:var(--ink-700) !important; font-family:var(--nav-font); font-weight:600; font-size:.9rem; } .btn-know:hover{ background:#075985; } .btn-go:hover{ border-color:var(--brand); color:var(--brand-700) !important; } @media (max-width:768px){ .cross-sell-card{ flex-direction:column; } .cross-sell-icon{ flex-basis:130px; } } /* ---------- Contacto ---------- */ .contact .info-wrap{ background:linear-gradient(160deg,var(--brand-50),#fff); border:1px solid var(--brand-100); border-radius:var(--radius); padding:32px; height:100%; } .contact .info-item{ background:#fff !important; border:1px solid var(--ink-100); border-radius:14px; padding:18px !important; margin-bottom:14px; } .contact .info-item i{ color:#fff !important; background:linear-gradient(135deg,var(--brand),var(--brand-2)) !important; border-radius:11px; } .contact .info-item h3{ font-size:.8rem !important; color:var(--ink-400) !important; text-transform:uppercase; letter-spacing:.05em; } .contact .info-item p{ font-size:1.05rem !important; color:var(--ink-900) !important; font-weight:600; } .php-email-form{ background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); } .php-email-form label{ font-family:var(--nav-font); font-weight:600; font-size:.85rem; color:var(--ink-700); } .php-email-form .form-control{ border-radius:12px; border:1.5px solid var(--ink-200); padding:12px 14px; font-size:.95rem; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .php-email-form .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12); } .php-email-form button[type=submit]{ background:linear-gradient(120deg,var(--brand),var(--brand-2)); border:0; border-radius:999px; padding:14px 40px; font-family:var(--nav-font); font-weight:600; box-shadow:var(--shadow-brand); transition:transform .3s var(--ease); } .php-email-form button[type=submit]:hover{ transform:translateY(-2px); } /* ---------- Footer ---------- */ .footer{ background:#0b1220; color:rgba(226,232,240,.7); } .footer .footer-top{ padding-top:66px; padding-bottom:40px; } .footer h4{ color:#fff; font-size:.95rem; font-weight:600; letter-spacing:.02em; } .footer a{ color:rgba(226,232,240,.68); transition:color .2s var(--ease); } .footer a:hover{ color:var(--brand); } .footer .footer-links ul li i{ color:var(--brand); } .footer .sitename{ color:#fff; font-weight:700; } .footer .social-links a{ width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; margin-right:9px; transition:all .25s var(--ease); } .footer .social-links a:hover{ background:var(--brand); border-color:var(--brand); transform:translateY(-2px); } .footer .copyright{ border-top:1px solid rgba(255,255,255,.08); padding-top:24px; color:rgba(226,232,240,.5); font-size:.86rem; } /* ---------- Flotantes ---------- */ .scroll-top{ background:linear-gradient(120deg,var(--brand),var(--brand-2)) !important; border-radius:12px !important; box-shadow:var(--shadow-brand); } /* ---------- Animaciones ---------- */ @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .hero-shot .app-frame{ transform:none !important; } } /* ---------- Logo swap (dark hero ↔ scrolled light header) ---------- */ .logo-light{ display:none; } body.scrolled .logo-dark{ display:none; } body.scrolled .logo-light{ display:inline-block; } /* ---------- Hub: suite product cards ---------- */ .suite-card{ background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius-lg); padding:34px; height:100%; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .suite-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--card-accent,var(--brand)); } .suite-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--card-accent,var(--brand)) 35%, #fff); } .suite-card .p-badge{ align-self:flex-start; font-family:var(--nav-font); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--card-accent,var(--brand)); background:color-mix(in srgb, var(--card-accent,var(--brand)) 12%, #fff); padding:6px 13px; border-radius:999px; margin-bottom:20px; } .suite-card .p-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; } .suite-card .p-logo{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:1.6rem; color:#fff; background:var(--card-accent,var(--brand)); box-shadow:0 16px 32px -14px var(--card-accent,var(--brand)); overflow:hidden; flex-shrink:0; } .suite-card .p-logo img{ max-height:34px; max-width:40px; object-fit:contain; } .suite-card .p-name{ font-family:var(--heading-font); font-weight:700; font-size:1.55rem; color:var(--ink-900); letter-spacing:-.02em; } .suite-card .p-sub{ color:var(--ink-700); font-weight:600; margin:0 0 12px; } .suite-card .p-desc{ color:var(--ink-500); font-size:.97rem; line-height:1.62; margin:0 0 20px; } .suite-card ul{ list-style:none; padding:0; margin:0 0 26px; flex:1; } .suite-card ul li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; color:var(--ink-700); font-size:.95rem; } .suite-card ul li i{ color:var(--card-accent,var(--brand)); font-size:1.1rem; flex-shrink:0; margin-top:1px; } .suite-card .p-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; } .suite-card .p-primary,.suite-card .p-ghost{ padding:12px 22px; border-radius:999px; font-family:var(--nav-font); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:8px; transition:transform .3s var(--ease), filter .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .suite-card .p-primary{ background:var(--card-accent,var(--brand)); color:#fff !important; box-shadow:0 16px 32px -14px var(--card-accent,var(--brand)); } .suite-card .p-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); } .suite-card .p-ghost{ border:1.5px solid var(--ink-200); color:var(--ink-700) !important; } .suite-card .p-ghost:hover{ border-color:var(--card-accent,var(--brand)); color:var(--card-accent,var(--brand)) !important; } /* ---------- Hub: why / services cards ---------- */ .service-item{ background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius); padding:30px 26px; height:100%; box-shadow:var(--shadow-xs); text-align:left; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .service-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--brand-100); } .service-item > .icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.35rem; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); margin-bottom:18px; box-shadow:var(--shadow-brand); } .service-item h4{ font-size:1.1rem; font-weight:700; margin:0 0 8px; } .service-item h4 a{ color:var(--ink-900); } .service-item h4 a:hover{ color:var(--brand-700); } .service-item p{ color:var(--ink-500); font-size:.94rem; line-height:1.6; margin:0; } .service-item > .icon i{ color:#fff !important; font-size:1.35rem; line-height:1; } /* ---------- Contacto por WhatsApp ---------- */ .wa-panel{ background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow-sm); height:100%; } .wa-panel .wa-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; } .wa-panel .wa-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; color:#fff; background:linear-gradient(135deg,#25D366,#128C7E); box-shadow:0 16px 32px -14px rgba(37,211,102,.55); flex-shrink:0; } .wa-panel h3{ font-size:1.3rem; font-weight:700; margin:0; } .wa-panel .wa-sub{ color:var(--ink-500); font-size:.92rem; } .wa-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; } .wa-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1.5px solid var(--ink-200); background:#fff; color:var(--ink-700) !important; font-family:var(--nav-font); font-weight:600; font-size:.88rem; transition:all .25s var(--ease); } .wa-chip:hover{ border-color:#25D366; color:#128C7E !important; background:#f0fdf4; transform:translateY(-1px); } .wa-chip i{ color:#25D366; } .wa-compose{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; } .wa-compose input{ flex:1; min-width:200px; border:1.5px solid var(--ink-200); border-radius:12px; padding:13px 15px; font-size:.95rem; font-family:var(--default-font); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .wa-compose input:focus{ outline:none; border-color:#25D366; box-shadow:0 0 0 4px rgba(37,211,102,.14); } .btn-wa{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:12px; border:0; background:linear-gradient(135deg,#25D366,#128C7E); color:#fff !important; font-family:var(--nav-font); font-weight:700; font-size:.95rem; box-shadow:0 16px 32px -14px rgba(37,211,102,.55); transition:transform .3s var(--ease); cursor:pointer; text-decoration:none; } .btn-wa:hover{ transform:translateY(-2px); color:#fff !important; } .btn-wa.full{ width:100%; } .wa-note{ color:var(--ink-400); font-size:.85rem; margin:16px 0 0; text-align:center; } .wa-note a{ color:var(--brand); }