:root { --navy:#101a2b; --navy-2:#17263c; --navy-3:#233650; --gold:#d8a84e; --gold-light:#f0cf7b; --cream:#f7f4ec; --paper:#fffdf9; --ink:#172233; --muted:#788090; --line:#e7e3d9; --success:#1fa57a; --shadow:0 18px 45px rgba(16,26,43,.12); color-scheme:light; }
:root[data-theme="dark"] { --cream:#101a2b; --paper:#17263c; --ink:#f4f0e7; --muted:#b0b6c0; --line:#2b3c55; --shadow:0 18px 45px rgba(0,0,0,.28); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Tahoma,Arial,sans-serif; line-height:1.6; transition:background .25s,color .25s; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.announcement { min-height:35px; padding:7px 5vw; background:var(--navy); color:#e8dcc0; font-size:12px; display:flex; align-items:center; justify-content:center; gap:10px; letter-spacing:.1px; }
.announcement a { color:var(--gold-light); margin-right:18px; }
.announcement-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(216,168,78,.16); }
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--cream) 92%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent); }
.header-inner,.section-shell,.footer-inner { width:min(1180px,calc(100% - 48px)); margin:auto; }
.header-inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }
.brand-mark { position:relative; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--gold); border-radius:14px 14px 14px 4px; color:var(--gold); font-weight:900; font-size:24px; transform:rotate(-7deg); }
.brand-mark span { transform:rotate(7deg); }
.brand-mark i { position:absolute; width:7px; height:7px; border:1px solid var(--gold); border-radius:50%; top:5px; right:5px; }
.brand-copy { display:flex; flex-direction:column; line-height:1.2; }
.brand-copy strong { font-size:21px; letter-spacing:-.7px; }
.brand-copy small { color:var(--muted); font-size:9px; margin-top:3px; }
.main-nav { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:13px; }
.main-nav a { padding:7px 0; position:relative; }
.main-nav a:hover,.main-nav a.active { color:var(--ink); }
.main-nav a.active::after { content:""; position:absolute; bottom:-7px; right:0; width:22px; height:2px; background:var(--gold); }
.header-actions { display:flex; align-items:center; gap:10px; }
.icon-button,.menu-button { border:0; background:transparent; color:var(--muted); display:flex; align-items:center; gap:6px; font-size:11px; padding:8px 4px; }
.icon-button:hover { color:var(--ink); }
.header-wa { background:var(--navy); color:#fff; border-radius:9px; padding:9px 14px; font-size:12px; display:flex; align-items:center; gap:7px; }
.wa-symbol { display:inline-grid; place-items:center; width:19px; height:19px; border:1.5px solid currentColor; border-radius:50%; font-size:13px; line-height:1; }
.menu-button,.mobile-nav { display:none; }
.hero { min-height:580px; display:grid; grid-template-columns:1fr .92fr; align-items:center; gap:55px; padding-top:64px; padding-bottom:56px; position:relative; }
.hero-copy { padding-right:25px; }
.eyebrow { color:var(--gold); text-transform:none; font-size:11px; letter-spacing:.3px; display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.eyebrow span { width:22px; height:1px; background:var(--gold); display:inline-block; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(42px,5.4vw,72px); line-height:1.17; letter-spacing:-2px; margin:17px 0 18px; font-weight:900; }
h1 em,h2 em { color:var(--gold); font-style:normal; }
.hero-copy > p { max-width:480px; color:var(--muted); font-size:15px; line-height:2; }
.hero-actions { display:flex; align-items:center; gap:11px; margin-top:28px; flex-wrap:wrap; }
.button { min-height:45px; padding:11px 18px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:12px; border:1px solid transparent; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,26,43,.1); }
.button-primary { background:var(--navy); color:white; }
.button-primary b { color:var(--gold-light); font-size:18px; font-weight:400; }
.button-ghost { color:var(--ink); border-color:var(--line); background:transparent; }
.button-ghost .wa-symbol { color:var(--success); }
.button-light { background:var(--gold); color:var(--navy); }
.install-cta { display:inline-flex; background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--ink); border-color:color-mix(in srgb,var(--gold) 65%,var(--line)); }
.install-cta:hover { background:var(--gold); color:var(--navy); }
.hero-note { display:flex; align-items:center; gap:12px; margin-top:47px; color:var(--muted); font-size:11px; }
.hero-note strong,.hero-note small { display:block; }
.hero-note strong { color:var(--ink); font-size:11px; margin-bottom:2px; }
.avatar-stack { display:flex; direction:ltr; }
.avatar-stack i { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; margin-right:-7px; border:2px solid var(--cream); background:var(--navy-3); color:var(--gold-light); font-style:normal; font-size:10px; }
.avatar-stack i:nth-child(2) { background:var(--gold); color:var(--navy); }.avatar-stack i:nth-child(3) { background:var(--paper); color:var(--gold); }
.hero-visual { min-height:510px; position:relative; display:grid; place-items:center; }
.hero-visual::before { content:""; position:absolute; width:360px; height:360px; background:color-mix(in srgb,var(--gold) 12%,transparent); border-radius:50%; filter:blur(2px); }
.hero-orbit { position:absolute; border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); border-radius:50%; transform:rotate(-22deg); }
.orbit-one { width:470px; height:220px; }.orbit-two { width:390px; height:180px; transform:rotate(32deg); opacity:.5; }
.hero-image-frame { position:relative; width:min(370px,82%); height:460px; overflow:hidden; border:7px solid var(--paper); border-radius:185px 185px 24px 24px; box-shadow:var(--shadow); background:var(--navy-2); }
.hero-image-frame img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-badge { position:absolute; bottom:29px; right:2px; width:116px; min-height:116px; padding:16px 14px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; flex-direction:column; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.18); text-align:center; transform:rotate(-8deg); }
.badge-icon { font-size:17px; }.hero-badge strong { font-size:15px; line-height:1.35; }.hero-badge small { font-size:9px; margin-top:4px; }
.floating-chip { position:absolute; z-index:2; background:var(--paper); box-shadow:0 10px 25px rgba(16,26,43,.12); padding:9px 12px; border-radius:6px; font-size:10px; color:var(--ink); }.floating-chip span { color:var(--gold); margin-left:5px; }.chip-one { top:106px; right:0; }.chip-two { bottom:84px; left:3px; }
.trust-strip { background:var(--paper); border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:repeat(4,1fr); padding:18px 24px; box-shadow:0 8px 24px rgba(16,26,43,.035); }
.trust-item { display:flex; align-items:center; gap:12px; border-left:1px solid var(--line); padding:0 18px; }.trust-item:last-child { border-left:0; }.trust-icon { width:36px; height:36px; display:grid; place-items:center; background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold); border-radius:50%; font-size:18px; }.trust-item strong,.trust-item small { display:block; }.trust-item strong { font-size:11px; }.trust-item small { color:var(--muted); font-size:10px; margin-top:1px; }
.category-section,.catalog-section,.visit-section,.contact-section { padding-top:110px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }.section-heading.compact { margin-bottom:25px; }.section-heading h2 { font-size:32px; letter-spacing:-1px; margin:8px 0 0; }.text-link { color:var(--gold); font-size:11px; white-space:nowrap; }.text-link span { font-size:16px; margin-right:5px; }.category-scroller { display:flex; gap:12px; overflow-x:auto; padding:5px 2px 12px; scrollbar-width:none; }.category-scroller::-webkit-scrollbar { display:none; }
.category-card { min-width:130px; height:117px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); text-align:right; padding:15px; display:flex; flex-direction:column; gap:4px; transition:.2s; }.category-card:hover,.category-card.active { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 10px 24px rgba(216,168,78,.13); }.category-icon { color:var(--gold); font-size:24px; margin-bottom:4px; }.category-card strong { font-size:11px; white-space:nowrap; }.category-card small { color:var(--muted); font-size:9px; }
.catalog-tools { display:grid; grid-template-columns:minmax(250px,1.2fr) minmax(180px,.6fr) 1fr; align-items:center; gap:12px; margin-bottom:18px; }.search-box { height:43px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:7px; padding:0 13px; background:var(--paper); }.search-box span { color:var(--gold); font-size:22px; line-height:1; transform:rotate(-20deg); }.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:11px; }.catalog-tools select { height:43px; border:1px solid var(--line); border-radius:7px; padding:0 12px; background:var(--paper); color:var(--ink); outline:0; font-size:11px; }.view-hint { color:var(--muted); text-align:left; font-size:10px; }.catalog-tabs { display:flex; gap:7px; margin-bottom:25px; }.tab { border:0; background:transparent; color:var(--muted); font-size:11px; padding:7px 14px; border-radius:20px; }.tab.active,.tab:hover { background:var(--navy); color:white; }.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.product-card { background:var(--paper); border:1px solid var(--line); border-radius:9px; overflow:hidden; transition:transform .24s,box-shadow .24s; }.product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.product-image { position:relative; height:206px; background:var(--navy-2); overflow:hidden; }.product-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }.product-card:hover .product-image img { transform:scale(1.04); }.product-label { position:absolute; top:10px; right:10px; background:var(--navy); color:white; font-size:9px; padding:4px 8px; border-radius:4px; }.product-label.gold { background:var(--gold); color:var(--navy); }.product-overlay { position:absolute; inset:0; display:flex; justify-content:flex-start; align-items:flex-end; padding:10px; background:linear-gradient(transparent 55%,rgba(16,26,43,.5)); opacity:0; transition:opacity .2s; }.product-card:hover .product-overlay { opacity:1; }.quick-whatsapp { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#25d366; color:white; font-size:19px; }.product-info { padding:14px 15px 15px; }.product-meta { display:flex; justify-content:space-between; color:var(--gold); font-size:9px; }.spark { font-size:12px; }.product-info h3 { font-size:13px; margin:8px 0 5px; }.product-info p { color:var(--muted); font-size:10px; line-height:1.7; min-height:34px; margin-bottom:11px; }.product-bottom { border-top:1px solid var(--line); padding-top:11px; display:flex; align-items:end; justify-content:space-between; gap:6px; }.product-bottom strong { font-size:9px; color:var(--ink); line-height:1.6; }.product-bottom strong b { display:block; color:var(--gold); font-weight:700; }.product-whatsapp { color:var(--success); font-size:10px; white-space:nowrap; }.product-whatsapp span { font-size:15px; }.empty-state { background:var(--paper); border:1px dashed var(--line); padding:50px; text-align:center; border-radius:10px; }.empty-state > span { color:var(--gold); font-size:30px; }.empty-state h3 { margin:10px 0 4px; }.empty-state p { color:var(--muted); font-size:12px; }
.visit-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; background:var(--navy); color:white; border-radius:12px; padding:34px; overflow:hidden; position:relative; }.visit-card::before { content:""; position:absolute; width:380px; height:380px; border:1px solid rgba(216,168,78,.24); border-radius:50%; left:-130px; bottom:-220px; }.visit-copy { padding:35px 20px 30px 0; position:relative; z-index:1; }.visit-copy h2,.contact-card h2 { font-size:34px; letter-spacing:-1px; margin:11px 0 12px; }.visit-copy p { color:#bcc5d0; font-size:12px; line-height:2; max-width:350px; }.visit-details { display:flex; align-items:center; gap:10px; margin-top:25px; }.detail-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; color:var(--navy); background:var(--gold); font-size:19px; }.visit-details strong,.visit-details small { display:block; }.visit-details strong { font-size:12px; }.visit-details small { font-size:10px; color:#b9c2cf; }.replace-photo { display:block; margin-top:35px; color:#b9c2cf; font-size:10px; border-top:1px solid rgba(255,255,255,.12); padding-top:16px; cursor:pointer; }.replace-photo input { display:none; }.replace-photo span { color:var(--gold); font-size:16px; }.replace-photo b { color:var(--gold-light); }.storefront-wrap { min-height:390px; border-radius:8px; position:relative; overflow:hidden; background:#09121f; display:flex; justify-content:center; align-items:center; }.storefront-wrap img { width:100%; height:100%; max-height:520px; object-fit:contain; display:block; }.image-caption { position:absolute; bottom:0; right:0; left:0; padding:23px 16px 11px; background:linear-gradient(transparent,rgba(4,10,18,.84)); color:white; font-size:11px; }
.contact-card { border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:35px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; }.contact-card h2 { color:var(--ink); }.contact-card p { color:var(--muted); font-size:12px; margin-bottom:0; }
.contact-numbers { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; color:var(--muted); font-size:10px; }.contact-numbers strong { color:var(--gold); }.button-outline-gold { border-color:color-mix(in srgb,var(--gold) 70%,var(--line)); color:var(--ink); background:transparent; }.button-outline-gold .wa-symbol { color:var(--success); }.contact-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }.contact-actions .button { white-space:nowrap; }
.site-footer { margin-top:100px; background:var(--navy); color:white; padding:26px 0; }.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }.footer-brand .brand-copy strong { color:white; }.footer-brand .brand-copy small { color:#aab5c4; }.footer-manager { color:#aab5c4; font-size:10px; }.footer-manager strong { color:var(--gold-light); }.footer-links { display:flex; gap:18px; align-items:center; color:#aab5c4; font-size:10px; }.footer-links a:hover { color:var(--gold-light); }.footer-links span { color:#6f7b8b; }
.floating-whatsapp { position:fixed; left:20px; bottom:20px; z-index:15; background:#25d366; color:white; width:47px; height:47px; border-radius:50%; box-shadow:0 7px 20px rgba(37,211,102,.32); display:grid; place-items:center; transition:.2s; }.floating-whatsapp:hover { transform:scale(1.08); }.floating-whatsapp span { font-size:25px; }.floating-whatsapp small { position:absolute; left:57px; white-space:nowrap; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:4px 7px; font-size:9px; opacity:0; transform:translateX(-5px); transition:.2s; pointer-events:none; }.floating-whatsapp:hover small { opacity:1; transform:none; }.install-button { position:fixed; right:20px; bottom:20px; z-index:16; background:var(--gold); color:var(--navy); border:0; padding:10px 14px; border-radius:7px; box-shadow:var(--shadow); font-size:11px; }.modal-open { overflow:hidden; }
.install-modal[hidden] { display:none; }
.install-modal { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; }
.install-backdrop { position:absolute; inset:0; background:rgba(5,12,24,.62); backdrop-filter:blur(5px); }
.install-dialog { position:relative; width:min(390px,100%); padding:30px 25px 24px; border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.3); text-align:center; }
.modal-close { position:absolute; top:10px; left:12px; width:30px; height:30px; border:0; border-radius:50%; background:var(--cream); color:var(--muted); font-size:22px; line-height:1; }
.install-dialog-icon { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 12px; border-radius:18px; background:color-mix(in srgb,var(--gold) 18%,transparent); font-size:27px; }
.install-dialog h3 { margin:8px 0 5px; font-size:22px; }.install-dialog p { color:var(--muted); font-size:11px; margin-bottom:15px; }
.platform-switch { display:flex; gap:7px; padding:4px; border-radius:8px; background:var(--cream); margin-bottom:15px; }.platform-option { flex:1; border:0; border-radius:6px; padding:8px; background:transparent; color:var(--muted); font-size:11px; }.platform-option.active { background:var(--navy); color:white; }
.install-guide { min-height:74px; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--gold) 8%,transparent); color:var(--muted); font-size:11px; line-height:1.9; text-align:right; }.install-guide strong { color:var(--ink); }.install-guide b { color:var(--gold); }.install-guide-action { width:100%; margin-top:15px; }
.toast { position:fixed; right:50%; bottom:24px; z-index:30; transform:translate(50%,20px); opacity:0; pointer-events:none; background:var(--navy); color:white; padding:10px 17px; border-radius:6px; font-size:11px; transition:.25s; }.toast.show { opacity:1; transform:translate(50%,0); }
@media (max-width:900px) { .header-inner,.section-shell,.footer-inner { width:min(100% - 32px,700px); }.main-nav { display:none; }.menu-button { display:block; font-size:24px; }.mobile-nav { display:none; padding:0 16px 16px; gap:10px; flex-wrap:wrap; }.mobile-nav.open { display:flex; }.mobile-nav a { background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:7px 12px; font-size:11px; }.theme-label { display:none; }.hero { grid-template-columns:1fr .84fr; gap:20px; padding-top:45px; }.hero-copy { padding-right:0; }.hero-visual { min-height:390px; }.hero-image-frame { height:360px; }.hero-badge { width:95px; min-height:95px; }.hero-badge strong { font-size:12px; }.floating-chip { font-size:9px; }.orbit-one { width:360px; }.trust-strip { grid-template-columns:repeat(2,1fr); gap:16px; }.trust-item:nth-child(2) { border-left:0; }.trust-item:nth-child(3) { padding-top:10px; border-top:1px solid var(--line); }.trust-item:nth-child(4) { padding-top:10px; border-top:1px solid var(--line); }.product-grid { grid-template-columns:repeat(3,1fr); }.catalog-tools { grid-template-columns:1fr 1fr; }.view-hint { display:none; }.visit-card { grid-template-columns:1fr 1.1fr; }.contact-card { flex-direction:column; align-items:flex-start; }.contact-actions { justify-content:flex-start; }.footer-inner { flex-wrap:wrap; }.footer-links { margin-right:auto; } }
@media (max-width:620px) { .announcement { font-size:10px; flex-wrap:wrap; gap:6px; }.announcement a { margin-right:7px; }.header-inner { height:68px; }.header-wa { padding:8px 10px; font-size:10px; }.brand-copy strong { font-size:18px; }.brand-mark { width:36px; height:36px; font-size:21px; }.hero { display:flex; flex-direction:column; align-items:stretch; padding-top:38px; }.hero-copy { text-align:right; }.hero-copy > p { font-size:13px; }.hero-visual { min-height:365px; margin-top:12px; }.hero-image-frame { width:240px; height:320px; }.chip-one { top:38px; right:5px; }.chip-two { bottom:42px; left:2px; }.hero-badge { bottom:18px; right:7%; }.section-heading { align-items:start; flex-direction:column; gap:10px; }.section-heading h2 { font-size:26px; }.category-section,.catalog-section,.visit-section,.contact-section { padding-top:75px; }.catalog-tools { grid-template-columns:1fr; }.catalog-tabs { overflow-x:auto; }.tab { white-space:nowrap; }.product-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.product-image { height:150px; }.product-info { padding:11px 10px; }.product-info h3 { font-size:11px; }.product-info p { font-size:9px; min-height:47px; }.product-bottom { display:block; }.product-whatsapp { display:block; margin-top:7px; }.trust-strip { padding:15px 10px; gap:10px; }.trust-item { padding:0 7px; gap:8px; }.trust-icon { width:30px; height:30px; font-size:14px; }.trust-item strong { font-size:9px; }.trust-item small { font-size:8px; }.visit-card { display:flex; flex-direction:column; padding:20px; }.visit-copy { padding:15px 0 0; }.visit-copy h2,.contact-card h2 { font-size:27px; }.storefront-wrap { min-height:370px; }.contact-card { padding:25px 20px; }.contact-actions .button { width:100%; }.site-footer { margin-top:70px; }.footer-inner { flex-direction:column; align-items:flex-start; }.footer-links { margin-right:0; flex-wrap:wrap; gap:12px; }.floating-whatsapp { left:13px; bottom:14px; }.install-button { right:13px; bottom:14px; font-size:10px; max-width:190px; } }