// ─── Bolivia Joven — Círculo de Médicos Bolivia Joven ────────────────────────
const { useRef, useState } = React;
const {
  Navbar, Footer, useReveal,
  HeartIcon, StethoscopeIcon, ClipboardIcon, CalendarIcon, BuildingIcon,
  CheckIcon, MicroscopeIcon, MapIcon, CheckCircleIcon, ArrowRightIcon,
  UsersIcon, SparklesIcon, MapPinIcon,
} = window;

const ACC = {
  red:   { solid:'var(--red)',   bg:'rgba(162,0,50,0.13)',   brd:'rgba(162,0,50,0.28)' },
  gold:  { solid:'var(--gold)',  bg:'rgba(233,211,108,0.1)',  brd:'rgba(233,211,108,0.24)' },
  green: { solid:'var(--green)', bg:'rgba(31,113,67,0.14)',   brd:'rgba(31,113,67,0.3)' },
};

// ─── Doctor data ───────────────────────────────────────────────────
const DOCS_LAPAZ = [
  { name:'Dr. Sergio Rojas',       spec:'Otorrinolaringología' },
  { name:'Dr. Andrei Miranda',     spec:'Neumología' },
  { name:'Dr. Marcelo Murillo',    spec:'Oftalmología' },
  { name:'Dr. Lorgio Rivera',      spec:'Pediatría' },
  { name:'Dr. Jorge La Fuente',    spec:'Gineco-obstetricia' },
  { name:'Dr. Alejandro Jordan',   spec:'Gineco-obstetricia' },
  { name:'Dr. Miguel Villa-Gómez', spec:'Gastroenterología' },
  { name:'Dr. Jaime La Hera',      spec:'Cirugía Plástica' },
  { name:'Dr. Luis Uria',          spec:'Urología' },
];

const DOCS_SCZ = [
  { name:'Dr. Gustavo Sauma Ortuño',              spec:'Dermatología' },
  { name:'Dr. Darwin Alejandro Ferreira Alvarez', spec:'Medicina General' },
  { name:'Dr. Carlos Brockmann',                  spec:'Cardiología' },
  { name:'Dr. Eddy Barrera',                      spec:'Endocrinología y Diabetología' },
];

const initials = (name) => name.replace('Dr. ','').split(' ').slice(0,2).map(w=>w[0]).join('');

// ═══════════════════════════════════════════════════════════════════
// 1 · HERO
// ═══════════════════════════════════════════════════════════════════
const MedicosHero = () => (
  <section id="top" style={{position:'relative',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',background:'#0e0e0e',padding:'180px 24px 110px',minHeight:'85vh'}}>
    <div style={{position:'absolute',inset:0,overflow:'hidden'}}>
      {/* Medical-themed abstract overlay — deep teal-green tones */}
      <div style={{position:'absolute',width:'60vw',height:'60vw',top:'-18%',right:'-10%',background:'radial-gradient(circle, rgba(31,113,67,0.35) 0%, transparent 60%)',animation:'blob1 9s ease-in-out infinite'}}/>
      <div style={{position:'absolute',width:'48vw',height:'48vw',bottom:'-16%',left:'-10%',background:'radial-gradient(circle, rgba(162,0,50,0.28) 0%, transparent 62%)',animation:'blob2 11s ease-in-out infinite'}}/>
      <div style={{position:'absolute',width:560,height:560,left:-140,top:'50%',marginTop:-280,border:'1px solid rgba(31,113,67,0.12)',transform:'rotate(45deg)',animation:'floatGeo 8s ease-in-out infinite'}}/>
      <div style={{position:'absolute',width:360,height:360,right:-80,top:'55%',marginTop:-180,border:'1px solid rgba(162,0,50,0.1)',transform:'rotate(45deg)',animation:'floatGeo 8s ease-in-out infinite 1s'}}/>
      <div style={{position:'absolute',inset:0,backgroundImage:'linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px)',backgroundSize:'80px 80px'}}/>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(10,10,10,0.2) 0%,rgba(10,10,10,0.5) 55%,rgba(20,20,20,0.96) 100%)'}}/>
    </div>
    <div style={{position:'relative',zIndex:2,textAlign:'center',maxWidth:920,margin:'0 auto'}}>
      <div className="hero-t1" style={{display:'inline-flex',alignItems:'center',gap:9,marginBottom:28,background:'rgba(31,113,67,0.18)',border:'1px solid rgba(31,113,67,0.4)',padding:'7px 16px',borderRadius:30}}>
        <HeartIcon size={13} style={{color:'var(--green)'}}/>
        <span style={{fontSize:11,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:'#fff'}}>Iniciativa Solidaria · Bolivia Joven</span>
      </div>
      <h1 className="font-anton hero-t2" style={{fontSize:'clamp(2.4rem,7vw,5.6rem)',lineHeight:0.97,letterSpacing:'0.01em',textTransform:'uppercase',color:'#fff',marginBottom:28}}>
        Círculo de Médicos<br/><span style={{color:'var(--gold)'}}>Bolivia Joven</span>
      </h1>
      <p className="hero-t3" style={{fontSize:'clamp(1rem,2.4vw,1.2rem)',color:'rgba(255,255,255,0.72)',lineHeight:1.75,maxWidth:660,margin:'0 auto 44px'}}>
        Una iniciativa solidaria que transforma la salud juvenil en Bolivia. Conectamos médicos especialistas con jóvenes en situación de vulnerabilidad y empoderamos a los futuros profesionales de la medicina.
      </p>
      <div className="hero-t4" style={{display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap'}}>
        <a href="#participa" onClick={e=>{e.preventDefault();document.querySelector('#participa')?.scrollIntoView({behavior:'smooth'});}}
          className="btn-primary" style={{fontSize:15,padding:'14px 32px'}}>
          Participar <ArrowRightIcon size={16}/>
        </a>
        <a href="#medicos" onClick={e=>{e.preventDefault();document.querySelector('#medicos')?.scrollIntoView({behavior:'smooth'});}}
          className="btn-outline" style={{fontSize:15,padding:'14px 32px'}}>
          Ver especialistas
        </a>
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════════════
// 2 · ¿QUÉ HACEMOS?
// ═══════════════════════════════════════════════════════════════════
const WhatWeDo = () => {
  const ref = useRef(null);
  useReveal(ref);
  const pillars = [
    { accent:'green', Icon:StethoscopeIcon, badge:'Mensual',
      title:'Consultas Médicas Gratuitas',
      text:'Cada mes seleccionamos un médico especialista disponible y un joven en situación de vulnerabilidad para una consulta completamente gratuita — presencial o virtual.',
      detail:'Meta: 12 consultas por año por departamento, con seguimiento personalizado realizado por el equipo de Bolivia Joven.',
      metric:'12 consultas / año / depto.' },
    { accent:'red', Icon:MicroscopeIcon, badge:'Semestral',
      title:'Jornada Laboral Médica',
      text:'Cada 6 meses, estudiantes de los primeros 3 años de medicina acompañan todos los procedimientos de una clínica asociada: emergencias, cirugías, internados, enfermería y administración.',
      detail:'Una experiencia de inmersión total diseñada para acortar la brecha entre la teoría y la práctica clínica real.',
      metric:'2 jornadas / año' },
  ];
  return (
    <section ref={ref} className="section-base" style={{background:'var(--bg)',borderTop:'1px solid var(--border)'}}>
      <div className="section-inner">
        <div style={{textAlign:'center',maxWidth:600,margin:'0 auto 56px'}}>
          <div className="reveal" style={{display:'flex',justifyContent:'center',marginBottom:12}}><div className="gold-line"/></div>
          <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(1.9rem,4.5vw,3.1rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.08,marginBottom:16}}>
            ¿Qué <span style={{color:'var(--gold)'}}>hacemos</span>?
          </h2>
          <p className="reveal reveal-d2" style={{fontSize:'0.98rem',lineHeight:1.8,color:'rgba(255,255,255,0.6)'}}>
            Dos ejes de acción complementarios que abordan la salud desde la solidaridad y la formación.
          </p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:26}}>
          {pillars.map((p,i)=>{
            const a = ACC[p.accent];
            return (
              <div key={p.title} className={`pillar reveal reveal-d${i+1}`} data-accent={p.accent}>
                <div style={{height:6,background:p.accent==='green'?'var(--green)':'var(--red)'}}/>
                <div style={{padding:'40px 38px'}}>
                  <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',marginBottom:26,gap:12}}>
                    <div style={{width:58,height:58,borderRadius:14,background:a.bg,border:`1px solid ${a.brd}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                      <p.Icon size={27} style={{color:a.solid}}/>
                    </div>
                    <span style={{fontSize:10,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:a.solid,background:a.bg,border:`1px solid ${a.brd}`,padding:'5px 12px',borderRadius:30,whiteSpace:'nowrap',alignSelf:'flex-start'}}>
                      {p.badge}
                    </span>
                  </div>
                  <h3 className="font-anton" style={{fontSize:'1.65rem',letterSpacing:'0.02em',color:'#fff',marginBottom:14,textTransform:'uppercase',lineHeight:1.1}}>{p.title}</h3>
                  <p style={{fontSize:'0.95rem',lineHeight:1.8,color:'rgba(255,255,255,0.65)',marginBottom:20}}>{p.text}</p>
                  <p style={{fontSize:'0.88rem',lineHeight:1.7,color:'rgba(255,255,255,0.48)',paddingTop:16,borderTop:'1px solid var(--border)'}}>{p.detail}</p>
                  <div style={{display:'inline-flex',alignItems:'center',gap:8,marginTop:18,background:a.bg,border:`1px solid ${a.brd}`,padding:'8px 14px',borderRadius:8}}>
                    <CalendarIcon size={14} style={{color:a.solid}}/>
                    <span style={{fontSize:'0.8rem',fontWeight:600,color:a.solid}}>{p.metric}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// 3 · OBJETIVOS E IMPACTO
// ═══════════════════════════════════════════════════════════════════
const Impact = () => {
  const ref = useRef(null);
  useReveal(ref);
  const objectives = [
    'Garantizar acceso a atención médica especializada para jóvenes bolivianos sin recursos.',
    'Ampliar el programa a los 9 departamentos del país con al menos un médico asociado en cada uno.',
    'Brindar experiencia clínica real a estudiantes de medicina desde los primeros años de carrera.',
    'Crear contenido educativo en salud mensual para la comunidad Bolivia Joven.',
  ];
  const metrics = [
    { Icon:MapIcon,      value:'9 Deptos.', sub:'Meta de expansión', accent:'gold' },
    { Icon:CalendarIcon, value:'Enero 2026', sub:'Consultas iniciadas', accent:'green' },
    { Icon:MicroscopeIcon,value:'Julio 2026', sub:'Próxima Jornada Médica', accent:'red' },
  ];
  return (
    <section ref={ref} className="section-base" style={{background:'var(--bg2)',borderTop:'1px solid var(--border)',borderBottom:'1px solid var(--border)'}}>
      <div className="section-inner">
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:48,alignItems:'start'}}>
          {/* Objectives */}
          <div>
            <div className="reveal gold-line"/>
            <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(1.8rem,4vw,2.8rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.1,marginBottom:20}}>
              Objetivos <span style={{color:'var(--gold)'}}>2026</span>
            </h2>
            <p className="reveal reveal-d2" style={{fontSize:'0.97rem',lineHeight:1.8,color:'rgba(255,255,255,0.6)',marginBottom:28}}>
              Nos trazamos metas concretas y medibles para garantizar el crecimiento sostenido del programa.
            </p>
            <div style={{display:'flex',flexDirection:'column',gap:16}}>
              {objectives.map((obj,i)=>(
                <div key={i} className={`reveal reveal-d${i+1}`} style={{display:'flex',gap:14,alignItems:'flex-start'}}>
                  <div style={{width:26,height:26,borderRadius:7,background:'rgba(31,113,67,0.18)',border:'1px solid rgba(31,113,67,0.32)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,marginTop:1}}>
                    <CheckIcon size={14} style={{color:'var(--green)'}}/>
                  </div>
                  <p style={{fontSize:'0.93rem',lineHeight:1.7,color:'rgba(255,255,255,0.72)'}}>{obj}</p>
                </div>
              ))}
            </div>
          </div>
          {/* Metrics */}
          <div style={{display:'flex',flexDirection:'column',gap:18}}>
            {metrics.map((m,i)=>{
              const a = ACC[m.accent];
              return (
                <div key={m.value} className={`reveal reveal-d${i+1}`} style={{display:'flex',alignItems:'center',gap:20,background:'var(--card)',border:'1px solid var(--border)',borderRadius:16,padding:'24px 28px',transition:'border-color 0.3s',cursor:'default'}}
                  onMouseEnter={e=>e.currentTarget.style.borderColor=a.brd}
                  onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border)'}>
                  <div style={{width:54,height:54,borderRadius:13,background:a.bg,border:`1px solid ${a.brd}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                    <m.Icon size={24} style={{color:a.solid}}/>
                  </div>
                  <div>
                    <div className="font-anton" style={{fontSize:'1.7rem',color:'#fff',lineHeight:1}}>{m.value}</div>
                    <div style={{fontSize:'0.78rem',letterSpacing:'0.08em',textTransform:'uppercase',color:'rgba(255,255,255,0.42)',marginTop:4}}>{m.sub}</div>
                  </div>
                </div>
              );
            })}
            {/* Santa Cruz + La Paz active now */}
            <div className="reveal reveal-d4" style={{background:'linear-gradient(120deg,rgba(233,211,108,0.1),rgba(28,28,28,0.6))',border:'1px solid rgba(233,211,108,0.26)',borderRadius:14,padding:'18px 22px',display:'flex',alignItems:'center',gap:12}}>
              <MapPinIcon size={18} style={{color:'var(--gold)',flexShrink:0}}/>
              <p style={{fontSize:'0.88rem',lineHeight:1.6,color:'rgba(255,255,255,0.72)'}}>
                <strong style={{color:'var(--gold)',fontWeight:600}}>Actualmente activo</strong> en Santa Cruz de la Sierra y La Paz. En expansión nacional.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// 4 · MÉDICOS ASOCIADOS (Tabs)
// ═══════════════════════════════════════════════════════════════════
const DocCard = ({ doc, i }) => (
  <div className="doc-card">
    <div className="doc-avatar">
      <span style={{fontFamily:"'Anton',sans-serif",color:'var(--red)',fontSize:'1.1rem'}}>{initials(doc.name)}</span>
    </div>
    <div style={{minWidth:0,flex:1}}>
      <div style={{fontSize:'1rem',fontWeight:700,color:'#fff',lineHeight:1.2,marginBottom:4,fontFamily:"'Poppins',sans-serif"}}>{doc.name}</div>
      <div style={{fontSize:'0.78rem',fontWeight:500,color:'rgba(255,255,255,0.5)',letterSpacing:'0.02em'}}>{doc.spec}</div>
    </div>
    <div title="Contenido educativo mensual" style={{width:32,height:32,borderRadius:8,background:'rgba(233,211,108,0.1)',border:'1px solid rgba(233,211,108,0.2)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
      <SparklesIcon size={14} style={{color:'var(--gold)'}}/>
    </div>
  </div>
);

const Medicos = () => {
  const ref = useRef(null);
  const [tab, setTab] = useState('lapaz');
  useReveal(ref);
  return (
    <section id="medicos" ref={ref} className="section-base" style={{background:'var(--bg)'}}>
      <div className="section-inner">
        <div style={{textAlign:'center',maxWidth:640,margin:'0 auto 52px'}}>
          <div className="reveal" style={{display:'flex',justifyContent:'center',marginBottom:12}}><div className="gold-line"/></div>
          <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(1.9rem,4.5vw,3.1rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.08,marginBottom:16}}>
            Especialistas <span style={{color:'var(--gold)'}}>comprometidos</span>
          </h2>
          <p className="reveal reveal-d2" style={{fontSize:'0.97rem',lineHeight:1.8,color:'rgba(255,255,255,0.6)'}}>
            Profesionales de la salud que creen en el poder de la juventud y participan activamente en contenido educativo mensual.
          </p>
        </div>

        {/* Tabs */}
        <div className="reveal reveal-d2" style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap',marginBottom:44}}>
          {[{id:'lapaz',label:'La Paz'},{id:'scz',label:'Santa Cruz'}].map(t=>(
            <button key={t.id} onClick={()=>setTab(t.id)} className={`tab-btn ${tab===t.id?'active':''}`}>{t.label}</button>
          ))}
        </div>

        {/* La Paz */}
        <div className={`tab-content ${tab!=='lapaz'?'hidden':''}`}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:16,marginBottom:28}}>
            {DOCS_LAPAZ.map((d,i)=><DocCard key={d.name} doc={d} i={i}/>)}
          </div>
          {/* Clínica Cemes */}
          <div style={{display:'flex',alignItems:'center',gap:18,background:'linear-gradient(120deg,rgba(162,0,50,0.12),rgba(28,28,28,0.6))',border:'1px solid rgba(162,0,50,0.3)',borderRadius:16,padding:'22px 28px'}}>
            <div style={{width:52,height:52,borderRadius:13,background:'rgba(162,0,50,0.18)',border:'1px solid rgba(162,0,50,0.35)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <BuildingIcon size={24} style={{color:'var(--red)'}}/>
            </div>
            <div>
              <div style={{fontSize:'1rem',fontWeight:700,color:'#fff',marginBottom:4,fontFamily:"'Poppins',sans-serif"}}>Clínica Cemes — La Paz</div>
              <p style={{fontSize:'0.85rem',lineHeight:1.6,color:'rgba(255,255,255,0.6)'}}>
                Aliado institucional en La Paz. Sede oficial de las Jornadas Laborales Médicas y espacio de consultas presenciales del programa.
              </p>
            </div>
          </div>
        </div>

        {/* Santa Cruz */}
        <div className={`tab-content ${tab!=='scz'?'hidden':''}`}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:16,marginBottom:28}}>
            {DOCS_SCZ.map((d,i)=><DocCard key={d.name} doc={d} i={i}/>)}
          </div>
          <div style={{display:'flex',alignItems:'center',gap:14,background:'rgba(233,211,108,0.07)',border:'1px solid rgba(233,211,108,0.22)',borderRadius:12,padding:'16px 22px'}}>
            <SparklesIcon size={16} style={{color:'var(--gold)',flexShrink:0}}/>
            <p style={{fontSize:'0.88rem',lineHeight:1.6,color:'rgba(255,255,255,0.65)'}}>
              Santa Cruz es la ciudad de inicio del programa. La red se amplía continuamente con nuevos especialistas.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// 5 · PARTICIPACIÓN — CTA doble
// ═══════════════════════════════════════════════════════════════════
const Participation = () => {
  const ref = useRef(null);
  useReveal(ref);
  const blocks = [
    { accent:'green', Icon:HeartIcon,
      eyebrow:'Para jóvenes pacientes',
      title:'Solicita Atención Médica',
      text:'El equipo de Bolivia Joven realiza la mediación y el seguimiento personalizado. La selección se hace por urgencia de la condición del solicitante.',
      note:'Las solicitudes son revisadas semanalmente. La selección es por urgencia médica.',
      btn:'Llenar Formulario de Petición',
      btnStyle:{ background:'var(--green)', color:'#fff', boxShadow:'0 8px 24px rgba(31,113,67,0.4)' },
      hoverStyle:{ background:'#24895a' },
    },
    { accent:'red', Icon:ClipboardIcon,
      eyebrow:'Para estudiantes de medicina',
      title:'Postula a la Jornada Laboral',
      text:'Dirigido a alumnos de los primeros 3 años de carrera de medicina. Vivirás una semana de inmersión total en procedimientos reales: emergencias, cirugías, enfermería y más.',
      note:'Próxima convocatoria: Julio 2026. Cupos limitados por jornada.',
      btn:'Postular a la Convocatoria de Julio 2026',
      btnStyle:{ background:'var(--gold)', color:'#141414', fontWeight:700, boxShadow:'0 8px 24px rgba(233,211,108,0.35)' },
      hoverStyle:{ background:'#f5e07a' },
    },
  ];
  return (
    <section id="participa" ref={ref} className="section-base" style={{background:'var(--bg2)',borderTop:'1px solid var(--border)'}}>
      <div className="section-inner">
        <div style={{textAlign:'center',maxWidth:600,margin:'0 auto 52px'}}>
          <div className="reveal" style={{display:'flex',justifyContent:'center',marginBottom:12}}><div className="gold-line"/></div>
          <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(1.9rem,4.5vw,3rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.08,marginBottom:16}}>
            ¿Cómo <span style={{color:'var(--gold)'}}>participar</span>?
          </h2>
          <p className="reveal reveal-d2" style={{fontSize:'0.97rem',lineHeight:1.8,color:'rgba(255,255,255,0.6)'}}>
            Tenemos dos puertas de entrada. Elige la que te corresponde.
          </p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:26}}>
          {blocks.map((b,i)=>{
            const a = ACC[b.accent];
            return (
              <div key={b.title} className={`part-card reveal reveal-d${i+1}`}
                style={{background:'var(--card)',borderColor:a.brd}}>
                <div style={{width:56,height:56,borderRadius:14,background:a.bg,border:`1px solid ${a.brd}`,display:'flex',alignItems:'center',justifyContent:'center',marginBottom:22}}>
                  <b.Icon size={26} style={{color:a.solid}}/>
                </div>
                <span style={{display:'inline-block',fontSize:10.5,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:a.solid,marginBottom:12}}>{b.eyebrow}</span>
                <h3 className="font-anton" style={{fontSize:'clamp(1.5rem,3vw,2.1rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.1,marginBottom:16}}>{b.title}</h3>
                <p style={{fontSize:'0.95rem',lineHeight:1.8,color:'rgba(255,255,255,0.65)',marginBottom:14}}>{b.text}</p>
                <div style={{display:'flex',alignItems:'flex-start',gap:10,background:a.bg,border:`1px solid ${a.brd}`,borderRadius:10,padding:'12px 14px',marginBottom:28}}>
                  <CheckCircleIcon size={15} style={{color:a.solid,flexShrink:0,marginTop:2}}/>
                  <p style={{fontSize:'0.82rem',lineHeight:1.6,color:'rgba(255,255,255,0.65)'}}>{b.note}</p>
                </div>
                <a href="#" style={{display:'inline-flex',alignItems:'center',gap:9,...b.btnStyle,fontSize:'0.93rem',padding:'13px 26px',borderRadius:8,textDecoration:'none',transition:'all 0.3s ease'}}
                  onMouseEnter={e=>{Object.assign(e.currentTarget.style,b.hoverStyle);e.currentTarget.style.transform='translateY(-2px)';}}
                  onMouseLeave={e=>{Object.assign(e.currentTarget.style,b.btnStyle);e.currentTarget.style.transform='translateY(0)';}}>
                  {b.btn} <ArrowRightIcon size={15}/>
                </a>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// APP
// ═══════════════════════════════════════════════════════════════════
const MedicosPage = () => (
  <React.Fragment>
    <Navbar page="medicos" />
    <main>
      <MedicosHero />
      <WhatWeDo />
      <Impact />
      <Medicos />
      <Participation />
    </main>
    <Footer page="medicos" />
  </React.Fragment>
);

ReactDOM.createRoot(document.getElementById('root')).render(<MedicosPage />);
