/* ==========================================================================
   El Camino DT — LOS DOS AVISOS DE LA SALA
   --------------------------------------------------------------------------
   La escena que hace que la rueda de prensa VENGA en vez de esperar, y la que
   la cierra. La primera vive en el portal, que es donde el DT vuelve después
   de cada fecha; la segunda, en las dos puertas por las que se contesta.

   LAS DOS COMPARTEN LA CAJA A PROPÓSITO y por eso comparten hoja. Son los dos
   extremos de la misma escena —te llaman, contestás, se terminó— y si la de
   salida fuera más chica o más liviana que la de entrada, el DT leería que lo
   que dijo importa menos que la pregunta. El modificador `--cierre` cambia lo
   que tiene que cambiar y nada más.

   NO SE PARECE A LA VUELTA OLÍMPICA Y NO TIENE QUE PARECERSE. Aquélla es una
   celebración: banda de color del club, escudo grande, cifras. Ésta es una
   citación — la prensa te llama y hay que contestar. Por eso es más angosta,
   no lleva color de club y lo único teñido es el sello del medio que convoca:
   el que te está llamando.

   Y LOS DOS BOTONES TIENEN EL MISMO PESO VISUAL SALVO UNO. «Ir a la sala» es
   la acción plena y «No voy» es la callada, porque no ir es una decisión
   legítima pero no es la que el juego propone. Las dos cobran algo; ninguna es
   un escape.
   ========================================================================== */
.convoca {
  /* 760, MÁS ANCHA QUE LA VUELTA OLÍMPICA. El primer intento fue 560 —«es un
     texto y dos botones, no una vitrina»— y ese razonamiento estaba mirando el
     contenido en vez de mirar el PESO. Alberto lo corrigió el 17/9/2026: «demos
     preponderancia a estas notificaciones».

     Y tiene razón de sistema: la vuelta olímpica ocupa 680 y pasa una vez por
     título; la convocatoria pasa ocho o diez veces por temporada y es la única
     escena del juego que te PIDE ALGO. Si la que pide es más chica que la que
     celebra, el juego está diciendo que decidir importa menos que festejar. */
  width: min(760px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--sombra-modal);
}

.convoca::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   LA BANDA: quién te llama
   -------------------------------------------------------------------------- */
/* CENTRADA, COMO LA ESCENA DE LA SALA. Y esto es una corrección: los dos
   avisos nacieron con la banda y el cuerpo alineados a la izquierda mientras
   la sala centra exactamente la misma escena —los medios, el asunto, quién
   firma, el cuerpo—. Puestos uno al lado del otro, la sala se lee como una
   escena y el aviso como un formulario, que es justo lo que estos avisos
   vinieron a dejar de ser.

   El sello va arriba y el texto abajo, que además es lo que ya hacía el
   teléfono: la maqueta angosta tenía razón antes que la ancha. */
.convoca__banda {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--line-hairline);
}

/* El sello va teñido con la marca del medio —borde y fondo, nunca la tinta:
   ver la regla en `prensa.css`— y es lo ÚNICO con color de la escena. */
.convoca__sello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 72px;
  height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid hsl(var(--marca) / 0.55);
  background: hsl(var(--marca) / 0.12);
  color: var(--text-primary);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}
.convoca__logo { height: 22px; width: calc(22px * var(--aspecto, 4)); max-width: 108px; }

.convoca__id { display: grid; gap: 2px; min-width: 0; }

.convoca__eco {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.convoca__titulo {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.convoca__quien { font-size: var(--fs-sm); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   EL CUERPO Y EL PIE
   -------------------------------------------------------------------------- */
/* El cuerpo es el MISMO HTML que la sala dibuja —lo escribe el tipo de rueda
   en `despacho.js`— así que viene en `<p>`. No se le da estilo propio: si la
   pregunta se lee distinto en el aviso y en la sala, son dos preguntas. */
/* EL CUERPO SE LEE ALINEADO A LA IZQUIERDA, y esto es una corrección de
   Alberto del 22/9/2026 —«alineemos el texto del modal de conferencia de
   prensa»—. Iba centrado, heredado de la banda, y centrado funciona para un
   rótulo de tres palabras y deja de funcionar para lo que hay acá: tres o
   cuatro frases de largos distintos, cada una con su propio margen izquierdo.
   El ojo que termina un renglón vuelve a un sitio que se movió, y una escena
   que quería pesar se lee como una placa de redes.

   LA BANDA SIGUE CENTRADA y no es una inconsistencia: ahí hay un sello, un
   eco y un titular —una identidad, que se mira— y acá hay prosa, que se lee.
   Es el mismo corte que hacen los otros diálogos del juego: `preguntar()`
   centra su cabecera y alinea su cuerpo a la izquierda.

   Lo mismo vale para el aviso de cierre, que comparte esta clase: la bajada, tu
   remate entre comillas y el renglón del vestuario arrancan todos del mismo
   borde. */
/* Y LA COLUMNA DE LECTURA NO SE VA A LOS 760. Un párrafo a todo el ancho del
   diálogo obliga al ojo a buscar dónde empieza el renglón siguiente; es el
   mismo tope que la sala le pone a su escena.

   EL TOPE VA EN LA CAJA Y NO EN CADA HIJO, y ése es el cambio que hizo falta
   para que alinear sirviera de algo. Estaba en `> *`, o sea que cada renglón
   resolvía SU propio `56ch` con SU tipografía, y `ch` es el ancho del cero de
   la letra que hereda: el cuerpo va en `--fs-md` y da 566 px, y la línea del
   vestuario va en `--fs-sm` y da 533. Con todo centrado eso no se veía —dos
   cajas de distinto ancho centradas comparten el centro— y alineando se vio de
   una: el renglón del vestuario arrancaba 16 px a la derecha de los otros tres.
   Medido en el aviso de cierre el 22/9/2026, antes de subirlo.

   Puesto acá arriba el `ch` se resuelve UNA vez, con la letra del cuerpo, y los
   cuatro renglones nacen del mismo borde. La columna sigue centrada en el
   diálogo —`margin-inline: auto`— así que el bloque no desequilibra la banda ni
   el pie, que son simétricos; lo que se alinea es el texto adentro de ella. */
.convoca__cuerpo {
  /* `fit-content` Y NO UN ANCHO FIJO, y es la corrección del 22/9/2026: «esto
     no está centrado». La caja LO ESTABA —`margin-inline: auto` sobre un tope
     de 56ch— y aun así se veía corrida, porque centrar la caja no centra el
     texto cuando el texto no llena la caja. Medido sobre el aviso de cierre: la
     columna pedía 834 px y el renglón más largo escribía 626, así que quedaban
     138 px de hueco a la izquierda y 306 a la derecha. El ojo no mide cajas,
     mide tinta, y la tinta estaba a la izquierda.

     Con `fit-content` la columna se encoge hasta el renglón más largo y ese
     bloque se centra: los renglones siguen arrancando todos del mismo borde
     —que es lo que se pidió al alinearlos— y el conjunto queda con el mismo
     aire de los dos lados. El tope de 56ch se queda de techo, para el cuerpo
     largo que sí lo llena; en el teléfono no llega a morder, porque lo que
     manda es el ancho que hay. */
  width: fit-content;
  max-width: calc(56ch + var(--sp-7) * 2);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-align: left;
}
.convoca__cuerpo > * { margin-inline: 0; }
.convoca__cuerpo p { margin: 0 0 var(--sp-4); }
.convoca__cuerpo p:last-child { margin-bottom: 0; }

/* CENTRADOS Y NO A LA DERECHA. Un pie alineado a la derecha es el de un
   formulario —aceptar y cancelar, donde una de las dos es el camino de
   siempre—. Acá las dos son decisiones del DT y ninguna es el trámite, así que
   ninguna se arrincona. Y anchos: un botón que se lee de lejos es la mitad de
   lo que hace que esta escena pese. */
.convoca__pie {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-7);
}
.convoca__pie .action { min-width: 180px; justify-content: center; }

/* LO QUE CUESTA NO IR, DEBAJO DE LOS BOTONES Y NO ARRIBA. Arriba se lee como
   parte de la pregunta; abajo se lee como lo que es: la letra chica de la
   decisión que se acaba de ofrecer. */
.convoca__costo {
  margin: 0;
  padding: var(--sp-5) var(--sp-7) var(--sp-7);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 560px) {
  /* Y LA BANDA SE APILA, que es lo que faltaba. Medido a 375 px jugando el
     20/9/2026: el diálogo mide 335 y el sello se lleva **121**, o sea el 36 %
     del ancho, dejando 154 para el titular. Con eso «Rueda de prensa: la
     tercera derrota seguida» caía en CINCO renglones y el eco de arriba en
     TRES: una citación que en el escritorio se lee de un golpe, en el teléfono
     era una columna de palabras sueltas al lado de un logo.

     El sello no se achica —es la marca del medio que te llama y a 44 px de
     alto ya está en su mínimo— así que lo que cambia es la dirección: el
     sello arriba, el texto abajo con los 335 px enteros. Es la misma
     corrección que el pie de acá al lado, por el mismo motivo y en la misma
     media query. */
  .convoca__banda {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* En el teléfono los botones van a lo ancho y en columna: dos acciones de
     peso distinto, una encima de la otra, no compitiendo por 300 px. */
  .convoca__pie { flex-direction: column-reverse; }
  .convoca__pie .action { width: 100%; }
  .convoca__pie .action { min-width: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .convoca[open] { animation: convoca-entra 260ms var(--ease); }
  @keyframes convoca-entra {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   LA INVITACIÓN A SEGUIRNOS (`seguinos.js`)
   --------------------------------------------------------------------------
   ES UN FESTEJO Y NO UN AVISO. La primera versión vestía la escena de la
   convocatoria —banda gris, texto, dos botones del acento— y Alberto la pidió
   con «más presencia, más personalidad, más animado» el 29/9/2026. Lo que
   cambia es de quién es el color: arriba manda el del CLUB (`--club-luz`, el
   mismo que usa la portada), con el marcador del partido que se acaba de
   ganar, rayos y papelitos; abajo, cada red con su propia marca. El acento del
   juego queda para el sello de «¡Victoria!» y la mitad de los papelitos.

   TODO LO QUE SE MUEVE SE MUEVE UNA VEZ, salvo los rayos y el brillo de los
   botones, que son lentos. Y con `prefers-reduced-motion` no se mueve nada:
   la escena se lee igual quieta.

   GRANDE, COMO LA CONVOCATORIA. Nació de 480 y Alberto pidió «agrandemos
   esto» el 8/10/2026: un festejo chico en el medio de la sala se leía como
   un aviso más. Va a 680 —más que la vuelta olímpica no, es un festejo de un
   partido— con escudos, marcador y título que se ven desde lejos. */
.convoca--seguinos {
  width: min(680px, calc(100vw - 32px));
  border-color: color-mix(in srgb, var(--club-luz) 45%, var(--line-strong));
  box-shadow: var(--sombra-modal), 0 0 80px -20px color-mix(in srgb, var(--club-luz) 55%, transparent);
}

.seguinos__escena {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
  padding: 40px var(--sp-7) 36px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--club-luz) 65%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--club-luz) 24%, var(--bg-panel)), var(--bg-panel));
  border-bottom: 1px solid color-mix(in srgb, var(--club-luz) 30%, var(--line-hairline));
}
.seguinos__rayos {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 58%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--club-luz) 32%, transparent) 0deg 7deg,
    transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%);
  mask-image: radial-gradient(circle, #000 0, transparent 62%);
  opacity: 0.8;
}
/* Con `autofocus` en la escena el foco no cae sobre el botón de X al abrir:
   se leía como si X estuviera elegida de antemano. */
.seguinos__escena:focus { outline: none; }
.seguinos__papelitos { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.seguinos__papelitos i {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: 7px;
  height: 12px;
  border-radius: 1px;
  background: var(--club-luz);
  opacity: 0;
}
.seguinos__papelitos i[data-tono='acento'] { background: var(--accent); width: 6px; height: 9px; }

.seguinos__sello {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}

.seguinos__marcador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-5);
  width: 100%;
}
.seguinos__marcador > .seguinos__escudo.es-mio { grid-column: 2; }
.seguinos__lado {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  min-width: 0;
  opacity: 0.6;
}
.seguinos__lado b {
  max-width: 100%;
  font-size: var(--fs-lg, 20px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seguinos__lado.es-mio { opacity: 1; }
.seguinos__lado.es-mio b { font-weight: 800; }
.seguinos__escudo { width: 72px; height: 72px; }
.seguinos__lado.es-mio .seguinos__escudo,
.seguinos__escudo.es-mio {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--club-luz) 55%, transparent));
}
.seguinos__goles {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 84px;
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.seguinos__goles i { font-style: normal; color: var(--text-muted); font-weight: 400; }

.seguinos__texto {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-7) 48px var(--sp-6);
  text-align: center;
}
.seguinos__titulo {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  line-height: 1.05;
  text-transform: uppercase;
}
.seguinos__bajada {
  margin: 0;
  font-size: var(--fs-md, 17px);
  color: var(--text-secondary);
  text-wrap: balance;
}

.seguinos__redes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  padding: var(--sp-3) 48px 0;
}
.seguinos__red {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: 18px 22px;
  border-radius: var(--r-md);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.seguinos__red[data-red='x'] {
  background: #000;
  border: 1px solid #3a3a3a;
}
.seguinos__red[data-red='instagram'] {
  background: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%);
  border: 1px solid transparent;
}
/* El brillo que cruza: el mismo gesto de barrido de la portada, pero solo. */
.seguinos__red::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.seguinos__glifo { flex: none; }
.seguinos__nombre { display: grid; min-width: 0; line-height: 1.2; text-align: center; }
.seguinos__nombre b { font-size: var(--fs-md, 17px); font-weight: 700; white-space: nowrap; }
.seguinos__nombre small { font-size: var(--fs-xs); opacity: 0.8; }
.seguinos__red:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .seguinos__red:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.7); }
}

.seguinos__pie { margin: 0; padding: var(--sp-5) 48px var(--sp-7); text-align: center; }
.seguinos__no {
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.seguinos__no:hover { color: var(--text-primary); }

@media (max-width: 560px) {
  .seguinos__escena { padding: 28px var(--sp-5) 26px; gap: var(--sp-5); }
  .seguinos__redes { grid-template-columns: 1fr; padding-inline: var(--sp-6); }
  .seguinos__texto, .seguinos__pie { padding-inline: var(--sp-6); }
  .seguinos__escudo { width: 52px; height: 52px; }
  .seguinos__lado.es-mio .seguinos__escudo,
  .seguinos__escudo.es-mio { width: 84px; height: 84px; }
  .seguinos__lado b { font-size: var(--fs-sm); }
  .seguinos__goles { font-size: 56px; }
  .seguinos__titulo { font-size: 32px; }
  .seguinos__red { padding: 14px 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .convoca--seguinos[open] { animation: seguinos-entra 520ms var(--ease-entrada); }
  .convoca--seguinos[open] .seguinos__rayos { animation: seguinos-gira 40s linear infinite; }
  .convoca--seguinos[open] .seguinos__papelitos i {
    animation: seguinos-cae 2.6s cubic-bezier(0.25, 0.6, 0.45, 1) var(--dem) both;
  }
  .convoca--seguinos[open] .seguinos__sello { animation: seguinos-sello 600ms var(--ease-entrada) 250ms both; }
  .convoca--seguinos[open] .es-mio .seguinos__escudo,
  .convoca--seguinos[open] .seguinos__escudo.es-mio {
    animation: seguinos-rebota 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  }
  .convoca--seguinos[open] .seguinos__goles b { animation: seguinos-sube 500ms var(--ease-entrada) both; }
  .convoca--seguinos[open] .seguinos__goles b:first-child { animation-delay: 380ms; }
  .convoca--seguinos[open] .seguinos__goles b:last-child { animation-delay: 520ms; }
  .convoca--seguinos[open] .seguinos__texto,
  .convoca--seguinos[open] .seguinos__red,
  .convoca--seguinos[open] .seguinos__pie { animation: seguinos-sube 520ms var(--ease-entrada) both; }
  .convoca--seguinos[open] .seguinos__texto { animation-delay: 450ms; }
  .convoca--seguinos[open] .seguinos__red:nth-child(1) { animation-delay: 600ms; }
  .convoca--seguinos[open] .seguinos__red:nth-child(2) { animation-delay: 680ms; }
  .convoca--seguinos[open] .seguinos__pie { animation-delay: 800ms; }
  .convoca--seguinos[open] .seguinos__red::after { animation: seguinos-brillo 3.2s ease-in-out 1.4s infinite; }
  .convoca--seguinos[open] .seguinos__red:nth-child(2)::after { animation-delay: 1.7s; }

  @keyframes seguinos-entra {
    from { opacity: 0; transform: translateY(24px) scale(0.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes seguinos-gira { to { transform: rotate(360deg); } }
  @keyframes seguinos-cae {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(260px) rotate(var(--giro)); }
  }
  @keyframes seguinos-sello {
    0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    70% { transform: scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes seguinos-rebota {
    0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes seguinos-sube {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes seguinos-brillo {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }
}