/* ============================================================
   REBOOT 2026 — Camp Navarro
   Premium dark, cinematic, redwood. Hand-built CSS.
   ============================================================ */

:root {
  /* warm near-black stone */
  --bg:        #0a0908;
  --bg-2:      #100e0c;
  --surface:   #16130f;
  --surface-2: #1d1813;
  --line:      rgba(245, 240, 232, 0.10);
  --line-2:    rgba(245, 240, 232, 0.06);

  /* text */
  --text:      #f4efe7;
  --muted:     #b3aa9c;
  --muted-2:   #8a8275;

  /* gold / amber accent (redwood-lit) */
  --gold:      #e0a93d;
  --gold-2:    #c98c2a;
  --gold-soft: rgba(224, 169, 61, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---- sponsor logos: un haz de luz dorado barre la fila con el scroll
   (JS mueve .sl__beam en px) y cada logo "atrapa la luz" a su paso —
   ver el bloque "Sponsor logos" en script.js ---- */
.sl { padding: clamp(40px, 6vh, 64px) 0 clamp(64px, 9vh, 100px); border-bottom: 1px solid var(--line-2); }
.sl__label { margin-bottom: 32px; }
.sl__row { position: relative; }
.sl__beam {
  position: absolute; top: 50%; left: 0;
  width: 260px; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(224, 169, 61, 0.6) 0%, rgba(224, 169, 61, 0.22) 42%, rgba(224, 169, 61, 0) 74%);
  filter: blur(4px);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.sl__logos { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sl__logo {
  opacity: 0.38; transform: translateY(4px);
  filter: brightness(0.75) blur(0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sl__logo.is-lit { opacity: 1; transform: translateY(0); filter: brightness(1); animation: sl-catch 750ms var(--ease) both; }
.sl__logo:hover { opacity: 1; transform: translateY(-2px) scale(1.05); filter: brightness(1) drop-shadow(0 0 14px rgba(224, 169, 61, 0.35)); }
/* ---- Altura POR LOGO, no una sola para todos ----
   Igualar la altura de la caja NO iguala el tamano percibido: Rippling es
   mayusculas gruesas que llenan los 28px, y Zoe/Mercury son finos y con
   minusculas. Medido como area de tinta al tamano de render, Rippling
   pesaba 1751 contra 628 de Zoe — 2.8x. Cada marca lleva su altura para
   que el peso quede en una banda estrecha (~770-1080) y ninguna grite.
   Si agregas un logo nuevo: arranca en 28px y ajusta mirando, no midiendo
   la caja. */
.sl__logo img { height: var(--lh, 28px); width: auto; display: block; }
.sl__logo--zoe      img { --lh: 31px; }
.sl__logo--finix    img { --lh: 30px; }
.sl__logo--mercury  img { --lh: 32px; }
.sl__logo--rippling img { --lh: 22px; }
.sl__logo--render   img { --lh: 25px; }
.sl__logo--fin      img { --lh: 27px; }
/* Simpson es el unico wordmark de DOS lineas: a 28px cada linea queda en
   ~12px, ilegible. Necesita mas caja para que el TEXTO pese como el resto. */
.sl__logo--stacked  img { --lh: 40px; }
@keyframes sl-catch {
  0%   { filter: brightness(0.75) blur(3px); transform: translateY(4px) scale(0.92); }
  45%  { filter: brightness(2.1) blur(0); transform: translateY(-3px) scale(1.14); }
  100% { filter: brightness(1) blur(0); transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
  .sl__logos { justify-content: center; gap: 28px 36px; }
  .sl__beam { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl__logo.is-lit { animation: none; }
}

/* ---- film grain ---- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shared type ---- */
.eyebrow, .section-label {
  font-family: "Outfit", sans-serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.section-label { color: var(--muted-2); }

h1, h2, h3 { font-family: "Outfit", sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
em { font-family: "Outfit", sans-serif; font-style: normal; font-weight: 700; letter-spacing: -0.01em; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Outfit", sans-serif; font-weight: 500; font-size: 15px;
  padding: 13px 24px; border-radius: 100px; cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  border: 1px solid transparent; white-space: nowrap;
}
.btn--gold {
  background: var(--gold); color: #1a1407;
  box-shadow: 0 0 0 rgba(224,169,61,0);
}
.btn--gold:hover {
  background: #f0bb4f;
  box-shadow: 0 10px 40px -8px rgba(224,169,61,0.45);
  transform: translateY(-1px);
}
.btn--ghost {
  background: rgba(255,255,255,0.02); color: var(--text);
  border-color: var(--line);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: rgba(245,240,232,0.28); background: rgba(255,255,255,0.05); }
.btn--lg { padding: 17px 36px; font-size: 16.5px; }

/* ---- btn--glow: brillo que respira en reposo + shimmer al hover.
   Reusa el box-shadow del propio boton (no un pseudo-elemento) para el
   halo, porque overflow:hidden en el boton recorta pseudo-elementos pero
   no el box-shadow del elemento mismo; el ::after (el shimmer) si vive
   dentro de ese overflow para quedar contenido. ---- */
.btn--glow { position: relative; overflow: hidden; animation: btn-breathe 3.4s ease-in-out infinite; }
.btn--glow::after {
  content: ""; position: absolute; top: -60%; left: -40%;
  width: 30%; height: 220%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: translateX(-40%) rotate(10deg);
  pointer-events: none;
}
.btn--glow:hover::after {
  transition: transform .85s var(--ease);
  transform: translateX(560%) rotate(10deg);
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 169, 61, 0), 0 0 0 0 rgba(224, 169, 61, 0); }
  50%      { box-shadow: 0 0 22px 4px rgba(224, 169, 61, 0.4), 0 0 46px 14px rgba(224, 169, 61, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--glow { animation: none; }
  .btn--glow:hover::after { transition: none; transform: none; opacity: 0; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Outfit", sans-serif; font-weight: 500; color: var(--gold);
  transition: gap .25s var(--ease);
}
.link-arrow svg { width: 18px; height: 18px; }
.link-arrow:hover { gap: 13px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,9,8,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-2);
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 18px 28px;
  /* Rejilla de 3 columnas: el logo a la izquierda y los links centrados de
     verdad, sin depender de que haya un tercer elemento a la derecha.
     (Con "space-between" los links se iban al borde al quitar el botón.) */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; font-family: "Outfit", sans-serif; font-weight: 600; }
.nav__logo { display: inline-flex; align-items: center; transition: opacity 0.2s var(--ease); }
.nav__logo:hover { opacity: 0.75; }
.nav__logo img { height: 32px; width: auto; display: block; }
.nav__word { letter-spacing: 0.05em; font-size: 16px; color: var(--text); }
.footer__logo { height: 26px; width: auto; display: block; }
.nav__at { color: var(--gold); font-weight: 400; margin: 0 2px; }
.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font-size: 14.5px; color: var(--muted); position: relative;
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding-top: 104px; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  /* fallback cinematic forest gradient if image missing */
  background-color: #0c1410;
  background-image:
    radial-gradient(120% 80% at 70% 0%, #243026 0%, transparent 55%),
    radial-gradient(100% 90% at 20% 100%, #0a0f0b 0%, transparent 60%),
    linear-gradient(180deg, #11180f 0%, #080a07 100%);
  transform: scale(1.08); will-change: transform;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    /* left scrim — anchors the text block */
    linear-gradient(96deg, rgba(8,8,7,0.86) 0%, rgba(8,8,7,0.6) 26%, rgba(8,8,7,0.2) 52%, transparent 74%),
    /* vertical scrim — darker top (nav) + darker bottom (meta/CTAs) */
    linear-gradient(180deg, rgba(8,8,7,0.5) 0%, rgba(8,8,7,0.1) 24%, rgba(8,8,7,0.4) 54%, rgba(8,8,7,0.88) 82%, var(--bg) 100%),
    radial-gradient(120% 90% at 14% 92%, rgba(8,8,7,0.8), transparent 62%);
}
.hero__rays {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.5;
  background: conic-gradient(from 200deg at 75% -10%,
    transparent 0deg, rgba(224,169,61,0.10) 18deg, transparent 40deg,
    rgba(224,169,61,0.06) 60deg, transparent 90deg);
}
.hero__content { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 28px 11vh; width: 100%; }
.eyebrow { display: block; margin-bottom: 22px; font-size: 16.25px; text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
.hero__title {
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  letter-spacing: -0.035em; margin-bottom: 26px;
  text-shadow: 0 2px 60px rgba(0,0,0,0.5);
}
.hero__sub { max-width: 540px; font-size: clamp(1rem, 1.4vw, 1.18rem); color: #e3ddd1; margin-bottom: 38px; text-shadow: 0 1px 20px rgba(0,0,0,0.55); }

.hero__meta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 40px; }
.meta { display: flex; flex-direction: column; gap: 3px; }
.meta__k { font-size: 12.65px; letter-spacing: 0.14em; text-transform: uppercase; color: #c9c1b2; }
.meta__v { font-family: "Outfit", sans-serif; font-size: 17.6px; font-weight: 500; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.meta__div { width: 1px; height: 30px; background: var(--line); }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 20px;
  display: flex; justify-content: center; padding-top: 8px;
}
.hero__scroll span { width: 3px; height: 8px; border-radius: 3px; background: var(--gold); animation: scroll 1.8s var(--ease) infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translateY(0);} 40% {opacity:1;} 100% { opacity: 0; transform: translateY(14px);} }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { padding: clamp(90px, 14vh, 180px) 0; border-bottom: 1px solid var(--line-2); }
.manifesto .section-label { display: block; margin-bottom: 36px; }
.manifesto__line {
  font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.24; max-width: 16ch; color: var(--text);
}
.manifesto__line { max-width: none; }
.manifesto__line em { color: var(--gold); }
.manifesto__foot { margin-top: 38px; max-width: 560px; color: var(--muted); font-size: 1.1rem; }

/* ============================================================
   STATS
   ============================================================ */
.stats { padding: clamp(60px, 9vh, 110px) 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.stat__num {
  font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(180deg, #fff 20%, #c2b9a8 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat__label { color: var(--muted-2); font-size: 16px; letter-spacing: 0.01em; }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.head { margin-bottom: 56px; }
.head--center { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }
.head .section-label { display: block; margin-bottom: 18px; }
.head__title { font-size: clamp(1.9rem, 3.8vw, 3.2rem); letter-spacing: -0.03em; }
.head__sub { margin-top: 20px; color: var(--muted); font-size: 1.08rem; }

/* ============================================================
   EXPERIENCE / BENTO
   ============================================================ */
.experience { padding: clamp(70px, 11vh, 140px) 0; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 248px; gap: 18px; }
.card {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface);
  padding: 30px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover { border-color: rgba(224,169,61,0.35); transform: translateY(-3px); }
.card--tall { grid-row: span 2; }
.card--wide { grid-column: span 2; }
.card[style*="--img"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform .8s var(--ease); transform: scale(1.02);
}
.card[style*="--img"]:hover::before { transform: scale(1.08); }
.card__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.55) 55%, rgba(8,7,6,0.92) 100%);
}
.card__body { position: relative; z-index: 2; }
.ico {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center; color: var(--gold);
  background: var(--gold-soft); border: 1px solid rgba(224,169,61,0.22);
}
.ico svg { width: 21px; height: 21px; }
.card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 42ch; }
.card--tall p, .card--wide p { color: #d8d0c2; }

/* ============================================================
   GUESTS
   ============================================================ */
.guests { padding: clamp(70px, 11vh, 140px) 0; border-top: 1px solid var(--line-2); }
.guests__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.guests__title { font-size: clamp(2rem, 4.4vw, 3.6rem); margin: 0 0 14px; }
.guests__sub { font-family: "Outfit", sans-serif; font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--muted); margin: 0 0 26px; }
.guests__title em { color: var(--gold); }
.guests__text { color: var(--muted); margin-bottom: 18px; max-width: 46ch; }
.guests__text strong { color: var(--text); font-weight: 500; }
.guests__media { position: relative; }
.guests__img {
  aspect-ratio: 3/2; border-radius: 22px; background-size: cover; background-position: center;
  border: 1px solid var(--line);
  background-color: #14110d;
  background-image: radial-gradient(80% 60% at 50% 30%, #2a2118, #0c0a07);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7);
}
.guests__media figcaption {
  margin-top: 14px; font-size: 13px; color: var(--muted-2); letter-spacing: 0.02em;
}

/* ============================================================
   GUESTS — Special Guests & Cohosts
   ============================================================ */
.lineup { padding: clamp(16px, 3vh, 40px) 0 clamp(70px, 11vh, 130px); }
.lg-tier { font-family: "Outfit", sans-serif; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; margin: 0 0 18px; }
.lg-tier--s { color: var(--gold); }
.lg-tier--c { color: var(--muted-2); margin-top: 54px; }
.lg-grid { display: grid; gap: 18px; }
.lg-grid--s { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.lg-grid--c { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 16px; }
.lg-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.lg-card:hover { transform: translateY(-4px); }
.lg-founder b { color: var(--gold); font-weight: 600; }
.lg-m1 { display: block; font-family: "Outfit", sans-serif; font-weight: 600; color: var(--gold); white-space: nowrap; }
.lg-m2 { display: block; color: #ada596; margin-top: 1px; }
.lg-name { font-family: "Outfit", sans-serif; font-weight: 500; color: var(--muted); }
.lg-photo { position: relative; overflow: hidden; }
.lg-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1) contrast(1.03); transition: filter .5s var(--ease), transform .6s var(--ease); }
.lg-card:hover .lg-photo img { filter: grayscale(0); transform: scale(1.04); }
.lg-card--myst .lg-photo { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, rgba(224,169,61,.14), transparent 62%), var(--surface-2); }

/* Special (3, large, pastel gradient + cutouts) */
.lg-card--special { border-color: rgba(255,255,255,.45);
  background: linear-gradient(150deg, #fffff6 0%, #fef9c3 38%, #fce7f3 72%, #e9d5ff 100%);
  box-shadow: 0 26px 70px -26px rgba(233,213,255,.5), 0 0 0 1px rgba(255,255,255,.35); }
.lg-card--special:hover { box-shadow: 0 32px 84px -24px rgba(252,231,243,.6), 0 0 0 1px rgba(255,255,255,.6); }
.lg-grid--s .lg-top { padding: 26px 24px 22px; }
.lg-grid--s .lg-founder { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.45rem; line-height: 1.12; letter-spacing: -.02em; color: #241c10; }
.lg-card--special .lg-founder b { color: #b4530a; }
.lg-card--special .lg-m1 { color: #b4530a; font-size: .98rem; }
.lg-card--special .lg-m2 { color: #6f6047; font-size: .9rem; line-height: 1.3; }
.lg-card--special .lg-name { color: #473c2b; font-size: 1rem; }
.lg-grid--s .lg-money { margin-top: 9px; }
.lg-grid--s .lg-name { margin-top: 15px; }
.lg-grid--s .lg-photo { height: 360px; display: flex; align-items: flex-end; justify-content: center; }
.lg-grid--s .lg-card--myst .lg-photo { align-items: center; background: radial-gradient(circle at 50% 38%, rgba(180,83,10,.14), transparent 62%), rgba(255,255,255,.28); }
.lg-photo--cut img { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom center; filter: none; }
.lg-card:hover .lg-photo--cut img { filter: none; transform: scale(1.03); transform-origin: bottom center; }
.lg-grid--s .lg-q { font-size: 5rem; }
.lg-card--special.lg-card--myst .lg-q { color: rgba(180,83,10,.55); }

/* Cohosts (4, small) */
.lg-grid--c .lg-top { padding: 20px 18px 16px; }
.lg-grid--c .lg-founder { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.08rem; line-height: 1.14; letter-spacing: -.01em; color: #ece6db; }
.lg-grid--c .lg-m1 { font-size: .82rem; } .lg-grid--c .lg-m2 { font-size: .8rem; line-height: 1.28; }
.lg-grid--c .lg-name { font-size: .88rem; margin-top: 11px; }
.lg-grid--c .lg-money { margin-top: 6px; }
.lg-grid--c .lg-photo { aspect-ratio: 1/1; }
.lg-grid--c .lg-q { font-size: 3.4rem; }
@media (max-width: 980px) { .lg-grid--c { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .lg-grid--s { grid-template-columns: 1fr; } .lg-grid--c { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   THE PLACE
   ============================================================ */
.place { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.place__media { position: absolute; inset: 0; z-index: 0; }
.place__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-color: #0b120c;
  background-image: linear-gradient(160deg, #16201500 0%, #0a0f0a 90%), radial-gradient(70% 90% at 80% 10%, #20301f, transparent 60%);
}
.place__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,6,0.92) 0%, rgba(8,8,6,0.6) 45%, rgba(8,8,6,0.2) 100%); }
.place__content { position: relative; z-index: 2; }
.place__more { font-size: 17px; color: var(--gold); letter-spacing: 0.1em; }
.place__title { font-size: clamp(2.1rem, 4.8vw, 3.8rem); margin: 18px 0 24px; }
.place__text { max-width: 480px; color: #d6cebf; font-size: 1.12rem; margin-bottom: 40px; }
.place__facts { display: flex; flex-direction: column; gap: 14px; }
.place__facts div { color: var(--muted); border-left: 2px solid rgba(224,169,61,0.5); padding-left: 16px; }
.place__facts span { color: var(--text); font-family: "Outfit", sans-serif; font-weight: 600; }
.place__clients { margin-top: 44px; }
.place__clients-label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }
.place__clients .logos { display: flex; flex-wrap: wrap; gap: 10px; }
.place__clients .logos span {
  font-family: "Outfit", sans-serif; font-weight: 500; font-size: 14px;
  color: #d6cebf; border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 16px; background: rgba(255,255,255,0.02);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.place__clients .logos span:hover { border-color: rgba(224,169,61,0.4); color: var(--text); }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners { padding: clamp(40px, 7vh, 90px) 0; }
.partners__card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(224,169,61,0.28); border-radius: 28px;
  padding: clamp(44px, 6vw, 80px); text-align: center;
  background: linear-gradient(180deg, rgba(224,169,61,0.06), rgba(224,169,61,0.01)), var(--surface);
}
.partners__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(620px 280px at 50% -10%, rgba(224,169,61,0.22), transparent 65%);
}
.partners__card > *:not(.partners__glow) { position: relative; z-index: 1; }
.partners__card .section-label { display: block; margin-bottom: 18px; }
.partners__title { font-size: clamp(1.9rem, 4.2vw, 3.2rem); letter-spacing: -0.03em; margin-bottom: 22px; }
.partners__text { max-width: 560px; margin: 0 auto 40px; color: var(--muted); font-size: 1.08rem; }
.partners__feats {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 44px; text-align: left;
}
.partners__feats > div {
  display: flex; align-items: center; gap: 12px; max-width: 230px;
  font-size: 14.5px; color: #d6cebf; line-height: 1.4;
}
.partners__feats .ico { width: 38px; height: 38px; flex-shrink: 0; margin: 0; }
.partners__note { margin-top: 22px; font-size: 13.5px; color: var(--muted-2); }
.partners__note strong { color: var(--text); font-weight: 500; }

@media (max-width: 760px) {
  .partners__feats { flex-direction: column; align-items: flex-start; max-width: 340px; margin-left: auto; margin-right: auto; }
  .partners__feats > div { max-width: none; }
}

/* ============================================================
   TICKETS
   ============================================================ */
.tickets { padding: clamp(80px, 12vh, 150px) 0; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier {
  border: 1px solid var(--line); border-radius: 22px; padding: 34px 30px;
  background: var(--surface); display: flex; flex-direction: column;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.tier:hover { transform: translateY(-4px); border-color: rgba(245,240,232,0.2); }
.tier--feature {
  background: linear-gradient(180deg, rgba(224,169,61,0.08), rgba(224,169,61,0.01));
  border-color: rgba(224,169,61,0.4);
}
.tier--feature:hover { border-color: rgba(224,169,61,0.6); }
.tier__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tier__head h3 { font-size: 1.3rem; }
.tier__tag {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px;
}
.tier__tag--gold { color: var(--gold); border-color: rgba(224,169,61,0.4); background: var(--gold-soft); }
.tier__price { font-family: "Outfit", sans-serif; line-height: 1; margin-bottom: 14px; }
.tier__price span { font-size: 3rem; font-weight: 600; letter-spacing: -0.04em; }
.tier__price small { color: var(--muted-2); font-size: 0.95rem; margin-left: 6px; font-weight: 400; }
.tier__note { color: var(--muted); font-size: 14px; margin-bottom: 22px; min-height: 40px; }
.tier__list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; }
.tier__list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 14.5px; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold);
  transform: rotate(-45deg);
}
.tier__cta { width: 100%; }
.tickets__fine { text-align: center; margin-top: 34px; color: var(--muted-2); font-size: 14px; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery { padding: clamp(60px, 9vh, 120px) 0 clamp(80px, 12vh, 150px); overflow: hidden; }
.gallery__track {
  display: flex; gap: 16px; padding: 0 28px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  max-width: calc(var(--wrap) + 56px); margin: 0 auto;
}
.gallery__track::-webkit-scrollbar { height: 0; }
.gallery__track figure {
  flex: 0 0 clamp(280px, 42vw, 460px); aspect-ratio: 4/3; border-radius: 18px;
  background-size: cover; background-position: center; scroll-snap-align: start;
  border: 1px solid var(--line);
  background-color: #14110d;
  background-image: radial-gradient(70% 70% at 40% 30%, #241c13, #0c0a07);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: clamp(70px, 11vh, 140px) 0; border-top: 1px solid var(--line-2); }
.faq__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }
.faq__intro .section-label { display: block; margin-bottom: 18px; }
.faq__contact { margin-top: 24px; color: var(--muted); }
.faq__contact a { color: var(--gold); }
.faq__list details {
  border-bottom: 1px solid var(--line); padding: 6px 0;
}
.faq__list summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  font-family: "Outfit", sans-serif; font-size: 1.18rem; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: color .25s var(--ease);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--gold); }
.faq__plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; background: var(--gold); transition: transform .3s var(--ease);
}
.faq__plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq__plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
details[open] .faq__plus::after { transform: scaleY(0); }
.faq__list details p {
  color: var(--muted); padding: 0 0 24px; max-width: 60ch; line-height: 1.6;
  animation: fadeUp .4s var(--ease);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: none;} }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.final__media { position: absolute; inset: 0; z-index: 0; }
.final__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-color: #120b06;
  background-image: radial-gradient(60% 70% at 50% 80%, #3a2a12, transparent 60%), linear-gradient(180deg, #0a0806, #0a0806);
}
.final__veil { position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 50%, rgba(10,8,6,0.58), rgba(10,8,6,0.88)); }
.final__content { position: relative; z-index: 2; padding: 60px 28px; }
.final__title { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.04em; margin-bottom: 16px; text-shadow: 0 2px 60px rgba(0,0,0,0.5); }
.final__lead { color: var(--text); font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.01em; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 26px rgba(0,0,0,0.6); }
.final__sub { color: #efe9dd; margin-bottom: 34px; font-size: 0.98rem; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 26px rgba(0,0,0,0.65); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 70px 0 40px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer__brand p { color: var(--muted-2); font-size: 14px; margin-top: 16px; line-height: 1.6; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__h { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.footer__col a { color: var(--muted); font-size: 14.5px; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--gold); }
.footer__sponsor { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.1rem; }
.footer__muted { color: var(--muted-2); font-size: 13px; }
.footer__base {
  display: flex; justify-content: space-between; padding-top: 28px;
  border-top: 1px solid var(--line-2); color: var(--muted-2); font-size: 13px; gap: 16px; flex-wrap: wrap;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .nav__links { display: none; }
  /* Sin links visibles la rejilla no aporta nada, y además le daría al logo
     solo un tercio del ancho — lo que partía "RippleTalks @ Reboot" en dos
     líneas. Aquí volvemos a flex para que ocupe lo que necesita. */
  .nav__inner { display: flex; justify-content: space-between; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .card--wide { grid-column: span 2; }
  .card--tall { grid-row: span 1; }
  .guests__grid, .faq__grid { grid-template-columns: 1fr; gap: 44px; }
  .tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .hero__content { padding-bottom: 13vh; }
  .hero__meta { gap: 16px; }
  .meta__div { display: none; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .card--wide { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; }
  /* Los dos botones no caben lado a lado en un telefono: "Connect With Our
     Team" pide 167px y "See what's included" 214, mas el gap = 395 contra
     319 disponibles. Con flex:1 no se repartian a la mitad, ademas: el
     boton dorado lleva overflow:hidden (lo necesita para el brillo), y por
     spec un item flex con overflow distinto de visible tiene minimo
     automatico CERO — o sea que puede encogerse por debajo de su texto
     mientras el otro, con overflow visible, se planta en su ancho minimo.
     Resultado: el dorado quedaba en 89px con el texto cortado. Apilados
     cada uno ocupa su renglon y el problema desaparece. */
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   WHO YOU'LL MEET (tarjetas) — SOLO para las paginas de sponsor
   (sponsors.html, lawfirmsponsor.html, vcsponsor.html, cresponsor.html),
   que reusan este mismo bloque .pa-* para su preview de "Special guests".
   index.html YA NO usa esto — ver el bloque .stage-* mas abajo, que es
   el rediseno sin cajas ("el escenario") que reemplazo esta seccion en
   la landing. Si tocas .pa-*, revisa las 4 paginas de sponsor antes de
   asumir que index.html tambien cambio.
   ============================================================ */
.pa { padding: clamp(64px, 9vh, 110px) 0 clamp(76px, 11vh, 130px); }

.pa-head { max-width: 660px; margin-bottom: clamp(38px, 5.5vh, 60px); }
.pa-head .section-label { display: block; margin-bottom: 16px; }
/* Sin titular sobre este texto, es el que sostiene la seccion: sube de
   tamano pero sin gritar, para no competir con las tarjetas. */
.pa-lead { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.38; color: var(--text); max-width: 42ch; }
.pa-lead em { color: var(--gold); }

/* divisor de nivel: una sola escala para todos */
.pa-tier { display: flex; align-items: center; gap: 20px;
  margin: clamp(38px, 5.5vh, 58px) 0 clamp(20px, 2.8vh, 30px); }
.pa-tier:first-of-type { margin-top: 0; }
.pa-tier__label { font-family: "Outfit", sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.pa-tier__rule { flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(245,240,232,0.14), rgba(245,240,232,0.02) 70%, transparent); }

/* el nivel 1 ocupa el ancho completo: debe dominar sobre el roster.
   Roster y VIP usan flex con ancho fijo por tarjeta (no grid) para que
   puedan traer 2 o 3 tarjetas sin estirarse a llenar la fila — así el
   ancho de tarjeta se mantiene como la señal de jerarquía entre tiers,
   sin importar cuántas tarjetas trae cada uno hoy. */
.pa-grid { display: grid; gap: 24px; }
.pa-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pa-grid--vip,
.pa-grid--roster { display: flex; flex-wrap: wrap; justify-content: center; }
.pa-grid--vip { gap: 28px; }
.pa-grid--roster { gap: 24px; }
/* ancho calcado del grid de 3 columnas que ya existía, para que "Hosted by"
   no cambie de tamaño al perder la tarjeta de Andres: (1124 - 2*24) / 3. */
.pa-card--roster { flex: 0 1 359px; }
/* ~82% del ancho de la feature card (548px), paso intermedio en la escala
   548 -> 450 -> 359 (ratio ~1.23 parejo en cada salto). */
.pa-card--vip { flex: 0 1 450px; }

/* UN solo componente de tarjeta */
.pa-card { display: flex; perspective: 1000px; }
.pa-inner { position: relative; flex: 1; display: flex; flex-direction: column; text-align: center;
  border-radius: 22px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, rgba(34,28,20,0.55), rgba(15,13,10,0.5));
  transform-style: preserve-3d; will-change: transform;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.pa-card:hover .pa-inner { border-color: rgba(224,169,61,0.38);
  box-shadow: 0 40px 82px -40px rgba(224,169,61,0.38); }
.pa-spot { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,22%), rgba(224,169,61,0.18), transparent 62%); }
.pa-card:hover .pa-spot { opacity: 1; }

.pa-card--feature .pa-inner { padding: 30px 26px 24px; }
.pa-card--vip     .pa-inner { padding: 26px 22px 22px; }
.pa-card--roster  .pa-inner { padding: 22px 18px 20px; }

/* misma arquitectura de informacion en los 5, calcada de la landing de
   Superset: eyebrow -> retrato -> logro -> founder of X -> nombre -> logo.
   El eyebrow solo se imprime donde de verdad varia (cohost vs host); en las
   destacadas lo dice ya el divisor, asi que ahi se omite. */
.pa-eyebrow { position: relative; z-index: 2; font-family: "Outfit", sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #9a917f; }
.pa-line { position: relative; z-index: 2; font-family: "Outfit", sans-serif; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.08; color: var(--text); }
.pa-card--feature .pa-line { font-size: clamp(1.4rem, 2.2vw, 1.95rem); margin-top: 0; }
.pa-card--vip     .pa-line { font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin-top: 17px; }
.pa-card--roster  .pa-line { font-size: 1.1rem; margin-top: 18px; }
/* el gradiente queda como acento unico de la special guest (Founder of
   LinkedIn); el resto del sitio usa color solido. */
.pa-line b { background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pa-desc { position: relative; z-index: 2; margin-top: 10px; font-family: "Outfit", sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: #9a917f; }

/* "Founder of X" — solo en el roster, entre el logro y el nombre (orden y
   escala calcadas de Superset .horg: caption chica en mayusculas, sin color
   de marca, para no competir con el logro de arriba. */
.pa-org { position: relative; z-index: 2; margin-top: 9px; font-family: "Outfit", sans-serif;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: #9a917f; }
.pa-org b { font-weight: 700; color: inherit; }

/* el retrato se empuja al fondo -> todas las fotos alinean abajo
   aunque el texto de arriba tenga distinto largo */
.pa-photo { position: relative; z-index: 2; margin-top: auto;
  display: flex; align-items: flex-end; justify-content: center; }
.pa-card--feature .pa-photo { height: 318px; padding-top: 26px; }
.pa-card--vip     .pa-photo { height: 252px; padding-top: 20px; }
.pa-card--roster  .pa-photo { height: 196px; padding-top: 18px; }
.pa-photo::before { content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1;
  transform: translateX(-50%); width: 82%; height: 66%;
  background: radial-gradient(60% 72% at 50% 100%, rgba(224,169,61,0.22), transparent 72%); }
.pa-photo img { position: relative; max-height: 100%; width: auto; max-width: 100%;
  object-fit: contain; display: block; filter: drop-shadow(0 24px 36px rgba(0,0,0,0.6)); }

.pa-name { position: relative; z-index: 2; margin-top: 16px; font-family: "Outfit", sans-serif;
  font-weight: 600; letter-spacing: -0.01em; color: rgba(244,239,231,0.86);
  display: flex; align-items: center; justify-content: center; gap: 9px; }
.pa-card--feature .pa-name { font-size: clamp(19px, 1.7vw, 23px); }
.pa-card--vip     .pa-name { font-size: 19px; font-weight: 500; margin-top: 8px; }
.pa-card--roster  .pa-name { font-size: 17px; font-weight: 500; margin-top: 7px; }
.pa-badge { height: 17px; width: auto; object-fit: contain; display: block; border-radius: 4px; }
.pa-badge--yc { width: 17px; height: 17px; }
.pa-badge--ts { border: 1px solid rgba(255,255,255,0.18); }

/* Tamanos compensados, no iguales: ripple-r-white.png trae un 33% de padding
   transparente horneado en el archivo, asi que a igual altura CSS su tinta se
   ve ~1/3 mas chica. La R sube a 31px (=~21px de tinta) y Zoe baja a 18px, que
   ademas es 4x mas ancho y por eso pesa mas a la vista. */
.pa-logo { position: relative; z-index: 2; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; height: 32px; }
.pa-logo img { width: auto; display: block; opacity: 0.9; }
.pa-logo img.ripple { height: 31px; }
.pa-logo img.zoe { height: 18px; }
.pa-logo img.finix { height: 22px; } /* wordmark+icono, aspect 2.81 -> ~62px de
  ancho, footprint visual similar al de Zoe (63px) a su altura de 18px */

/* variante mystery */
.pa-card--mystery .pa-inner { border-color: transparent;
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%); }
.pa-card--mystery:hover .pa-inner { box-shadow: 0 40px 82px -40px rgba(250,196,221,0.5); }
.pa-card--mystery .pa-spot { display: none; }
.pa-card--mystery .pa-line { color: #1c1710; }
.pa-card--mystery .pa-name { color: rgba(28,23,16,0.72); }
.pa-card--mystery .pa-photo::before { display: none; }
/* La silueta va como MASCARA, no como imagen suelta: asi el relleno usa la
   misma tinta calida del resto de la tarjeta (#1c1710) en vez del negro puro
   del archivo, que junto al gradiente calido se ve frio. Alto = 292px, el
   mismo que la foto de Allen, para que las dos escalas coincidan. */
.pa-myst { height: 292px; max-height: 100%; aspect-ratio: 888 / 876; display: block;
  background-color: #1c1710;
  -webkit-mask: url("images/guests/mystery-silhouette.png") bottom center / contain no-repeat;
          mask: url("images/guests/mystery-silhouette.png") bottom center / contain no-repeat; }

@media (max-width: 900px) {
  .pa-grid--vip, .pa-grid--roster { gap: 14px; }
  .pa-card--vip { flex-basis: 320px; }
  .pa-card--vip .pa-photo { height: 180px; }
  .pa-card--vip .pa-line { font-size: 1.05rem; margin-top: 14px; }
  .pa-card--roster .pa-photo { height: 158px; }
  .pa-card--roster .pa-line { font-size: 1rem; margin-top: 14px; }
  .pa-org { font-size: 10px; margin-top: 8px; }
  .pa-card--vip .pa-name, .pa-card--roster .pa-name { font-size: 15.5px; margin-top: 6px; }
}
@media (max-width: 680px) {
  .pa-grid--feature { grid-template-columns: 1fr; }
  .pa-card--vip, .pa-card--roster { flex-basis: 100%; }
  .pa-card--feature .pa-photo { height: 250px; }
  .pa-myst { height: 224px; }
  .pa-card--vip .pa-photo { height: 220px; }
  .pa-card--roster .pa-photo { height: 210px; }
  .pa-inner { transform: none !important; }
}

/* ============================================================
   WHO YOU'LL MEET — "el escenario" (index.html unicamente)

   Reemplaza el diseno de tarjetas (.pa-*, arriba) en la landing.
   Diagnostico que motivo el cambio: cada persona vivia en su propia
   caja (borde + fondo + padding), lo que apilaba tres capas de aire
   (hueco entre cajas, padding interno, aire alrededor del recorte) y
   ademas las filas de 2 no llenaban el contenedor — sobraba aire
   muerto a los lados, sobre todo en "Hosted by". Se leia como widgets
   sueltos, no como un lineup.

   Idea: sin cajas. Todos de pie sobre un MISMO piso que cruza el
   ancho completo. La jerarquia la carga la ESTATURA de la persona
   (360 / 258 / 196px seguen tier) en vez del tamano de un recuadro.
   ============================================================ */
.stage { padding: clamp(48px, 7vh, 84px) 0 clamp(64px, 9vh, 104px); }

.stage-tier { display: flex; align-items: center; gap: 20px;
  margin: clamp(40px, 6vh, 62px) 0 clamp(26px, 3.4vh, 38px); }
.stage-tier:first-of-type { margin-top: 0; }
.stage-tier__label { font-family: "Outfit", sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.stage-tier__rule { flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(245,240,232,0.14), rgba(245,240,232,0.02) 70%, transparent); }

/* LA FILA es el objeto, no las personas sueltas. align-items:flex-START,
   no flex-end: con flex-end el navegador alinea el fondo de la figura
   COMPLETA (retrato + pie de foto), asi que un pie mas corto (p.ej.
   "To Be Announced", que no lleva logro ni logo) empuja su retrato hacia
   abajo y el piso compartido deja de existir. Alineando arriba y fijando
   la altura del retrato por tier (--ph), todos los retratos de la fila
   terminan exactamente en la misma linea. */
.stage-row { position: relative; display: flex; align-items: flex-start; --headh: 0px; }
/* el piso se ancla al TOP (= --headh + --ph), no al bottom de la fila:
   la fila cambia de alto segun el pie de foto mas largo, el piso no debe. */
.stage-row::before { content: ""; position: absolute; left: 0; right: 0; z-index: 1;
  height: 1px; top: calc(var(--headh) + var(--ph));
  background: linear-gradient(90deg, transparent, rgba(224,169,61,0.30) 12%,
              rgba(224,169,61,0.30) 88%, transparent); }
.stage-row::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--headh) + var(--ph) - var(--glow)); z-index: 0; width: 92%; height: var(--glow);
  pointer-events: none;
  background: radial-gradient(58% 100% at 50% 100%, rgba(224,169,61,0.16), transparent 70%); }

/* --headh reserva el bloque de texto que va ARRIBA del retrato — solo en
   Special guests, donde el orden es titular -> logro -> rostro -> nombre
   (el orden de un cartel: primero por que importa, luego quien es). Altura
   FIJA, no automatica: si fuera automatica, "Founder of LinkedIn" ocuparia
   dos lineas y "To Be Announced" una, y sus retratos arrancarian a distinta
   altura — el mismo fallo del piso compartido. justify-content:flex-start
   (no flex-end) porque el titular es el ultimo elemento del bloque: asi los
   dos titulares arrancan en la misma linea sin importar cuantas lineas
   ocupe cada uno. */
.stage-head { height: var(--headh); display: flex; flex-direction: column;
  justify-content: flex-start; padding-bottom: 20px; }

/* flex:1 -> las figuras SIEMPRE reparten el ancho completo de la fila.
   Nunca queda aire muerto a los lados, tenga la fila 2, 3 o 4 personas. */
.stage-fig { position: relative; z-index: 2; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; }

/* NORMALIZACION DE ENCUADRE — el detalle que decide si esto se lee como un
   lineup de verdad o como un collage. Los recortes vienen con encuadres
   distintos (plano de pecho vs. plano 3/4), y sin caja que lo disimule, dos
   cabezas de tamano distinto a la misma altura CSS saltan a la vista. El
   retrato es una VENTANA de alto --ph con overflow hidden; cada foto se
   escala por --k (medido sobre el ancho real de la cabeza en cada archivo,
   ver la memoria "reboot-fotos-encuadre") y se alinea por la coronilla con
   --off. El cuerpo sobrante se recorta contra el piso, que es justo donde
   el degradado de mascara lo disuelve. */
.stage-portrait { position: relative; display: flex; align-items: flex-start; justify-content: center;
  width: 100%; height: var(--ph); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
.stage-portrait img { display: block; width: auto; max-width: none;
  height: calc(var(--ph) * var(--k, 1));
  margin-top: calc((var(--pad, 0.05) - var(--off, 0) * var(--k, 1)) * var(--ph));
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.55));
  transition: transform .45s var(--ease); }
.stage-fig:hover .stage-portrait img { transform: translateY(-6px); }
/* halo propio de cada persona al pasar el mouse — sustituye al borde
   dorado que en las tarjetas .pa-* marcaba el hover */
.stage-portrait::before { content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1;
  transform: translateX(-50%); width: 76%; height: 58%; opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(56% 76% at 50% 100%, rgba(224,169,61,0.30), transparent 72%); }
.stage-fig:hover .stage-portrait::before { opacity: 1; }

/* el texto arranca DEBAJO del piso */
/* ---- "Unicorn Founder": una pastilla ensartada en la linea del piso ----
   No flota sobre la foto: la linea que cruza la fila le pasa por el centro
   exacto y queda detras. De ahi top:var(--ph) (la linea) y el -50% vertical
   (su propio centro). Como es opaca, la linea desaparece bajo ella y
   reaparece a los lados — ese es el efecto.

   Vive FUERA de .stage-portrait a proposito: ese contenedor lleva el
   degradado que disuelve a la persona contra el piso, y todo lo que este
   dentro se desvanece con ella.

   El relleno es el degradado pastel de la marca, el mismo de los nombres
   de empresa en .stage-line b — aqui significa lo mismo: compania de
   mucho valor. Texto oscuro encima, que es lo unico legible sobre el. */
.uni {
  position: absolute; z-index: 3;
  top: var(--ph);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Outfit", sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap;
  padding: 8px 17px;
  border-radius: 100px;
  color: #1a1206;
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%);
}

.stage-cap { padding-top: 22px; }
/* Donde hay pastilla, esta le roba la mitad de su alto al aire de arriba del
   titular: el texto quedaba pegado a ella. Se abre mas sitio, pero a la FILA
   entera y no solo a la figura con pastilla — si no, los titulares de esa
   fila dejarian de arrancar todos a la misma altura. */
.stage-row:has(.uni) .stage-cap { padding-top: 36px; }
.stage-line { font-family: "Outfit", sans-serif; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.08; color: var(--text); }
.stage-line b { background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stage-desc { margin-top: 10px; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.05em; text-transform: uppercase; color: #9a917f; }
/* 13px, no 11: en mayusculas mas tamano pide MENOS tracking relativo o el
   texto se siente suelto — la misma logica por la que .stage-desc (15px, un
   escalon mas grande, mismo rol de caption) usa 0.05em en vez de 0.12em. */
.stage-org { margin-top: 10px; font-family: "Outfit", sans-serif; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 13px; color: #9a917f; }
.stage-org b { font-weight: 700; color: inherit; }
.stage-name { margin-top: 14px; font-family: "Outfit", sans-serif; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(244,239,231,0.86); display: flex; align-items: center; justify-content: center; gap: 9px; }
/* El nombre enlaza al LinkedIn de la persona. Sin subrayado en reposo para
   no ensuciar la fila — se marca al pasar el cursor. Los badges de YC y
   Techstars quedan FUERA del enlace: son de la empresa, no del perfil. */
.stage-name a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.stage-name a:hover { color: var(--gold); border-bottom-color: rgba(224,169,61,0.5); }
.stage-name a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.stage-badge { height: 17px; width: auto; object-fit: contain; display: block; border-radius: 4px; }
.stage-badge--yc { width: 17px; height: 17px; }
.stage-badge--ts { border: 1px solid rgba(255,255,255,0.18); }
.stage-logo { margin-top: 14px; display: flex; align-items: center; justify-content: center; height: 30px; }
.stage-logo a { display: block; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.stage-logo a:hover { opacity: 1; transform: translateY(-1px); }
.stage-logo img { width: auto; display: block; opacity: 0.9; }
.stage-logo img.ripple { height: 30px; }
.stage-logo img.zoe { height: 18px; }
.stage-logo img.finix { height: 21px; }
/* ABC va MAS ALTO que los otros dos, no mas bajo. Es un disco, asi que su
   ancho es igual a su alto: a 20px ocupaba 20px de ancho contra los ~60px
   de Zoe y Finix, y se leia como un punto perdido. La presencia visual de
   un logo no la da solo su tinta —por area de tinta 22px ya empataba— sino
   tambien cuanto espacio abarca en la fila. 28px lo empareja sin que el
   disco pase a dominar, y cabe justo en los 30px de .stage-logo. */
.stage-logo img.abc { height: 28px; }
/* Render es un wordmark largo y macizo: a 19px pesaba 597 de tinta contra
   377 de Finix y 269 de Zoe. A 15px queda en ~372, a la par de Finix. */
.stage-logo img.render { height: 15px; }
/* Simpson es de dos lineas: a 25px cada linea queda en ~11px, que es lo
   maximo que puede crecer sin pesar mas que Finix o Zoe al lado. */
.stage-logo img.simpson { height: 25px; }

/* las tres estaturas: --ph es la unica medida que define el tier */
.stage-row--feature { --ph: 360px; --glow: 200px; --headh: 116px; gap: 40px; }
.stage-row--feature .stage-line { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.stage-row--feature .stage-name { font-size: clamp(19px, 1.7vw, 23px); margin-top: 16px; }

/* VIP son cuatro personas en DOS filas de dos, no una fila de cuatro.
   Medido: en una sola fila cada persona tenia 259px, tres de los cuatro
   titulares se partian en dos lineas y la foto de Sunny se recortaba 61px
   de ancho. En 2x2 cada una tiene 430px — casi el doble —, ningun titular
   se parte y no se recorta nada. Los --k de cada foto NO cambian: son
   relativos a --ph, asi que las cabezas siguen igualadas entre si. */
.stage-row--vip { --ph: 268px; --glow: 158px; gap: 44px; }
.stage-row--pair { justify-content: center; }
.stage-row--pair .stage-fig { flex: 0 1 430px; }
.stage-row--pair + .stage-row--pair { margin-top: 46px; }
.stage-row--vip .stage-line { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.stage-row--vip .stage-name { font-size: 19px; font-weight: 500; margin-top: 9px; }

/* Decision del 16 sep 2026: VIP, Guest Co-Host y "Hosted by" van TODOS a
   268px, la altura de VIP. Antes habia una escalera (226/196/168) donde la
   estatura marcaba el tier; se cambio a peticion expresa. Ahora la unica
   jerarquia visual que queda es "Special guests" (360) contra el resto; a
   los tres tiers de abajo los distingue solo su etiqueta de texto.
   Los --k de cada foto no se tocan: son relativos a --ph, asi que las
   cabezas se siguen viendo iguales entre si dentro de cada fila. */
.stage-row--cohost { --ph: 268px; --glow: 158px; gap: 28px; }
.stage-row--cohost .stage-line { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.stage-row--cohost .stage-name { font-size: 18px; font-weight: 500; margin-top: 9px; }

/* Una sola persona en la fila: sin esto .stage-fig (flex:1 1 0) se estira
   a los 1124px del contenedor y el texto queda centrado en un renglon
   larguisimo. Se le da un ancho propio y se centra; el piso de la fila
   sigue cruzando el ancho completo, que es la firma de la seccion. */
.stage-row--solo { justify-content: center; }
/* 440px, no menos: el titular mas largo de esta fila mide 365px en una
   sola linea a 20.8px, y a 340 se partia "Airbnb" al renglon de abajo
   teniendo medio contenedor vacio al lado. El limite lo manda el texto,
   no el retrato (213px). */
.stage-row--solo .stage-fig { flex: 0 1 440px; }

.stage-row--host { --ph: 268px; --glow: 158px; gap: 28px; }
.stage-row--host .stage-line { font-size: 1.1rem; }
.stage-row--host .stage-name { font-size: 17px; font-weight: 500; margin-top: 8px; }

/* silueta del TBA: misma mascara que .pa-myst, rellena con el gradiente
   pastel en vez de vivir en una caja de color, y a 46% de opacidad — no
   puede ser lo mas brillante de la seccion, le competiria a Allen que si
   esta confirmado. El degradado inferior de .stage-portrait (el padre) ya
   la disuelve contra el piso igual que a los retratos. */
.stage-myst { height: 330px; aspect-ratio: 888 / 876; display: block; align-self: flex-end;
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%);
  opacity: 0.46;
  -webkit-mask: url("images/guests/mystery-silhouette.png") bottom center / contain no-repeat;
          mask: url("images/guests/mystery-silhouette.png") bottom center / contain no-repeat; }

@media (max-width: 900px) {
  .stage-row--feature { --ph: 262px; --glow: 150px; --headh: 132px; gap: 24px; }
  .stage-myst { height: 240px; }
  .stage-row--vip { --ph: 190px; --glow: 112px; gap: 20px; }
  .stage-row--pair + .stage-row--pair { margin-top: 30px; }
  .stage-row--vip .stage-line { font-size: 1.05rem; }
  .stage-row--cohost { --ph: 190px; --glow: 112px; gap: 16px; }
  .stage-row--cohost .stage-line { font-size: 1rem; }
  .stage-row--host { --ph: 190px; --glow: 112px; gap: 16px; }
  .stage-row--host .stage-line { font-size: 1rem; }
  .stage-desc { font-size: 12.5px; }
  .stage-org { font-size: 12px; }
  .stage-row--vip .stage-name, .stage-row--cohost .stage-name, .stage-row--host .stage-name { font-size: 15.5px; }
}
@media (max-width: 620px) {
  /* en movil la fila se parte en dos columnas: sigue habiendo un piso
     compartido por fila, pero ya no se aplastan los retratos */
  .stage-row { flex-wrap: wrap; }
  .stage-row::before, .stage-row::after { display: none; }
  .stage-fig { flex: 1 1 42%; }
  /* .stage-row--pair fija la base en 430px; aqui hay que devolverla, o las
     cuatro personas del VIP caen una debajo de otra en vez de dos y dos. */
  .stage-row--pair .stage-fig { flex: 1 1 42%; }
  /* La columna cae a ~158px en telefono; a tamano completo el domo se
     comia casi todo el ancho de la foto. */
  .uni { font-size: 8.5px; letter-spacing: 0.1em; padding: 6px 12px; }
  .stage-row:has(.uni) .stage-cap { padding-top: 30px; }
  .stage-row--pair + .stage-row--pair { margin-top: 22px; }
  .stage-row--feature { --ph: 220px; }
  .stage-myst { height: 200px; }
}

@media (max-width: 860px) {
  .duo { height: auto; }
  .duo-stage { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding: 16vh 24px 9vh; height: auto; position: relative; }
  .duo-figL, .duo-figR { justify-self: center; text-align: center; }
  .duo-figL .duo-photo { margin: 0 auto; }
  .duo-bg span { font-size: 80vw; }
}