/* ============================================================
   SF UNICORN FOUNDER SERIES — pagina de sponsors (no listada)
   Extiende styles.css + sponsors.css. Aqui solo va lo que ESTA
   pagina necesita y las otras no.
   ============================================================ */

/* ---- HERO: el titular es corto (dos palabras por linea), asi que
   puede crecer mas que el de sponsors.html sin partirse. ---- */
.hero__title--sp { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }

/* El pill del eyebrow ("2027") va inline con el texto dorado. */
.eyebrow .pill { vertical-align: 2px; }

/* ---- STATS: cuatro datos (el default de styles.css ya es 4 columnas,
   pero sponsors.css lo bajo a 3 para su pagina — se revierte aqui).
   Separadores verticales como en el one-pager. ---- */
.stats--sf { padding: clamp(46px, 7vh, 80px) 0; border-bottom: 1px solid var(--line-2); }
.stats--sf .stats__grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
.stats--sf .stat { padding: 4px 30px; border-left: 1px solid var(--line); }
.stats--sf .stat:first-child { border-left: 0; padding-left: 0; }
.stat__note {
  margin-top: 2px; color: var(--gold); font-size: 13px; line-height: 1.4;
}

/* ---- DELIVERS: las mismas tarjetas de sponsors.css, pero con un
   numero en vez del icono SVG. El numero va PRIMERO y el titulo
   despues, asi que el head deja de ser space-between. ---- */
.bento--num .card__head { justify-content: flex-start; gap: 14px; align-items: baseline; }
.bento--num .num {
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; color: var(--gold); flex-shrink: 0;
  border: 1px solid rgba(224,169,61,0.34); background: var(--gold-soft);
  border-radius: 100px; padding: 5px 10px; line-height: 1;
}
.bento--num .card h3 { line-height: 1.25; }

/* ---- INVESTMENT: dos niveles en vez de tres (.tiers es 3 por
   defecto en styles.css) y centrados, que a 1fr 1fr en pantalla
   ancha quedaban demasiado anchos para el texto que llevan. ---- */
.tiers--two { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
.tiers--two .tier__price { margin-bottom: 16px; }
.tiers--two .tier__note { min-height: 0; }

/* La linea de cierre debajo de los dos niveles pesa mas que un
   "fine print" normal: es el mensaje de "empieza por uno". */
#included .tickets__fine {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2);
  color: var(--text); font-family: "Outfit", sans-serif; font-size: 17px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .stats--sf .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .stats--sf .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tiers--two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .stats--sf .stat { padding: 4px 16px; }
  .stats--sf .stat:nth-child(odd) { padding-left: 0; }
  .tickets { padding: 56px 0; }
}

/* ---- ABOUT THE SERIES: seccion plana a dos columnas (sin foto de
   fondo, ver el comentario en el HTML). Reusa .place__facts para las
   lineas con barra dorada. ---- */
.series { padding: clamp(70px, 11vh, 130px) 0; border-top: 1px solid var(--line-2); }
.series__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: start; }
.series__title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.series__text { color: var(--muted); font-size: 1.12rem; margin-bottom: 32px; }
.series__facts div { font-size: 17px; }
@media (max-width: 980px) { .series__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 600px) { .series { padding: 56px 0; } }


/* ---- NAV sobre el hero: la foto lleva texto grande propio ("A RippleTalks
   Fireside") justo a la altura de la barra, y los links del nav —que antes
   de hacer scroll van sobre fondo transparente— quedaban ilegibles encima.
   Se agrega un velo degradado bajo la barra mientras esta arriba (al hacer
   scroll .is-scrolled ya trae su propio fondo con blur, asi que ahi se
   apaga), mas sombra y un gris mas claro en los links. ---- */
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -28px;
  background: linear-gradient(180deg, rgba(8,8,6,0.88) 0%, rgba(8,8,6,0.62) 48%, rgba(8,8,6,0) 100%);
  pointer-events: none; transition: opacity .4s var(--ease);
}
.nav.is-scrolled::before { opacity: 0; }
.nav__inner--sp { position: relative; z-index: 1; }
.nav__inner--sp .nav__links a { color: #d7d1c6; text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.nav__inner--sp .nav__links a:hover { color: var(--text); }
.nav__inner--sp .nav__word { text-shadow: 0 1px 10px rgba(0,0,0,0.9); }

/* ---- HERO: encuadre para que el roll-up de la derecha (donde va
   "YOUR BRAND") entre completo. La foto es 16:9 y el hero es alto, asi
   que "cover" escala por alto y recorta a los lados: centrada, el panel
   quedaba cortado por la mitad. Se quita el zoom de 1.08 (que recortaba
   todavia mas) y se corre el encuadre a la derecha. ---- */
.hero__img {
  transform: none; background-size: contain; background-repeat: no-repeat;
  background-position: center bottom;
  /* La foto es un PNG recortado (sin fondo): lo que se ve detras de la
     gente es el negro de la pagina, no la imagen. Se quita el verde de
     respaldo que trae .hero__img para el caso de foto faltante. */
  background-color: var(--bg);
}

/* ---- HERO en telefono: la foto lleva texto propio ("A RippleTalks
   Fireside" en la pantalla del fondo) y al recortarse a vertical caia
   justo detras del eyebrow. La foto es 16:9 y el contenedor vertical, asi
   que "cover" escala por ALTO: mover el encuadre en vertical no hace nada
   (no sobra alto) y solo sirve desplazarlo en horizontal. Se corre a la
   derecha, a los panelistas, y la pantalla del fondo sale del cuadro. ---- */
@media (max-width: 600px) {
  /* En vertical, "contain" dejaria la escena como una franja minuscula al
     pie: aqui se vuelve a "cover" y se encuadra en los panelistas.

     40% y no 62%: a 62% quedaban en cuadro dos panelistas que NO estan
     hablando, y la luz caia sobre ellos. El que habla —camisa negra,
     microfono— esta al 46% del ancho de la foto; a 40% entra el y el de su
     derecha, que es lo que se pidio. */
  .hero__img { background-size: cover; background-position: 40% 78%; }

  /* El velo tambien se suaviza aqui. El de escritorio oscurece hasta el
     66% del ancho, y en telefono esa franja cae justo encima del que
     habla: el encuadre lo traia al cuadro y el velo lo apagaba. Se corta
     antes (58%) y con menos carga. El titular sigue legible porque detras
     del recorte no hay foto, sino el negro de la pagina. */
  .hero__veil {
    background:
      linear-gradient(96deg, rgba(8,8,7,0.9) 0%, rgba(8,8,7,0.72) 16%, rgba(8,8,7,0.38) 32%, rgba(8,8,7,0.12) 46%, transparent 58%),
      linear-gradient(180deg, rgba(8,8,7,0.45) 0%, transparent 22%, transparent 58%, rgba(8,8,7,0.7) 86%, var(--bg) 100%);
  }
}

/* ---- HERO: velo mas suave sobre el recorte ----
   El velo original esta pensado para una FOTO de fondo: oscurece el lado
   izquierdo al 86% para que el titular se lea. Sobre un PNG recortado eso
   no oscurece una escena, la BORRA — los panelistas de la izquierda
   desaparecian contra el negro. Aqui el fondo ya es negro, asi que el
   titular no necesita tanto velo: se baja el scrim izquierdo y se conserva
   solo el degradado inferior que funde la escena con la pagina. */
.hero__veil {
  background:
    linear-gradient(96deg, rgba(8,8,7,0.93) 0%, rgba(8,8,7,0.82) 18%, rgba(8,8,7,0.5) 36%, rgba(8,8,7,0.18) 52%, transparent 66%),
    linear-gradient(180deg, rgba(8,8,7,0.45) 0%, transparent 22%, transparent 58%, rgba(8,8,7,0.7) 86%, var(--bg) 100%);
}

/* ---- BOTONES: el degradado de unicornio en vez del dorado plano ----
   Es el mismo `linear-gradient(100deg, ...)` de la pastilla "Unicorn
   Founder" del lineup (crema -> dorado -> rosa -> lila). El texto se
   queda oscuro: sobre estos pasteles el blanco no tiene contraste.
   El hover no puede cambiar el color de fondo como hacia el dorado plano
   (un degradado no interpola en una transicion), asi que la respuesta al
   pasar el mouse la dan el brillo y la sombra. */
.btn--gold {
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%);
  color: #1a1206;
}
.btn--gold:hover {
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%);
  filter: brightness(1.06);
  box-shadow: 0 10px 40px -8px rgba(214,187,248,0.45);
}

/* ---- SPONSOR PROFILE: fondo de degradado en movimiento ----
   La version de sponsors.html lleva franjas de foto de bosque en los
   bordes; aqui no pega (esto es San Francisco, no Camp Navarro). En su
   lugar va el mismo degradado de unicornio de los botones, pero a un
   10% de opacidad y con un desplazamiento muy lento, para que la seccion
   respire sin competir con el texto. */
.sp-fit--sf .sp-fit__media::before,
.sp-fit--sf .sp-fit__media::after { content: none; background-image: none; }

.sp-fit--sf .sp-fit__media {
  background: linear-gradient(100deg,
    rgba(255,248,224,0.16) 0%, rgba(255,231,163,0.15) 22%,
    rgba(250,196,221,0.19) 46%, rgba(214,187,248,0.21) 68%,
    rgba(255,248,224,0.16) 100%);
  background-size: 260% 100%;
  /* El degradado se apaga hacia el centro-abajo para que la tarjeta de la
     derecha y el titular queden sobre negro limpio. */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, black 0%, rgba(0,0,0,0.55) 45%, transparent 85%);
          mask-image: radial-gradient(120% 100% at 50% 0%, black 0%, rgba(0,0,0,0.55) 45%, transparent 85%);
  animation: sf-drift 26s ease-in-out infinite alternate;
}
@keyframes sf-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
/* Quien pidio menos movimiento ve el degradado quieto, no sin degradado. */
@media (prefers-reduced-motion: reduce) {
  .sp-fit--sf .sp-fit__media { animation: none; }
}
/* En sponsors.css las franjas se ocultan bajo 980px porque eran fotos
   pesadas; este degradado no pesa, asi que se queda en telefono. */
@media (max-width: 980px) { .sp-fit--sf .sp-fit__media { display: block; } }

/* ============================================================
   THE STAGE — la foto que crece con el scroll
   Equivalente en CSS/JS plano del ScrollExpand de la landing
   sf-unicorn-series. El alto del riel y el recorte los calcula el
   script al final del HTML; aqui solo va la puesta en escena.
   ============================================================ */
.se { position: relative; background: var(--bg); --se-foot: 124px; }
.se__track { position: relative; width: 100%; }
.se__stage { position: sticky; top: 0; width: 100%; overflow: hidden; }

/* El recorte arranca como una ventana chica en el centro y se abre hasta
   el borde. clip-path (no width/height) para que la foto NO se deforme:
   se ve mas o menos cantidad de la misma imagen, nunca estirada. */
.se__frame {
  /* Se reserva una franja de negro al pie del escenario: ahi van los
     nombres. Antes caian encima de los zapatos y no habia sombra que los
     salvara. La foto ocupa todo lo de arriba. */
  position: absolute; inset: 0 0 var(--se-foot) 0;
  overflow: hidden;
}
.se__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* "contain", no "cover". La foto es 2:1 y la pantalla casi nunca lo es,
     asi que con "cover" el navegador recorta para llenar: en pantallas
     anchas se comia pies y cabezas. Con "contain" se ve la escena entera
     y lo que sobra se rellena con el negro de la pagina — que es el mismo
     negro del fondo de la foto, asi que no se nota ningun borde. */
  object-fit: contain; object-position: center;
  transform: scale(1.85); transform-origin: center;
  will-change: transform; user-select: none;
}
.se__scrim {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.3));
}

/* El texto va FUERA del recorte: si fuera dentro, al principio estaria
   encogido dentro de la ventana chica. Se coloca arriba-centro, que es
   justo el hueco que deja la foto entre las dos figuras. */
.se__copy {
  position: absolute; left: 0; right: 0; top: 11%;
  display: flex; justify-content: center; padding: 0 24px;
  pointer-events: none;
}
.se__copy-inner { position: relative; max-width: 620px; text-align: center; }
/* Velo propio del texto, mucho mas grande que la caja y centrado aparte:
   dibujado con inset:0 el degradado se recorta y se ven aristas rectas. */
.se__veil {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(160vw, 1500px); height: min(120vh, 900px); z-index: 0;
  background: radial-gradient(closest-side,
    rgba(8,8,7,0.92) 0%, rgba(8,8,7,0.82) 26%, rgba(8,8,7,0.55) 48%,
    rgba(8,8,7,0.24) 68%, rgba(8,8,7,0.06) 84%, transparent 100%);
}
.se__title {
  position: relative; z-index: 1;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.12;
}
.se__text {
  position: relative; z-index: 1;
  margin: 18px auto 0; max-width: 460px; color: #d9d3c6;
  font-size: clamp(0.95rem, 1.5vw, 1.06rem); line-height: 1.6;
}
.se__hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--se-foot) + 14px); text-align: center;
  font-size: 13px; letter-spacing: 0.02em; color: rgba(245,240,232,0.55);
  pointer-events: none;
}

/* ---- Telefono: sin efecto ----
   La foto es apaisada y su argumento son las DOS figuras de los extremos;
   recortada a vertical se pierden justo ellas. Aqui la foto se respeta
   entera y el texto va debajo. El script detecta esta misma condicion y
   no toca nada. */
@media (max-width: 760px) {
  .se { --se-foot: 0px; }
  .se__track, .se__stage { height: auto !important; }
  .se__stage { position: static; }
  .se__frame { position: static; inset: auto; clip-path: none !important; }
  .se__media {
    position: static; height: auto; transform: none !important;
    aspect-ratio: 2 / 1; object-fit: cover;
  }
  .se__scrim, .se__hint, .se__veil { display: none; }
  .se__copy { position: static; padding: 28px 24px 8px; }
  .se__copy-inner { max-width: 560px; text-align: left; }
  .se__text { margin-left: 0; }
}

/* ============================================================
   CIERRE — copiado de la landing sf-unicorn-series
   ============================================================ */
/* El degradado de marca tal como esta definido alla (150deg). Es casi
   identico al de los botones de esta pagina (100deg); se respeta el de
   la landing para que el cierre sea el mismo. */
.close { --brand-gradient: linear-gradient(150deg, #fffff6 0%, #fef9c3 38%, #fce7f3 72%, #e9d5ff 100%); }

.close { position: relative; width: 100%; overflow: hidden; }
.close__media { position: absolute; inset: 0; overflow: hidden; }
.close__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.18) translateY(40px);
  will-change: transform;
}
.close__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(8,8,7,0.55) 32%,
              rgba(8,8,7,0.82) 72%, var(--bg) 100%);
}
.close__content {
  position: relative; z-index: 2;
  min-height: 86svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 12vh; padding-bottom: 12vh;
}
.close__title {
  max-width: 860px; font-size: clamp(2rem, 5.4vw, 4.9rem);
  letter-spacing: -0.03em; line-height: 1.05;
}
/* La segunda linea, rellena con el degradado en vez de color plano. */
.grad-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.close__lead {
  margin-top: 28px; max-width: 520px; color: var(--muted);
  font-size: 1rem; line-height: 1.6;
}
.close__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.close__actions .btn { border-radius: 14px; font-weight: 700; }
/* En esta seccion el boton principal usa el degradado de la landing. */
.close__actions .btn--gold,
.close__actions .btn--gold:hover { background: var(--brand-gradient); }

@media (max-width: 600px) {
  .close__content { min-height: 78svh; padding-bottom: 9vh; }
  .close__actions .btn { flex: 1; }
}

/* ---- THE STAGE: nombres anclados a cada figura ----
   Aparecen al final del recorrido, cuando las dos figuras ya estan en
   cuadro: antes flotarian sobre el vacio. El script les mueve opacidad
   y desplazamiento. */
.se__names {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--se-foot);
  display: flex; justify-content: space-between; align-items: center;
  /* Mismo ancho de columna que el resto de la pagina (.wrap): pegados al
     borde de la ventana quedaban mucho mas afuera que las dos figuras de
     la foto, que al final del recorrido caen hacia el centro. */
  max-width: var(--wrap); margin-inline: auto; padding: 0 28px;
  opacity: 0; pointer-events: none;
}
.se__name--right { text-align: right; }
.se__name-n {
  font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 2.1rem); letter-spacing: -0.02em;
}
.se__name-r {
  margin-top: 6px; font-size: 14.5px; color: var(--muted);
}

@media (max-width: 760px) {
  /* Sin efecto: los nombres van debajo de la foto, uno por columna. */
  .se__names {
    position: static; opacity: 1 !important; transform: none !important;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    padding: 20px 24px 0; align-items: start;
  }
  .se__name--right { text-align: right; }
}

/* ============================================================
   ACENTO: fuera el dorado
   El dorado #e0a93d de Reboot se cambia por el degradado de
   unicornio. Donde el acento es TEXTO SUELTO se rellena con el
   degradado entero; donde es un trazo, un borde o una pastilla
   —que no admiten degradado sin complicarlo— se usa el lila del
   propio degradado, que es su tramo mas legible sobre negro.
   ============================================================ */
:root {
  --gold:      #d6bbf8;
  --gold-2:    #c9a7f2;
  --gold-soft: rgba(214, 187, 248, 0.13);
}

/* Texto suelto: relleno con el degradado completo. Ojo, esto solo
   funciona cuando el elemento NO necesita fondo propio: el recorte
   a texto se queda con el fondo. Por eso las pastillas (.num, la
   del ano, los tags) se quedan en lila plano. */
.eyebrow,
.sp-label,
.place__more,
.stat__note,
.manifesto .section-label,
#included .section-label {
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 26%, #fac4dd 58%, #d6bbf8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* El degradado se mide sobre la caja del elemento; sin esto, en una
     etiqueta corta se veria practicamente de un solo color. */
  width: fit-content;
}
/* Esa caja a medida es tambien lo que sacaba del centro a la etiqueta de
   "Sponsorship investment", que vive en una cabecera centrada: encogida
   al ancho del texto, se iba a la izquierda. Los margenes automaticos la
   devuelven al centro. */
#included .section-label { margin-inline: auto; }
/* La pastilla "2027" vive dentro del eyebrow: si hereda el recorte a
   texto pierde su fondo y su borde. Se saca del degradado. */
.eyebrow .pill {
  background: var(--gold-soft); color: #d6bbf8;
  -webkit-background-clip: border-box; background-clip: border-box;
}
/* Los numeros 01-04 y los tags de precio llevan pastilla: lila plano. */
.bento--num .num, .tier__tag--gold { color: #d6bbf8; }

/* ---- HERO: panelistas y publico en capas separadas ----
   Solo los panelistas se corren a la derecha, para ocupar el vacio negro
   de ese lado sin mover al publico del frente. Las dos capas comparten
   encuadre; lo unico que cambia es el desplazamiento de la de atras.
   El color de respaldo lo pone solo una: en la otra taparia a la primera. */
/* El !important no es capricho: `script.js` —que es del sitio entero de
   Reboot, no de esta pagina— le aplica al primer .hero__img un parallax
   por scroll escribiendo `transform` en linea. Eso pisaba el
   desplazamiento de los panelistas en cuanto se hacia scroll (se veian
   corridos al abrir y volvian a la izquierda al primer gesto). Aqui el
   encuadre manda sobre ese parallax, que ademas no encaja con el recorte
   a dos capas. */
.hero__img--panel { transform: translateX(9%) !important; }
.hero__img--crowd { background-color: transparent; transform: none !important; }
@media (max-width: 600px) {
  /* En vertical el encuadre ya esta cerrado sobre la gente; correrlos mas
     los sacaria del cuadro. */
  .hero__img--panel { transform: none !important; }
}

/* ---- HERO: subir el bloque de texto ----
   El hero alinea su contenido abajo, asi que para subirlo se le agranda
   el respiro inferior. Se recorta el hueco muerto que quedaba entre la
   barra de navegacion y el eyebrow. */
.hero__content { padding-bottom: 17vh; }
@media (max-width: 600px) { .hero__content { padding-bottom: 12vh; } }

/* ============================================================
   BARRIDO DEL DORADO QUE QUEDABA SUELTO
   El cambio de acento reemplazo la variable --gold, pero en
   styles.css y sponsors.css hay dorados escritos a mano
   (rgba(224,169,61,...)) que no la usan y sobrevivieron. Aqui se
   repasan uno por uno los que se ven en esta pagina.
   ============================================================ */

/* Las rayitas de los datos de "About the series". Un borde no admite un
   degradado directamente; con border-image si, y como solo el lado
   izquierdo tiene grosor, es el unico que se pinta. */
.series__facts div, .place__facts div {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, #fff8e0 0%, #fac4dd 55%, #d6bbf8 100%) 1;
}

/* Pastillas y bordes sueltos */
.pill { border-color: rgba(214,187,248,0.34); }
.bento--num .num { border-color: rgba(214,187,248,0.34); }
.tier__tag--gold { border-color: rgba(214,187,248,0.42); }
.card:hover { border-color: rgba(214,187,248,0.35); }

/* La tarjeta destacada del precio: su fondo y su borde eran dorados */
.tier--feature {
  background: linear-gradient(180deg, rgba(214,187,248,0.09), rgba(214,187,248,0.01));
  border-color: rgba(214,187,248,0.42);
}
.tier--feature:hover { border-color: rgba(214,187,248,0.62); }

/* El latido del boton principal del hero: era un halo dorado */
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,187,248,0), 0 0 0 0 rgba(214,187,248,0); }
  50%      { box-shadow: 0 0 22px 4px rgba(214,187,248,0.38), 0 0 46px 14px rgba(214,187,248,0.15); }
}

/* Los haces de luz del fondo del hero */
.hero__rays {
  background: conic-gradient(from 200deg at 75% -10%,
    transparent 0deg, rgba(214,187,248,0.10) 18deg, transparent 40deg,
    rgba(250,196,221,0.06) 60deg, transparent 90deg);
}

/* ============================================================
   DISPONIBILIDAD DE FECHAS
   Misma gramatica que el resto de la pagina: cabecera a dos
   columnas como "About the series", y tarjetas con el borde y el
   fondo de .card. Nada nuevo de estilo, solo una pieza mas.
   ============================================================ */
.avail { padding: clamp(70px, 10vh, 120px) 0; border-top: 1px solid var(--line-2); }
.avail__head {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: start;
}
.avail__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.avail__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.62; max-width: 46ch; }

/* La franja del partner anual: una linea de credito, no una tarjeta. */
.avail__partner {
  /* Zoe es el unico patrocinador que aparece en esta pagina, asi que la
     franja se pidio al triple: el logo pasa de 19 a 56px y la franja gana
     aire arriba y abajo para que no quede apretado contra las lineas. */
  margin-top: 54px; padding: 30px 4px;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  /* El logo se pega a su etiqueta en vez de ir centrado en la franja:
     las dos primeras columnas se ajustan a su contenido y la tercera
     se queda con el resto, empujando la nota al borde derecho. */
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  column-gap: 16px;
}
.avail__partner-k, .avail__partner-n {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
}
.avail__partner-n { text-align: right; text-transform: none; letter-spacing: 0.01em; font-size: 13.5px; }
.avail__partner-logo { height: 56px; width: auto; display: block; opacity: 0.92; }

/* Las cuatro fechas */
/* El grid cuelga ahora del bloque "About the series", sin cabecera
   propia, asi que su aire de arriba es el que separa las dos cosas. */
.avail__grid { margin-top: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.avail__card {
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  padding: 22px 22px 24px; transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.avail__card:hover { border-color: rgba(214,187,248,0.35); transform: translateY(-3px); }
/* La reservada se distingue por el fondo transparente y el estado en gris;
   ya no se atenua entera, para que el logo del despacho salga a su color. */
.avail__card--taken { background: transparent; }
.avail__card--taken:hover { transform: none; border-color: var(--line); }

.avail__state {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #d6bbf8;
}
.avail__state i { width: 7px; height: 7px; border-radius: 50%; background: #d6bbf8; }
.avail__state--taken { color: var(--muted-2); }
.avail__state--taken i { background: var(--muted-2); }

.avail__date {
  margin-top: 18px; font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem); letter-spacing: -0.03em; line-height: 1;
}
.avail__k {
  display: block; margin-top: 12px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
}
.avail__firm {
  margin-top: 8px; font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text);
}
/* El logo ocupa el lugar del nombre y se pidio que pesara mas que la
   fecha, que es el otro dato grande de la tarjeta. La fecha usa un clamp
   (unos 26-33px segun el ancho), asi que 40px la supera siempre. */
.avail__firm-logo { margin-top: 12px; height: 40px; width: auto; display: block; }

@media (max-width: 980px) {
  .avail__head { grid-template-columns: 1fr; gap: 34px; }
  .avail__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .avail { padding: 56px 0; }
  .avail__partner { grid-template-columns: 1fr; justify-items: start; gap: 12px; text-align: left; }
  .avail__partner-n { text-align: left; }
}


/* ===== PAST SPECIAL GUESTS ==========================================
   Portado de rippletalks.com. Dos cosas que vienen documentadas de alli
   y que conviene no deshacer:

   1) `aspect-ratio` con las medidas reales del PNG (480x460). Con la foto
      arriba y loading="lazy", mientras la imagen no llega la caja mide
      cero y el texto de la ficha esta 240px mas arriba de donde acabara:
      al cargar, las ocho fichas pegan un salto.
   2) `subgrid`: sin el, la descripcion mide distinto en cada ficha (de
      una a tres lineas) y arrastra al nombre, al cargo y al logo a
      alturas distintas; la fila se lee escalonada.
==================================================================== */
.fdrs { padding: clamp(70px, 10vh, 120px) 0; border-top: 1px solid var(--line-2); }
.fdrs__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.fdrs__lead { margin-top: 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.62; max-width: 52ch; }

/* El hueco entre filas es grande a proposito: con uno pequeno, la foto
   queda mas cerca del texto de la fila de abajo que de su propio pie, y
   la descripcion siguiente se lee como pie de la foto de arriba. */
.fdrs__grid {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(44px, 5vw, 72px) clamp(20px, 2.6vw, 36px);
}
/* `isolation: isolate` no es cosmetico: el marco del hover vive en un
   pseudo con z-index negativo, y sin un contexto de apilado propio se iria
   a pintar detras del fondo de la pagina y no se veria. */
.fdr { position: relative; display: flex; flex-direction: column; isolation: isolate; }
@supports (grid-template-rows: subgrid) {
  .fdrs__grid { grid-auto-rows: auto; }
  .fdr { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
}

.fdr__shot {
  position: relative; aspect-ratio: 480 / 460;
  display: flex; align-items: flex-end; justify-content: center;
}
/* La sombra que apoya el recorte en el fondo; sin ella la figura flota. */
.fdr__shot::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: 78%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,0.85), transparent 78%);
  filter: blur(9px); z-index: 0;
}
.fdr__shot img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }

.fdr__desc {
  margin-top: 12px; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.34;
  font-weight: 500; letter-spacing: -0.015em;
}
.fdr__pie { display: flex; flex-direction: column; align-items: flex-start; margin-top: 18px; }
.fdr__name { font-size: clamp(16px, 1.5vw, 18px); font-weight: 400; letter-spacing: -0.012em; }
.fdr__role { margin-top: 3px; font-size: 13.5px; line-height: 1.3; color: var(--muted-2); }
.fdr__logo { height: 36px; margin-top: 14px; display: flex; align-items: center; color: var(--text); }
.fdr__logo svg, .fdr__logo img { height: var(--lh, 22px); width: auto; display: block; }
.fdr__logo .logo-img { filter: invert(1); opacity: 0.9; }


/* ---- el marco al pasar por encima ----
   Portado de rippletalks.com. Tres cosas de alli que explican la forma:

   - El marco va en un pseudo `absolute` con `inset` NEGATIVO, no en un
     `border` de la ficha: asi no existe mientras no haya hover y no empuja
     ni un pixel de la maqueta. Un borde real, aunque fuera transparente,
     obligaria a reservarle sitio — y estando fuera de flujo tampoco ocupa
     ninguna fila del subgrid.
   - El trazo es un DEGRADADO, no un color plano, y por eso lleva mascara:
     se pinta el degradado en toda la caja y la mascara borra el interior,
     dejando solo el anillo de 1px del `padding`. `mask-composite: exclude`
     es lo que resta una capa de la otra.
   - Solo en punteros con hover real: en tactil se quedaria encendido al
     tocar.
==================================================================== */
@media (hover: hover) {
  .fdr::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -20px -16px -14px; border-radius: 14px; padding: 1px;
    background: linear-gradient(145deg,
      rgba(250,196,221,0.62) 0%,
      rgba(214,187,248,0.5) 42%,
      rgba(255,231,163,0.34) 72%,
      rgba(245,240,232,0.12) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0; transition: opacity .4s ease;
  }
  /* Relleno apenas perceptible, para que el marco no quede como una caja
     vacia dibujada encima del negro. */
  .fdr::after {
    content: ""; position: absolute; z-index: -2; pointer-events: none;
    inset: -20px -16px -14px; border-radius: 14px;
    background: linear-gradient(180deg,
      rgba(214,187,248,0.07) 0%, rgba(250,196,221,0.03) 55%, transparent 100%);
    opacity: 0; transition: opacity .4s ease;
  }
  .fdr:hover::before, .fdr:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fdr::before, .fdr::after { transition: none; }
}

@media (max-width: 980px) { .fdrs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fdrs__grid { grid-template-columns: 1fr; } }

/* ===== INSIDE THE FIRESIDES — los clips =============================
   Los posters se sirven desde aqui; el video viene de rippletalks.com y
   solo se descarga al pulsar play (preload="none"). El boton no es un
   enlace: carga el video en su sitio, le pone controles y lo reproduce.
==================================================================== */
.clips { padding: clamp(70px, 10vh, 120px) 0; border-top: 1px solid var(--line-2); }
.clips__head,
.about__head {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: start;
  margin-bottom: 48px;
}
.clips__title, .about__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.about__title { text-wrap: balance; }

.clips__more {
  display: inline-block; margin-top: 18px; font-size: 14.5px; font-weight: 500;
  background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 26%, #fac4dd 58%, #d6bbf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content; border-bottom: 1px solid rgba(214,187,248,0.35); padding-bottom: 2px;
}
.clips__more:hover { border-bottom-color: rgba(214,187,248,0.8); }

.clips__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }

.clip__frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #0d0c0b;
  transition: border-color .35s ease, transform .35s ease;
}
.clip__frame:hover { border-color: rgba(214,187,248,0.45); transform: translateY(-3px); }
.clip__poster, .clip__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.clip__video { opacity: 0; transition: opacity .25s ease; }
.clip.is-playing .clip__video { opacity: 1; }
.clip.is-playing .clip__poster { opacity: 0; }
/* El boton no se oculta con opacidad sino que se quita: invisible pero
   presente, seguiria tapando el video y los clics volverian al problema. */
.clip.is-playing .clip__play { display: none; }

/* El boton cubre el marco entero y es transparente: lo que se ve es el
   circulo de su ::before. Al cubrirlo todo, el clic cae en el sitio sin
   tener que acertarle a un circulo de 54px. Desaparece al arrancar, y
   entonces el video queda libre para responder a sus propios clics. */
.clip__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: transparent;
  cursor: pointer; display: block;
}
.clip__play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(8,8,7,0.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(245,240,232,0.35);
  transition: background .3s ease;
}
/* El triangulo, dibujado con bordes: sin imagen y sin fuente. */
.clip__play::after {
  content: ""; position: absolute; left: calc(50% + 2px); top: 50%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--text);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.clip__play:hover::before { background: rgba(214,187,248,0.28); }
.clip__play:focus-visible { outline: 2px solid rgba(214,187,248,0.8); outline-offset: -4px; border-radius: 16px; }

.clip__t { margin: 14px 0 0; font-weight: 500; font-size: 15px; line-height: 1.4; }
.clip__who { margin: 6px 0 0; color: var(--muted-2); font-size: 13px; line-height: 1.5; }

/* ===== POR QUIENES ================================================== */
.about { padding: clamp(70px, 10vh, 120px) 0; border-top: 1px solid var(--line-2); }

@media (max-width: 980px) {
  .clips__head, .about__head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .clips__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .clips__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .clip__frame { transition: none; }
  .clip__frame:hover { transform: none; }
  .clip__play::before { transition: none; }
}

/* ===== EL BUCLE DE RICARDO Y ALEJANDRO ==============================
   OJO: este bloque lleva cabecera propia a proposito. Sin ella vivia
   pegado al final del archivo y un recorte de la seccion de arriba se lo
   llevo por delante; el video se quedo sin `width:100%` y se dibujaba a
   su tamano natural (1280px) dentro de una columna de 335 en telefono,
   asi que solo se veia un zapato.

   Los bordes van enmascarados porque el negro del plano no es exactamente
   el de la pagina y el rectangulo se llegaba a ver. Se apagan los cuatro:
   arriba solo un 11% — mas subiria hasta la mano levantada — y abajo mas,
   que es donde esta el suelo gris del plano.
==================================================================== */
.hosts__loop { display: block; width: min(820px, 100%); margin: clamp(40px, 6vw, 72px) auto clamp(8px, 2vw, 24px); }
.hosts__loop video {
  display: block; width: 100%; height: auto; max-width: 100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 84%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ===== CIERRE: EL PARTNER ANUAL Y EL FORMULARIO =====================
   Portado de rippletalks.com. Dos cosas de alli que no son cosmeticas:

   - El recorte de Andres tiene el borde INFERIOR OPACO: el torso llega al
     filo del archivo con un corte recto. Sobre negro y sin caja alrededor
     ese corte se lee como una calcomania pegada encima, asi que el ultimo
     tramo va desvanecido.
   - El logo de Zoe ya viene blanco sobre transparente, asi que NO lleva el
     filter:invert(1) que si necesita el de Sound en los clips.
==================================================================== */
.ptnr { padding: clamp(70px, 10vh, 120px) 0; border-top: 1px solid var(--line-2); }
.ptnr__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.ptnr__body {
  margin-top: clamp(44px, 6vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}

/* La foto manda arriba, con el logo grande al lado, y el texto va debajo.
   Esta ficha no sigue el orden de las de "Past Special Guests". */
.spon__cabecera { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); margin-bottom: clamp(20px, 2.5vw, 28px); }
.spon__shot { position: relative; flex: 0 0 auto; width: min(210px, 46%); display: flex; align-items: flex-end; }
.spon__shot img {
  width: 100%; height: auto; display: block; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
}
/* Sin sombra a los pies, al reves que en los invitados: aquella ancla una
   figura de cuerpo entero sobre un suelo, y esto es un busto. */
.spon__logo { --lh: clamp(30px, 5vw, 54px); flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.spon__logo img { height: var(--lh); width: auto; display: block; opacity: 0.9; transition: opacity .35s ease; }
.spon__logo:hover img, .spon__logo:focus-visible img { opacity: 1; }

.spon__claim { font-size: clamp(1.05rem, 1.9vw, 1.35rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; }
.spon__name { margin-top: 16px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 400; letter-spacing: -0.012em; }
.spon__role { margin-top: 4px; font-size: 13.5px; color: var(--muted-2); }
.spon__role i { font-style: normal; opacity: 0.5; margin: 0 6px; }

/* ---- el formulario ---- */
.sform { border-left: 1px solid var(--line); padding-left: clamp(28px, 5vw, 72px); }
.sform__t { font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; }
.sform__campo { margin-top: 20px; display: block; }
.sform__lab { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sform__lab i { font-style: normal; color: #d6bbf8; margin-left: 2px; }
.sform input {
  width: 100%; font-family: inherit; font-size: 15.5px; color: var(--text);
  background: rgba(245,240,232,0.05); border: 1px solid var(--line);
  border-radius: 9px; padding: 13px 15px;
  transition: border-color .3s ease, background .3s ease;
}
.sform input::placeholder { color: var(--muted-2); }
.sform input:hover { border-color: rgba(245,240,232,0.28); }
.sform input:focus { outline: 2px solid rgba(214,187,248,0.7); outline-offset: 2px; border-color: transparent; background: rgba(245,240,232,0.08); }
.sform__enviar { margin-top: 24px; }
/* El campo trampa se saca de pantalla en vez de con display:none, porque
   algunos bots detectan lo segundo y lo esquivan. */
.sform__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gracias { border-left: 1px solid var(--line); padding-left: clamp(28px, 5vw, 72px); }
.gracias__t { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; }
.gracias__t:focus { outline: none; }
.gracias__p { margin-top: 12px; max-width: 34ch; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.gracias__p a { color: var(--text); text-decoration: underline; }
.gracias--mal .gracias__t { color: #ffb4a8; }

@media (max-width: 860px) {
  .ptnr__body { grid-template-columns: 1fr; }
  .sform, .gracias { border-left: 0; padding-left: 0; padding-top: 28px; border-top: 1px solid var(--line); }
}

/* La capa que pausa al pulsar sobre la imagen. Solo existe mientras el
   video corre, y deja libres los 48px de abajo para que la barra de
   controles del navegador siga funcionando (y siga apareciendo al pasar
   el raton por esa franja). `tabindex="-1"` porque no aporta nada al
   teclado: la barra nativa ya es accesible. */
.clip__toggle {
  position: absolute; inset: 0 0 48px 0;
  padding: 0; margin: 0; border: 0; background: transparent;
  cursor: pointer; display: none;
}
.clip.is-playing .clip__toggle { display: block; }