const { useState, useEffect, useRef } = React;
const FM = window.Motion || window.framerMotion || window.FramerMotion || {};
const { motion, AnimatePresence, useScroll, useTransform, useInView } = FM;

// ─────────────────────────────────────────────────────────────────────────────
// Tokens
// ─────────────────────────────────────────────────────────────────────────────
const EASE = [0.32, 0.08, 0.24, 1];

// Editorial portrait set — close-up, intimate, low-light. Filtered to B&W in CSS.
const PORTRAITS = {
  hands: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1600&q=80&auto=format&fit=crop",
  profile: "assets/vientos_firmes.png",
  woman: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1400&q=80&auto=format&fit=crop",
  reflective: "assets/vientos_transoceanicos.png",
  silhouette: "assets/vientos_cruzados.png",
  table: "assets/tres_frases.gif",
  light: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=1400&q=80&auto=format&fit=crop",
  shadow: "https://images.unsplash.com/photo-1545167622-3a6ac756afa4?w=1400&q=80&auto=format&fit=crop",
  contemplative: "assets/vientos_en_tierra.png",
  room: "https://images.unsplash.com/photo-1517502884422-41eaead166d4?w=1600&q=80&auto=format&fit=crop",
  book: "https://images.unsplash.com/photo-1495446815901-a7297e633e8d?w=1400&q=80&auto=format&fit=crop",
};

// ─────────────────────────────────────────────────────────────────────────────
// Primitives
// ─────────────────────────────────────────────────────────────────────────────
const Reveal = ({ children, delay = 0, y = 16, className = "" }) => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-8% 0px -8% 0px" });
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y }}
      transition={{ duration: 1.2, ease: EASE, delay }}
      className={className}
    >
      {children}
    </motion.div>
  );
};

const Eyebrow = ({ children, className = "" }) => (
  <div className={`font-mono text-[10px] tracking-[0.32em] uppercase text-stone-400 ${className}`}>
    {children}
  </div>
);

const Rule = ({ className = "" }) => <div className={`h-px w-full bg-white/[0.08] ${className}`} />;

// ChapterMark — number + Spanish label + English subtitle
const ChapterMark = ({ n, label, en }) => (
  <div className="flex flex-col gap-3">
    <div className="flex items-baseline gap-5 font-mono text-[10px] tracking-[0.32em] uppercase">
      <span className="text-stone-400">{String(n).padStart(2, "0")}</span>
      <span className="text-white/80">{label}</span>
    </div>
    {en && (
      <div className="font-mono text-[9px] tracking-[0.36em] uppercase text-stone-400 italic">
        {en}
      </div>
    )}
  </div>
);

// Subtle atmosphere
const Atmosphere = ({ tone = "cool", strength = 1, className = "" }) => {
  const m = strength;
  const grads =
    tone === "warm"
      ? `radial-gradient(60% 50% at 80% 15%, rgba(200,170,130,${0.035 * m}), transparent 70%)`
      : tone === "amber"
      ? `radial-gradient(60% 50% at 20% 80%, rgba(220,190,140,${0.03 * m}), transparent 70%)`
      : tone === "deep"
      ? `radial-gradient(70% 60% at 30% 30%, rgba(60,90,140,${0.05 * m}), transparent 75%)`
      : `radial-gradient(65% 55% at 25% 25%, rgba(90,120,170,${0.04 * m}), transparent 75%)`;
  return <div className={`absolute inset-0 pointer-events-none ${className}`} style={{ background: grads }} />;
};

// Editorial B&W portrait card
const Portrait = ({ src, alt = "", className = "", style }) => {
  const isLocal = src && src.startsWith("assets/");
  return (
    <div className={`relative overflow-hidden bg-[#0a0a0a] ${className}`} style={style}>
      <img
        src={src}
        alt={alt}
        className="absolute inset-0 w-full h-full object-cover"
        style={{ filter: isLocal ? "none" : "grayscale(1) contrast(1.05) brightness(0.78)" }}
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-black/20" />
    </div>
  );
};

// Manifesto sentence with sequential phrase reveals + signal-distortion hover (Module 02 closing)
const SignalsManifesto = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-12% 0px" });
  const [hovered, setHovered] = useState(false);
  const turbRef = useRef(null);

  useEffect(() => {
    if (!hovered || !turbRef.current) return;
    let seed = 1;
    const iv = setInterval(() => {
      seed = (seed % 99) + 1;
      turbRef.current?.setAttribute("seed", seed);
    }, 55);
    return () => clearInterval(iv);
  }, [hovered]);

  const phrases = [
    { text: "C7 SIGNALS nace ahí. ", weight: "font-extralight" },
    { text: "No como evento. No como espacio de contenido. ", weight: "font-thin" },
    { text: "Como un espacio cerrado donde esas señales se identifican, se contrastan y se convierten en criterio.", weight: "font-extralight" },
  ];
  return (
    <>
      <svg style={{ position: "absolute", width: 0, height: 0, overflow: "hidden" }}>
        <defs>
          <filter id="manifesto-signal" x="-4%" y="-10%" width="108%" height="120%">
            <feTurbulence ref={turbRef} type="fractalNoise" baseFrequency="0.035 0.07" numOctaves="3" seed="1" result="noise" />
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="18" xChannelSelector="R" yChannelSelector="G" />
          </filter>
        </defs>
      </svg>
      <motion.p
        ref={ref}
        onHoverStart={() => setHovered(true)}
        onHoverEnd={() => setHovered(false)}
        animate={hovered ? { skewX: [0, -0.4, 0.4, -0.2, 0.2, 0], x: [0, -1, 1, 0] } : { skewX: 0, x: 0 }}
        transition={hovered ? { duration: 0.45, repeat: Infinity, repeatType: "loop", ease: "easeInOut" } : { duration: 0.25 }}
        style={{ filter: hovered ? "url(#manifesto-signal)" : "none", cursor: "default" }}
        className="font-display text-[26px] md:text-[36px] lg:text-[44px] leading-[1.35] tracking-[-0.018em] text-white text-balance"
      >
        {phrases.map((p, i) => (
          <motion.span
            key={i}
            initial={{ opacity: 0, y: 8 }}
            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 8 }}
            transition={{ duration: 1.0, ease: EASE, delay: 0.05 + i * 0.18 }}
            className={`inline ${p.weight}`}
          >
            {p.text}
          </motion.span>
        ))}
      </motion.p>
    </>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────────────────
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);
  const [hoveredNav, setHoveredNav] = useState(null);
  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 16);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? window.scrollY / h : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const navItems = [
    ["#porque", "Por qué ahora"],
    ["#que-es", "Qué es"],
    ["#sistema", "El sistema"],
    ["#viento", "Leer el viento"],
    ["#sala", "La sala"],
    ["#acceso", "Acceso"],
  ];
  return (
    <nav
      style={{ animation: "nav-in 1.1s cubic-bezier(.32,.08,.24,1) .35s both" }}
      className={`fixed top-0 inset-x-0 z-50 [transition:background-color_700ms_var(--ease-out-expo),backdrop-filter_700ms_var(--ease-out-expo),border-color_700ms_var(--ease-out-expo)] ${
        scrolled ? "bg-black/45 backdrop-blur-2xl border-b border-white/[0.06]" : "bg-transparent border-b border-transparent"
      }`}
    >
      <div className="mx-auto max-w-[1480px] px-6 md:px-12 h-[68px] flex items-center justify-between">
        <a href="#hero" className="flex items-center gap-3 group">
          <img src="assets/logo-c7-simbolo.png" alt="" className="h-[24px] w-auto invert opacity-90 group-hover:opacity-100 [transition:opacity_320ms_var(--ease-out-expo)]" />
          <span className="font-mono text-[10px] tracking-[0.36em] text-white/75 group-hover:text-white [transition:color_320ms_var(--ease-out-expo)]">SIGNALS</span>
        </a>
        <div
          className="hidden lg:flex items-center gap-9 text-[13px] text-stone-200"
          onMouseLeave={() => setHoveredNav(null)}
        >
          {navItems.map(([h, l], i) => (
            <a
              key={h}
              href={h}
              onMouseEnter={() => setHoveredNav(i)}
              onFocus={() => setHoveredNav(i)}
              className="relative font-light [transition:color_320ms_var(--ease-out-expo)] hover:text-white"
            >
              {l}
              {hoveredNav === i && (
                <motion.span
                  layoutId="nav-underline"
                  className="absolute -bottom-1.5 left-0 right-0 h-px bg-white/80"
                  transition={{ type: "spring", stiffness: 380, damping: 32, mass: 0.6 }}
                />
              )}
            </a>
          ))}
        </div>
        <a href="#acceso" className="btn-fill btn-fill-ghost group inline-flex items-center gap-3 border border-white/40 px-4 py-2 text-[12px] tracking-wide text-white font-light">
          <span>Solicitar acceso</span>
          <span className="transition-transform duration-[480ms] [transition-timing-function:var(--ease-out-expo)] group-hover:translate-x-1">→</span>
        </a>
      </div>
      <div className="absolute bottom-0 left-0 h-px bg-gradient-to-r from-white/60 via-white/20 to-transparent" style={{ width: `${progress * 100}%`, transition: "width 120ms linear" }} />
    </nav>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 01 — APERTURA / OPENING
// ─────────────────────────────────────────────────────────────────────────────
const Hero = () => {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const yVideo = useTransform(scrollYProgress, [0, 1], [0, -120]);
  const yLogo = useTransform(scrollYProgress, [0, 1], [0, -80]);
  const oVideo = useTransform(scrollYProgress, [0, 0.8], [1, 0.15]);
  const sVideo = useTransform(scrollYProgress, [0, 1], [1.0, 1.08]);

  return (
    <section ref={ref} id="hero" data-screen-label="01 Apertura" className="relative min-h-[100svh] overflow-hidden bg-black">
      {/* Cinematic B&W video */}
      <motion.div style={{ y: yVideo, opacity: oVideo, scale: sVideo }} className="absolute inset-0">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
          style={{ filter: "grayscale(1) contrast(1.15) brightness(0.55)" }}
        >
          <source src="assets/hero-video-loop.mp4" type="video/mp4" />
        </video>
      </motion.div>

      <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-black/55 via-black/30 to-black/95" />
      <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(ellipse_at_center,transparent_25%,#000_90%)]" />
      <Atmosphere tone="deep" strength={0.9} />

      {/* Hero content */}
      <div className="relative z-10 mx-auto max-w-[1480px] px-6 md:px-12 min-h-[100svh] flex flex-col">
        {/* Top meta */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.5, ease: EASE, delay: 0.4 }}
          className="pt-32 md:pt-36 flex items-center justify-between text-stone-300"
        >
          <span className="font-mono text-[10px] tracking-[0.34em] uppercase">By Momentto · X360</span>
          <span className="hidden md:inline font-mono text-[10px] tracking-[0.34em] uppercase">Acceso por invitación · Chatham House</span>
          <span className="font-mono text-[10px] tracking-[0.34em] uppercase">Bogotá · Oct 2026</span>
        </motion.div>

        {/* Logo */}
        <motion.div
          style={{ y: yLogo }}
          initial={{ opacity: 0, scale: 0.97 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 2.2, ease: EASE, delay: 0.7 }}
          className="pt-20 md:pt-24 flex justify-center"
        >
          <img src="assets/logo-c7-blanco.png" alt="C7 Signals" className="h-[120px] md:h-[180px] lg:h-[220px] w-auto opacity-95" />
        </motion.div>

        {/* Statement (two-line cascade) */}
        <div className="pt-16 md:pt-20 flex-1 flex flex-col items-center text-center max-w-5xl mx-auto">
          <motion.h1
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.4, ease: EASE, delay: 1.4 }}
            className="font-display text-white text-[40px] sm:text-[58px] md:text-[78px] lg:text-[94px] leading-[1.02] tracking-[-0.032em] font-extralight"
          >
            El cambio no llega como noticia.<br />
            <span className="text-stone-500">Llega como señal.</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.4, ease: EASE, delay: 2.0 }}
            className="mt-12 max-w-[640px] text-white text-[18px] md:text-[20px] leading-[1.55] font-light"
          >
            C7 es el espacio donde se lee antes.
          </motion.p>

          {/* Hero informational block — qué es, cuándo, dónde */}
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.4, ease: EASE, delay: 2.3 }}
            className="mt-16 w-full max-w-[820px]"
          >
            <div className="font-mono text-[10px] tracking-[0.34em] uppercase text-stone-300 mb-8">
              Séptima edición · Foro estratégico cerrado
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-white/[0.10] border-y border-white/[0.10]">
              <div className="bg-black px-5 py-7 text-left">
                <div className="font-mono text-[9px] tracking-[0.32em] uppercase text-stone-300">Sede</div>
                <div className="mt-3 text-white text-[15px] md:text-[16px] font-light leading-[1.45]">
                  Hotel Portón<br />de la Cabrera<br />
                  <span className="text-stone-300 text-[13.5px]">Bogotá, Colombia</span>
                </div>
              </div>
              <div className="bg-black px-5 py-7 text-left">
                <div className="font-mono text-[9px] tracking-[0.32em] uppercase text-stone-300">Fechas</div>
                <div className="mt-3 text-white text-[15px] md:text-[16px] font-light leading-[1.45]">
                  15 y 16<br />de octubre<br />
                  <span className="text-stone-300 text-[13.5px]">2026</span>
                </div>
              </div>
              <div className="bg-black px-5 py-7 text-left">
                <div className="font-mono text-[9px] tracking-[0.32em] uppercase text-stone-300">Sala</div>
                <div className="mt-3 text-white text-[15px] md:text-[16px] font-light leading-[1.45]">
                  80–100 decisores<br />
                  <span className="text-stone-300 text-[13.5px]">Por invitación<br />Regla Chatham House</span>
                </div>
              </div>
            </div>
            <div className="mt-7 font-mono text-[10px] tracking-[0.34em] uppercase text-stone-300">
              Una iniciativa de Momentto + COMPCO
            </div>
          </motion.div>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1.2, ease: EASE, delay: 2.4 }}
            className="mt-8 text-stone-300 text-[13px] md:text-[14px] leading-[1.7] font-light max-w-[520px] font-mono tracking-[0.16em] uppercase"
            style={{ display: "none" }}
          >
            Bogotá · Hotel Portón de la Cabrera · Octubre 2026
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.2, ease: EASE, delay: 2.7 }}
            className="mt-14 flex flex-col sm:flex-row gap-4 justify-center"
          >
            <a href="#acceso" className="btn-fill btn-fill-primary group inline-flex items-center justify-between gap-10 bg-white text-black px-7 py-4">
              <span className="text-[13px] tracking-wide font-medium">Solicitar acceso</span>
              <span className="text-[12px] transition-transform duration-[480ms] [transition-timing-function:var(--ease-out-expo)] group-hover:translate-x-1">→</span>
            </a>
            <a href="#conversacion" className="btn-fill btn-fill-ghost group inline-flex items-center justify-between gap-10 border border-white/40 px-7 py-4 text-white">
              <span className="text-[13px] tracking-wide font-light">Conversación con el equipo</span>
              <span className="text-[12px] transition-transform duration-[480ms] [transition-timing-function:var(--ease-out-expo)] group-hover:translate-x-1">→</span>
            </a>
          </motion.div>
        </div>

        {/* Bottom strip */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.5, ease: EASE, delay: 3.0 }}
          className="pb-6 mt-auto"
        >
          <Rule />
          <div className="pt-5 flex items-center justify-between text-stone-300">
            <div className="flex items-center gap-3">
              <span className="relative inline-flex">
                <span className="inline-block h-1.5 w-1.5 rounded-full bg-amber-200/80" />
                <span className="absolute inline-block h-1.5 w-1.5 rounded-full bg-amber-200/50 animate-ping" />
              </span>
              <span className="font-mono text-[10px] tracking-[0.34em] uppercase">Una iniciativa de Momentto + COMPCO</span>
            </div>
            <a href="#porque" className="flex items-center gap-3 hover:text-white transition-colors font-mono text-[10px] tracking-[0.34em] uppercase">
              Comenzar la lectura <span>↓</span>
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 02 — POR QUÉ AHORA / Why now
// ─────────────────────────────────────────────────────────────────────────────
const PorQueAhora = () => (
  <section id="porque" data-screen-label="02 Por que ahora" className="relative bg-black text-white pt-44 md:pt-64 pb-44 md:pb-64 overflow-hidden">
    <Atmosphere tone="cool" />

    <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
      <Reveal>
        <ChapterMark n={2} label="Por qué ahora" en="Why now" />
      </Reveal>

      <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12">
        <div className="col-span-12 md:col-span-7">
          <Reveal delay={0.05}>
            <h2 className="font-display text-[42px] md:text-[64px] lg:text-[84px] leading-[1.0] tracking-[-0.03em] font-extralight">
              Octubre de 2026<br />
              <span className="font-thin">no es un mes</span><br />
              cualquiera.
            </h2>
          </Reveal>
        </div>
        <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06] md:pt-4">
          <Reveal delay={0.18}>
            <p className="text-stone-300 text-[17px] md:text-[19px] leading-[1.7] font-light">
              La nueva administración cumple dos meses en el cargo.
              El proyecto de presupuesto 2027 ya está en el Congreso.
              Las calificadoras inician su primer ciclo de revisión al gobierno entrante.
              Las primeras señales sobre continuidad o ruptura empiezan a fijarse en el mercado.
            </p>
          </Reveal>
        </div>
      </div>

      <div className="mt-32 md:mt-40 grid grid-cols-12 gap-y-16 md:gap-x-12">
        <div className="col-span-12 md:col-span-5">
          <Reveal delay={0.05}>
            <div className="relative overflow-hidden bg-[#0a0a0a] aspect-[4/5] w-full">
              <img src="assets/video-ppal.gif" alt="" className="absolute inset-0 w-full h-full object-cover" style={{ objectPosition: "top" }} />
            </div>
          </Reveal>
        </div>
        <div className="col-span-12 md:col-span-7 md:pl-4">
          <Reveal delay={0.15}>
            <p className="font-display text-[24px] md:text-[32px] lg:text-[40px] leading-[1.2] tracking-[-0.018em] text-white font-extralight">
              Tres ciclos regulatorios globales —<br />
              <span className="font-thin">inteligencia artificial, sostenibilidad,</span><br />
              <span className="font-thin">tributación internacional —</span><br />
              pasan de promesa a obligación.
            </p>
          </Reveal>
          <Reveal delay={0.25}>
            <p className="mt-10 max-w-2xl text-stone-300 text-[16px] md:text-[18px] leading-[1.75] font-light">
              A todo esto se suma la señal continental más urgente de 2026: la transformación de Venezuela.
              Para octubre, el reordenamiento regulatorio, comercial y económico del país lleva nueve meses
              en curso — tiempo suficiente para que las primeras oportunidades estén abiertas y para que
              los riesgos de llegar tarde sean reales. Colombia no tiene otro espacio donde leer esa señal
              antes de que sea noticia.
            </p>
            <p className="mt-8 max-w-2xl text-stone-300 text-[16px] md:text-[18px] leading-[1.75] font-light">
              El mundo ya no cambia por eventos visibles, sino por fuerzas que operan
              antes de ser evidentes. Inteligencia artificial, infraestructura digital,
              regulación, geopolítica tecnológica, trazabilidad y legitimidad corporativa
              ya no evolucionan por separado. Se entrelazan. Y en ese cruce
              se está reconfigurando el poder.
            </p>
            <p className="mt-8 max-w-2xl text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light">
              El cambio aparece primero como señales — débiles, fragmentadas, difíciles de
              interpretar. La mayoría las ve cuando ya son tendencia. Algunos cuando
              ya son regulación. Muy pocos cuando apenas empiezan a tomar forma.
            </p>
          </Reveal>
        </div>
      </div>

      <div className="mt-32 md:mt-40 mx-auto max-w-4xl text-center">
        <SignalsManifesto />
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// 03 — QUÉ ES / What C7 is
// ─────────────────────────────────────────────────────────────────────────────
const QueEs = () => (
  <section id="que-es" data-screen-label="03 Que es" className="relative bg-[#060606] text-white pt-44 md:pt-64 pb-44 md:pb-64 border-y border-white/[0.05] overflow-hidden">
    <Atmosphere tone="warm" />

    <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
      <Reveal>
        <ChapterMark n={3} label="Qué es" en="What C7 is" />
      </Reveal>

      <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-20 md:gap-x-12 items-start">
        <div className="col-span-12 md:col-span-7">
          <Reveal delay={0.05}>
            <h2 className="font-display text-[34px] md:text-[52px] lg:text-[68px] leading-[1.08] tracking-[-0.025em] text-white font-extralight">
              Tres frases.
            </h2>
          </Reveal>
          <Reveal delay={0.18}>
            <div className="mt-12 space-y-10 max-w-2xl">
              <p className="font-display text-[22px] md:text-[28px] lg:text-[34px] leading-[1.3] tracking-[-0.015em] text-white font-extralight">
                C7 es la séptima edición de nuestro foro de compliance —
                <span className="font-thin"> y ya no se entiende solo así.</span>
              </p>
              <p className="font-display text-[22px] md:text-[28px] lg:text-[34px] leading-[1.3] tracking-[-0.015em] text-white font-extralight">
                Es un espacio cerrado de lectura estratégica del cambio.
              </p>
              <p className="font-display text-[22px] md:text-[28px] lg:text-[34px] leading-[1.3] tracking-[-0.015em] text-white font-extralight">
                <span className="font-thin">No es un espacio para enterarse.</span><br />
                Es un espacio para llegar antes.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.3}>
            <p className="mt-16 max-w-2xl text-stone-400 text-[15px] md:text-[16px] leading-[1.8] font-light">
              C7 reúne entre ochenta y cien decisores bajo regla Chatham House —
              <span className="text-stone-300"> lo que se dice se usa, quién lo dice no se cita.</span>
              Conversaciones cerradas. Mesa larga. Sin paneles, sin masterclasses,
              sin agendas inflamadas de horarios. Ningún speaker que llene un cartel.
              Ninguna foto promocional.
            </p>
            <p className="mt-8 max-w-2xl text-stone-200 text-[14.5px] md:text-[15px] leading-[1.8] font-light italic">
              Lo que se construye es criterio compartido entre quienes están leyendo
              lo que aún no es obvio.
            </p>
          </Reveal>
        </div>

        <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06]">
          <Reveal delay={0.1}>
            <div className="relative overflow-hidden bg-[#0a0a0a] aspect-[4/5] w-full">
              <img src="assets/tres_frases.gif" alt="" className="absolute inset-0 w-full h-full object-cover" />
            </div>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="mt-6 text-stone-400 text-[12px] leading-[1.7] font-light tracking-wide font-mono uppercase">
              80–100 decisores · Mesa larga · Regla Chatham House
            </p>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// 04 — EL SISTEMA / The system
// ─────────────────────────────────────────────────────────────────────────────
const Sistema = () => {
  const [active, setActive] = useState(0);
  const layers = [
    {
      code: "I",
      tag: "SIGNALS",
      sub: "Lo que se lee · What we read",
      title: "La instalación del marco común.",
      body: "La jornada abre con un signal briefing editorial: una lectura curada del momento. Qué señales están en formación. Qué relaciones están emergiendo entre regulación, tecnología y poder. Qué se está consolidando — y qué se está rompiendo — antes de que el mercado lo registre.",
      tail: "No es conferencia. Es el marco desde el que se va a leer todo lo demás.",
      meta: ["Lectura curada", "Marco común", "Señales en formación"],
    },
    {
      code: "II",
      tag: "XTRUDE",
      sub: "Cómo se procesa · How we process",
      title: "Cada señal se rompe en sus variables.",
      body: "Salones cerrados de entre doce y veinte personas. Sesiones de sesenta a setenta y cinco minutos. Cada XTRUDE Salon toma una señal específica — gobernanza algorítmica, soberanía digital, reconfiguración del riesgo regulatorio, legitimidad corporativa — y la rompe en tecnología, regulación, negocio, riesgo, poder. Se cruza con otras señales.",
      tail: "La conversación no busca consenso. Busca lectura.",
      meta: ["12–20 personas", "60–75 minutos", "Procesamiento estratégico"],
    },
    {
      code: "III",
      tag: "POSITIONS",
      sub: "En qué se convierte · What it becomes",
      title: "Criterio personal — y red de pares.",
      body: "Lo que un decisor se lleva de C7 no son notas. Es orientación. Una posición es lo que queda cuando alguien termina de leer una señal: una hipótesis afilada, una decisión más informada, una conexión con quien también la está leyendo.",
      tail: "Y para quien lo necesita, una traducción operativa: X360 — el estándar con el que Momentto opera la lectura de C7 en clientes, aliados y reguladores.",
      meta: ["Hipótesis afilada", "Red de pares", "X360 · estándar operativo"],
    },
  ];

  return (
    <section id="sistema" data-screen-label="04 El sistema" className="relative bg-black text-white pt-44 md:pt-64 pb-44 md:pb-64 overflow-hidden">
      <Atmosphere tone="deep" strength={0.7} />

      <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
        <Reveal>
          <ChapterMark n={4} label="El sistema" en="The system · SIGNALS · XTRUDE · POSITIONS" />
        </Reveal>

        <Reveal delay={0.05}>
          <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-10 md:gap-x-12 items-end">
            <h2 className="col-span-12 md:col-span-8 font-display text-[42px] md:text-[64px] lg:text-[84px] leading-[1.0] tracking-[-0.03em] font-extralight">
              Tres capas.<br />
              Una lógica.
            </h2>
            <p className="col-span-12 md:col-span-4 text-stone-400 text-[15px] leading-[1.75] font-light">
              Lo que se lee, cómo se procesa,
              en qué se convierte.
            </p>
          </div>
        </Reveal>

        {/* Layer selector */}
        <Reveal delay={0.12}>
          <div className="mt-24 grid grid-cols-3 gap-px bg-white/[0.06] border border-white/[0.08] backdrop-blur-md">
            {layers.map((l, i) => (
              <button
                key={l.tag}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                onClick={() => setActive(i)}
                style={{
                  transform: active === i ? "translateY(-3px)" : "translateY(0)",
                  opacity: active === i ? 1 : 0.55,
                  transition: "transform 520ms var(--ease-out-expo), opacity 480ms var(--ease-out-expo), background-color 520ms var(--ease-out-expo)",
                  backgroundColor: active === i ? "rgba(255,255,255,0.035)" : "rgba(0,0,0,0.4)",
                }}
                className="group relative px-5 md:px-10 py-8 md:py-12 text-left"
              >
                <div className="flex items-baseline justify-between">
                  <span className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-300">Capa {l.code}</span>
                  <motion.span
                    animate={{ opacity: active === i ? 1 : 0.18, scale: active === i ? 1 : 0.85 }}
                    transition={{ duration: 0.5, ease: EASE }}
                    className="inline-block h-1.5 w-1.5 rounded-full bg-amber-200/90"
                  />
                </div>
                <div className="mt-8 font-display text-[26px] md:text-[36px] lg:text-[44px] tracking-[-0.022em] font-extralight">
                  {l.tag}
                </div>
                <div className="mt-3 font-mono text-[9px] tracking-[0.28em] uppercase text-stone-300 italic">
                  {l.sub}
                </div>

                {/* Corner arrow materializes on active */}
                <motion.div
                  initial={false}
                  animate={{ opacity: active === i ? 1 : 0, x: active === i ? 0 : -6 }}
                  transition={{ duration: 0.55, ease: EASE }}
                  className="absolute bottom-5 right-6 md:bottom-7 md:right-10 font-mono text-[12px] text-white/90"
                >
                  ↓
                </motion.div>

                <motion.div
                  className="absolute bottom-0 left-0 h-px bg-white/70"
                  initial={false}
                  animate={{ width: active === i ? "100%" : "0%" }}
                  transition={{ duration: 0.7, ease: EASE }}
                />
              </button>
            ))}
          </div>
        </Reveal>

        {/* Liquid panel body */}
        <div className="mt-px bg-white/[0.015] backdrop-blur-md border-x border-b border-white/[0.08]">
          <AnimatePresence mode="wait">
            <motion.div
              key={active}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -6 }}
              transition={{ duration: 0.7, ease: EASE }}
              className="grid grid-cols-12 gap-y-12 md:gap-x-12 px-6 md:px-14 py-16 md:py-24"
            >
              <div className="col-span-12 md:col-span-7">
                <h3 className="font-display text-[30px] md:text-[44px] lg:text-[56px] leading-[1.05] tracking-[-0.024em] font-extralight text-white">
                  {layers[active].title}
                </h3>
                <p className="mt-10 max-w-xl text-stone-300 text-[16px] md:text-[18px] leading-[1.75] font-light">
                  {layers[active].body}
                </p>
                <p className="mt-8 max-w-xl text-stone-200 text-[14.5px] md:text-[15px] leading-[1.75] font-light italic">
                  {layers[active].tail}
                </p>
              </div>
              <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.08]">
                <Eyebrow className="mb-8">Mecánica</Eyebrow>
                <ul className="space-y-5">
                  {layers[active].meta.map((m) => (
                    <li key={m} className="flex items-center gap-5 text-stone-300 text-[16px] font-light">
                      <span className="text-stone-400">—</span>
                      {m}
                    </li>
                  ))}
                </ul>
                <div className="mt-14 pt-8 border-t border-white/[0.08]">
                  <Eyebrow className="mb-6">Movimiento</Eyebrow>
                  <div className="flex items-center gap-3 font-mono text-[10px] tracking-[0.32em] uppercase">
                    {layers.flatMap((l, i) => {
                      const arr = [
                        <span key={l.tag + "-t"} className={`transition-colors duration-500 ${i <= active ? "text-white" : "text-stone-400"}`}>{l.tag}</span>,
                      ];
                      if (i < layers.length - 1) {
                        arr.push(<span key={l.tag + "-a"} className={`transition-colors duration-500 ${i < active ? "text-white" : "text-stone-400"}`}>→</span>);
                      }
                      return arr;
                    })}
                  </div>
                </div>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 05 — CÓMO LEER EL VIENTO / Reading the winds
// ─────────────────────────────────────────────────────────────────────────────
const Vientos = () => {
  const [hovered, setHovered] = useState(null);
  const winds = [
    {
      code: "I",
      tag: "Vientos firmes",
      en: "Steady winds",
      lead: "Marcos ya en vigor. Cronograma cierto. Independientes del color político del gobierno.",
      body: [
        "Reforma laboral en aplicación plena: el delta efectivo sobre la nómina ya está corriendo y la UGPP (Unidad de Gestión Pensional y Parafiscales) entra a su primer ciclo de auditorías post-implementación.",
        "Finanzas abiertas obligatorias: el Decreto 0368 (régimen de finanzas abiertas de la Superintendencia Financiera) ya no es opcional, y la superficie de ataque cibernético del sistema financiero se multiplica.",
        "Sostenibilidad como umbral de financiamiento: los bancos colombianos empezaron a exigir data alineada con ISSB (International Sustainability Standards Board) para desembolsar crédito corporativo grande.",
      ],
      coda: "Aquí no hay debate. Hay ejecución, verificación y costo de llegar tarde.",
      question: "¿Cómo está absorbiendo nuestra estructura de costos los cambios que ya rigen, y qué tan auditable es lo que reportamos?",
      note: "Primer ciclo de auditorías UGPP en marcha. Crédito bancario corporativo alineado con ISSB.",
      portrait: PORTRAITS.profile,
    },
    {
      code: "II",
      tag: "Vientos cruzados",
      en: "Crossed winds",
      lead: "Materias donde la posición del nuevo gobierno define dirección e intensidad.",
      body: [
        "Inteligencia artificial y soberanía digital: qué arquitectura institucional consolida la nueva administración — autoridad central, régimen sectorial, aproximación ética sin enforcement.",
        "Tributación de próxima ola: déficit fiscal cercano al 6 % del PIB hace probable una nueva ley de financiamiento en 2027.",
        "Régimen de inversión y flujos de capital: continuidad o liberalización, ambas con costo. Transición energética y licenciamiento: el dilema de destrabar sin fracturar la narrativa ambiental.",
        "A estos se suma la posición del nuevo gobierno colombiano frente a la transición venezolana: tratados bilaterales, régimen de comercio fronterizo, política migratoria y marcos de inversión conjunta están siendo redefinidos en tiempo real. Lo que decida el nuevo gobierno en los primeros cien días marcará el escenario para los próximos cuatro años.",
      ],
      coda: "Aquí hay que construir escenarios y blindajes en paralelo. La incertidumbre no es excusa; es la razón.",
      question: "¿Estamos construyendo posiciones que funcionen en más de un escenario, o apostando a uno solo?",
      note: "Arquitectura institucional de IA en formación. Nueva ley de financiamiento, escenario probable 2027.",
      portrait: PORTRAITS.silhouette,
    },
    {
      code: "III",
      tag: "Vientos transoceánicos",
      en: "Transoceanic winds",
      lead: "Regulación extranjera exigible a empresas colombianas vía cadena de valor, financiamiento y M&A (fusiones y adquisiciones).",
      body: [
        "EU AI Act (Reglamento europeo de Inteligencia Artificial): obligación extraterritorial con sanciones de hasta el 7 % de la facturación global.",
        "CSDDD (Corporate Sustainability Due Diligence Directive — debida diligencia corporativa en sostenibilidad). EUDR (EU Deforestation Regulation): trazabilidad geo-referenciada para café, cacao, palma, soya, ganado, madera y caucho.",
        "Pilar Dos de la OCDE: impuesto mínimo global del 15 % con mecanismos plenos. Transparencia salarial: rangos públicos, justificación de brechas, expectativa de inversionistas institucionales.",
        "Y desde el sur: el nuevo marco regulatorio venezolano — doce leyes sectoriales, zonas económicas especiales, Ley de Inversión Extranjera con exigencias de registro y capital mínimo — se convierte en regulación extranjera de alta relevancia para cualquier empresa colombiana con perspectiva regional. Due diligence, arbitraje internacional, riesgo político y ventanas de acceso que no tienen precedente en dos décadas.",
      ],
      coda: "Estas reglas no piden permiso para aplicarse. Se transmiten a través de compradores europeos, bancos correspondientes, fondos institucionales y casas matrices. El compliance se externalizó.",
      question: "¿Quién en nuestra cadena de valor nos está exigiendo ya estándares que aún no nos exige el regulador local?",
      note: "Sanción EU AI Act: hasta 7 % de la facturación global. Trazabilidad geo-referenciada vigente bajo EUDR.",
      portrait: PORTRAITS.reflective,
    },
    {
      code: "IV",
      tag: "Vientos en tierra",
      en: "Ground winds",
      lead: "Aplicación dura local de regímenes ya consolidados. El riesgo no es legislativo: es enforcement.",
      body: [
        "Ciberseguridad como resiliencia demostrable: la SFC (Superintendencia Financiera de Colombia) ya no exige políticas, exige tiempos de detección, contención y recuperación medibles.",
        "Régimen cambiario y DIAN (Dirección de Impuestos y Aduanas Nacionales): tolerancia cero sobre canalización, registro de inversiones y endeudamiento externo.",
        "Libre competencia y protección al consumidor: la SIC (Superintendencia de Industria y Comercio) sofistica detección de carteles y abusos, con jurisdicción concurrente con la SFC sobre tratamiento de datos.",
      ],
      coda: "La pregunta no es si el regulador va a actuar. Es qué tan preparada está la organización cuando lo haga.",
      question: "¿Lo que tenemos en papel se sostiene en una auditoría real — o solo en una de mesa?",
      note: "SFC: tiempos medibles de detección y recuperación. SIC con jurisdicción concurrente sobre datos.",
      portrait: PORTRAITS.contemplative,
    },
  ];

  return (
    <section id="viento" data-screen-label="05 Como leer el viento" className="relative bg-black text-white pt-44 md:pt-64 pb-44 md:pb-64 overflow-hidden">
      <Atmosphere tone="cool" />

      <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
        <Reveal>
          <ChapterMark n={5} label="Cómo leer el viento" en="Reading the winds" />
        </Reveal>

        <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12">
          <div className="col-span-12 md:col-span-7">
            <Reveal delay={0.05}>
              <h2 className="font-display text-[42px] md:text-[64px] lg:text-[84px] leading-[1.0] tracking-[-0.03em] font-extralight">
                Cuatro corrientes.<br />
                <span className="font-thin">Cuatro lecturas</span><br />
                distintas.
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06] md:pt-4">
            <Reveal delay={0.18}>
              <p className="text-stone-300 text-[17px] md:text-[19px] leading-[1.7] font-light">
                No todos los frentes pesan igual. No todos se mueven a la misma velocidad.
                La agenda regulatoria del próximo año se entiende como cuatro corrientes
                distintas — cada una exige una lectura distinta.
              </p>
            </Reveal>
          </div>
        </div>

        {/* Four winds — editorial list with portraits */}
        <div
          className="mt-32 md:mt-40 grid grid-cols-1 gap-px bg-white/[0.06]"
          onMouseLeave={() => setHovered(null)}
        >
          {winds.map((w, i) => (
            <Reveal key={w.code} delay={0.04} y={20}>
              <div
                onMouseEnter={() => setHovered(i)}
                onFocus={() => setHovered(i)}
                style={{
                  opacity: hovered === null || hovered === i ? 1 : 0.42,
                  backgroundColor: hovered === i ? "#0a0a0a" : "#000",
                  transition: "opacity 520ms var(--ease-out-expo), background-color 520ms var(--ease-out-expo)",
                }}
                className="grid grid-cols-12 gap-y-10 md:gap-x-10 py-16 md:py-20 group cursor-default"
              >
                <div className="col-span-12 md:col-span-1 flex md:block items-baseline justify-between">
                  <span className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-400">{w.code}</span>
                </div>
                <div className="col-span-12 md:col-span-7">
                  <h3 className="font-display text-[28px] md:text-[42px] lg:text-[52px] leading-[1.0] tracking-[-0.025em] text-white font-extralight">
                    {w.tag}
                  </h3>
                  <div className="mt-1 font-mono text-[10px] tracking-[0.34em] uppercase text-stone-400 italic">
                    {w.en}
                  </div>
                  <p className="mt-7 text-stone-300 text-[16px] md:text-[17px] leading-[1.7] font-light max-w-xl">
                    {w.lead}
                  </p>
                  <div className="mt-8 space-y-4 max-w-xl">
                    {w.body.map((p, j) => (
                      <p key={j} className="text-stone-200 text-[14px] md:text-[15px] leading-[1.75] font-light">
                        {p}
                      </p>
                    ))}
                  </div>
                  <p className="mt-8 text-stone-400 text-[15px] leading-[1.7] font-light max-w-xl">
                    {w.coda}
                  </p>
                  <p className="mt-10 max-w-xl border-l border-white/[0.15] pl-5 text-stone-300 text-[15px] md:text-[16px] leading-[1.6] italic font-light">
                    {w.question}
                  </p>

                  {/* Hover-reveal note — appears editorially when this wind is active */}
                  <div
                    className="grid max-w-xl"
                    style={{
                      gridTemplateRows: hovered === i ? "1fr" : "0fr",
                      transition: "grid-template-rows 620ms var(--ease-out-expo)",
                    }}
                  >
                    <div className="overflow-hidden">
                      <div
                        className="mt-8 pt-6 border-t border-white/[0.12] flex items-start gap-4"
                        style={{
                          opacity: hovered === i ? 1 : 0,
                          transform: hovered === i ? "translateY(0)" : "translateY(6px)",
                          transition: "opacity 520ms var(--ease-out-expo) 80ms, transform 520ms var(--ease-out-expo) 80ms",
                        }}
                      >
                        <span className="font-mono text-[9px] tracking-[0.34em] uppercase text-stone-400 mt-1 shrink-0">Lectura</span>
                        <span className="text-white text-[14px] md:text-[15px] leading-[1.65] font-light">
                          {w.note}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="col-span-12 md:col-span-4">
                  <Portrait src={w.portrait} className="aspect-[4/5] w-full" />
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.1}>
          <p className="mt-24 md:mt-32 max-w-3xl text-stone-400 text-[16px] md:text-[18px] leading-[1.7] font-light">
            Cada uno de estos vientos se aborda en C7 como una señal en formación.
            No como un panel. No como una clase magistral. Como una conversación cerrada
            entre quienes los están leyendo desde dentro.
          </p>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 05B — LA SEÑAL CONTINENTAL / The continental signal
// ─────────────────────────────────────────────────────────────────────────────
const SenalContinental = () => (
  <section data-screen-label="05B La señal continental" className="relative bg-[#060606] text-white pt-44 md:pt-64 pb-44 md:pb-64 border-y border-white/[0.05] overflow-hidden">
    <Atmosphere tone="amber" strength={0.7} />

    <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
      <Reveal>
        <div className="font-mono text-[10px] tracking-[0.36em] uppercase text-amber-200/60 mb-4">Señal continental</div>
        <h2 className="font-display text-[42px] md:text-[64px] lg:text-[84px] leading-[1.0] tracking-[-0.03em] font-extralight">
          La señal continental.
        </h2>
      </Reveal>

      <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12">
        <div className="col-span-12 md:col-span-8 md:col-start-1">
          <Reveal delay={0.05}>
            <p className="font-display text-[24px] md:text-[34px] lg:text-[42px] leading-[1.2] tracking-[-0.018em] text-white font-extralight">
              Venezuela no es uno de los cuatro Vientos.<br />
              <span className="font-thin">Es el contexto que los redefine a todos al mismo tiempo.</span>
            </p>
          </Reveal>
          <Reveal delay={0.15}>
            <p className="mt-12 max-w-2xl text-stone-300 text-[16px] md:text-[18px] leading-[1.75] font-light">
              En enero de 2026, el orden político venezolano cambió de manera abrupta e irreversible.
              Lo que siguió no fue solo un evento geopolítico: fue el inicio de una transformación
              regulatoria, comercial y económica de proporciones regionales. Doce nuevas leyes de inversión,
              zonas económicas especiales con incentivos fiscales sin precedente, apertura del régimen de
              repatriación de capital, privatización de sectores estratégicos. El mercado venezolano —
              clausurado durante dos décadas — está siendo refundado desde la regulación.
            </p>
          </Reveal>
          <Reveal delay={0.25}>
            <p className="mt-10 max-w-2xl text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light">
              Para Colombia, esto no es un asunto de política exterior. Es una señal de negocio que ya
              está corriendo. Las empresas colombianas que lleguen primero a leer ese mapa regulatorio —
              sus oportunidades reales, sus riesgos de enforcement, sus ventanas de inversión — tendrán
              entre doce y dieciocho meses de ventaja sobre las que esperen a que el panorama sea obvio.
              C7 lee esa señal antes. No desde la ideología, sino desde el compliance, el riesgo
              regulatorio y la oportunidad estratégica.
            </p>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// 06 — QUIÉN ESTÁ EN LA SALA / Who's in the room
// ─────────────────────────────────────────────────────────────────────────────
const Sala = () => {
  const sectors = [
    "Legal y compliance",
    "Regulación e instituciones",
    "Tecnología y datos",
    "Financiero y capital",
    "Gubernamental",
    "Medios económicos",
    "Inversión y M&A",
    "Justicia y derecho",
  ];
  return (
    <section id="sala" data-screen-label="06 La sala" className="relative bg-[#060606] text-white pt-44 md:pt-64 pb-44 md:pb-64 border-y border-white/[0.05] overflow-hidden">
      <Atmosphere tone="cool" />

      <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
        <Reveal>
          <ChapterMark n={6} label="Quién está en la sala" en="Who's in the room" />
        </Reveal>

        <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12 items-end">
          <div className="col-span-12 md:col-span-7">
            <Reveal delay={0.05}>
              <h2 className="font-display text-[42px] md:text-[64px] lg:text-[84px] leading-[1.0] tracking-[-0.03em] font-extralight">
                La curaduría<br />
                <span className="font-thin">es el foro.</span>
              </h2>
            </Reveal>
            <Reveal delay={0.18}>
              <p className="mt-12 max-w-xl text-stone-300 text-[17px] md:text-[18px] leading-[1.7] font-light">
                El valor ya no es el contenido. Es quién está, qué se entiende y qué
                decisiones se habilitan. C7 reúne entre ochenta y cien decisores que
                comparten un mismo umbral: leer antes.
              </p>
              <p className="mt-7 max-w-xl text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light">
                Vienen de la primera línea de las áreas legal, regulatoria, tecnológica,
                financiera, gubernamental, mediática y de inversión. Empresas que dirigen
                el ciclo del país. Instituciones que escriben las reglas. Plataformas que
                las cuestionan. Capitales que las financian.
              </p>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06]">
            <Reveal delay={0.1}>
              <div className="grid grid-cols-2 gap-3">
                <Portrait src={PORTRAITS.profile} className="aspect-[3/4] w-full" />
                <Portrait src={PORTRAITS.woman} className="aspect-[3/4] w-full mt-10" />
              </div>
            </Reveal>
          </div>
        </div>

        {/* Sectors */}
        <div className="mt-32 md:mt-40">
          <Reveal>
            <div className="flex items-baseline justify-between mb-6">
              <Eyebrow>Representación sectorial · Edición 01 · Oct 2026</Eyebrow>
              <span className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-400">80–100 decisores</span>
            </div>
            <Rule />
          </Reveal>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
            {sectors.map((s, i) => (
              <Reveal key={s} delay={0.04 + i * 0.03}>
                <div className="py-10 md:py-12 md:px-6 border-b border-white/[0.08] lg:border-r lg:[&:nth-child(4n)]:border-r-0 lg:[&:nth-last-child(-n+4)]:border-b-0 sm:[&:nth-child(2n)]:lg:border-r transition-colors duration-700 hover:bg-white/[0.012]">
                  <div className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-400">
                    {String(i + 1).padStart(2, "0")}
                  </div>
                  <h3 className="mt-6 font-display text-[20px] md:text-[22px] leading-[1.25] tracking-[-0.008em] text-white font-light">
                    {s}
                  </h3>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        {/* The network behind the cycle */}
        <div className="mt-32 md:mt-40 grid grid-cols-12 gap-y-16 md:gap-x-12">
          <div className="col-span-12 md:col-span-6">
            <Reveal>
              <Eyebrow>La red que sostiene el ciclo · The network behind the cycle</Eyebrow>
              <h3 className="mt-7 font-display text-[28px] md:text-[40px] lg:text-[48px] leading-[1.1] tracking-[-0.02em] text-white font-extralight">
                C7 no funciona<br />
                como vitrina.<br />
                <span className="font-thin">Funciona como red.</span>
              </h3>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-6 md:pl-12 md:border-l md:border-white/[0.06]">
            <Reveal delay={0.1}>
              <p className="text-stone-300 text-[16px] md:text-[17px] leading-[1.75] font-light">
                C7 se construye con una red de aliados editoriales, académicos, regulatorios,
                técnicos y corporativos: prensa económica especializada, infraestructura
                digital y energética, ciberseguridad y certificación, banca y servicios
                financieros, derecho y compliance, centros de pensamiento y universidades.
              </p>
              <p className="mt-6 text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light">
                Cada aliado aporta una lectura — y se lleva la suya.
              </p>
            </Reveal>
          </div>
        </div>

        {/* International dialogue */}
        <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-12 md:gap-x-12">
          <div className="col-span-12 md:col-span-6">
            <Reveal>
              <Eyebrow>Diálogo internacional · International dialogue</Eyebrow>
              <p className="mt-7 text-stone-300 text-[16px] md:text-[17px] leading-[1.75] font-light">
                Las conversaciones de C7 dialogan también con foros y centros académicos
                europeos y latinoamericanos que están leyendo las mismas señales desde
                otras geografías.
              </p>
              <p className="mt-6 text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light italic">
                La conversación es local en sede; transoceánica en marco.
              </p>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-6 md:pl-12 md:border-l md:border-white/[0.06]">
            <Reveal delay={0.1}>
              <p className="text-stone-400 text-[15px] md:text-[16px] leading-[1.75] font-light">
                La curaduría no se hace por seniority cosmético. Se hace por capacidad
                de leer antes. Esa es la única condición.
              </p>
              <p className="mt-6 text-stone-400 text-[14px] md:text-[15px] leading-[1.75] font-light">
                Por eso C7 no se inscribe. Se solicita acceso. Y por eso la lista de
                quienes están en la sala no se publica antes del foro.
              </p>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 07 — ANTESALA EDITORIAL / Editorial pre-forum
// ─────────────────────────────────────────────────────────────────────────────
const Antesala = () => {
  const pieces = [
    {
      month: "Julio",
      en: "July",
      tag: "Reconocimiento empresarial",
      body: "En alianza con la prensa económica especializada, una ceremonia de reconocimiento empresarial sirve como primer espacio editorial del ciclo C7. Allí empieza a fijarse la lectura del año y a reconocerse a quienes ya la están haciendo.",
    },
    {
      month: "Agosto–septiembre",
      en: "August–September",
      tag: "Vademécum temático",
      body: "La pieza editorial principal de la antesala: un alcance temático al Vademécum de empresas, en colaboración con La Nota Económica, edición digital sin perjuicio de la versión clásica que circula en agosto. Documento de lujo, preparatorio temático del foro. No replica el directorio; lo lee.",
    },
    {
      month: "Septiembre",
      en: "September",
      tag: "Diálogos técnicos",
      body: "Diálogos técnicos en espacios sectoriales de tecnología y conectividad aterrizan las señales digitales que C7 va a procesar. Es donde lo técnico se convierte en estratégico, y donde el ecosistema tecnológico colombiano empieza a leer junto.",
    },
  ];
  return (
    <section data-screen-label="07 Antesala editorial" className="relative bg-black text-white pt-44 md:pt-64 pb-44 md:pb-64 overflow-hidden">
      <Atmosphere tone="amber" />

      <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
        <Reveal>
          <ChapterMark n={7} label="Antesala editorial" en="Editorial pre-forum" />
        </Reveal>

        <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12 items-end">
          <div className="col-span-12 md:col-span-7">
            <Reveal delay={0.05}>
              <h2 className="font-display text-[42px] md:text-[64px] lg:text-[84px] leading-[1.0] tracking-[-0.03em] font-extralight">
                Antes de octubre,<br />
                <span className="font-thin">C7 se prepara.</span>
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06]">
            <Reveal delay={0.18}>
              <p className="text-stone-300 text-[16px] md:text-[17px] leading-[1.75] font-light">
                La antesala no calienta el evento. Lo orienta.
                C7 abre el ciclo editorial varios meses antes con tres piezas
                que fijan el marco.
              </p>
            </Reveal>
          </div>
        </div>

        {/* Three pieces — calendar-like editorial cards */}
        <div className="mt-32 md:mt-40 grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[0.06] border border-white/[0.06]">
          {pieces.map((p, i) => (
            <Reveal key={p.month} delay={0.05 + i * 0.06}>
              <div className="bg-black/60 backdrop-blur-md p-10 md:p-12 h-full transition-colors duration-700 hover:bg-white/[0.015]">
                <div className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-400">
                  {p.month}
                </div>
                <div className="mt-1 font-mono text-[9px] tracking-[0.34em] uppercase text-stone-400 italic">
                  {p.en}
                </div>
                <h3 className="mt-10 font-display text-[24px] md:text-[30px] leading-[1.15] tracking-[-0.018em] text-white font-extralight">
                  {p.tag}
                </h3>
                <p className="mt-7 text-stone-400 text-[14.5px] leading-[1.7] font-light">
                  {p.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.1}>
          <p className="mt-24 md:mt-32 font-display text-[22px] md:text-[32px] leading-[1.3] tracking-[-0.015em] text-stone-300 font-extralight">
            Tres piezas.<br />
            <span className="text-white">Una sola lectura.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 08 — HOSPITALIDAD / Hospitality
// ─────────────────────────────────────────────────────────────────────────────
const Hospitalidad = () => {
  const items = [
    { eye: "Comida", t: "Mesas curadas por Momentto Taste", d: "Algunos XTRUDE Salons se conducen alrededor de mesas curadas por Momentto Taste — la submarca de hospitalidad privada del ecosistema." },
    { eye: "Espacio", t: "Hotel Portón de la Cabrera", d: "La sede es parte del marco. Bogotá. Sin escenario, sin tarima, sin micrófonos. Densidad antes que ceremonia." },
    { eye: "Ritmo", t: "Dos servicios", d: "Lo que se decide en C7 se decide entre dos servicios. La densidad de una conversación no es independiente de la mesa en la que ocurre." },
    { eye: "Tradición", t: "Mesa, libro, conversación", d: "Hay una tradición — italiana, sobre todo — en la que la mesa, el libro y la conversación culta son la misma pieza. Sellos como Librería Lerner sostienen esa idea desde hace décadas. C7 la lee y la traduce." },
  ];
  return (
    <section data-screen-label="08 Hospitalidad" className="relative bg-[#060606] text-white pt-44 md:pt-64 pb-44 md:pb-64 border-y border-white/[0.05] overflow-hidden">
      <Atmosphere tone="warm" />

      <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
        <Reveal>
          <ChapterMark n={8} label="Hospitalidad" en="Hospitality" />
        </Reveal>

        <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12 items-end">
          <div className="col-span-12 md:col-span-7">
            <Reveal delay={0.05}>
              <h2 className="font-display text-[42px] md:text-[60px] lg:text-[78px] leading-[1.0] tracking-[-0.028em] font-extralight">
                La hospitalidad<br />
                <span className="font-thin">también lee.</span>
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06]">
            <Reveal delay={0.15}>
              <p className="text-stone-300 text-[16px] md:text-[18px] leading-[1.7] font-light">
                La experiencia del foro no acompaña al contenido. Forma parte de él.
                Comida, espacio, ritmo, intimidad. Todo opera como capa de lectura.
              </p>
              <p className="mt-6 text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light italic">
                C7 entiende la hospitalidad como un acto editorial.
              </p>
            </Reveal>
          </div>
        </div>

        <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-12 md:gap-x-12">
          <div className="col-span-12 md:col-span-5">
            <Reveal delay={0.05}>
              <Portrait src={PORTRAITS.book} className="aspect-[4/5] w-full" />
            </Reveal>
            <Reveal delay={0.15}>
              <p className="mt-4 text-stone-400 text-[12px] leading-[1.7] font-light tracking-wide font-mono uppercase">
                Hotel Portón de la Cabrera · Bogotá · Oct 2026
              </p>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-7">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-white/[0.06] border border-white/[0.06]">
              {items.map((it, i) => (
                <Reveal key={it.t} delay={0.05 + i * 0.06}>
                  <div className="bg-[#060606]/60 backdrop-blur-md p-10 md:p-12 h-full transition-colors duration-700 hover:bg-white/[0.02]">
                    <Eyebrow className="mb-7">{it.eye}</Eyebrow>
                    <h3 className="font-display text-[22px] md:text-[28px] leading-[1.18] tracking-[-0.018em] text-white font-extralight">{it.t}</h3>
                    <p className="mt-6 text-stone-400 text-[14px] leading-[1.7] font-light">{it.d}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>

        <Reveal delay={0.1}>
          <p className="mt-24 md:mt-32 max-w-3xl font-display text-[24px] md:text-[34px] leading-[1.3] tracking-[-0.015em] text-stone-300 font-extralight">
            Lo que se decide en C7<br />
            <span className="text-white">se decide entre dos servicios.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 09 — LECTURA DE SALIDA / Closing reading
// ─────────────────────────────────────────────────────────────────────────────
const LecturaSalida = () => (
  <section data-screen-label="09 Lectura de salida" className="relative bg-black text-white pt-44 md:pt-64 pb-44 md:pb-64 overflow-hidden">
    <Atmosphere tone="deep" strength={0.6} />

    <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
      <Reveal>
        <ChapterMark n={9} label="Lectura de salida" en="Closing reading" />
      </Reveal>

      <div className="mt-24 md:mt-32 grid grid-cols-12 gap-y-16 md:gap-x-12 items-start">
        <div className="col-span-12 md:col-span-7">
          <Reveal delay={0.05}>
            <h2 className="font-display text-[42px] md:text-[60px] lg:text-[78px] leading-[1.0] tracking-[-0.028em] font-extralight">
              Lo que se lleva<br />
              <span className="font-thin">quien estuvo en C7.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.18}>
            <p className="mt-14 max-w-2xl text-stone-300 text-[17px] md:text-[19px] leading-[1.7] font-light">
              Al cierre del foro, cada decisor recibe la Lectura de Salida: un documento
              editorial nominal que recoge — sin atribuir — las señales que se procesaron,
              las hipótesis que se afilaron y las posiciones que cuajaron en cada mesa.
            </p>
            <p className="mt-8 max-w-2xl text-stone-200 text-[15px] md:text-[16px] leading-[1.75] font-light">
              No es una memoria del evento. Es un instrumento de trabajo para los
              doce meses siguientes.
            </p>
            <p className="mt-12 max-w-2xl text-stone-400 text-[15.5px] md:text-[16px] leading-[1.75] font-light">
              POSITIONS continúa como red entre ediciones — los pares siguen leyendo.
              Y X360, como traducción operativa del estándar, aterriza en clientes,
              aliados y reguladores lo que en la sala todavía era señal.
            </p>
            <p className="mt-12 font-display text-[22px] md:text-[28px] lg:text-[34px] leading-[1.25] tracking-[-0.015em] text-white font-extralight">
              C7 no termina cuando se vacía la mesa.<br />
              <span className="font-thin">Empieza otra fase.</span>
            </p>
          </Reveal>
        </div>

        <div className="col-span-12 md:col-span-5 md:pl-12 md:border-l md:border-white/[0.06]">
          <Reveal delay={0.1}>
            {/* Document mockup — minimalist editorial card */}
            <div className="bg-white/[0.018] backdrop-blur-md border border-white/[0.08] p-10 md:p-12">
              <div className="flex items-baseline justify-between">
                <Eyebrow>Documento</Eyebrow>
                <span className="font-mono text-[9px] tracking-[0.34em] uppercase text-stone-400">Nominal · Confidencial</span>
              </div>
              <div className="mt-12">
                <div className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-300">
                  C7 SIGNALS · Lectura de salida
                </div>
                <div className="mt-2 font-mono text-[9px] tracking-[0.34em] uppercase text-stone-400">
                  Edición 01 · Octubre 2026
                </div>
                <div className="mt-10 h-px bg-white/[0.08]" />
                <ul className="mt-8 space-y-5 text-stone-400 text-[14px] leading-[1.7] font-light">
                  <li className="flex gap-4">
                    <span className="text-stone-400">I.</span>
                    Señales procesadas en sala
                  </li>
                  <li className="flex gap-4">
                    <span className="text-stone-400">II.</span>
                    Hipótesis afiladas por mesa
                  </li>
                  <li className="flex gap-4">
                    <span className="text-stone-400">III.</span>
                    Posiciones — cruces y consensos parciales
                  </li>
                  <li className="flex gap-4">
                    <span className="text-stone-400">IV.</span>
                    Apertura a los doce meses siguientes
                  </li>
                </ul>
                <div className="mt-10 h-px bg-white/[0.08]" />
                <div className="mt-6 font-mono text-[9px] tracking-[0.32em] uppercase text-stone-400">
                  Sin atribuir · Regla Chatham House
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// 10 — ACCESO / Access
// ─────────────────────────────────────────────────────────────────────────────
const Acceso = () => {
  const [form, setForm] = useState({ nombre: "", organizacion: "", rol: "", email: "", tension: "" });
  const [submitted, setSubmitted] = useState(false);
  const [focused, setFocused] = useState("");
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const onSubmit = async (e) => {
    e.preventDefault();
    try {
      await fetch("https://formsubmit.co/ajax/gerencia@momenttolegal.co", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({ ...form, _subject: "Solicitud de acceso — C7 Signals" }),
      });
    } catch (_) {}
    setSubmitted(true);
  };
  const fields = [
    { k: "nombre", label: "Nombre completo", type: "text" },
    { k: "organizacion", label: "Organización", type: "text" },
    { k: "rol", label: "Rol", type: "text" },
    { k: "email", label: "Correo de contacto", type: "email" },
  ];

  return (
    <section id="acceso" data-screen-label="10 Acceso" className="relative bg-[#060606] text-white pt-44 md:pt-64 pb-44 md:pb-64 border-t border-white/[0.05] overflow-hidden">
      <Atmosphere tone="cool" />

      <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
        <Reveal>
          <ChapterMark n={10} label="Acceso" en="Access" />
        </Reveal>

        <div className="mt-24 md:mt-32 grid grid-cols-12 md:gap-x-12 gap-y-20">
          <div className="col-span-12 md:col-span-5">
            <Reveal delay={0.05}>
              <h2 className="font-display text-[44px] md:text-[64px] lg:text-[80px] leading-[0.98] tracking-[-0.03em] font-extralight">
                Solicitar<br />
                <span className="font-thin">acceso.</span>
              </h2>
            </Reveal>
            <Reveal delay={0.18}>
              <p className="mt-14 text-stone-300 text-[16px] leading-[1.75] max-w-md font-light">
                C7 opera bajo curaduría cerrada y regla Chatham House.
                El acceso se solicita; el equipo evalúa cada solicitud bajo
                criterios editoriales.
              </p>
              <p className="mt-7 text-stone-200 text-[14.5px] leading-[1.75] max-w-md font-light italic">
                No es selección por jerarquía formal.
                Es selección por capacidad de leer antes.
              </p>
            </Reveal>
            <Reveal delay={0.28}>
              <div className="mt-16 space-y-5">
                {[["Edición", "01 · Oct 2026"], ["Sede", "Portón · Bogotá"], ["Aforo", "80–100 convocados"], ["Curaduría", "Equipo editorial C7"], ["Regla", "Chatham House"]].map(([k, v]) => (
                  <div key={k} className="flex items-baseline justify-between border-b border-white/[0.08] pb-4">
                    <span className="font-mono text-[10px] tracking-[0.32em] uppercase text-stone-400">{k}</span>
                    <span className="text-[14px] text-white/90 font-light">{v}</span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <div className="col-span-12 md:col-span-7 md:pl-12 md:border-l md:border-white/[0.06]">
            <AnimatePresence mode="wait">
              {!submitted ? (
                <motion.form
                  key="form"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -8 }}
                  transition={{ duration: 0.7, ease: EASE }}
                  onSubmit={onSubmit}
                  className="bg-white/[0.015] backdrop-blur-md border border-white/[0.08] p-8 md:p-12"
                >
                  <Eyebrow className="mb-10">Solicitar acceso · Request access</Eyebrow>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10">
                    {fields.map((f, i) => (
                      <div key={f.k} className={`relative pt-8 pb-3 border-b transition-colors duration-500 ${focused === f.k ? "border-white/70" : "border-white/15"} ${i >= fields.length - 0 ? "" : ""}`}>
                        <label className={`absolute left-0 transition-all duration-500 pointer-events-none ${form[f.k] || focused === f.k ? "top-0 font-mono uppercase tracking-[0.28em] text-[9px] text-stone-300" : "top-8 text-[14px] text-stone-400 font-light"}`}>
                          {f.label}
                        </label>
                        <input
                          type={f.type}
                          value={form[f.k]}
                          onChange={handle(f.k)}
                          onFocus={() => setFocused(f.k)}
                          onBlur={() => setFocused("")}
                          className="w-full bg-transparent outline-none text-white text-[16px] py-1 font-light"
                        />
                      </div>
                    ))}
                    <div className={`relative pt-8 pb-3 border-b transition-colors duration-500 md:col-span-2 ${focused === "tension" ? "border-white/70" : "border-white/15"}`}>
                      <label className={`absolute left-0 transition-all duration-500 pointer-events-none ${form.tension || focused === "tension" ? "top-0 font-mono uppercase tracking-[0.28em] text-[9px] text-stone-300" : "top-8 text-[14px] text-stone-400 font-light max-w-[90%]"}`}>
                        ¿Qué señal está marcando tu agenda de los próximos doce meses — y cuál crees que otros aún no están leyendo?
                      </label>
                      <textarea
                        rows={3}
                        value={form.tension}
                        onChange={handle("tension")}
                        onFocus={() => setFocused("tension")}
                        onBlur={() => setFocused("")}
                        className="w-full bg-transparent outline-none text-white text-[16px] py-1 resize-none font-light"
                      />
                    </div>
                  </div>
                  <div className="pt-12 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
                    <p className="text-[12px] text-stone-300 max-w-sm leading-relaxed font-light">
                      Sin terceros. Sin lista de espera. Solo lectura del equipo editorial.
                    </p>
                    <button type="submit" className="btn-fill btn-fill-primary group inline-flex items-center justify-between gap-10 bg-white text-black px-7 py-4">
                      <span className="text-[13px] tracking-wide font-medium">Enviar solicitud</span>
                      <span className="text-[12px] transition-transform duration-[480ms] [transition-timing-function:var(--ease-out-expo)] group-hover:translate-x-1">→</span>
                    </button>
                  </div>
                </motion.form>
              ) : (
                <motion.div
                  key="ok"
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8, ease: EASE }}
                  className="bg-white/[0.015] backdrop-blur-md border border-white/[0.08] p-12 md:p-16"
                >
                  <Eyebrow className="mb-8">Recibido · Lectura en curso</Eyebrow>
                  <h3 className="font-display text-[30px] md:text-[44px] leading-[1.08] tracking-[-0.022em] font-extralight">
                    Tu solicitud entró en sala.
                  </h3>
                  <p className="mt-8 text-stone-300 text-[15px] leading-[1.75] max-w-lg font-light">
                    El equipo editorial revisará tu mirada. Si compones la edición,
                    recibirás una invitación cerrada en los próximos diez días hábiles.
                  </p>
                </motion.div>
              )}
            </AnimatePresence>

            <div id="conversacion" className="mt-14 pt-12 border-t border-white/[0.08]">
              <Eyebrow className="mb-5">Conversación con el equipo · Talk to the team</Eyebrow>
              <p className="text-stone-200 text-[13.5px] leading-[1.7] font-light max-w-md mb-5">
                Aliados estratégicos y patrocinadores, escribir directamente al equipo.
              </p>
              <a href="mailto:editorial@c7signals.co" className="group flex items-center justify-between gap-6 py-5 border-b border-white/[0.10] hover:border-white/70 [transition:border-color_320ms_var(--ease-out-expo)]">
                <span className="text-white text-[16px] font-light [transition:letter-spacing_320ms_var(--ease-out-expo)] group-hover:tracking-wide">Abrir conversación</span>
                <span className="font-mono text-[10px] tracking-[0.32em] text-stone-300 group-hover:text-white [transition:color_320ms_var(--ease-out-expo)]">editorial@c7signals.co →</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// 11 — CIERRE / Closing
// ─────────────────────────────────────────────────────────────────────────────
const Cierre = () => (
  <section data-screen-label="11 Cierre" className="relative bg-black text-white pt-44 md:pt-64 pb-12 overflow-hidden">
    <Atmosphere tone="warm" strength={0.8} />

    <div className="relative mx-auto max-w-[1480px] px-6 md:px-12">
      <Reveal>
        <ChapterMark n={11} label="Cierre" en="Closing" />
      </Reveal>

      <div className="mt-28 md:mt-36 max-w-5xl">
        <Reveal delay={0.05}>
          <p className="font-display text-[44px] md:text-[80px] lg:text-[108px] leading-[0.98] tracking-[-0.035em] font-extralight">
            C7 SIGNALS
          </p>
        </Reveal>
        <Reveal delay={0.18}>
          <p className="mt-12 font-mono text-[13px] md:text-[15px] tracking-[0.28em] uppercase text-stone-400">
            Bogotá · Hotel Portón de la Cabrera · Octubre 2026
          </p>
        </Reveal>
        <Reveal delay={0.25}>
          <p className="mt-8 text-stone-200 text-[14px] md:text-[15px] leading-[1.7] font-light">
            Una iniciativa de Momentto + COMPCO.
          </p>
        </Reveal>
        <Reveal delay={0.32}>
          <div className="mt-16 max-w-2xl border-l border-white/[0.15] pl-7 py-2">
            <p className="text-stone-300 text-[16px] md:text-[18px] leading-[1.65] font-light">
              Durante C7, Momentto presenta <span className="text-white">X360</span> —
              la versión consolidada del estándar.
            </p>
          </div>
        </Reveal>
        <Reveal delay={0.4}>
          <a href="#acceso" className="group mt-16 inline-flex items-center gap-6 border-b border-white/40 hover:border-white pb-2 [transition:border-color_320ms_var(--ease-out-expo)]">
            <span className="text-[13px] tracking-wide font-light [transition:letter-spacing_320ms_var(--ease-out-expo)] group-hover:tracking-wider">Solicitar acceso por invitación curada</span>
            <span className="transition-transform duration-[480ms] [transition-timing-function:var(--ease-out-expo)] group-hover:translate-x-1">→</span>
          </a>
        </Reveal>
      </div>

      <div className="mt-44 md:mt-56">
        <Rule />
        <div className="grid grid-cols-12 gap-y-10 md:gap-x-12 py-16">
          <div className="col-span-12 md:col-span-4">
            <img src="assets/logo-c7-blanco.png" alt="C7 Signals" className="h-12 w-auto opacity-95" />
            <p className="mt-8 text-stone-200 text-[13px] max-w-xs leading-[1.7] font-light">
              C7 SIGNALS. Espacio cerrado de lectura estratégica del cambio.<br />
              Bogotá · Hotel Portón de la Cabrera · Octubre 2026.
            </p>
          </div>
          <div className="col-span-6 md:col-span-2">
            <Eyebrow className="mb-6">Sala</Eyebrow>
            <ul className="space-y-3 text-stone-400 text-[13px] font-light">
              <li><a href="#porque" className="hover:text-white transition-colors">Por qué ahora</a></li>
              <li><a href="#que-es" className="hover:text-white transition-colors">Qué es</a></li>
              <li><a href="#sistema" className="hover:text-white transition-colors">El sistema</a></li>
              <li><a href="#viento" className="hover:text-white transition-colors">Leer el viento</a></li>
              <li><a href="#sala" className="hover:text-white transition-colors">La sala</a></li>
            </ul>
          </div>
          <div className="col-span-6 md:col-span-2">
            <Eyebrow className="mb-6">Acceso</Eyebrow>
            <ul className="space-y-3 text-stone-400 text-[13px] font-light">
              <li><a href="#acceso" className="hover:text-white transition-colors">Solicitar</a></li>
              <li><a href="#conversacion" className="hover:text-white transition-colors">Conversar</a></li>
              <li><a href="mailto:editorial@c7signals.co" className="hover:text-white transition-colors">editorial@c7signals.co</a></li>
            </ul>
          </div>
          <div className="col-span-12 md:col-span-4 md:text-right">
            <Eyebrow className="mb-6">Una iniciativa de</Eyebrow>
            <div className="flex md:justify-end items-center gap-10 opacity-85">
              <img src="assets/logo-momentto-blanco.png" alt="Momentto" className="h-5 w-auto" />
              <img src="assets/logo-x360-blanco.png" alt="X360" className="h-7 w-auto" />
            </div>
            <p className="mt-6 text-stone-200 text-[12px] leading-[1.7] font-light">
              Momentto + COMPCO.<br />
              Séptima edición del foro.
            </p>
          </div>
        </div>
        <Rule />
        <div className="py-7 flex flex-col md:flex-row items-start md:items-center justify-between gap-3 font-mono text-[9px] tracking-[0.32em] uppercase text-stone-400">
          <span>© 2026 Momentto · COMPCO. Todos los derechos reservados.</span>
          <div className="flex items-center gap-8">
            <a href="#" className="hover:text-white transition-colors">Privacidad</a>
            <a href="#" className="hover:text-white transition-colors">Chatham House</a>
            <span>Edición 01</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────────────────────
function App() {
  return (
    <div className="min-h-screen bg-black text-white antialiased selection:bg-amber-200/20 selection:text-white">
      <Nav />
      <main>
        <Hero />
        <PorQueAhora />
        <QueEs />
        <Sistema />
        <Vientos />
        <SenalContinental />
        <Sala />
        <Antesala />
        <Hospitalidad />
        <LecturaSalida />
        <Acceso />
        <Cierre />
      </main>
      <a
        href="https://wa.me/573243674683"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="WhatsApp"
        style={{ position: "fixed", bottom: "2rem", right: "2rem", zIndex: 50, width: "2.75rem", height: "2.75rem", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "9999px", border: "1px solid rgba(255,255,255,0.18)", background: "rgba(0,0,0,0.7)", backdropFilter: "blur(8px)", transition: "border-color 0.3s" }}
        onMouseEnter={e => e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)"}
        onMouseLeave={e => e.currentTarget.style.borderColor = "rgba(255,255,255,0.18)"}
      >
        <svg viewBox="0 0 24 24" style={{ width: "1.1rem", height: "1.1rem", fill: "rgba(255,255,255,0.65)" }}>
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
      </a>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
