/* ============================================================
   EL EQUIPO — la landing de cada spicy (equipo.html?s=marc).
   Dirección "una noche en la mesa" con el lede de revista:
   cartel calcado a la portada de invitados (fantasma Anton +
   recorte con rescoldo), y debajo el relato donde cada número
   vive DENTRO de una frase y termina en un clic al minuto.
   Hereda tokens de style.css; todo Poppins (mono solo en
   acotaciones); el naranja jamás como fondo grande.
   ============================================================ */

.pag-eq{overflow-x:hidden}
.pag-eq .mono,.pag-eq .topnav sup{font-family:var(--font-m)}
.eq{position:relative;padding:1.6rem 0 3rem}
.eq-sec{max-width:56rem;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) 6vw 0}

/* ── 1 · el cartel ── */
.eq-cartel{position:relative;text-align:center;padding-top:.4rem}
.eq-cartel .ep-eyebrow{
  font-weight:600;font-size:.84rem;letter-spacing:.2em;color:var(--accent-text);
}
.eq-tagline{
  margin:.55rem auto 0;max-width:60rem;padding:0 6vw;
  font-weight:300;font-size:clamp(1.9rem,4.2vw,3.3rem);
  letter-spacing:.03em;line-height:1.08;text-transform:uppercase;text-wrap:balance;
}
.eq-tagline b{font-weight:700;color:var(--accent-text)}
.eq-mesa{position:relative;margin-top:clamp(.6rem,1.6vw,1.2rem);
  height:clamp(340px,34vw,470px)}
.eq-ghost{
  position:absolute;left:0;right:0;top:clamp(.4rem,2.5vw,1.8rem);
  text-align:center;z-index:0;pointer-events:none;user-select:none;
}
.eq-ghost span{
  display:inline-block;font-family:"Anton",var(--font-d);font-weight:400;
  line-height:.85;letter-spacing:.02em;text-transform:uppercase;
  color:rgba(255,255,255,.06);white-space:nowrap;
}
.eq-glow{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:min(620px,72vw);height:clamp(110px,15vw,190px);border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,95,0,.2), transparent);
  filter:blur(26px);z-index:0;pointer-events:none;
}
/* sin drop-shadow: sobre el fondo con rejilla la sombra difusa se veía
   como una mancha rectangular alrededor de la figura */
.eq-rec{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:96%;width:auto;z-index:1;
  mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);
  user-select:none;-webkit-user-drag:none;
}
/* la ficha técnica del cartel es UNA frase, no una tira de stats */
.eq-credito{
  margin:1.1rem auto 0;padding:0 6vw;max-width:44rem;
  font-size:1rem;color:var(--muted);line-height:1.6;
}
.eq-credito b{color:var(--ink);font-weight:600}

/* ── 2 · el lede ── */
.eq-lede{
  font-size:clamp(1.18rem,1.8vw,1.42rem);font-weight:400;line-height:1.75;
  color:var(--ink2,#c3c9d4);max-width:52rem;
}
/* El subrayado naranja que se dibuja al entrar.
   Va de FONDO y no de ::after a proposito. Un ::after absoluto solo sabe
   dibujar un rectangulo, asi que obligaba a poner white-space:nowrap para que
   la frase no se partiera... y entonces «fundador y consejero delegado de Team
   Queso» era un bloque de 44 caracteres que saltaba entero de linea, dejando
   un hueco enorme detras de «ademas». Un degradado de fondo con
   box-decoration-break:clone se dibuja en CADA linea que ocupe la frase, asi
   que el texto vuelve a repartirse solo. */
.eq-lede b{
  color:var(--ink);font-weight:700;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:3px;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 2px;
  transition:background-size .8s cubic-bezier(.25,.9,.3,1);
}
.eq-lede.is-vista b{background-size:100% 2px}

/* ── títulos y acotaciones ── */
.eq-h2{
  font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);
  letter-spacing:-.02em;text-transform:uppercase;margin:0 0 1.1rem;
}
.eq-et{
  margin:0;font-weight:600;font-size:.84rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text);
}
.eq-intro{margin:0 0 1.6rem;font-size:1.05rem;line-height:1.7;color:var(--ink2,#c3c9d4);max-width:48rem}
.eq-intro b{color:var(--ink);font-weight:700}
.eq-min{
  display:inline-block;margin-top:.9rem;font-family:var(--font-m);font-size:.78rem;
  letter-spacing:.1em;color:var(--accent-text);text-decoration:none;
}
.eq-min:hover{color:var(--ink)}

/* ── 3 · el turno: cronómetro ── */
.eq-turno{text-align:center}
.eq-crono{
  margin:.6rem 0 0;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(4rem,11vw,7.5rem);letter-spacing:-.03em;line-height:1;
}
.eq-crono-barra{
  width:min(420px,70vw);height:3px;margin:1.1rem auto 0;border-radius:99px;
  background:rgba(255,255,255,.1);overflow:hidden;
}
.eq-crono-barra i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#ff9a52);
}

/* ── 4 · en sus palabras ── */
/* ── el grid de momentos ──
   Seis momentos con el fotograma del vídeo, la frase y el minuto.

   auto-fill con minmax y un min() dentro: tres columnas, dos en tablet y una
   en móvil, sin una sola media query. El mínimo va en 13rem y no en 15 porque
   aquí 1rem son 17px (la raíz es fluida), así que 15rem eran 255px y tres
   columnas más sus huecos no cabían en los 779px del contenedor.

   grid-auto-rows:1fr iguala la altura de todas las filas, no solo la de los
   hermanos de una: sin eso, una fila con citas cortas queda más baja que la de
   al lado y el conjunto se ve descolgado. */
.eq-frases{display:grid;gap:clamp(.8rem,1.6vw,1.15rem);
  grid-auto-rows:1fr;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}

/* ── la tarjeta, de cristal ──
   El cristal no es solo «fondo translúcido»: son tres capas. El desenfoque de
   lo que hay detrás, un fondo que se aclara arriba y se apaga abajo (como el
   vidrio real, que recoge la luz por el canto superior), y un borde que
   acompaña ese mismo degradado. Sin las tres, se queda en una caja gris.
   El radio baja de 16 a 11px: a 16 la tarjeta se redondeaba más que el
   fotograma que lleva dentro y el conjunto parecía blando. */
.eq-mo{
  display:flex;flex-direction:column;overflow:clip;
  border-radius:11px;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028) 42%,rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  /* el filo de luz por dentro del borde superior, que es lo que hace que se
     lea como vidrio y no como un rectángulo con opacidad */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 10px 26px -18px rgba(0,0,0,.9);
  transition:border-color .25s,background .25s,transform .25s,box-shadow .25s;
}
.eq-mo:hover{
  border-color:rgba(255,122,46,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04) 42%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px -18px rgba(0,0,0,.95);
  transform:translateY(-2px);
}
.eq-mo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.eq-mo-foto{
  position:relative;display:block;aspect-ratio:16/9;
  background-color:#0d0f14;background-repeat:no-repeat;
  filter:brightness(.88);transition:filter .25s;
}
.eq-mo:hover .eq-mo-foto{filter:brightness(1)}
/* el triángulo de reproducir: dice que esto lleva a un vídeo */
.eq-mo-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,11,14,.52);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .25s,border-color .25s,scale .25s;
}
.eq-mo-play::after{content:"";width:0;height:0;margin-left:3px;
  border-left:10px solid #fff;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.eq-mo:hover .eq-mo-play{background:var(--accent);border-color:var(--accent);scale:1.08}
/* el minuto, sobre la foto: ahí no le roba sitio a la frase */
.eq-mo-min{
  position:absolute;right:.5rem;bottom:.5rem;
  font-family:var(--font-m);font-size:.67rem;font-weight:500;letter-spacing:.06em;
  color:#fff;background:rgba(10,11,14,.62);border-radius:5px;padding:.14rem .36rem;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

.eq-mo-cuerpo{display:flex;flex-direction:column;gap:.5rem;
  padding:.85rem .9rem .85rem}
/* TRES LÍNEAS SIEMPRE, ni una más ni una menos. El clamp corta las largas y el
   min-height reserva el sitio de las cortas: sin lo segundo, una cita de dos
   líneas encoge su tarjeta y la fila se descuadra aunque el grid sea perfecto. */
.eq-mo-q{
  font-size:.92rem;font-weight:500;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(.92rem * 1.5 * 3);
}
.eq-mo-q::before{content:"\201C"}
.eq-mo-q::after{content:"\201D"}
.eq-mo-m{
  display:block;margin-top:auto;padding-top:.15rem;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;
  color:rgba(255,255,255,.38);transition:color .2s;
}
.eq-mo:hover .eq-mo-m{color:var(--accent-text)}
@media (prefers-reduced-motion:reduce){
  .eq-mo,.eq-mo-foto,.eq-mo-play{transition:none}
  .eq-mo:hover{transform:none}
}
/* ── 5 · sus temas: cinco líneas con una raya debajo ── */
.eq-temas{display:grid;gap:1.15rem;max-width:48rem}
.eq-trow{display:grid;grid-template-columns:2.2rem 1fr auto;align-items:baseline;gap:.9rem}
.eq-trow-n{font-weight:300;font-size:1.05rem;color:rgba(255,255,255,.35)}
.eq-trow-t{font-size:1.14rem;font-weight:600}
.eq-trow-c{font-family:var(--font-m);font-size:.82rem;color:var(--muted)}
.eq-trow-barra{
  grid-column:2/4;height:2px;border-radius:2px;background:rgba(255,255,255,.08);
  overflow:hidden;
}
.eq-trow-barra i{
  display:block;height:100%;width:0;border-radius:2px;
  background:var(--tinte,var(--accent));
}

/* ── 8 · la asistencia: una marca por mesa, todas a la misma altura
   (las sillas vacías se distinguen por color, no por tamaño: con dos
   alturas la tira parecía un código de barras roto) ── */
.eq-tira{display:flex;flex-wrap:wrap;gap:3px;max-width:52rem}
.eq-tira i{
  width:6px;height:24px;border-radius:2px;background:rgba(255,255,255,.3);
  font-style:normal;
}
.eq-tira i.falta{background:var(--accent)}

/* ── 9 · el telón ── */
.eq-telon{padding-bottom:1rem}
.eq-otros{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.eq-otro{
  position:relative;display:block;border-radius:18px;overflow:hidden;
  text-decoration:none;color:inherit;aspect-ratio:3/4;
  background:
    radial-gradient(95% 55% at 50% 110%, rgba(255,95,0,.18), rgba(255,95,0,0) 62%),
    linear-gradient(165deg,#1c212c 0%,#12151c 52%,#0c0e13 100%);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .35s cubic-bezier(.3,.9,.3,1),border-color .3s;
}
.eq-otro:hover{transform:translateY(-8px);border-color:rgba(255,95,0,.5)}
/* el isologo en marca de agua detrás de cada uno, como en las casillas
   de invitados; al pasar, la llama se templa en naranja */
.eq-otro-flama{
  position:absolute;left:50%;top:6%;transform:translateX(-50%);
  width:56%;height:auto;color:rgba(255,255,255,.06);
  pointer-events:none;user-select:none;transition:color .35s;
}
.eq-otro:hover .eq-otro-flama{color:rgba(255,122,46,.1)}
.eq-otro img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:80%;width:auto;
  mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);
  transition:transform .35s cubic-bezier(.3,.9,.3,1);
}
.eq-otro:hover img{transform:translateX(-50%) translateY(-5px)}
.eq-otro-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(6,8,11,.92) 8%, rgba(6,8,11,.3) 30%, transparent 50%);
}
/* pie alineado entre cartas: el tagline reserva SIEMPRE dos líneas, así
   los tres nombres caen a la misma altura aunque un tagline sea corto */
.eq-otro-pie{position:absolute;left:6%;right:6%;bottom:6%;text-align:center}
.eq-otro-pie b{
  display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1rem,1.6vw,1.2rem);color:#fff;
}
.eq-otro-pie span{
  display:block;margin-top:.3rem;min-height:3em;   /* SIEMPRE dos líneas */
  font-size:.8rem;line-height:1.5;color:var(--muted);
}

/* ── móvil ── */
@media (max-width:900px){
  .eq-mesa{height:clamp(300px,80vw,400px)}
  .eq-ghost{display:none}
  .eq-sec{padding-top:2.6rem}
  .eq-otros{grid-template-columns:1fr}
  .eq-otro{aspect-ratio:16/10}
  .eq-otro img{height:96%}
  .eq-tira i{width:5px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .eq-lede b{transition:none}
  .eq-otro{transition:none}
}