hero-section[variant="module"] .lp-hero { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 48px; min-height: 640px; margin: 0 var(--lp-gutter); padding: 76px var(--lp-inset); overflow: clip; border-radius: var(--lp-radius); background: var(--lp-soft); }
hero-section[variant="module"] .lp-hero-copy { position: relative; z-index: 1; min-width: 0; }
hero-section[variant="module"] h1 { max-width: 590px; font-size: 56px; line-height: 1.06; letter-spacing: -.065em; }
hero-section[variant="module"] h1 em { font-style: normal; text-decoration: underline; text-decoration-color: var(--lp-green); text-decoration-thickness: 4px; text-underline-offset: 8px; }
hero-section[variant="module"] .lp-hero-copy > p { max-width: 530px; margin-top: 28px; font-size: 18px; }
hero-section[variant="module"] .lp-hero-visual { position: relative; min-width: 0; isolation: isolate; }
hero-section[variant="module"] .lp-hero-visual::before { content: ''; position: absolute; z-index: -1; inset: -80px -120px; background: radial-gradient(ellipse at 35% 45%, rgb(17 187 119 / 22%), transparent 65%), radial-gradient(ellipse at 90% 20%, rgb(132 193 255 / 27%), transparent 65%); mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); }
hero-section[variant="module"] .lp-hero-visual::after { content: ''; position: absolute; z-index: -1; inset: -80px -120px; background: url('../../recursos/assets/surfaces/mosaic-top.svg') center top / 1600px 900px no-repeat; opacity: .16; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); }
hero-section[variant="module"] .lp-hero-visual > figcaption { margin-top: 20px; text-align: center; color: var(--lp-muted); font-size: 12px; }
@media (max-width: 1100px) { hero-section[variant="module"] .lp-hero { gap: 28px; } hero-section[variant="module"] h1 { font-size: 50px; } }
@media (max-width: 900px) {
  hero-section[variant="module"] .lp-hero { grid-template-columns: 1fr; min-height: 0; padding-block: 56px; gap: 52px; }
  hero-section[variant="module"] .lp-hero-copy { max-width: 670px; }
  hero-section[variant="module"] .lp-hero-visual { width: min(100%, 550px); justify-self: center; }
}
@media (max-width: 600px) {
  hero-section[variant="module"] .lp-hero { padding-block: 42px; gap: 40px; }
  hero-section[variant="module"] h1 { font-size: clamp(34px, 9.6vw, 44px); }
  hero-section[variant="module"] .lp-hero-copy > p { margin-top: 24px; font-size: 16px; }
  hero-section[variant="module"] .lp-actions { flex-direction: column; }
  hero-section[variant="module"] .lp-hero-visual > figcaption { font-size: 11px; }
}