@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root{--ink:#214d59;--ink-deep:#163b45;--muted:#526b70;--paper:#f8f7f2;--white:#fff;--accent:#d98762;--line:#d9dfdc;--focus:#bd5d35;--article-size:1.45rem}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-deep);font-family:Heebo,Arial,sans-serif;font-size:18px;line-height:1.65}
a{color:var(--ink-deep)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button,input{font:inherit}
button{cursor:pointer}
.skip-link{position:absolute;top:-100px;right:16px;background:var(--white);padding:12px 20px;z-index:20}
.skip-link:focus{top:12px}
.site-header{background:rgba(248,247,242,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header-inner,.footer-inner{max-width:1200px;margin:auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{text-decoration:none;font-size:25px;font-weight:900;white-space:nowrap}
.brand-dot{color:var(--accent)}
nav{display:flex;align-items:center;gap:28px}
nav a{text-decoration:none;font-weight:700}
.site-link{font-size:16px;text-decoration:underline;text-underline-offset:4px}
.nav-current{border-bottom:3px solid var(--accent);padding:9px 0 6px}
.home-button,.solid-button{display:inline-flex;justify-content:center;align-items:center;gap:9px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;padding:10px 22px;min-height:52px}
.home-button:hover,.solid-button:hover{background:var(--ink-deep)}
.shell{max-width:1200px;margin:auto;padding:0 32px}
.eyebrow{color:#9c573b;font-size:16px;letter-spacing:.03em;font-weight:900;margin:0 0 12px}
.blog-hero{padding:76px 0 52px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 7% 85%,#e8e9e3 0 12%,transparent 12.2%),var(--paper)}
.blog-hero h1{font-size:clamp(3rem,7vw,5.5rem);line-height:1.08;letter-spacing:-.045em;margin:0 0 22px;color:var(--ink);max-width:850px}
.blog-hero p:last-child{max-width:720px;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:600;line-height:1.5;margin:0;color:var(--muted)}
.listing{padding-top:54px;padding-bottom:86px}
.listing-top{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:26px}
.listing-top h2,.more-section h2{font-size:clamp(2rem,4vw,3rem);line-height:1.2;margin:0;color:var(--ink)}
.search-wrap{display:block;width:min(100%,390px);font-weight:800}
.search-wrap span{display:block;margin-bottom:7px}
.search-box{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:0 15px;min-height:59px}
.search-box svg{flex:none;width:24px;height:24px}
.search-box input{border:0;outline:0;width:100%;background:transparent;color:var(--ink-deep);font-size:18px}
.search-box:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.search-box input:focus-visible{outline:none}
.results-count{font-size:16px;color:var(--muted);margin:0 0 24px;font-weight:700}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(22,59,69,.055)}
.card:hover{box-shadow:0 12px 32px rgba(22,59,69,.12);transform:translateY(-2px)}
.card-image{width:100%;height:210px;object-fit:cover;background:#d8e4e2}
.card-body{padding:25px;display:flex;flex-direction:column;flex:1}
.card-meta,.article-meta{color:var(--muted);font-size:16px;font-weight:700}
.card h3{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.25;margin:12px 0;color:var(--ink)}
.card p{margin:0 0 22px;font-size:18px;line-height:1.55}
.read-link{margin-top:auto;font-weight:900;font-size:19px;text-underline-offset:5px;text-decoration-thickness:2px}
.empty{background:#fff;padding:30px;border:1px solid var(--line);border-radius:14px;font-weight:700}
.article-shell{max-width:850px;margin:auto;padding:44px 28px 90px}
.back-link{font-weight:900;text-underline-offset:5px;font-size:18px}
.article-header{margin-top:40px}
.article-header h1{font-size:clamp(2.6rem,6vw,4.65rem);line-height:1.12;letter-spacing:-.035em;color:var(--ink);margin:12px 0 22px}
.article-deck{font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.5;font-weight:600;color:var(--muted);margin:0 0 22px}
.article-meta{display:flex;flex-wrap:wrap;gap:9px 20px;align-items:center;margin-bottom:30px}
.article-meta span+span::before{content:'•';margin-left:20px;color:var(--accent)}
.hero-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#d8e4e2}
.hero-caption{color:var(--muted);font-size:15px;margin:8px 0 28px}
.article-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 38px}
.action-button{background:#fff;color:var(--ink-deep);border:2px solid var(--ink);border-radius:999px;padding:9px 18px;min-height:50px;font-size:17px;font-weight:800}
.action-button:hover{background:#edf3f1}
.action-button.whatsapp{background:#e2f2e9;border-color:#317453}
.text-tools{display:flex;align-items:center;gap:9px;margin-right:auto;font-size:16px;font-weight:800}
.text-tools button{width:47px;height:47px;padding:0;border-radius:50%;background:#fff;border:2px solid var(--ink);font-size:21px;font-weight:900;color:var(--ink)}
.article-content{font-size:var(--article-size);line-height:1.85;color:#172d32}
.article-content p{margin:0 0 1.4em}
.article-content h2{font-size:1.55em;line-height:1.3;color:var(--ink);margin:1.7em 0 .55em}
.article-content h3{font-size:1.22em;line-height:1.35;color:var(--ink);margin:1.45em 0 .5em}
.article-content ul{padding-right:1.4em;margin:0 0 1.4em}
.article-content ol{padding-right:1.55em;margin:0 0 1.4em}
.article-content li{margin-bottom:.55em}
.article-content a{text-decoration-thickness:2px;text-underline-offset:4px}
.article-content .tip{background:#e9efeb;border-right:5px solid var(--accent);border-radius:10px;padding:17px 20px}
.screenshot-slot{margin:1.4em auto 1.9em;max-width:360px;text-align:center}
.screenshot-slot img{display:block;width:100%;height:auto;border:2px solid #385c60;border-radius:20px;background:#fff}
.screenshot-frame{position:relative;overflow:hidden;border:2px solid #385c60;border-radius:20px;background:#fff;direction:ltr}
.screenshot-frame img{border:0;border-radius:0}
.screenshot-frame--crop-toolbar{aspect-ratio:1080/2070}
.screenshot-frame--home-apps{aspect-ratio:1080/1050}
.screenshot-frame--home-apps img{position:absolute;bottom:0;left:0}
.screenshot-focus{position:absolute;z-index:1;box-sizing:border-box;border:5px solid #f36a00;border-radius:12px;box-shadow:0 0 0 2px #fff,0 3px 12px #0007;pointer-events:none}
.screenshot-slot figcaption{font-size:.75em;line-height:1.5;color:var(--muted);margin-top:9px}
.author-box{display:flex;align-items:center;gap:25px;background:#e9efeb;border-right:6px solid var(--accent);border-radius:15px;padding:25px;margin:56px 0}
.author-box img{width:105px;height:105px;object-fit:cover;border-radius:50%;border:4px solid #fff;flex:none}
.author-box h2{font-size:25px;line-height:1.25;margin:0 0 7px}
.author-box p{margin:0;font-size:18px;line-height:1.6}
.more-section{border-top:1px solid var(--line);padding-top:42px}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:23px}
.more-card{display:block;background:#fff;border:1px solid var(--line);padding:22px;border-radius:13px;text-decoration:none}
.more-card:hover{text-decoration:underline;text-decoration-thickness:2px}
.more-card strong{display:block;font-size:21px;line-height:1.3}
.more-card span{font-size:16px;color:var(--muted)}
.article-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:38px}
.end-share{margin:38px 0 50px;padding:24px;background:#e9efeb;border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.end-share p{margin:0;font-weight:800;font-size:20px}
.site-footer{background:var(--ink-deep);color:#fff}
.site-footer strong{font-size:28px}.site-footer a{color:#fff;font-weight:800}
@media(max-width:850px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listing-top{align-items:stretch;flex-direction:column}.search-wrap{width:100%}}
@media(max-width:620px){body{font-size:17px}.header-inner,.footer-inner{padding:14px 18px}.header-inner{align-items:flex-start}.brand{font-size:20px}nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}.nav-current{display:none}.home-button{font-size:15px;min-height:46px;padding:7px 13px}.site-link{font-size:14px}.shell{padding:0 19px}.blog-hero{padding:56px 0 42px}.listing{padding-top:38px;padding-bottom:65px}.article-grid,.more-grid{grid-template-columns:1fr}.card-image{height:190px}.article-shell{padding:25px 19px 70px}.article-header{margin-top:27px}.article-actions{gap:10px}.text-tools{width:100%;margin-right:0;justify-content:flex-start}.author-box{align-items:flex-start;gap:15px;padding:18px}.author-box img{width:72px;height:72px}.footer-inner{align-items:flex-start;flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card:hover{transform:none}}