/* ==========================================================================
   ANDAMIO · FAMILIA DE SHOWS — v4 (banda final sutil, ver al final)
   Marco común que comparten los sitios de cada espectáculo de Andamio
   (Lights Will Guide You, STILL STANDING y los que vengan) con la landing /shows/.

   Cada show conserva su mundo (tipografías, paleta, símbolo, animaciones).
   Este archivo solo agrega lo que los une:
     1. Migas: el asterisco de Andamio + "Shows" en la barra superior.
     2. La banda final: "También de Andamio" (tarjeta del otro show, igual
        a la de la landing), la línea de contratación y la franja de colores.
   Voz de la casa = la de la landing: Bebas Neue + Outfit.
   Todo bajo el prefijo andf- para no chocar con ningún show ni con WordPress.
   ========================================================================== */

.andf-familia, .andf-migas {
  --andf-ink: #090909;
  --andf-text: #ece8e1;
  --andf-muted: rgba(236,232,225,.68);
  --andf-dim: rgba(236,232,225,.42);
  --andf-line: rgba(236,232,225,.12);
  --andf-gold: #ffcb31; --andf-gold-soft: #ffe7a3;
  --andf-rosa: #ee3f60; --andf-teal: #38ba9b; --andf-cafe: #a68b77; --andf-azul: #253e57;
  --andf-foam: #b3fcfa; --andf-deep: #05181f;
  --andf-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --andf-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.andf-familia *, .andf-familia *::before, .andf-familia *::after,
.andf-migas *, .andf-migas *::before, .andf-migas *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- 1. Migas en la barra superior ---------- */
.andf-migas {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  color: inherit; text-decoration: none; line-height: 1;
}
.andf-ast { width: 1.45rem; height: 1.45rem; flex: none; display: block; transition: transform .6s cubic-bezier(.34,1.45,.64,1); }
.andf-migas:hover .andf-ast, .andf-migas:focus-visible .andf-ast { transform: rotate(72deg); }
.andf-migas-txt { font: 400 1.22rem/1 var(--andf-display); letter-spacing: .06em; padding-top: .12em; }
.andf-sep { display: inline-block; width: 1px; height: 1.15rem; background: currentColor; opacity: .32; transform: rotate(18deg); margin: 0 .7rem 0 .55rem; flex: none; }
.andf-migas:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* ---------- 2. Banda final ---------- */
.andf-familia {
  background: var(--andf-ink); color: var(--andf-text);
  font: 300 1.0625rem/1.55 var(--andf-body); -webkit-font-smoothing: antialiased;
  padding-top: clamp(3.5rem, 8vw, 5.5rem);
}
.andf-familia a { color: inherit; }
.andf-familia :focus-visible { outline: 2px solid var(--andf-gold); outline-offset: 3px; border-radius: 6px; }
/* Mismo ancho de contenido que los sitios de cada show (74rem + márgenes) */
.andf-wrap { max-width: 74rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }

.andf-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem); }
.andf-h { font: 400 clamp(2.6rem, 7vw, 4.6rem)/.86 var(--andf-display); letter-spacing: .01em; }
.andf-todos { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .98rem; color: var(--andf-muted) !important; text-decoration: none; border-bottom: 1px solid var(--andf-line); padding-bottom: .15rem; transition: color .2s, border-color .2s, gap .25s; }
.andf-todos:hover { color: var(--andf-text) !important; border-color: var(--andf-text); gap: .75rem; }
.andf-todos svg { width: 1rem; height: 1rem; }

/* La tarjeta: misma anatomía que los portales de la landing */
.andf-portal {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 6px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 32rem; text-decoration: none;
}
.andf-body { position: relative; z-index: 5; padding: clamp(1.4rem, 3vw, 2.75rem); }
.andf-kind { font-size: .95rem; color: var(--andf-muted); margin-bottom: .55rem; }
.andf-titulo { font: 400 clamp(3rem, 8.5vw, 5.6rem)/.86 var(--andf-display); letter-spacing: .01em; }
.andf-hook { margin-top: .9rem; max-width: 34ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.4; }
.andf-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.1rem; }
.andf-facts li { font-size: .86rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(236,232,225,.08); color: var(--andf-muted); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.andf-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; margin-top: 1.5rem; padding: .75rem 1.4rem; border-radius: 999px; font: 500 1rem/1 var(--andf-body); transition: background .2s, gap .25s; }
.andf-btn svg { width: 18px; height: 18px; }
.andf-portal:hover .andf-btn, .andf-portal:focus-visible .andf-btn { gap: .9rem; }

/* — Lights Will Guide You — */
.andf-portal--lwgy { background: linear-gradient(180deg, #0b3440 0%, var(--andf-deep) 62%, #020a0d 100%); }
.andf-portal--lwgy .andf-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(.75) contrast(1.05); opacity: .55; mix-blend-mode: luminosity; }
.andf-portal--lwgy::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,24,31,.15) 0%, rgba(5,24,31,.35) 40%, rgba(3,14,18,.92) 80%, #020a0d 100%), radial-gradient(120% 70% at 50% -10%, rgba(56,186,155,.45), transparent 60%); }
.andf-rayos { position: absolute; inset: -10% -20% 30% -20%; z-index: 2; pointer-events: none; }
.andf-rayos span { position: absolute; top: 0; height: 120%; background: linear-gradient(180deg, rgba(179,252,250,.42), rgba(179,252,250,0) 78%); filter: blur(14px); transform-origin: top center; animation: andf-mece 9s ease-in-out infinite alternate; }
.andf-rayos span:nth-child(1) { left: 18%; width: 9%; transform: rotate(16deg); }
.andf-rayos span:nth-child(2) { left: 34%; width: 14%; transform: rotate(9deg); animation-duration: 11s; opacity: .7; }
.andf-rayos span:nth-child(3) { left: 52%; width: 18%; transform: rotate(3deg); animation-duration: 13s; }
.andf-rayos span:nth-child(4) { left: 70%; width: 8%; transform: rotate(-6deg); animation-duration: 10s; opacity: .6; }
@keyframes andf-mece { to { translate: 4% 0; opacity: .55; } }
.andf-portal--lwgy .andf-titulo { color: #f2fffe; text-shadow: 0 0 40px rgba(179,252,250,.35); }
.andf-portal--lwgy .andf-btn { background: var(--andf-foam); color: #04262c; }
.andf-portal--lwgy:hover .andf-btn { background: #fff; }

/* — STILL STANDING — */
.andf-portal--ss { background: radial-gradient(90% 60% at 50% 38%, #1a1406 0%, #0c0a06 45%, #050505 100%); }
.andf-escena { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 0 4.5rem; pointer-events: none; }
.andf-puerta { position: relative; width: clamp(120px, 34vw, 190px); aspect-ratio: 5/9; background: linear-gradient(180deg, #3a2a06, #120d03); }
.andf-puerta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.andf-puerta::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--andf-gold); box-shadow: 0 0 18px rgba(255,203,49,.55), 0 0 70px rgba(255,203,49,.35), inset 0 0 26px rgba(255,203,49,.35); transition: box-shadow .5s; }
.andf-puerta::after { content: ""; position: absolute; left: 50%; top: 100%; width: 340%; height: 95%; transform: translateX(-50%); clip-path: polygon(35.3% 0, 64.7% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,203,49,.38), rgba(255,203,49,.06) 55%, transparent 85%); }
.andf-portal--ss:hover .andf-puerta::before { box-shadow: 0 0 22px rgba(255,203,49,.7), 0 0 110px rgba(255,203,49,.45), inset 0 0 34px rgba(255,203,49,.45); }
.andf-portal--ss::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 45%, rgba(5,5,5,.75) 72%, #050505 100%); pointer-events: none; }
.andf-portal--ss .andf-titulo { color: #fff8e4; text-shadow: 0 0 40px rgba(255,203,49,.28); }
.andf-portal--ss .andf-btn { background: var(--andf-gold); color: #1a1300; }
.andf-portal--ss:hover .andf-btn { background: var(--andf-gold-soft); }


/* La esfera de luz de Lights Will Guide You (equivale a la puerta de STILL STANDING) */
.andf-portal--lwgy .andf-foto { opacity: .32; }
.andf-portal--lwgy::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 45%, rgba(2,10,13,.7) 72%, #020a0d 100%); pointer-events: none; }
.andf-esfera { position: relative; width: clamp(140px, 40vw, 220px); aspect-ratio: 1; border-radius: 50%; }
.andf-esfera img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.andf-esfera::before { content: ""; position: absolute; inset: -3px; z-index: 2; border-radius: 50%; border: 2px solid var(--andf-foam); box-shadow: 0 0 18px rgba(179,252,250,.55), 0 0 70px rgba(179,252,250,.32), inset 0 0 30px rgba(179,252,250,.35); transition: box-shadow .5s; }
.andf-esfera::after { content: ""; position: absolute; left: 50%; top: calc(100% + 10px); width: 120%; height: 70%; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(179,252,250,.5) 0 2px, transparent 2px 8px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0, #000 0, rgba(0,0,0,.5) 45%, transparent 100%); mask-image: radial-gradient(50% 100% at 50% 0, #000 0, rgba(0,0,0,.5) 45%, transparent 100%);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); opacity: .85; animation: andf-brilla 3.4s ease-in-out infinite alternate; }
.andf-portal--lwgy:hover .andf-esfera::before { box-shadow: 0 0 24px rgba(179,252,250,.75), 0 0 110px rgba(179,252,250,.45), inset 0 0 38px rgba(179,252,250,.45); }
@keyframes andf-brilla { to { background-position: 0 8px; } }
@media (min-width: 900px) {
  .andf-esfera { width: auto; height: 54%; }
  .andf-portal--lwgy::after { background: linear-gradient(90deg, #020a0d 0%, rgba(2,10,13,.75) 38%, transparent 62%); }
}
@media (prefers-reduced-motion: reduce) { .andf-esfera::after { animation: none; } }

/* Escritorio: la tarjeta se vuelve horizontal (texto a la izquierda) */
@media (min-width: 900px) {
  .andf-portal { min-height: 26rem; }
  .andf-portal .andf-body { max-width: 56%; }
  .andf-escena { position: absolute; inset: 0 0 0 auto; width: 48%; height: 100%; padding: 0; }
  .andf-puerta { width: auto; height: 64%; }
  .andf-portal--ss::after { background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.8) 38%, transparent 62%); }
}

/* Pie: la misma línea de la landing */
.andf-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 1.4rem; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); font-size: .92rem; color: var(--andf-dim); }
.andf-pie a { color: var(--andf-muted); text-decoration: none; border-bottom: 1px solid var(--andf-line); }
.andf-pie a:hover { color: var(--andf-text); border-color: var(--andf-text); }
.andf-franja { display: flex; height: 4px; }
.andf-franja span { flex: 1; }
.andf-franja span:nth-child(1) { background: var(--andf-gold); }
.andf-franja span:nth-child(2) { background: var(--andf-rosa); }
.andf-franja span:nth-child(3) { background: var(--andf-teal); }
.andf-franja span:nth-child(4) { background: var(--andf-cafe); }
.andf-franja span:nth-child(5) { background: var(--andf-azul); }

@media (prefers-reduced-motion: reduce) {
  .andf-rayos span, .andf-ast { animation: none !important; transition: none !important; }
}

/* Contenedor de migas + marca del show dentro de la barra superior de cada sitio */
.andf-izq { display: flex; align-items: center; min-width: 0; }

/* ==========================================================================
   v4 · Banda final SUTIL
   "También de Andamio" era casi del tamaño de una sección y competía con el
   cierre de cada show (su aplauso final). Ahora es una tarjeta baja y
   horizontal: el símbolo del otro show en miniatura, el título en una línea
   y una invitación discreta. Invita sin robar el escenario.
   ========================================================================== */
.andf-familia { padding-top: clamp(2rem, 5vw, 3rem); font-size: 1rem; }
.andf-cab { align-items: center; margin-bottom: .8rem; }
.andf-h { font: 500 .74rem/1 var(--andf-body); letter-spacing: .18em; text-transform: uppercase; color: var(--andf-dim); }
.andf-todos { font-size: .85rem; }

.andf-portal {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(.9rem, 3vw, 1.4rem);
  min-height: 0; padding: .85rem clamp(1rem, 3vw, 1.5rem) .85rem .85rem;
  border-radius: 14px; border: 1px solid var(--andf-line);
  transition: border-color .3s, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.andf-portal:hover, .andf-portal:focus-visible { border-color: rgba(236,232,225,.3); transform: translateY(-2px); }
.andf-rayos, .andf-facts, .andf-puerta::after, .andf-esfera::after { display: none; }
.andf-portal--ss::after, .andf-portal--lwgy::after { background: none; }
.andf-portal--lwgy .andf-foto { opacity: .16; }

.andf-escena { position: relative; inset: auto; flex: none; width: 4.25rem; height: 4.25rem; padding: 0; display: grid; place-items: center; }
.andf-puerta { width: auto; height: 100%; }
.andf-puerta::before { box-shadow: 0 0 10px rgba(255,203,49,.5), 0 0 26px rgba(255,203,49,.25), inset 0 0 10px rgba(255,203,49,.3); }
.andf-esfera { width: 4.25rem; height: 4.25rem; }
.andf-esfera::before { box-shadow: 0 0 10px rgba(179,252,250,.5), 0 0 26px rgba(179,252,250,.25), inset 0 0 12px rgba(179,252,250,.3); }

.andf-body { flex: 1; min-width: 0; padding: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: center; }
.andf-body > * { grid-column: 1; }
.andf-kind { font-size: .76rem; margin-bottom: .2rem; }
.andf-titulo { font-size: clamp(1.55rem, 4vw, 2.05rem); line-height: .95; }
.andf-titulo br { display: none; }
.andf-hook { margin-top: .3rem; max-width: 56ch; font-size: .88rem; line-height: 1.4; color: var(--andf-muted); }
.andf-btn { grid-column: 2; grid-row: 1 / span 3; margin: 0; min-height: 40px; padding: .55rem 1.05rem; font-size: .88rem; }
.andf-pie { font-size: .85rem; padding-top: 1.1rem; }

@media (max-width: 599px) {
  .andf-btn { display: none; }
  .andf-hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 900px) {
  .andf-portal { min-height: 0; }
  .andf-portal .andf-body { max-width: none; }
  .andf-escena { position: relative; inset: auto; width: 4.25rem; height: 4.25rem; padding: 0; }
  .andf-puerta { width: auto; height: 100%; }
  .andf-esfera { width: 4.25rem; height: 4.25rem; }
  .andf-portal--ss::after, .andf-portal--lwgy::after { background: none; }
}