/* Centre each section within the available fixed panel, with safe overflow. */
.content{display:flex;flex-direction:column;padding:30px 64px}
.page{width:100%;max-width:980px;flex-shrink:0;margin-block:auto;margin-inline:auto}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:36px;align-items:stretch}
.hero-copy{min-width:0}
.hero-copy h1{font-size:clamp(36px,3.7vw,50px);line-height:1.13;overflow-wrap:break-word}
.hero-copy .intro{margin-bottom:0;max-width:none}
.hero-logo{position:relative;min-width:0;align-self:stretch}
.hero-logo svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#inicio .actions{margin-top:28px}
/* The large logo follows the copy height rather than the buttons. */
.hero-grid .hero-copy{animation:section-enter 440ms cubic-bezier(.2,.7,.2,1) both}
.hero-grid .hero-logo{animation:section-enter 520ms 80ms cubic-bezier(.2,.7,.2,1) both}
@media(max-width:800px){.content{padding:28px 32px}.hero-grid{gap:22px;grid-template-columns:minmax(0,1fr) 27%}.hero-copy h1{font-size:36px}}
@media(max-width:540px){
  .content{padding:26px 25px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .hero-copy h1{font-size:38px}
  .hero-logo{height:150px;width:96px;justify-self:center}
  #inicio .actions{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.hero-grid .hero-copy,.hero-grid .hero-logo{animation:none!important}}