/* ========================================================= HOME (scoped) — no-conflict Activa con: (o data-page="home") No toca tipografías ni resets globales. ========================================================= */ :where(body.home-landing, [data-page="home"]) { /* Tokens solo para la home */ --hl-primary: #4f46e5; /* indigo-600 */ --hl-secondary: #ec4899; /* pink-500 */ --hl-dark: #0b1020; /* fondo oscuro */ --hl-grid: rgba(255,255,255,.06); --hl-card-border: rgba(255,255,255,.12); --hl-card-bg: rgba(255,255,255,.04); --hl-text: #e5e7eb; } /* ======= HERO ======= */ :where(body.home-landing, [data-page="home"]) .hero-section{ position:relative;overflow:hidden;background:var(--hl-dark); min-height:62vh;display:flex;align-items:center;justify-content:center;color:#fff } @media (min-width:640px){ :where(body.home-landing,[data-page="home"]) .hero-section{min-height:78vh} } @media (min-width:1024px){ :where(body.home-landing,[data-page="home"]) .hero-section{min-height:86vh} } :where(body.home-landing,[data-page="home"]) .hero-section::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:6; background-image:linear-gradient(var(--hl-grid) 1px,transparent 1px), linear-gradient(90deg,var(--hl-grid) 1px,transparent 1px); background-size:24px 24px,24px 24px; } :where(body.home-landing,[data-page="home"]) .hero-section::before{ content:"";position:absolute;inset:0;z-index:7; background: radial-gradient(120% 80% at 50% 18%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.60) 100%), linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,.35)); } :where(body.home-landing,[data-page="home"]) #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:5} :where(body.home-landing,[data-page="home"]) .hero-content{position:relative;z-index:20} :where(body.home-landing,[data-page="home"]) .hero-kicker, :where(body.home-landing,[data-page="home"]) .hero-title, :where(body.home-landing,[data-page="home"]) .hero-lead{ text-shadow:0 1px 2px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35) } /* ======= CTAs (solo home) ======= */ :where(body.home-landing,[data-page="home"]) .cta-btn{ position:relative;padding:.875rem 1.5rem;border-radius:9999px;font-weight:700; transition:transform .2s ease, box-shadow .2s ease } :where(body.home-landing,[data-page="home"]) .cta-primary{ background:var(--hl-primary);color:#fff;box-shadow:0 10px 30px rgba(79,70,229,.35) } :where(body.home-landing,[data-page="home"]) .cta-primary:hover{ transform:translateY(-2px);box-shadow:0 16px 40px rgba(79,70,229,.5) } /* ======= SERVICIOS ======= */ :where(body.home-landing,[data-page="home"]) .services-section{background:var(--hl-dark);color:var(--hl-text)} :where(body.home-landing,[data-page="home"]) .svc-card{ position:relative;border-radius:18px;border:1px solid var(--hl-card-border); background:var(--hl-card-bg);backdrop-filter:blur(6px); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden; --sheen-alpha:.16;--gx:50%;--gy:38% } :where(body.home-landing,[data-page="home"]) .svc-card:hover{ box-shadow:0 20px 50px rgba(79,70,229,.25);border-color:rgba(79,70,229,.35) } :where(body.home-landing,[data-page="home"]) .svc-card::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;mix-blend-mode:screen; opacity:var(--sheen-alpha);transition:opacity .25s ease, background-position .25s ease; background:radial-gradient(140% 180% at var(--gx) var(--gy), rgba(255,255,255,.14), rgba(255,255,255,.06) 28%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 68%); background-repeat:no-repeat;background-size:150% 150%; } :where(body.home-landing,[data-page="home"]) .svc-icon{ width:54px;height:54px;display:grid;place-items:center;border-radius:14px; background:var(--hl-grid);border:1px solid rgba(255,255,255,.14) } /* ======= TRUST / CLIENTES ======= */ :where(body.home-landing,[data-page="home"]) .brands-section{background:var(--hl-dark);color:var(--hl-text)} :where(body.home-landing,[data-page="home"]) .brand{ display:flex;align-items:center;justify-content:center;width:100%;height:72px;margin-bottom:.75rem;border-radius:14px; border:1px solid var(--hl-grid);background:rgba(255,255,255,.03);filter:grayscale(100%);opacity:.85; transition:filter .25s ease,opacity .25s ease,transform .2s ease,border-color .2s ease } :where(body.home-landing,[data-page="home"]) .brand:hover{ filter:none;opacity:1;transform:translateY(-2px);border-color:rgba(255,255,255,.16) } /* ======= APPS / DEMOS ======= */ :where(body.home-landing,[data-page="home"]) .apps-section{background:var(--hl-dark);color:var(--hl-text)} :where(body.home-landing,[data-page="home"]) .toolbar{ position:sticky;top:64px;z-index:30;background:rgba(10,15,31,.7); backdrop-filter:blur(8px);border:1px solid var(--hl-grid);border-radius:16px } :where(body.home-landing,[data-page="home"]) .filter-btn{ border:1px solid rgba(255,255,255,.16);border-radius:9999px;padding:.45rem .9rem;font-size:.85rem; color:#cbd5e1;background:rgba(255,255,255,.04) } :where(body.home-landing,[data-page="home"]) .filter-btn.active{ border-color:rgba(79,70,229,.65);color:#fff;background:rgba(79,70,229,.15) } :where(body.home-landing,[data-page="home"]) .app-card{ position:relative;border-radius:18px;border:1px solid var(--hl-card-border);background:var(--hl-card-bg); backdrop-filter:blur(6px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden } :where(body.home-landing,[data-page="home"]) .app-card:hover{ box-shadow:0 18px 45px rgba(79,70,229,.25);border-color:rgba(79,70,229,.35) } :where(body.home-landing,[data-page="home"]) .app-media{ aspect-ratio:16/9;background:#111827;border:1px solid var(--hl-grid);border-radius:12px } :where(body.home-landing,[data-page="home"]) .badge{ position:absolute;top:12px;left:12px;border-radius:9999px;padding:.25rem .55rem;font-size:.72rem; background:#111827;border:1px solid rgba(255,255,255,.18);color:#e5e7eb } :where(body.home-landing,[data-page="home"]) .tag{ border:1px solid rgba(255,255,255,.18);border-radius:9999px;padding:.25rem .55rem;font-size:.72rem;color:#d1d5db } /* ======= TESTIMONIOS ======= */ :where(body.home-landing,[data-page="home"]) .testimonials-section{background:var(--hl-dark);color:var(--hl-text)} :where(body.home-landing,[data-page="home"]) .review-card{ position:relative;border-radius:18px;border:1px solid var(--hl-card-border); background:var(--hl-card-bg);backdrop-filter:blur(6px); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden } :where(body.home-landing,[data-page="home"]) .review-card:hover{ box-shadow:0 20px 50px rgba(79,70,229,.25);border-color:rgba(79,70,229,.35) } :where(body.home-landing,[data-page="home"]) .review-card::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:.16; transition:opacity .25s ease, background-position .25s ease; background:radial-gradient(140% 180% at 50% 38%, rgba(255,255,255,.14), rgba(255,255,255,.06) 28%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 68%); background-repeat:no-repeat;background-size:150% 150% } :where(body.home-landing,[data-page="home"]) .avatar{ width:40px;height:40px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center; background:#111827;border:1px solid var(--hl-card-border);color:#e5e7eb;font-weight:700 } :where(body.home-landing,[data-page="home"]) .stars{display:flex;gap:4px} :where(body.home-landing,[data-page="home"]) .star{width:18px;height:18px;color:#9ca3af;cursor:pointer;transition:transform .15s ease} :where(body.home-landing,[data-page="home"]) .star.filled{color:#fbbf24} :where(body.home-landing,[data-page="home"]) .star:hover{transform:scale(1.05)} :where(body.home-landing,[data-page="home"]) .testimonial{font-size:.82rem;color:#cbd5e1;opacity:.85;margin-top:.5rem} /* ======= Accesibilidad / rendimiento ======= */ @media (prefers-reduced-motion:reduce){ :where(body.home-landing,[data-page="home"]) .svc-card, :where(body.home-landing,[data-page="home"]) .app-card, :where(body.home-landing,[data-page="home"]) .cta-btn, :where(body.home-landing,[data-page="home"]) .review-card{transition:none} }