/* ============================================================
   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;
}
.eq-lede b{color:var(--ink);font-weight:700;position:relative;white-space:nowrap}
/* el subrayado naranja que se dibuja al entrar */
.eq-lede b::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.25,.9,.3,1);
}
.eq-lede.is-vista b::after{transform:scaleX(1)}

/* ── 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)}
.eq-nota{
  margin:1.2rem 0 0;font-family:var(--font-m);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);
}

/* ── 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 ── */
.eq-frases{display:grid;gap:1rem}
.eq-mo{
  position:relative;display:block;padding:1.35rem 1.5rem 1.25rem 3.2rem;
  border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);text-decoration:none;color:inherit;
  transition:border-color .25s,background .25s;
}
.eq-mo::before{
  content:"«";position:absolute;left:1.1rem;top:.4rem;
  font-size:2.4rem;font-weight:700;color:rgba(255,95,0,.4);
}
.eq-mo:hover{border-color:rgba(255,122,46,.5);background:rgba(255,255,255,.055)}
.eq-mo-q{display:block;font-size:1.12rem;font-weight:500;line-height:1.6;color:var(--ink)}
.eq-mo-m{
  display:block;margin-top:.6rem;font-family:var(--font-m);font-size:.72rem;
  letter-spacing:.1em;color:rgba(255,255,255,.42);transition:color .2s;
}
.eq-mo:hover .eq-mo-m{color:var(--accent-text)}

/* ── 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));
}

/* ── 6 · cuando nadie se va ── */
.eq-mejores{display:grid;gap:.7rem;max-width:52rem}
.eq-ep{
  display:block;padding:1.05rem 1.3rem;border-radius:14px;text-decoration:none;
  color:inherit;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .25s,background .25s;
}
.eq-ep:hover{border-color:rgba(255,122,46,.5);background:rgba(255,255,255,.055)}
.eq-ep-cab{display:flex;align-items:baseline;gap:.8rem}
.eq-ep-delta{
  font-weight:700;font-variant-numeric:tabular-nums;color:#3fbf7f;
  font-size:1.1rem;flex:none;
}
.eq-ep-t{font-weight:600;font-size:1rem;line-height:1.4;flex:1;min-width:0}
.eq-ep-min{
  flex:none;font-family:var(--font-m);font-size:.74rem;letter-spacing:.08em;
  color:rgba(255,255,255,.42);transition:color .2s;
}
.eq-ep:hover .eq-ep-min{color:var(--accent-text)}
.eq-ep-ctx{margin:.4rem 0 0;font-size:.92rem;line-height:1.6;color:var(--muted)}

/* ── 7 · su mejor momento: la única set-piece ── */
.eq-rescate{
  position:relative;border-radius:24px;overflow:hidden;
  padding:clamp(1.8rem,4vw,3rem);
  background:
    radial-gradient(95% 60% at 50% 112%, rgba(255,95,0,.22), rgba(255,95,0,0) 60%),
    linear-gradient(165deg,#1b202b 0%,#12151c 55%,#0c0e13 100%);
  border:1px solid rgba(255,255,255,.09);
}
.eq-multi{
  position:absolute;right:2%;top:-2%;z-index:0;pointer-events:none;user-select:none;
  font-family:"Anton",var(--font-d);font-size:clamp(7rem,17vw,13rem);
  line-height:1;color:rgba(255,255,255,.05);
}
.eq-rescate .eq-h2,.eq-rescate .eq-intro{position:relative;z-index:1}
.eq-curva-wrap{position:relative;z-index:1;margin:1.4rem 0 .6rem}
#eqCurva{display:block;width:100%;height:clamp(160px,24vw,300px)}
#eqCurva .linea{
  fill:none;stroke:rgba(255,255,255,.75);stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}
#eqCurva .area{fill:rgba(255,255,255,.045)}
.eq-punto{position:absolute;transform:translate(-50%,-50%);text-decoration:none;z-index:2}
.eq-punto i{
  display:block;width:13px;height:13px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 6px rgba(255,95,0,.22);
}
.eq-punto span{
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.08em;color:var(--ink);
  background:rgba(8,9,12,.8);border:1px solid rgba(255,255,255,.16);
  border-radius:99px;padding:.28rem .7rem;white-space:nowrap;
}
@keyframes eqLate{0%,100%{box-shadow:0 0 0 5px rgba(255,95,0,.24)}50%{box-shadow:0 0 0 11px rgba(255,95,0,.08)}}
.eq-punto i{animation:eqLate 1.8s ease-in-out infinite}
.eq-btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.7rem;
  margin-top:1rem;background:var(--accent);color:#fff;font-weight:700;
  font-size:.98rem;padding:.95rem 1.6rem;border-radius:14px;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(255,95,0,.7);
  transition:transform .2s;
}
.eq-btn:hover{transform:translateY(-2px)}
.eq-btn i{font-style:normal;transition:transform .3s}
.eq-btn:hover i{transform:translateX(4px)}

/* ── 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%}
  /* en estrecho la fila se apila en vertical: el flex encogía el título
     a una columna de una palabra por línea */
  .eq-ep-cab{display:block}
  .eq-ep-cab .eq-ep-delta{display:block}
  .eq-ep-cab .eq-ep-t{display:block;margin-top:.3rem}
  .eq-ep-cab .eq-ep-min{display:block;margin-top:.45rem}
  .eq-tira i{width:5px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .eq-lede b::after{transition:none}
  .eq-punto i{animation:none}
  .eq-otro{transition:none}
}