:root { --ink:#0b151d; --ink-deep:#050b10; --surface:#f6f7f4; --paper:#fff; --muted:#657187; --mint:#25d366; --mint-bright:#7be89b; --line:rgba(16,24,40,.12); --font-main:'Sora',Arial,sans-serif; --font-mono:'DM Mono',monospace; --shell:min(1170px,calc(100% - 48px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; width:100%; max-width:100%; overflow-x:hidden; }
body { width:100%; max-width:100%; margin:0; background:var(--surface); color:var(--ink); font-family:var(--font-main); line-height:1.55; overflow-x:hidden; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button { font:inherit; }
.section-shell { width:var(--shell); margin-inline:auto; }
.announcement { min-height:30px; display:flex; align-items:center; justify-content:center; gap:8px; padding:5px 20px; background:var(--ink-deep); color:var(--mint); font:500 10px var(--font-mono); letter-spacing:.09em; text-align:center; text-transform:uppercase; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(37,211,102,.13); }
.site-header { position:sticky; top:0; z-index:10; height:76px; padding:0 max(24px,calc((100% - 1170px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(246,247,244,.94); border-bottom:1px solid rgba(16,24,40,.08); backdrop-filter:blur(14px); }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:18px; font-weight:800; letter-spacing:-.055em; white-space:nowrap; }
.brand > span:last-child > span { color:var(--mint); }
.brand-logo { width:35px!important; height:35px!important; min-width:35px; object-fit:cover; border:1px solid rgba(37,211,102,.75); border-radius:50%; box-shadow:0 0 12px rgba(37,211,102,.25); }
.header-whatsapp,.footer-chat { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid rgba(37,211,102,.45); border-radius:8px; color:#0b5d2b; font-size:11px; font-weight:700; background:rgba(37,211,102,.08); transition:.2s ease; }
.header-whatsapp:hover,.footer-chat:hover,.catalog-whatsapp:hover { background:var(--mint); color:#062f16; transform:translateY(-2px); }
.catalog-hero { min-height:590px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; padding:72px 0 88px; }
.eyebrow,.number-tag { display:inline-flex; align-items:center; gap:8px; color:#526078; font:500 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.eyebrow span,.number-tag::before { content:''; width:23px; height:1px; display:inline-block; background:var(--mint); }
.hero-copy h1 { max-width:620px; margin:18px 0 20px; font-size:clamp(38px,5vw,68px); line-height:1.06; letter-spacing:-.065em; }
em { color:var(--mint); font-style:normal; }
.hero-copy p { max-width:530px; margin:0; color:#59647a; font-size:16px; line-height:1.75; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:13px 20px; border-radius:9px; font-size:12px; font-weight:700; transition:.2s ease; }
.button.primary { margin-top:30px; background:var(--ink); color:#fff; box-shadow:0 12px 25px rgba(16,24,40,.17); }.button:hover { transform:translateY(-3px); }.button span { font-size:18px; }
.hero-image-frame { padding:9px; border-radius:22px; background:rgba(255,255,255,.83); box-shadow:17px 26px 42px rgba(16,24,40,.16); transform:rotate(3deg); }.hero-image-frame img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:15px; }
.catalog-section { padding:92px 0 110px; background:#172235; color:#fff; }.section-heading { max-width:700px; }.number-tag { color:rgba(255,255,255,.58); }.section-heading h2 { margin:14px 0 12px; font-size:clamp(30px,4vw,48px); line-height:1.1; letter-spacing:-.055em; }.section-heading p { max-width:520px; margin:0; color:#a7b4c7; font-size:13px; }
.catalog-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }.catalog-card { overflow:hidden; border:1px solid rgba(123,232,155,.25); border-radius:14px; background:linear-gradient(135deg,rgba(37,211,102,.11),rgba(255,255,255,.035)); transition:.25s ease; }.catalog-card:hover { transform:translateY(-5px); border-color:rgba(123,232,155,.75); box-shadow:0 18px 34px rgba(0,0,0,.2); }.catalog-image { position:relative; height:300px; background:#eef2ee; }.catalog-image img { width:100%; height:100%; object-fit:contain; }.catalog-index { position:absolute; z-index:1; top:13px; left:13px; padding:5px 8px; border-radius:5px; background:var(--mint); color:#063517; font:700 9px var(--font-mono); }
.catalog-content { padding:20px; }.catalog-category { color:var(--mint-bright); font:9px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }.catalog-content h3 { margin:8px 0 7px; font-size:18px; letter-spacing:-.04em; }.catalog-content p { min-height:45px; margin:0; color:#b7c2d0; font-size:11px; line-height:1.6; }.catalog-whatsapp { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding:11px 12px; border:1px solid rgba(123,232,155,.6); border-radius:7px; color:#baf5c8; font-size:11px; font-weight:700; transition:.2s ease; }.catalog-whatsapp span { font-size:16px; }
.google-benefits { position:relative; overflow:hidden; padding:104px 0 112px; background:#0d1927; color:#fff; }.google-benefits::before { content:''; position:absolute; width:520px; height:520px; top:-330px; right:-160px; border:1px solid rgba(37,211,102,.18); border-radius:50%; box-shadow:0 0 0 30px rgba(37,211,102,.025),0 0 0 75px rgba(37,211,102,.02); }.google-benefits::after { content:''; position:absolute; width:280px; height:280px; bottom:-210px; left:-100px; border:1px solid rgba(123,232,155,.1); border-radius:50%; }.benefits-heading,.benefits-grid { position:relative; z-index:1; }.benefits-heading { max-width:700px; }.benefits-heading .number-tag { color:rgba(255,255,255,.58); }.benefits-heading h2 { margin:14px 0 12px; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.1; letter-spacing:-.055em; }.benefits-heading p { max-width:560px; margin:0; color:#a7b4c7; font-size:13px; line-height:1.75; }.benefits-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }.benefit-item { position:relative; min-height:218px; padding:23px; overflow:hidden; border:1px solid rgba(123,232,155,.2); border-radius:13px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow:0 14px 30px rgba(0,0,0,.16); }.benefit-item::after { content:''; position:absolute; width:82px; height:82px; right:-30px; bottom:-32px; border:1px solid rgba(123,232,155,.16); border-radius:50%; }.benefit-item > span { display:inline-flex; align-items:center; justify-content:center; width:29px; height:22px; border:1px solid rgba(123,232,155,.35); border-radius:5px; color:var(--mint-bright); font:10px var(--font-mono); }.benefit-item h3 { margin:35px 0 9px; color:#fff; font-size:16px; letter-spacing:-.035em; }.benefit-item p { margin:0; color:#aebdce; font-size:11px; line-height:1.7; }.benefit-highlight { border-color:var(--mint); background:linear-gradient(145deg,var(--mint),#16a957); color:#062f16; box-shadow:0 16px 30px rgba(37,211,102,.17); }.benefit-highlight > span { border-color:rgba(6,47,22,.28); color:#062f16; }.benefit-highlight h3 { color:#062f16; }.benefit-highlight p { color:#0d5129; }
footer { background:var(--ink-deep); color:#fff; }.footer-main { min-height:180px; display:flex; align-items:center; justify-content:space-between; gap:22px; }.footer-main .brand { color:#fff; }.footer-main .brand-logo { border-color:var(--mint); box-shadow:0 0 16px rgba(37,211,102,.4); }.footer-main p { margin:0; color:#8e9bab; font-size:11px; }.footer-bottom { display:flex; justify-content:space-between; padding:16px 0 22px; border-top:1px solid rgba(255,255,255,.1); color:#718096; font:9px var(--font-mono); }.footer-chat { color:var(--mint-bright); background:transparent; }
.whatsapp-float { position:fixed; z-index:20; right:22px; bottom:22px; display:inline-flex; align-items:center; gap:8px; padding:12px 15px; border-radius:50px; background:var(--mint); color:#063517; box-shadow:0 10px 25px rgba(0,0,0,.2); font-size:11px; font-weight:800; transition:.2s ease; }.whatsapp-float:hover { transform:translateY(-3px) scale(1.02); }.whatsapp-float span { font-size:20px; line-height:.7; }
@media (max-width:1100px) { .catalog-grid,.benefits-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) { .catalog-hero { grid-template-columns:1fr; gap:35px; }.hero-image-frame { max-width:620px; width:100%; margin-inline:auto; } }
@media (max-width:600px) { :root { --shell:min(100% - 34px,1170px); }.announcement { min-height:34px; padding-inline:12px; font-size:8px; line-height:1.35; }.site-header { width:100%; height:64px; padding-inline:17px; }.brand { font-size:16px; }.header-whatsapp { padding:9px 10px; font-size:9px; }.catalog-hero { min-height:auto; padding:54px 0 64px; }.hero-copy h1 { font-size:39px; }.hero-copy p { font-size:14px; }.catalog-section { padding:70px 0 78px; }.catalog-grid,.benefits-grid { grid-template-columns:1fr; margin-top:34px; }.catalog-image { height:min(105vw,430px); }.google-benefits { padding:68px 0 76px; }.benefits-heading h2 { font-size:33px; }.benefits-heading p { font-size:12px; }.benefit-item { min-height:0; padding:21px; }.benefit-item h3 { margin:18px 0 7px; font-size:17px; }.benefit-item p { font-size:12px; }.footer-main { width:100%; min-height:220px; flex-direction:column; align-items:flex-start; justify-content:center; }.footer-bottom { flex-direction:column; gap:6px; }.whatsapp-float { right:15px; bottom:15px; padding:11px; }.whatsapp-float small { display:none; } }