.hero{padding-top:24px;--hero-copy:600px;--hero-detail:560px;--hero-gap:clamp(40px,6vw,88px)}
.hero .hero-top{grid-template-columns:minmax(0,var(--hero-copy)) minmax(0,var(--hero-detail));gap:var(--hero-gap);align-items:center;margin:0 auto 36px;max-width:calc(var(--hero-copy) + var(--hero-detail) + var(--hero-gap))}
.hero-top-left{min-width:0;padding:24px 0}
.hero h1{font-size:4rem;letter-spacing:0}
.hero .eyebrow{letter-spacing:0;max-width:100%}
.hero-earth{position:relative;width:min(100%,660px,64svh);aspect-ratio:1;justify-self:center;margin:0;isolation:isolate}
.hero-earth canvas,.hero-earth-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-earth canvas{opacity:0;transition:opacity .45s ease;pointer-events:none}
.hero-earth-poster{transition:opacity .45s ease}
.hero-earth.is-ready canvas{opacity:1}
.hero-earth.is-ready canvas{pointer-events:auto;cursor:grab;touch-action:pan-y pinch-zoom;user-select:none}
.hero-earth.is-dragging canvas{cursor:grabbing}
.hero-earth canvas:focus{outline:none}
.hero-earth:not(.pointer-interaction) canvas:focus-visible{outline:2px solid var(--star);outline-offset:4px;border-radius:50%}
.hero-earth.is-ready .hero-earth-poster{opacity:0}
.earth-hq{position:absolute;left:0;top:0;transform:translate3d(0,0,0) translate(-50%,calc(-100% - 12px));will-change:transform;z-index:1;color:#fff;font-size:.75rem;font-weight:700;line-height:1.35;text-align:center;white-space:nowrap;pointer-events:none;text-shadow:0 1px 4px #020710,0 0 8px #020710;opacity:0}
.earth-hq span{display:block;font-size:.625rem;font-weight:500;color:#c8e0ff}
.hero-earth:not(.is-ready) .earth-hq{visibility:hidden}
.hero-intro{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:30px 0 30px clamp(28px,4vw,54px);border-left:1px solid var(--line);min-width:0}
.hero .hero-intro p.lead{width:100%;max-width:48ch;margin:0;font-size:1.125rem;line-height:1.72}
.hero .hero-intro p.lead + p.lead{border-top:1px solid var(--line);padding-top:24px}
@media(max-width:1100px){.hero h1{font-size:3.25rem}.hero .hero-top{gap:36px}.hero-cta{gap:12px}.hero-intro{padding-left:28px}}
@media(min-width:640px) and (max-width:880px){.hero .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero h1{font-size:2.375rem}}
@media(max-width:880px){html[lang="es"] .ent-quote-head{white-space:normal}}
@media(min-width:640px) and (max-width:760px){
  .hero h1{font-size:2.125rem}
  .hero-top-left{padding:12px 0}
  .hero .hero-cta{gap:10px;margin-top:22px}
  .hero .hero-cta .btn{padding:12px 18px;font-size:.9375rem;max-width:100%}
  .hero-intro{gap:18px;padding:20px 0 20px 22px}
  .hero .hero-intro p.lead{font-size:1.0625rem;line-height:1.65}
  .hero .hero-intro p.lead + p.lead{padding-top:18px}
}
@media(max-width:639px){
  .hero .hero-top{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:28px}
  .hero-top-left{padding:12px 0 0}
  .hero h1{font-size:2.875rem;max-width:18ch}
  .hero-earth{width:min(100%,440px);margin-top:8px}
  .hero-intro{gap:18px;margin-top:30px;padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}
  .hero .hero-intro p.lead{font-size:1.0625rem;line-height:1.7}
  .hero .hero-intro p.lead + p.lead{padding-top:18px}
  .earth-hq{font-size:.6875rem}
}
@media(max-width:400px){.hero h1{font-size:2.375rem}.hero .hero-cta .btn{padding:13px 18px;font-size:.9375rem}}
@media(max-width:340px){
  .hero h1{font-size:2rem}
  .contact .phone{font-size:1.5rem;gap:8px}
  .hero .eyebrow{font-size:.75rem;padding:6px 10px}
  .hero .hero-cta .btn{width:100%;min-width:0;max-width:100%;padding:13px 12px}
  .services{grid-template-columns:minmax(0,1fr)}
  .services .card{padding:26px 20px;min-width:0}
  .prod-grid,.about-stats{grid-template-columns:minmax(0,1fr)}
  .step{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:24px 16px}
}
@media(max-width:300px){.hero h1{font-size:1.625rem}}
@media(min-width:2400px) and (min-height:1000px){
  .hero{--hero-copy:720px;--hero-detail:660px;--hero-gap:96px}
  .hero>.wrap{max-width:1920px;padding-inline:48px}
  .hero-earth{width:min(100%,880px,64svh)}
  .hero .hero-intro p.lead{font-size:1.1875rem}
}
@media(prefers-reduced-motion:reduce){.hero-earth canvas,.hero-earth-poster{transition:none}}