@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
:root { --bg:#FAF7F1; --paper:#FFFDF9; --ink:#1d1b2e; --muted:#6b6a78; --line:#E8E2D6; --accent:#2f3a99; --accent-ink:#222c78; --night:#0e1028; --night2:#1a1d4a; --radius:12px;
  --head:'Ubuntu',system-ui,sans-serif; --shadow:0 1px 2px rgba(20,20,40,.05),0 10px 30px rgba(20,20,40,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:300 17px/1.75 var(--head); }
img { max-width:100%; } a { color:var(--accent-ink); } strong,b { font-weight:500; }
h1,h2,h3 { font-family:var(--head); font-weight:500; line-height:1.15; letter-spacing:-.015em; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; } .narrow { max-width:740px; } .muted { color:var(--muted); }
.section-title { font-size:clamp(26px,3.2vw,38px); margin:0 0 26px; } .block { padding:64px 24px; } .page-top { padding-top:48px; padding-bottom:56px; }
.site-head { background:rgba(250,247,241,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.head-row { display:flex; align-items:center; gap:30px; min-height:72px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand-logo { border-radius:50%; display:block; box-shadow:0 0 0 1.5px var(--line); }
.brand-name { font-size:23px; font-weight:600; letter-spacing:-.01em; } .brand-name em { font-style:normal; font-weight:300; color:var(--accent); } .brand-name.small { font-size:16px; }
.main-nav { display:flex; align-items:center; gap:26px; flex:1; justify-content:flex-end; } .main-nav a { color:inherit; text-decoration:none; font:500 15.5px var(--head); opacity:.9; } .main-nav a:hover { color:var(--accent); opacity:1; }
.lang-switch { display:flex; gap:4px; background:rgba(47,58,153,.07); border-radius:999px; padding:3px; } .lang-switch a { padding:4px 11px; border-radius:999px; font-size:13px; letter-spacing:.05em; } .lang-switch a.on { background:var(--accent); color:#fff; opacity:1; }
.is-home .site-head { position:absolute; left:0; right:0; background:linear-gradient(rgba(10,12,34,.6),rgba(10,12,34,0)); border:0; backdrop-filter:none; color:#fff; }
.is-home .brand, .is-home .main-nav a { color:#fff; } .is-home .brand-name em { color:#aab3ff; } .is-home .brand-logo { box-shadow:0 0 0 1.5px rgba(255,255,255,.4); } .is-home .lang-switch { background:rgba(255,255,255,.14); }
.hero { background:radial-gradient(1200px 600px at 78% 40%,#262b7a 0%,var(--night2) 38%,var(--night) 75%); color:#fff; min-height:88vh; display:flex; align-items:center; padding:110px 0 70px; overflow:hidden; }
.hero-row { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; width:100%; }
.hero-copy h1 { font-size:clamp(40px,5.6vw,78px); font-weight:500; margin:0 0 20px; line-height:1.03; max-width:9.5em; }
.hero-copy p { font-size:clamp(17px,1.6vw,21px); line-height:1.6; max-width:28em; margin:0 0 30px; color:rgba(255,255,255,.88); }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; } .hero-logo { display:flex; justify-content:center; } .hero-logo img { width:min(420px,80%); height:auto; border-radius:50%; box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.08); }
.btn { display:inline-flex; align-items:center; background:var(--accent); color:#fff; text-decoration:none; font:500 16px var(--head); padding:13px 26px; border-radius:8px; transition:.15s; } .btn:hover { background:var(--accent-ink); transform:translateY(-1px); }
.hero .btn { background:#fff; color:var(--night); } .hero .btn:hover { background:#e7e9ff; } .btn-ghost, .hero .btn-ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7); } .hero .btn-ghost:hover { background:rgba(255,255,255,.12); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; } .more { text-align:center; margin-top:34px; }
.card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:.18s; } .card:hover { transform:translateY(-3px); }
.card-img { display:block; aspect-ratio:16/10; background:#1a1d4a center/cover no-repeat; position:relative; } .card-img .play { position:absolute; right:14px; bottom:14px; width:42px; height:42px; border-radius:50%; background:rgba(14,16,40,.78); } .card-img .play:after { content:''; position:absolute; left:16px; top:12px; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.card-body { display:block; padding:20px 22px 22px; } .card h3 { font-size:21px; margin:0 0 8px; } .card p { margin:0 0 12px; font-size:15.5px; line-height:1.6; color:var(--muted); } .meta { font-size:13.5px; color:var(--muted); }
.art h1 { font-size:clamp(30px,4.2vw,46px); margin:0 0 12px; } .crumb { font-size:14px; color:var(--muted); margin:0 0 14px; } .crumb a { color:var(--muted); }
.player { width:100%; max-height:78vh; background:#000; border-radius:var(--radius); margin:22px 0 28px; box-shadow:var(--shadow); } .prose p { font-size:18.5px; line-height:1.85; margin:0 0 1.15em; }
.also { margin:30px 0 8px; font-weight:500; } .note { font-size:14px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; margin-top:30px; }
.site-foot { background:var(--night); color:rgba(255,255,255,.78); padding:46px 0 36px; margin-top:40px; } .site-foot a { color:#fff; } .site-foot .brand { color:#fff; } .site-foot .brand-name em { color:#aab3ff; }
.foot-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; } .foot-row nav { display:flex; gap:22px; } .foot-row nav a { text-decoration:none; font-size:15px; opacity:.85; }
.foot-note { font-size:13.5px; line-height:1.6; opacity:.7; max-width:62em; margin:18px 0 0; }
@media (max-width:820px) { .hero-row { grid-template-columns:1fr; } .hero-logo { order:-1; } .hero-logo img { width:200px; } .hero { padding-top:96px; } .main-nav { gap:14px; } .main-nav a:not(.on):not([hreflang]) { font-size:14px; } .brand-name { font-size:19px; } .block { padding:44px 20px; } }
/* v3: padrão ellaplena, tom azul-noite */
.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal; font-size:26px; line-height:1; letter-spacing:normal; display:inline-block; white-space:nowrap; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; vertical-align:middle; }
.hero-banner { position:relative; min-height:clamp(520px,82vh,720px); max-height:760px; display:flex; align-items:center; overflow:hidden; background:var(--night); color:#fff; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 40%; transform:scaleX(-1); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,12,34,.82) 0%,rgba(10,12,34,.5) 45%,rgba(10,12,34,.05) 100%),linear-gradient(rgba(10,12,34,.45),rgba(10,12,34,0) 30%); }
.hero-banner .hero-copy { position:relative; padding-top:110px; padding-bottom:70px; width:100%; }
.hero-banner h1 { font-size:clamp(42px,6vw,82px); font-weight:500; margin:0 0 20px; line-height:1.03; max-width:8em; }
.hero-banner p { font-size:clamp(17px,1.6vw,21px); line-height:1.6; max-width:27em; margin:0 0 30px; color:rgba(255,255,255,.92); }
.hero-banner .btn { background:#fff; color:var(--night); } .hero-banner .btn:hover { background:#e7e9ff; } .hero-banner .btn-ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75); }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.cards .card { flex-direction:row; min-height:230px; } .cards .card-img { aspect-ratio:auto; width:38%; flex:none; } .cards .card-body { padding:24px 26px; display:flex; flex-direction:column; justify-content:center; }
.kicker { font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--accent); margin-bottom:8px; } .cards h3 { font-size:22px; line-height:1.2; }
.cards .card p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.text-link { display:inline-flex; align-items:center; gap:6px; font-weight:500; color:var(--accent-ink); text-decoration:none; } .text-link:hover { text-decoration:underline; }
.more { margin-top:28px; text-align:left; } .section-title.sub { margin-top:64px; }
.voice { background:#e7e9f7; padding:84px 24px; text-align:center; } .voice-mark { display:block; font:700 90px/0.6 Georgia,serif; color:var(--accent); height:44px; } .voice blockquote { margin:0; }
.voice blockquote p { font-size:clamp(24px,3.4vw,38px); line-height:1.3; font-weight:400; margin:0 0 18px; } .voice footer { font-size:15px; color:var(--muted); }
.umbrellas { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.umbrella { display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#1a1d4a,#0e1028); color:#fff; border-radius:14px; padding:22px 22px; text-decoration:none; box-shadow:var(--shadow); transition:.18s; min-height:112px; }
.umbrella:hover { transform:translateY(-3px); background:linear-gradient(135deg,#262b7a,#141738); }
.umbrella-icon { flex:none; width:58px; height:58px; border-radius:14px; background:rgba(255,255,255,.1); display:grid; place-items:center; } .umbrella-icon .material-symbols-outlined { font-size:32px; color:#fff; }
.umbrella-copy strong { display:block; font-weight:700; font-size:19px; line-height:1.2; color:#fff; letter-spacing:.005em; } .umbrella-copy span { display:block; font-size:14px; line-height:1.45; color:rgba(255,255,255,.72); margin-top:4px; }
.read-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:50; } .read-progress span { display:block; height:100%; width:0; background:var(--accent); }
.article-head { padding-top:48px; } .article-head h1 { font-size:clamp(32px,4.6vw,52px); margin:0 0 14px; line-height:1.1; } .crumbs { margin:0 0 14px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; } .crumbs a { color:var(--accent); text-decoration:none; }
.article-lead { font-size:21px; line-height:1.55; color:var(--muted); margin:0 0 14px; font-weight:300; }
.article-figure { margin:28px auto 8px; max-width:1000px; } .article-figure img { width:100%; max-height:520px; object-fit:cover; border-radius:var(--radius); display:block; box-shadow:var(--shadow); } .article-figure figcaption { font-size:12.5px; color:var(--muted); margin-top:8px; }
.article-main { padding-top:20px; padding-bottom:60px; }
.summary { background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:20px 26px; margin:18px 0 26px; } .summary h2 { font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; color:var(--accent); } .summary ul { margin:0; padding-left:20px; } .summary li { margin:6px 0; line-height:1.55; }
.toc-inline { margin:0 0 26px; font-size:15.5px; } .toc-inline summary { cursor:pointer; font-weight:500; color:var(--accent-ink); } .toc-inline ol { margin:10px 0 0; padding-left:22px; line-height:1.9; }
.prose h2 { font-size:clamp(24px,3vw,31px); margin:2em 0 .6em; } .prose .lead-p { font-size:21px; line-height:1.75; color:#2a2840; }
.prose blockquote.pull { margin:2em 0; padding:6px 0 6px 26px; border-left:4px solid var(--accent); font-size:clamp(22px,2.8vw,29px); line-height:1.4; font-weight:400; color:var(--accent-ink); }
.follow { display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:center; background:linear-gradient(135deg,#1a1d4a,#0e1028); color:#fff; border-radius:16px; padding:26px; margin:44px 0 10px; }
.follow-video video { width:100%; border-radius:12px; background:#000; display:block; max-height:420px; } .follow h2 { margin:0 0 8px; font-size:26px; color:#fff; } .follow p { margin:0 0 18px; color:rgba(255,255,255,.82); line-height:1.6; font-size:16.5px; }
.follow .btn { background:#fff; color:var(--night); } .follow-btns { display:flex; gap:10px; flex-wrap:wrap; } .btn-ghost-dark { background:transparent !important; color:#fff !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
@media (max-width:900px) { .cards { grid-template-columns:1fr; } .umbrellas { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .umbrellas { grid-template-columns:1fr; } .cards .card { flex-direction:column; } .cards .card-img { width:100%; aspect-ratio:16/10; } .follow { grid-template-columns:1fr; } .follow-video { max-width:240px; margin:0 auto; } .hero-banner { min-height:78vh; } }
/* v5: artigo rico (padrão PrimeiroPet) */
.toc-box { background:#eceefb; border-left:4px solid var(--accent); border-radius:6px; padding:18px 24px; margin:0 0 26px; } .toc-box strong { display:block; margin-bottom:8px; color:var(--accent-ink); } .toc-box ol { margin:0; padding-left:22px; line-height:1.9; font-size:15.5px; } .toc-box a { text-decoration:none; }
ul.dots { list-style:none; padding:0; margin:0 0 1.2em; } ul.dots li { position:relative; padding-left:26px; margin:10px 0; font-size:18px; line-height:1.65; } ul.dots li:before { content:''; position:absolute; left:6px; top:.7em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.prose h2 { padding-bottom:10px; border-bottom:3px solid var(--accent); display:inline-block; }
.myth { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.4em 0; } .myth > div { border-radius:10px; padding:16px 20px; } .myth strong { font-size:12px; letter-spacing:.14em; text-transform:uppercase; } .myth p { margin:8px 0 0 !important; font-size:16.5px !important; line-height:1.6 !important; }
.myth-m { background:#fbeaea; border:1px solid #efc9c9; } .myth-m strong { color:#a33a3a; } .myth-r { background:#e8f3ea; border:1px solid #c6dfcb; } .myth-r strong { color:#2e6b3d; }
.box { display:flex; gap:14px; border-radius:10px; padding:16px 20px; margin:1.4em 0; } .box strong { display:block; margin-bottom:4px; } .box p { margin:0 !important; font-size:16.5px !important; line-height:1.6 !important; } .box .material-symbols-outlined { flex:none; margin-top:2px; }
.box-tip { background:#e8f3ea; border:1px solid #c6dfcb; } .box-tip strong,.box-tip .material-symbols-outlined { color:#2e6b3d; } .box-warn { background:#fdf3e0; border:1px solid #f0d9a8; } .box-warn strong,.box-warn .material-symbols-outlined { color:#9a6a12; }
.mid-fig { margin:1.8em 0; } .mid-fig img { width:100%; max-height:440px; object-fit:cover; border-radius:var(--radius); display:block; } .mid-fig figcaption { font-size:12.5px; color:var(--muted); margin-top:8px; }
.faq { margin:48px 0 8px; } .faq h2 { font-size:clamp(24px,3vw,31px); margin:0 0 14px; } .faq details { background:var(--paper); border:1px solid var(--line); border-radius:10px; margin:10px 0; padding:0 20px; } .faq summary { cursor:pointer; padding:16px 0; font-weight:500; font-size:17.5px; list-style:none; display:flex; justify-content:space-between; gap:12px; } .faq summary::after { content:'+'; color:var(--accent); font-size:24px; line-height:1; } .faq details[open] summary::after { content:'–'; } .faq details p { margin:0 0 18px; line-height:1.7; color:#2a2840; }
@media (max-width:640px) { .myth { grid-template-columns:1fr; } }