// Contained hero — image no longer bleeds under sticky nav (nav is now sticky above).
function Hero() {
  return (
    <section id="inicio" style={{
      position: 'relative',
      minHeight: '60vh',
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'center',
      padding: '0 0',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url("uploads/fondo2.jpeg")',
        backgroundSize: 'cover',
        backgroundPosition: 'center bottom',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(100deg, rgba(250,245,238,1) 0%, rgba(250,245,238,1) 25%, rgba(250,245,238,.6) 42%, rgba(250,245,238,0) 58%)',
      }}/>

      <div className="container" style={{position:'relative', zIndex: 2}}>
        <div style={{maxWidth: 720, padding: '80px 0'}}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 16px 8px 12px',
            borderRadius: 999,
            background: 'rgba(70,85,56,.08)',
            border: '1px solid rgba(70,85,56,.2)',
            marginBottom: 28,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: '#C17048',
              boxShadow: '0 0 0 4px rgba(193,112,72,.25)',
            }}/>
            <span style={{
              fontSize: 12, letterSpacing: '.2em', color: 'var(--verde-oscuro)',
              fontWeight: 500,
            }}>POR LAURA VIVAS · DARY VELASCO</span>
          </div>

          <h1 style={{
            fontFamily: 'var(--serif)',
            fontWeight: 500,
            color: 'var(--verde-oscuro)',
            fontSize: 'clamp(32px, 4.5vw, 64px)',
            lineHeight: 0.95,
          }}>CENTRO DE BIENESTAR PSICOLÓGICO.</h1>

          <h2 style={{
            fontFamily: 'var(--serif)',
            fontWeight: 400, fontStyle: 'italic',
            color: 'var(--verde-oscuro)',
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.1, marginTop: 8,
          }}>
            <span style={{color: 'var(--terracota)'}}>SEMILLAS.</span>
          </h2>

          <p style={{
            marginTop: 28, maxWidth: 520,
            fontSize: 18, lineHeight: 1.65,
            color: 'var(--tinta-suave)', fontWeight: 300,
          }}>
            Experiencias transformadoras para personas y organizaciones.
          </p>

          <div style={{display:'flex', gap: 16, marginTop: 40, flexWrap:'wrap'}}>
            <a href="servicios.html" style={{
              display:'inline-flex', alignItems:'center', gap: 10,
              padding: '16px 28px', borderRadius: 999,
              border: '2px solid var(--terracota)', color: '#fff',
              fontSize: 13, letterSpacing: '.2em', fontWeight: 600,
              background: 'var(--terracota)',
              boxShadow: '0 16px 36px -10px rgba(193,112,72,.6)',
            }}>VER SERVICIOS <IconArrow size={15}/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;