/* ============================================================ COBIZ · Galería marketplace — estilo propio (navy + coral) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{ --navy:#0A2540; --navy-2:#0c2c4d; --surface:#10314f; --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.16); --text:#eaf0fb; --muted:#9fb2c4; --muted-2:#6f859c; --coral:#FF8A4C; --coral-2:#ff9d66; --blue:#5b8cff; --display:'Inter',system-ui,sans-serif; --ui:'Inter',system-ui,sans-serif; --maxw:1240px; --hero-glow-1:rgba(91,140,255,.22); --hero-glow-2:rgba(255,138,76,.18); color-scheme:dark; } /* ---- Tema claro (se activa con data-theme="light" en ) ---- */ [data-theme="light"]{ --navy:#ffffff; --navy-2:#f4f7fb; --surface:#ffffff; --line:rgba(10,37,64,0.10); --line-2:rgba(10,37,64,0.16); --text:#0A2540; --muted:#566a7e; --muted-2:#8a99ab; --hero-glow-1:rgba(91,140,255,.12); --hero-glow-2:rgba(255,138,76,.12); color-scheme:light; } [data-theme="light"] body{ background:#fbfcfe; } [data-theme="light"] .tcard{ box-shadow:0 1px 0 rgba(10,37,64,.04); } [data-theme="light"] .tcard:hover{ box-shadow:0 24px 50px -28px rgba(10,37,64,.30); } [data-theme="light"] .gnav,[data-theme="light"] .controls{ background:color-mix(in srgb,#ffffff 86%,transparent); } [data-theme="light"] .ghero__badge,[data-theme="light"] .search input{ background:#ffffff; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--ui); background:var(--navy); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } ul{ list-style:none; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } .display{ font-family:var(--display); font-weight:700; letter-spacing:-0.02em; line-height:1.06; } /* nav */ .gnav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--navy) 82%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .gnav__in{ display:flex; align-items:center; justify-content:space-between; height:70px; } .gbrand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.01em; } .gbrand__mark{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--coral),var(--coral-2)); display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; } .gbrand small{ color:var(--muted); font-weight:500; font-size:12.5px; font-family:var(--ui); letter-spacing:0; } .gnav__links{ display:flex; gap:26px; font-size:14.5px; color:var(--muted); font-weight:500; } .gnav__links a:hover{ color:var(--text); } .gnav__cta{ background:var(--coral); color:#fff; padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; transition:background .2s; } .gnav__cta:hover{ background:var(--coral-2); } .gtheme{ display:grid; place-items:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer; font-size:18px; transition:border-color .2s, color .2s, background .2s; } .gtheme:hover{ border-color:var(--text); } /* switcher de idioma ES / EN / PT */ .glang{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); } .glang__btn{ appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.02em; line-height:1; padding:6px 10px; border-radius:999px; transition:color .2s, background .2s; } .glang__btn:hover{ color:var(--text); } .glang__btn--on{ background:var(--coral); color:#fff; } @media(max-width:760px){ .gnav__links{ display:none; } .glang__btn{ padding:6px 8px; font-size:12px; } } /* hero */ .ghero{ position:relative; padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px); text-align:center; overflow:hidden; } .ghero::before{ content:''; position:absolute; inset:0; background: radial-gradient(60% 80% at 50% -10%, var(--hero-glow-1), transparent 60%), radial-gradient(50% 60% at 85% 10%, var(--hero-glow-2), transparent 60%); z-index:-1; } .ghero__badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:var(--surface); border-radius:999px; padding:7px 15px; font-size:13px; color:var(--muted); margin-bottom:26px; } .ghero__badge b{ color:var(--text); font-weight:600; } .ghero__badge .dot{ width:7px; height:7px; border-radius:50%; background:#22d3a7; box-shadow:0 0 8px #22d3a7; } .ghero h1{ font-size:clamp(34px,6vw,64px); margin-bottom:20px; } .ghero h1 em{ font-style:normal; background:linear-gradient(120deg,var(--coral),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ghero p{ max-width:640px; margin:0 auto; color:var(--muted); font-size:clamp(16px,1.8vw,19px); } .ghero__stats{ display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:38px; } .ghero__stat .n{ font-family:var(--display); font-weight:800; font-size:30px; } .ghero__stat .n span{ color:var(--coral); } .ghero__stat .l{ color:var(--muted); font-size:13px; margin-top:4px; } /* controls */ .controls{ position:sticky; top:70px; z-index:40; background:color-mix(in srgb,var(--navy) 88%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; } .search{ position:relative; max-width:460px; margin:0 auto 16px; } .search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:18px; } .search input{ width:100%; padding:13px 16px 13px 44px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--text); font-size:15px; font-family:inherit; } .search input::placeholder{ color:var(--muted-2); } .search input:focus{ outline:none; border-color:var(--blue); } .filter-row{ margin-bottom:10px; } .filter-row__label{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); font-weight:600; margin-bottom:8px; padding-left:2px; } .chips{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ border:1px solid var(--line-2); background:transparent; color:var(--muted); padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .18s; } .chip:hover{ color:var(--text); border-color:var(--text); } .chip--on{ background:var(--text); color:var(--navy); border-color:var(--text); font-weight:600; } /* grid */ .results{ padding:36px 0 80px; } .results__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:24px; flex-wrap:wrap; } .results__head h2{ font-family:var(--display); font-weight:700; font-size:20px; } .results__head .meta{ color:var(--muted); font-size:14px; } .results__head .meta b{ color:var(--text); } .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media(max-width:1040px){ .tgrid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:640px){ .tgrid{ grid-template-columns:1fr; } } .tcard{ display:block; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; } .tcard:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 24px 60px -30px rgba(0,0,0,.7); } .tcard--soon{ cursor:default; } /* ---- preview: iframe en vivo (construidas) o mock rico de web (pendientes) ---- */ .tprev{ position:relative; } .tprev__chrome{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--navy-2); border-bottom:1px solid var(--line); } .tprev__chrome i{ width:8px; height:8px; border-radius:50%; background:rgba(127,140,160,.55); } .tprev__url{ margin-left:8px; font-size:10.5px; color:var(--muted-2); background:color-mix(in srgb,var(--surface) 70%, transparent); border:1px solid var(--line); border-radius:6px; padding:2px 12px; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:72%; } .tprev__view{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#fff; } .tprev__frame{ position:absolute; top:0; left:0; width:1280px; height:800px; border:0; transform-origin:0 0; pointer-events:none; background:#fff; } .tcard__live,.tcard__soon{ position:absolute; top:38px; right:10px; z-index:3; font-size:11px; font-weight:600; padding:5px 10px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .tcard__live{ background:rgba(7,18,12,.68); color:#7ef0c4; display:inline-flex; align-items:center; gap:6px; } .tcard__dot{ width:6px; height:6px; border-radius:50%; background:#22d3a7; box-shadow:0 0 6px #22d3a7; } .tcard__soon{ background:rgba(7,18,33,.6); color:#dfe6f2; } .tcard__flag{ position:absolute; top:38px; left:10px; z-index:3; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--coral); color:#fff; box-shadow:0 6px 18px -8px rgba(255,138,76,.8); } .tcard__flag i{ font-size:12px; } .tcard--flag{ border-color:color-mix(in srgb,var(--coral) 45%, var(--line)); } .tcard--flag:hover{ border-color:var(--coral); } /* mock rico de web (pendientes) themed por --c1/--c2 */ .tprev__view--mock{ background:#fbfcff; } .mck{ position:absolute; inset:0; display:flex; flex-direction:column; } .mck__nav{ display:flex; align-items:center; gap:7px; height:13%; padding:0 6%; border-bottom:1px solid rgba(10,37,64,.07); } .mck__logo{ width:15px; height:15px; border-radius:5px; background:linear-gradient(135deg,var(--c1),var(--c2)); flex:none; } .mck__menu{ display:flex; gap:6px; margin-left:5px; } .mck__menu i{ width:18px; height:4px; border-radius:3px; background:rgba(10,37,64,.15); } .mck__cta{ margin-left:auto; width:40px; height:13px; border-radius:5px; background:var(--c2); } .mck__hero{ flex:1; display:flex; align-items:center; gap:5%; padding:5% 6%; } .mck__copy{ flex:1.1; display:flex; flex-direction:column; gap:6px; } .mck__h{ height:10px; width:92%; border-radius:4px; background:var(--c1); } .mck__h.s{ width:60%; } .mck__t{ height:5px; width:82%; border-radius:3px; background:rgba(10,37,64,.16); } .mck__t.s{ width:54%; } .mck__btn{ margin-top:7px; width:44px; height:13px; border-radius:5px; background:linear-gradient(120deg,var(--c1),var(--c2)); } .mck__img{ flex:.92; align-self:stretch; border-radius:8px; background:linear-gradient(150deg,var(--c1),var(--c2)); margin:1% 0; } .mck__cards{ display:flex; gap:4%; height:24%; padding:0 6% 6%; } .mck__cards span{ flex:1; border-radius:6px; background:#fff; border:1px solid rgba(10,37,64,.08); box-shadow:0 3px 10px rgba(10,37,64,.05); } .tcard__body{ padding:18px 20px 20px; } .tcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .tcard__top h3{ font-family:var(--display); font-weight:700; font-size:18px; } .tcard__style{ font-size:11px; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; white-space:nowrap; } .tcard__body p{ color:var(--muted); font-size:14px; margin:6px 0 16px; } .tcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid var(--line); } .tcard__ind{ font-size:12.5px; color:var(--muted-2); } .tcard__go{ font-size:13px; font-weight:600; color:var(--coral); } .tcard--soon .tcard__go{ color:var(--muted-2); } .empty{ color:var(--muted); padding:40px 0; text-align:center; } /* how it works */ .how{ border-top:1px solid var(--line); padding:72px 0; background:var(--navy-2); } .how h2{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3.5vw,36px); text-align:center; margin-bottom:12px; } .how>.wrap>p{ text-align:center; color:var(--muted); max-width:560px; margin:0 auto 44px; } .how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media(max-width:760px){ .how__grid{ grid-template-columns:1fr; } } .how__step{ border:1px solid var(--line); border-radius:16px; padding:28px; background:var(--surface); } .how__n{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--coral),var(--coral-2)); color:#fff; font-family:var(--display); font-weight:800; display:grid; place-items:center; margin-bottom:16px; } .how__step h3{ font-family:var(--display); font-weight:600; font-size:18px; margin-bottom:8px; } .how__step p{ color:var(--muted); font-size:14.5px; } /* footer */ .gfooter{ border-top:1px solid var(--line); padding:48px 0; text-align:center; color:var(--muted); font-size:14px; } .gfooter b{ color:var(--text); } .gfooter a{ color:var(--coral); }