/* Mensual — hero variants */
.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 0%, rgba(31,163,122,.08), transparent 60%); pointer-events: none; }
.hero .container { position: relative; }
.hero-grid { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.hero h1 { margin-top: 16px; }
.hero .lede { margin: 16px 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 24px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--line); }
.hero-meta div { font-size: 14px; color: var(--muted); }
.hero-meta strong { display: block; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); margin-bottom: 2px; }
.hero-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(11,27,51,.18)); pointer-events: none; }
.hero-img-wrap img { width: 100%; height: auto; display: block; }
.hero-badge { position: absolute; bottom: 16px; left: 16px; background: rgba(255,255,255,.92); padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 80%; }
.hero-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--emerald); flex: none; }

/* Inner page hero variant */
.page-hero { padding: 32px 0 48px; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 48px); }
.page-hero .lede { max-width: 60ch; }