/* Equipo, Instalaciones, Habitaciones, Centro de Día, Rehabilitación, Paliativos, Recreo */

function Equipo() {
  const pros = [
    { n: "Médico Clínico", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M9 4v3a3 3 0 0 0 6 0V4"/><path d="M7 4h2"/><path d="M15 4h2"/>
        <path d="M12 10v4a5 5 0 0 0 5 5h0a3 3 0 0 0 3-3v-2"/><circle cx="20" cy="14" r="2"/>
      </svg>
    )},
    { n: "Médico Psiquiatra", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M9 18a5 5 0 0 1-3-9 5 5 0 0 1 10 0 5 5 0 0 1-3 9"/>
        <path d="M9 18v3h6v-3"/><path d="M12 9v4"/><path d="M10 11h4"/>
      </svg>
    )},
    { n: "Médico Neurólogo", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 4a4 4 0 0 0-4 4c0 1 .3 1.8.8 2.5C7.7 11 7 12 7 13.5A3.5 3.5 0 0 0 10.5 17H12"/>
        <path d="M12 4a4 4 0 0 1 4 4c0 1-.3 1.8-.8 2.5C16.3 11 17 12 17 13.5A3.5 3.5 0 0 1 13.5 17H12"/>
        <path d="M12 17v4"/>
      </svg>
    )},
    { n: "Enfermería 24 horas", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="6" width="16" height="14" rx="2"/><path d="M8 6V4h8v2"/>
        <path d="M12 11v6"/><path d="M9 14h6"/>
      </svg>
    )},
    { n: "Psicología", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3a5 5 0 0 0-5 5v3c0 1-1 2-1 3.5C6 16 7 17 8.5 17H10v3a1 1 0 0 0 1 1h2"/>
        <path d="M14 8a3 3 0 1 1 3 3"/><path d="M17 11v2"/>
      </svg>
    )},
    { n: "Musicoterapia", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M9 18V6l11-2v12"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/>
      </svg>
    )},
    { n: "Terapia Ocupacional", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 21s-7-4-7-11a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 7-7 11-7 11z"/>
        <path d="M9 10h6"/><path d="M12 7v6"/>
      </svg>
    )},
    { n: "Trabajadores Sociales", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/>
        <circle cx="17" cy="9" r="2.5"/><path d="M14 20c0-2.5 1.5-4.5 4-4.5s4 2 4 4.5"/>
      </svg>
    )},
    { n: "Kinesiología", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="13" cy="5" r="2"/><path d="M11 9l-3 4 3 2v6"/><path d="M11 15h4l3 4"/>
        <path d="M8 13l-3 1"/>
      </svg>
    )},
    { n: "Profesor de Educación Física", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 12h2l2-3 4 6 4-9 2 6h4"/><circle cx="20" cy="12" r="1.2" fill="currentColor"/>
      </svg>
    )},
    { n: "Nutricionista", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 21c-3 0-5-3-5-7 0-4 3-7 5-7s5 3 5 7c0 4-2 7-5 7z"/>
        <path d="M12 3c0 2 1.5 3 3 3"/><path d="M9 11c1 1.5 5 1.5 6 0"/>
      </svg>
    )},
  ];

  return (
    <section id="equipo" data-screen-label="04 Equipo" style={{ background: "var(--c-bg)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow navy mark">Nuestros profesionales</span>
            <h2 className="display">Un equipo <span className="it">interdisciplinario</span><br/>cerca de cada residente.</h2>
          </div>
          <p className="lede">
            Detrás de cada cuidado hay un grupo profesional estable que coordina decisiones clínicas,
            sociales y de bienestar. Eso permite una atención coherente, personal y de calidad sostenida
            en el tiempo.
          </p>
        </div>

        <div className="reveal equipo-layout">
          <div className="equipo-photo">
            <img src="assets/fotos/gimnasio.jpg" alt="Profesional con un residente en el gimnasio" />
            <span className="equipo-photo-tag">Gimnasio · sesión de kinesiología</span>
          </div>

          <ul className="equipo-grid">
            {pros.map((p, i) => (
              <li key={i} className="equipo-card">
                <span className="equipo-icon" aria-hidden="true">{p.icon}</span>
                <span className="equipo-name">{p.n}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="reveal" style={{ marginTop: 48, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <p style={{ margin: 0, fontStyle: "italic", color: "var(--c-text-soft)", fontFamily: "var(--f-display)", fontSize: 18 }}>
            Reuniones interdisciplinarias semanales · Plan de cuidados personalizado · Historia clínica unificada
          </p>
          <a className="btn btn-line" href="#organigrama">Ver organigrama institucional →</a>
        </div>
      </div>
    </section>
  );
}

function Instalaciones() {
  const photos = [
    { src: "assets/fotos/galeria1.jpg", label: "Áreas comunes" },
    { src: "assets/fotos/galeria4.jpg", label: "Patios y exteriores" },
    { src: "assets/fotos/galeria7.jpg", label: "Comedor" },
    { src: "assets/fotos/galeria10.jpg", label: "Sala de rehabilitación" },
  ];

  const stats = [
    { k: "Terreno", v: "4.511", u: "m²" },
    { k: "Edificado", v: "1.386", u: "m²" },
    { k: "Plantas", v: "3", u: "niveles" },
  ];

  const espacios = [
    { t: "Cine", d: "Funciones programadas para residentes y familias." },
    { t: "Confitería", d: "Punto de encuentro cotidiano con familias y visitas." },
    { t: "Salón de usos múltiples", d: "Eventos, talleres y actividades comunitarias." },
    { t: "Salas privadas", d: "Disponibles con solicitud previa para reuniones íntimas." },
    { t: "Centro de rehabilitación", d: "Equipamiento de última generación y profesionales especializados." },
    { t: "Gabinetes de masajes", d: "Espacios reservados para bienestar y terapias manuales." },
  ];

  const sistemas = [
    "Grupo electrógeno propio",
    "Ascensor",
    "Sistema de detección de incendios",
    "Cocheras con seguridad 24 hs",
    "Atención y vigilancia permanentes",
    "Habitaciones de amplio espacio con luz natural",
  ];

  return (
    <section id="instalaciones" data-screen-label="05 Instalaciones">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow mark">Instalaciones</span>
            <h2 className="display">Espacios pensados<br/>para <span className="it">vivir bien.</span></h2>
          </div>
          <p className="lede">
            Características edilicias, equipamiento y entorno natural responden a criterios de calidad
            premium. Cada ambiente está diseñado para la comodidad, la circulación segura y el encuentro
            cotidiano — todo en un predio amplio, luminoso y rodeado de verde.
          </p>
        </div>

        {/* Predio · datos */}
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginBottom: 32, borderTop: "1.5px solid var(--c-ink)", borderBottom: "1px solid var(--c-line)" }}>
          {stats.map((s, i) => (
            <div key={i} style={{ padding: "26px clamp(16px,2vw,28px)", borderRight: i < 2 ? "1px solid var(--c-line)" : "none", display: "flex", flexDirection: "column", gap: 6 }}>
              <span style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--c-text-soft)", fontWeight: 600 }}>{s.k}</span>
              <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span className="display" style={{ fontSize: "clamp(34px,4vw,52px)", lineHeight: 1, color: "var(--c-primary)" }}>{s.v}</span>
                <span style={{ fontFamily: "var(--f-sans)", fontSize: 14, color: "var(--c-text-soft)" }}>{s.u}</span>
              </span>
            </div>
          ))}
        </div>

        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 20 }}>
          <div style={{ position: "relative", borderRadius: 20, overflow: "hidden", aspectRatio: "16/11" }}>
            <img src="assets/fotos/drone.jpg" alt="Vista aérea Solariega" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", left: 24, bottom: 24, color: "#fff", textShadow: "0 2px 12px rgba(0,0,0,.5)" }}>
              <div className="eyebrow" style={{ color: "#ead2d3" }}>Predio · 4.511 m²</div>
              <div className="display" style={{ fontSize: 32, marginTop: 6 }}>Vista general</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 20 }}>
            {photos.slice(0, 2).map((p, i) => (
              <div key={i} style={{ position: "relative", borderRadius: 20, overflow: "hidden" }}>
                <img src={p.src} alt={p.label} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", left: 16, bottom: 12, color: "#fff", fontSize: 13, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", textShadow: "0 1px 6px rgba(0,0,0,.6)" }}>{p.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal col-2" style={{ marginTop: 28, gap: 20 }}>
          {photos.slice(2).map((p, i) => (
            <div key={i} style={{ position: "relative", borderRadius: 20, overflow: "hidden", aspectRatio: "5/3" }}>
              <img src={p.src} alt={p.label} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", left: 20, bottom: 16, color: "#fff", fontSize: 13, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", textShadow: "0 1px 6px rgba(0,0,0,.6)" }}>{p.label}</div>
            </div>
          ))}
        </div>

        {/* Corazón de Solariega · jardín central */}
        <div className="reveal" style={{ position: "relative", marginTop: 60, padding: "clamp(40px,5vw,72px) clamp(24px,4vw,56px)", background: "var(--c-navy)", color: "#fff", borderRadius: 24, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "clamp(28px,4vw,56px)", alignItems: "center", overflow: "hidden" }} >
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "url('assets/elementos/recurso4.png')", backgroundSize: "440px auto", backgroundRepeat: "repeat", opacity: .09, mixBlendMode: "screen", pointerEvents: "none" }} />
          <div style={{ position: "relative", zIndex: 1 }}>
            <span className="eyebrow" style={{ color: "#ead2d3" }}>El corazón de Solariega</span>
            <h3 className="display" style={{ fontSize: "clamp(32px,3.6vw,48px)", margin: "12px 0 18px", color: "#fff" }}>
              Un jardín central<br/><span className="it" style={{ color: "#f3d6a8" }}>como punto de encuentro.</span>
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "rgba(255,255,255,.82)", maxWidth: 480 }}>
              En la planta baja, un amplio jardín atraviesa la institución y la conecta con el verde. Es el
              entorno perfecto para un ambiente de relajación, serenidad y saludable contacto con la luz
              solar — tanto para residentes como para sus familias.
            </p>
          </div>
          <div style={{ position: "relative", zIndex: 1, borderRadius: 18, overflow: "hidden", aspectRatio: "5/4", boxShadow: "0 20px 50px -20px rgba(0,0,0,.5)" }}>
            <img src="assets/fotos/exterior.jpg" alt="Jardín central — el corazón de Solariega" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>

        {/* Espacios + sistemas */}
        <div className="reveal" style={{ marginTop: 60, padding: "40px clamp(24px,4vw,56px)", background: "var(--c-paper)", border: "1px solid var(--c-line)", borderRadius: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,4vw,56px)" }} className="inst-grid">
            <div>
              <span className="eyebrow navy">Espacios</span>
              <h3 className="display" style={{ fontSize: 30, margin: "10px 0 22px", color: "var(--c-ink)" }}>
                Diseñados <span className="it">para cada momento.</span>
              </h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
                {espacios.map((e, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "baseline", paddingBottom: 12, borderBottom: "1px solid var(--c-line-soft)" }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--c-primary)", transform: "translateY(-2px)" }}></span>
                    <span>
                      <span style={{ fontFamily: "var(--f-sans)", fontSize: 15, fontWeight: 700, color: "var(--c-ink)" }}>{e.t}</span>
                      <span style={{ fontFamily: "var(--f-sans)", fontSize: 14, color: "var(--c-text-soft)", display: "block", marginTop: 2 }}>{e.d}</span>
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <span className="eyebrow navy">Edificio · sistemas</span>
              <h3 className="display" style={{ fontSize: 30, margin: "10px 0 22px", color: "var(--c-ink)" }}>
                Todo lo necesario, <span className="it">a punto.</span>
              </h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 24px" }}>
                {sistemas.map((b, i) => (
                  <li key={i} style={{ fontSize: 14.5, padding: "10px 0", borderBottom: "1px solid var(--c-line-soft)", display: "flex", alignItems: "flex-start", gap: 10 }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" style={{ marginTop: 5, flexShrink: 0 }}><path d="M2 7l3 3 7-7" stroke="var(--c-primary)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          #instalaciones .inst-grid { grid-template-columns: 1fr !important; }
          #instalaciones .reveal[style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }
          #instalaciones .reveal[style*="background: var(--c-navy)"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Habitaciones() {
  const tipos = [
    { t: "Habitación individual", d: "Espacio privado con baño en suite, calefacción y luz natural directa.", img: "assets/fotos/galeria2.jpg", b: ["Baño privado", "Cama ortopédica", "Llamador de enfermería"] },
    { t: "Habitación doble", d: "Compartida en condiciones de privacidad, ideal para parejas o convivencia asistida.", img: "assets/fotos/galeria5.jpg", b: ["Baño compartido", "Mobiliario adaptado", "Acceso a jardín"] },
    { t: "Habitación de cuidados especiales", d: "Equipada para residentes con mayor dependencia o recuperación post-internación.", img: "assets/fotos/foto17.jpg", b: ["Equipamiento clínico", "Cama articulada", "Atención reforzada"] },
  ];
  return (
    <section id="habitaciones" data-screen-label="06 Habitaciones" style={{ background: "var(--c-bg)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow mark">Habitaciones</span>
            <h2 className="display">Confort, <span className="it">privacidad,</span> seguridad.</h2>
          </div>
          <p className="lede">
            Disponemos de distintos tipos de habitación, todas con baño, llamador y mobiliario adaptado.
            Cada una se asigna según la situación clínica y la preferencia del residente.
          </p>
        </div>

        <div className="reveal col-3">
          {tipos.map((t, i) => (
            <article key={i} className="card" style={{ display: "flex", flexDirection: "column" }}>
              <div style={{ aspectRatio: "4/3", overflow: "hidden" }}>
                <img src={t.img} alt={t.t} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ padding: 24 }}>
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--c-primary)" }}>Tipo 0{i+1}</span>
                <h3 className="display" style={{ fontSize: 24, margin: "8px 0 10px", color: "var(--c-ink)" }}>{t.t}</h3>
                <p style={{ fontSize: 14.5, color: "var(--c-text-soft)", margin: "0 0 16px", lineHeight: 1.55 }}>{t.d}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--c-line)" }}>
                  {t.b.map((x, j) => (
                    <li key={j} style={{ fontSize: 13.5, padding: "10px 0", borderBottom: "1px solid var(--c-line-soft)", color: "var(--c-text)" }}>· {x}</li>
                  ))}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CentroDia() {
  return (
    <section id="centro-dia" data-screen-label="07 Centro de Día" style={{ background: "var(--c-navy)", color: "#fff", overflow: "hidden", position: "relative" }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        backgroundImage: "url('assets/pattern.png')",
        backgroundSize: "560px auto",
        backgroundRepeat: "repeat",
        opacity: .07,
        mixBlendMode: "screen",
        pointerEvents: "none",
      }}></div>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 80% 0%, rgba(150,40,44,.28), transparent 55%)",
        pointerEvents: "none",
      }}></div>
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div className="col-2 reveal" style={{ alignItems: "center", gap: "clamp(40px, 6vw, 100px)" }}>
          <div style={{ aspectRatio: "4/5", borderRadius: 20, overflow: "hidden" }}>
            <img src="assets/fotos/centroDeDia.jpg" alt="Centro de Día" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div>
            <span className="eyebrow" style={{ color: "var(--c-primary)" }}>Centro de Día</span>
            <h2 className="display" style={{ fontSize: "clamp(36px,5vw,64px)", margin: "12px 0 24px", color: "#fff" }}>
              Una jornada activa,<br/>de regreso a <span className="it" style={{ color: "#ead2d3" }}>casa.</span>
            </h2>
            <p style={{ fontSize: 17, color: "rgba(255,255,255,.85)", lineHeight: 1.65, margin: "0 0 16px", maxWidth: "52ch" }}>
              Pensado para personas mayores que viven en su hogar y necesitan acompañamiento profesional,
              atención clínica programada y estímulo cognitivo y social durante el día.
            </p>
            <p style={{ fontSize: 15, color: "rgba(255,255,255,.7)", lineHeight: 1.65, margin: "0 0 32px", maxWidth: "52ch" }}>
              Incluye desayuno, almuerzo y merienda, talleres de memoria, kinesiología, recreación y opciones
              de traslado coordinadas con la familia.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16, marginBottom: 32 }}>
              {[
                ["8 hs", "de programa diario"],
                ["Lun a Vie", "con opcionales fin de semana"],
                ["Traslado", "coordinado a domicilio"],
                ["Equipo médico", "presente todo el día"],
              ].map(([n, l], i) => (
                <div key={i} style={{ borderTop: "1px solid rgba(255,255,255,.18)", paddingTop: 14 }}>
                  <div className="display" style={{ fontSize: 24, color: "#fff" }}>{n}</div>
                  <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)" }}>{l}</div>
                </div>
              ))}
            </div>
            <a className="btn btn-primary" href="#contacto">Consultar Centro de Día →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Rehabilitacion() {
  const disciplinas = [
    { t: "Kinesiología", d: "Recuperación de movilidad, fuerza y equilibrio con planes individuales." },
    { t: "Terapia Ocupacional", d: "Sostenimiento de la autonomía en las actividades de la vida diaria." },
    { t: "Fonoaudiología", d: "Trabajo en deglución, comunicación y memoria verbal." },
    { t: "Educación Física", d: "Movimiento adaptado para mejorar bienestar general y calidad del sueño." },
  ];
  return (
    <section id="rehabilitacion" data-screen-label="08 Rehabilitación">
      <div className="wrap">
        <div className="col-2 reveal" style={{ gap: "clamp(32px, 5vw, 80px)", alignItems: "start" }}>
          <div>
            <span className="eyebrow mark">Rehabilitación</span>
            <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", margin: "12px 0 24px" }}>
              Recuperar funciones,<br/>recuperar <span className="it">autonomía.</span>
            </h2>
            <p style={{ fontSize: 17, color: "var(--c-text)", lineHeight: 1.65, marginBottom: 20, maxWidth: "52ch" }}>
              Nuestro equipo de rehabilitación trabaja en conjunto con el equipo médico para diseñar un plan
              personal que acompañe la recuperación o el sostenimiento funcional de cada residente.
            </p>
            <p style={{ fontSize: 15, color: "var(--c-text-soft)", lineHeight: 1.65, maxWidth: "52ch", marginBottom: 32 }}>
              Disponemos de sala equipada y atención individual o grupal, con seguimiento documentado y
              comunicación constante con la familia.
            </p>
            <a className="btn btn-line" href="#contacto">Conocer el programa →</a>
          </div>
          <div style={{ display: "grid", gap: 14 }}>
            {disciplinas.map((d, i) => (
              <div key={i} style={{
                background: "var(--c-paper)",
                border: "1px solid var(--c-line)",
                borderRadius: 14,
                padding: "22px 24px",
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 20,
                alignItems: "center",
              }}>
                <div className="display" style={{ fontSize: 38, color: "var(--c-primary)", fontStyle: "italic", minWidth: 60 }}>·{i+1}</div>
                <div>
                  <h3 className="display" style={{ fontSize: 22, margin: "0 0 4px", color: "var(--c-ink)" }}>{d.t}</h3>
                  <p style={{ fontSize: 14.5, color: "var(--c-text-soft)", margin: 0, lineHeight: 1.5 }}>{d.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Paliativos() {
  return (
    <section id="paliativos" data-screen-label="09 Cuidados paliativos" style={{ background: "var(--c-paper)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)" }}>
      <div className="wrap">
        <div className="col-2 reveal" style={{ alignItems: "stretch", gap: "clamp(32px, 5vw, 80px)" }}>
          <div>
            <span className="eyebrow navy mark">Cuidados paliativos</span>
            <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 60px)", margin: "12px 0 24px" }}>
              Acompañar con <span className="it">presencia,</span> aliviar con cuidado.
            </h2>
            <p style={{ fontSize: 17, color: "var(--c-text)", lineHeight: 1.7, marginBottom: 18, maxWidth: "52ch" }}>
              Sostenemos la dignidad y el bienestar en los momentos más delicados. Nuestro equipo
              interdisciplinario combina control de síntomas, contención emocional y acompañamiento espiritual,
              tanto al residente como a su familia.
            </p>
            <p style={{ fontSize: 15, color: "var(--c-text-soft)", lineHeight: 1.7, maxWidth: "52ch", fontStyle: "italic", fontFamily: "var(--f-display)" }}>
              Cuidar también es estar, escuchar y respetar los tiempos.
            </p>
          </div>
          <div style={{ background: "var(--c-bg)", border: "1px solid var(--c-line)", borderRadius: 20, padding: "clamp(24px, 3vw, 40px)" }}>
            <h4 className="display" style={{ fontSize: 22, margin: "0 0 20px", color: "var(--c-ink)" }}>Nuestro enfoque incluye</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {["Control profesional de síntomas y dolor",
                "Contención emocional para el residente y su familia",
                "Comunicación clara y respetuosa de cada decisión",
                "Coordinación con el equipo médico y de enfermería",
                "Espacios de duelo y acompañamiento posterior"].map((t, i) => (
                <li key={i} style={{ padding: "14px 0", borderBottom: i < 4 ? "1px solid var(--c-line)" : "none", display: "flex", alignItems: "flex-start", gap: 14, fontSize: 15 }}>
                  <span style={{ color: "var(--c-primary)", fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 18, lineHeight: 1.2, minWidth: 24 }}>·{i+1}</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Recreo() {
  const grupos = [
    {
      t: "Juegos de mesa",
      sub: "2 veces por semana · 2 hs",
      items: ["Bochas", "Truco", "Chin-Chon", "Escoba del 15"],
    },
    {
      t: "Torneos",
      sub: "Encuentros con premiación",
      items: ["Damas", "Ajedrez", "Tejo", "Newcom", "Lotería", "Sapo"],
    },
    {
      t: "Salidas y caminatas",
      sub: "Programación mensual",
      items: ["Caminatas guiadas", "Actividades recreativas", "Encuentros sociales"],
    },
  ];
  return (
    <section id="recreo" data-screen-label="10 Recreo">
      <div className="wrap">
        <div className="reveal" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.05fr",
          gap: 64,
          alignItems: "center",
          marginBottom: 56,
        }}>
          <div>
            <span className="eyebrow mark" style={{ color: "var(--c-mint)" }}>Club RECREO · adultos mayores de 60</span>
            <img src="assets/recreo-logo.png" alt="Recreo por Solariega"
              style={{ display: "block", width: "min(100%, 460px)", height: "auto", margin: "20px 0 24px" }} />
            <p className="lede" style={{ marginTop: 0 }}>
              <strong>RECREO</strong> es un espacio de interacción y recreación para adultos mayores
              activos. Tiene como fin mejorar aspectos del bienestar físico, mental y social
              de las personas.
            </p>
            <p style={{ fontSize: 16, color: "var(--c-text-soft)", lineHeight: 1.65, marginTop: 18 }}>
              Invitamos a adultos mayores de 60 años que <em>no residan</em> en Solariega para que
              sean parte de este <strong>club de amigos</strong>.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap", alignItems: "center" }}>
              <a className="btn btn-primary" href="https://wa.me/5491162194438?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20el%20Club%20Recreo"
                 target="_blank" rel="noopener">
                Escribinos para más información →
              </a>
              <a href="#contacto" style={{ fontSize: 14, color: "var(--c-text-soft)", textDecoration: "none", borderBottom: "1px solid var(--c-line)", padding: "4px 0" }}>
                Otras vías de contacto
              </a>
            </div>
          </div>
          <div style={{ position: "relative", borderRadius: 24, overflow: "hidden", minHeight: 460 }}>
            <img src="assets/fotos/galeria9.jpg" alt="Actividades del Club Recreo"
              style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 35%, rgba(20,23,28,.78))" }}></div>
            <div style={{ position: "absolute", left: 28, bottom: 26, color: "#fff", maxWidth: 360 }}>
              <div className="display" style={{ fontSize: 30, lineHeight: 1.1 }}>
                Vínculos reales, <span className="it" style={{ color: "var(--c-mint)" }}>tardes que importan.</span>
              </div>
            </div>
          </div>
        </div>

        <div className="reveal" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 18,
        }}>
          {grupos.map((g, i) => (
            <div key={i} style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: 20,
              padding: "28px 26px",
              display: "flex",
              flexDirection: "column",
              gap: 18,
              minHeight: 240,
            }}>
              <div>
                <div style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--c-mint-deep, #1abfb1)", fontWeight: 700 }}>
                  {g.sub}
                </div>
                <h4 className="display" style={{ fontSize: 26, margin: "8px 0 0", color: "var(--c-ink)" }}>{g.t}</h4>
              </div>
              <ul style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: "8px 16px",
                fontSize: 14.5,
                color: "var(--c-ink)",
                fontFamily: "var(--f-sans)",
              }}>
                {g.items.map((it, j) => (
                  <li key={j} style={{ display: "flex", gap: 8, alignItems: "baseline", paddingLeft: 2 }}>
                    <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--c-primary)", flex: "0 0 5px", transform: "translateY(-2px)" }}></span>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          #recreo .wrap > .reveal:first-child { grid-template-columns: 1fr !important; gap: 32px !important; }
          #recreo .wrap > .reveal:first-child > div:last-child { min-height: 320px !important; }
          #recreo .wrap > .reveal:last-child { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Equipo, Instalaciones, Habitaciones, CentroDia, Rehabilitacion, Paliativos, Recreo });