/* ==========================================================
   NOTA SOBRE LOS ":hover" DE ESTE ARCHIVO
   ----------------------------------------------------------
   Van envueltos en "@media (hover:hover)". En un movil no existe
   pasar por encima: el navegador finge un hover al tocar y lo
   deja PUESTO hasta que toques otra cosa. Resultado: pulsas un
   boton, te lleva a otro sitio, vuelves y el boton sigue
   iluminado como si tuvieras el dedo encima.

   La envoltura va rule a rule y en su sitio, no agrupada al
   final: una media query no cambia la especificidad ni el orden,
   asi que la cascada queda exactamente igual que antes en un
   ordenador, y en el movil esas reglas sencillamente no existen.
   ========================================================== */

/* ==========================================================
   LA TARJETA DEL PRÓXIMO EVENTO
   ----------------------------------------------------------
   Una ficha pequeña anclada abajo a la izquierda que aparece
   cuando el cuadro del vídeo ya ha terminado y se retira al
   llegar a "Próximamente", donde el evento ya se ve entero.

   La forma es la del panel de referencia: un marco con una
   MUESCA en la esquina de arriba, y la etiqueta metida dentro de
   ese hueco. La muesca no está dibujada: es la propia etiqueta,
   pintada del color de la página, la que tapa ese trozo de filo.
   Por eso su fondo es "--fondo" y no un negro fijo — en la
   portada ese color se mueve con la rampa, y el guion escribe la
   variable en esta tarjeta igual que en la barra y el menú. Con
   un negro fijo, la muesca dejaría de encajar en cuanto el fondo
   se aclarase.
   ========================================================== */
.evento{
  position:fixed;
  left:clamp(14px, 4vw, 30px);
  bottom:calc(clamp(14px, 4vw, 30px) + env(safe-area-inset-bottom, 0px));
  z-index:120;
  pointer-events:none;              /* sólo el botón recibe toques */
}

/* ENTRADA Y SALIDA, EL MISMO GESTO.
   La ficha se despliega hacia abajo desde la etiqueta y se
   repliega por el mismo sitio: no aparece, se ABRE. Es un
   "clip-path", no una opacidad, para que el gesto se lea como
   que la ficha sale de la etiqueta y no como que alguien sube el
   brillo. La etiqueta se queda quieta en los dos casos, que es
   lo que hace que parezca su origen.

   Se anima "clip-path" y "transform" y nada más: las dos van por
   la tarjeta gráfica y ninguna obliga a recalcular la página. */
.evento__ficha{
  position:relative;
  display:block;
  width:clamp(104px, 26vw, 128px);
  color:var(--texto, #f6f4ef);
  text-align:left;
  /* NO RECIBE TOQUES MIENTRAS NO SE VE. AQUÍ SE BLOQUEABAN LOS
     BOTONES DEL PIE.
     ----------------------------------------------------------
     Esto ponía "pointer-events:auto" y punto. Fuera de su tramo la
     ficha se queda en "opacity:0", pero una cosa invisible con
     pointer-events sigue siendo un blanco de clic: seguía ahí,
     anclada abajo a la izquierda —es "position:fixed"—, tapando
     unos 130 px de ancho encima del pie durante TODO el resto de la
     página. Se pulsaba el botón de debajo y el clic se lo comía
     ella, sin hacer nada, porque sus zonas sí están recortadas.

     Un elemento invisible que intercepta clics es el peor tipo de
     fallo: no se ve nada raro, simplemente el botón "no va".

     Lo correcto es que reciba toques exactamente cuando se ve, así
     que el permiso viaja con "es-visible", que es la misma clase que
     manda en la opacidad y en el despliegue. Una sola cosa que
     recordar en vez de dos que se pueden desincronizar. */
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;

  transform:translateY(-6px);
  opacity:0;
  transition:transform .52s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             opacity .26s linear;
}
/* EL RECORTE VA EN EL MARCO, NO EN LA FICHA. AQUÍ SE PERDÍA LA
   ETIQUETA.
   ----------------------------------------------------------
   El despliegue es un "clip-path: inset()", y un inset recorta
   contra la caja del elemento. La etiqueta está colocada MEDIA
   LÍNEA POR ENCIMA de esa caja —tiene que estarlo, para caer
   dentro de la muesca del filo—, así que el recorte se la comía:
   medido, cinco píxeles cortados por arriba. Eso es lo que se
   veía como "no se lee".

   Bajando el recorte al marco, la etiqueta queda fuera de lo que
   se recorta y el gesto sigue siendo el mismo: lo que se
   despliega es la ficha, y la etiqueta es de donde sale. */
.evento__marco{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .52s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.evento.es-visible .evento__ficha{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.evento.es-visible .evento__marco{ clip-path:inset(0 0 0 0) }

/* LA MUESCA SE HACE ROMPIENDO EL FILO, NO TAPÁNDOLO.
   ----------------------------------------------------------
   El primer intento pintaba la etiqueta del color de la página
   para que borrase ese trozo de borde. No vale: el fondo de la
   portada no es un color plano, es una rampa con manchas, así
   que un color liso encima se nota como un parche —se veía un
   rectángulo negro sobre un gris—.

   Así que el filo se corta de verdad: el marco no lleva borde
   arriba y ese borde lo dibuja un pseudo-elemento que EMPIEZA
   después de la etiqueta. Donde está la etiqueta no hay línea
   que tapar, simplemente no hay línea. Y así da igual de qué
   color sea el fondo. */
.evento__etiqueta{
  position:absolute;
  top:-.52em; left:9px;
  z-index:2;
  padding:0 .4em 0 0;
  font-family:var(--sans, inherit);
  /* LEGIBLE, QUE PARA ESO ESTÁ.
     Iba en el gris secundario y a 0,53 rem: sobre el vídeo no se
     leía "Próximo evento", se leía una mancha. Sube al color del
     texto y a un cuerpo con el que se distingan las letras. */
  /* Y QUE QUEPA. A 0,58 rem con 0,1 em de interletrado medía 101 px
     en una ficha de 92: se salía nueve píxeles, y la muesca que se
     calcula a partir de ella (110 px) caía fuera del marco, así que
     el filo de arriba no llegaba a dibujarse nunca. Ajustada al
     ancho real de la ficha. */
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--texto, #f6f4ef);
  white-space:nowrap;
  /* Sobre un vídeo el contraste cambia fotograma a fotograma; una
     sombra corta lo sostiene sin que se note. */
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* ==========================================================
   EN DIRECTO
   ----------------------------------------------------------
   Mientras la quedada está pasando, la etiqueta deja de anunciar y
   pasa a informar: rojo, y un punto que late al lado. El guion es
   quien decide cuándo, a partir de la hora del calendario.

   POR QUÉ LATE EL PUNTO Y NO EL TEXTO.
   Un texto que parpadea se vuelve ilegible: lo estás leyendo justo
   cuando desaparece. El punto es la convención de "esto está en
   marcha ahora" —la misma de cualquier retransmisión— y late sin
   estorbar a la palabra que hay al lado.

   Y late DESPACIO. Por debajo de tres destellos por segundo hay un
   riesgo real para personas con epilepsia fotosensible; este ciclo
   es de 1,6 s, unas ocho veces más lento que ese límite. Además
   nunca llega a apagarse del todo: va de opacidad 1 a 0,25, así que
   es un pulso y no un intermitente.
   ========================================================== */
.evento.es-directo .evento__etiqueta{
  display:inline-flex;
  align-items:center;
  gap:.42em;
  /* Rojo claro, no el rojo puro de un error. Sobre la ficha oscura
     el #ff3b30 vibra y se lee peor; éste da 5,1:1 contra el negro de
     la portada, por encima del 4,5:1 que hace falta. */
  color:#ff6b60;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.evento__punto{
  flex:0 0 auto;
  width:.44em; height:.44em;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 0 currentColor;
  animation:evento-late 1.6s ease-in-out infinite;
}
@keyframes evento-late{
  0%, 100% { opacity:1;   transform:scale(1) }
  50%      { opacity:.25; transform:scale(.82) }
}
/* Quien pide menos movimiento se queda con el rojo y el punto
   quietos: el color ya dice lo que hay que decir, y el latido es lo
   único que sobra. Menos movimiento no es menos información. */
@media (prefers-reduced-motion: reduce){
  .evento__punto{ animation:none; opacity:1 }
}

.evento__marco{
  position:relative;
  display:block;
  padding:11px 8px 8px;
  border:1px solid var(--velo-borde, rgba(255,255,255,.28));
  border-top:0;                       /* lo dibuja el ::before, con el hueco */
  border-radius:14px;
}
.evento__marco::before{
  content:"";
  position:absolute;
  top:0; right:-1px;
  left:var(--muesca, 96px);           /* lo que mide la etiqueta */
  border-top:1px solid var(--velo-borde, rgba(255,255,255,.28));
  border-right:1px solid transparent;
  border-top-right-radius:14px;
  height:14px;
  pointer-events:none;
}
/* Y el trocito de filo que queda a la IZQUIERDA de la etiqueta,
   que es lo que cierra la esquina de arriba. */
.evento__marco::after{
  content:"";
  position:absolute;
  top:0; left:-1px; width:9px;
  border-top:1px solid var(--velo-borde, rgba(255,255,255,.28));
  border-left:1px solid transparent;
  border-top-left-radius:14px;
  height:14px;
  pointer-events:none;
}

/* DOS COMPARTIMENTOS, SEPARADOS POR UNA LÍNEA.
   Arriba el cartel, abajo el sello, y la fecha entre los dos. Es
   la estructura del panel de referencia: no es una tarjeta con
   cosas apiladas, son casillas con su tabique. La línea es lo que
   hace que se lea como una ficha y no como un montón. */
.evento__zona{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.evento__zona--sello{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--velo-borde, rgba(255,255,255,.28));
}
.evento__zona:focus-visible{
  outline:2px solid var(--texto, #f6f4ef);
  outline-offset:3px;
  border-radius:6px;
}

/* LA RESPUESTA AL TOQUE.
   ----------------------------------------------------------
   Hasta ahora la ficha no acusaba el toque: pulsabas y no pasaba
   nada hasta que aparecía el pop, unas décimas después. En ese
   hueco no sabes si te ha leído el dedo o has fallado, y la
   reacción normal es volver a pulsar.

   Se responde en el propio "pointerdown", que llega antes que el
   clic, con dos cosas que no cuestan nada porque van por la
   tarjeta gráfica: la zona se hunde un pelo y se apaga un punto.
   Lo justo para que el dedo note que ha entrado.

   "touch-action: manipulation" quita la espera de 300 ms que
   algunos navegadores dejan por si vas a hacer doble toque; aquí
   no hay doble toque que valer la pena esperar. */
.evento__zona{
  transition:transform .13s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             opacity .13s linear;
  touch-action:manipulation;
}
.evento__zona.es-pulsada{
  transform:scale(.955);
  opacity:.72;
}
/* El marco entero acompaña, muy poco: da la sensación de que lo
   que se pulsa es la ficha y no un trozo suelto de ella. */
.evento__marco{
  transition:clip-path .52s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             transform .13s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.evento__ficha.es-pulsada .evento__marco{ transform:scale(.985) }

@media (prefers-reduced-motion: reduce){
  .evento__zona, .evento__marco{ transition:none }
  .evento__zona.es-pulsada{ transform:none; opacity:.72 }
  .evento__ficha.es-pulsada .evento__marco{ transform:none }
}

/* MENOS ALTO, RECORTANDO EL CARTEL.
   El cartel es 4:5 y a 110 px de ancho se comía 137 de alto, más
   de la mitad de la ficha. Se recorta a cuadrado con
   "object-fit: cover": se ve el mismo trozo de cartel que llama
   la atención —el título y la foto— y la ficha baja de golpe. El
   cartel entero se ve al pulsarlo, que es donde toca. */
.evento__poster{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:cover;
  object-position:center top;
  border-radius:7px;
}

/* EL SELLO: UN PNG BLANCO Y SE ACABÓ.
   ----------------------------------------------------------
   Estuvo pintado con una máscara y "currentColor", que sobre el
   papel era mejor —un solo fichero válido sobre cualquier
   fondo—. En la práctica no: la máscara depende de que el
   navegador la resuelva, y abriendo la página sin servidor no lo
   hacía. El logo desaparecía sin dar ningún error, que es la
   peor manera de fallar.

   Ahora el dibujo ya viene en blanco desde el fichero. Es una
   imagen y nada más: si se ve la imagen, se ve el logo. La ficha
   y "Próximamente" son oscuros los dos, así que el blanco vale
   en los dos sitios.

   (El original en negro se conserva en anzest-em-original.png
   por si algún día hace falta sobre fondo claro.) */
.evento__sello{
  display:block;
  width:56%;
  height:auto;
  margin:0 auto;
}

.evento__fecha{
  display:block;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--velo-borde, rgba(255,255,255,.28));
  font-family:var(--sans, inherit);
  font-size:.52rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  color:var(--texto-2, #8f8f8f);
}

/* Sólo en un ratón: con el dedo no hay "encima", y dejar el estado
   puesto tras el toque es peor que no tenerlo.

   (Aquí quedaba un comentario partido por la mitad, de cuando un
   script reescribió esta hoja: el "/*" de apertura se tragaba una
   copia entera de estas mismas reglas y el comentario cerraba diez
   líneas más abajo. No rompía nada —el navegador se saltaba el
   bloque comido y aplicaba el de abajo, que es idéntico— pero era
   basura que parecía código.) */
@media (hover:hover) and (pointer:fine){
  .evento__ficha:hover .evento__marco{ border-color:var(--texto, #f6f4ef) }
  .evento__ficha:hover .evento__fecha{ color:var(--texto, #f6f4ef) }
  .evento__marco, .evento__fecha{
    transition:border-color .22s var(--ease, cubic-bezier(.22,.61,.36,1)),
               color .22s var(--ease, cubic-bezier(.22,.61,.36,1));
  }
}



/* Quien pide menos movimiento la ve puesta, sin despliegue. */
@media (prefers-reduced-motion: reduce){
  .evento__ficha{ transition:none }
}

/* En una pantalla muy baja —un móvil en horizontal— la ficha se
   comería la mitad del alto. Ahí no sale. */
@media (max-height:460px){
  .evento{ display:none }
}


/* ==========================================================
   EL POSTER DE "PRÓXIMAMENTE", QUE AHORA SE PULSA
   ----------------------------------------------------------
   Era una figura decorativa. Pasa a ser un botón, porque detrás
   hay algo que hacer: apuntarse. Lo único que cambia por fuera
   es que se puede pulsar y que dice a dónde lleva.
   ========================================================== */
.cosa-3d--poster{ cursor:pointer }
.cosa-3d--poster .cosa-3d__boton{
  display:block;
  text-decoration:none;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cosa-3d--poster .evento__sello{
  width:38%;
  margin-top:8px;
}
.cosa-3d--poster .cosa-3d__boton:focus-visible{
  outline:2px solid var(--texto, #f6f4ef);
  outline-offset:8px;
}


/* ==========================================================
   EL POP DE INSCRIPCIÓN
   ----------------------------------------------------------
   Usa la tarjeta de siempre (.waiver-overlay/.waiver), así que
   el fondo, el filo, la sombra y el color del texto ya vienen
   resueltos y no pueden salirse del resto. Aquí sólo va lo que
   este pop tiene y los otros no.
   ========================================================== */
.ev__plazas{
  margin:.2rem 0 1.1rem;
  font-family:var(--sans, inherit);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color:#5b5b5b;
}
/* ==========================================================
   EL CARTEL QUE SE GIRA
   ----------------------------------------------------------
   Detrás va lo que entra en el brunch. Misma idea que el ticket y
   el bono de la portada: un objeto que se toca y se le da la
   vuelta.

   ANCHO DEFINIDO, ALTO DERIVADO. Y ES IMPORTANTE.
   La tentación es poner "max-height:60vh" y dejar que el ancho se
   apañe, como hace .ev__cartel. Con una caja que gira no vale:
   Safari, con "aspect-ratio" y una altura máxima a la vez, calcula
   el ancho por su cuenta y deja la cara y el dorso descuadrados
   —es el mismo fallo que nos costó una tarde en las tarjetas de
   los precios—. Aquí el ancho se calcula A PARTIR del alto que
   queremos, con min() y la proporción real del cartel, y el alto
   sale solo de aspect-ratio. Una sola fuente de verdad.
   ========================================================== */
.ev__flip{
  display:block;
  width:min(100%, calc(58vh * 1080 / 1528));
  aspect-ratio:1080 / 1528;
  margin:0 auto 1.2rem;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  position:relative;
  perspective:1400px;
  -webkit-tap-highlight-color:transparent;
}
.ev__flip-giro{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .62s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.ev__flip.es-vuelto .ev__flip-giro{ transform:rotateY(180deg) }

.ev__flip-cara,
.ev__flip-dorso{
  position:absolute; inset:0;
  /* Sin esto se ven las dos caras a la vez y el giro es un borrón. */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:12px;
  overflow:hidden;
  /* LA SOMBRA VA EN CADA CARA, NO EN EL CONTENEDOR.
     Cualquier filtro —y box-shadow con filter lo es— aplana el 3D
     del elemento que lo lleva, aunque esté escrito preserve-3d. En
     el contenedor mataría el giro entero. */
  box-shadow:0 6px 24px -12px rgba(0,0,0,.4);
}
.ev__flip-dorso{ transform:rotateY(180deg) }
.ev__flip picture, .ev__flip img{ display:block; width:100%; height:100%; object-fit:cover }

/* La pista de que se puede girar. Debajo y pequeña: el cartel ya
   llama la atención solo, esto sólo tiene que avisar de que hay
   algo detrás. Igual que el "pulsa el objeto para darle la vuelta"
   de la portada. */
.ev__flip-pista{
  position:absolute;
  left:0; right:0; bottom:-1.35rem;
  font-family:var(--sans, inherit);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a8a8a;
  text-align:center;
  /* EL LATIDO, PARA QUE SE VEA QUE HAY ALGO DETRÁS.
     Un cartel quieto no invita a tocarlo, y el reverso —lo que
     entra en el brunch— es justo lo que quiere saber quien está
     decidiendo. El aviso late despacio hasta que lo descubren.

     Ciclo de 1,8 s y sin apagarse del todo: va de opacidad 1 a
     0,35. Por encima de tres destellos por segundo hay riesgo real
     para epilepsia fotosensible, y esto es unas diez veces más
     lento. Es un pulso, no un intermitente.

     Sólo opacidad: ni parpadea el color ni se mueve nada, así que
     no obliga a repintar y no distrae del texto de al lado. */
  animation:ev-late 1.8s ease-in-out infinite;
}
@keyframes ev-late{
  0%, 100% { opacity:1 }
  50%      { opacity:.35 }
}
/* Ya lo ha girado una vez: sabe que se puede, y seguir llamando la
   atención pasa de ayudar a molestar. */
.ev__flip.es-descubierto .ev__flip-pista{ animation:none; opacity:1 }
@media (prefers-reduced-motion: reduce){
  .ev__flip-pista{ animation:none }
}
.ev__flip{ margin-bottom:2.4rem }      /* sitio para la pista */

.ev__flip:focus-visible{ outline:2px solid #0a0a0a; outline-offset:6px; border-radius:14px }
@media (hover:hover) and (pointer:fine){
  .ev__flip:hover .ev__flip-pista{ color:#0a0a0a }
}

/* Con menos movimiento no hay volteo: se cambia la cara y ya. El
   giro es lo prescindible; ver el dorso, no. */
@media (prefers-reduced-motion: reduce){
  .ev__flip-giro{ transition:none }
}

/* ==========================================================
   EL BRUNCH — LO QUE CUESTA, ANTES DE PEDIR LOS DATOS
   ----------------------------------------------------------
   Caja aparte y con filo, no un párrafo más: es la única
   información del pop que le va a costar dinero a alguien, y
   tiene que poder leerse de un vistazo y sin buscarla.

   No va en rojo ni con signos de admiración. No es una
   advertencia, es el precio de un brunch — y tratarlo como un
   aviso de peligro haría parecer que escondemos algo.
   ========================================================== */
.ev__pago{
  margin:.2rem 0 1.2rem;
  padding:.95rem 1.05rem;
  border:1px solid #e0dbd1;
  border-radius:14px;
  background:#faf8f4;
}
.ev__pago-tit{
  margin:0;
  font-family:var(--sans, inherit);
  font-size:.92rem;
  font-weight:700;
  line-height:1.4;
  color:#0a0a0a;
}
.ev__pago-txt{
  margin:.5rem 0 0;
  font-family:var(--sans, inherit);
  font-size:.82rem;
  line-height:1.55;
  color:#5b5b5b;
}
.ev__pago-txt b{ color:#0a0a0a; font-weight:700 }

/* El concepto ya montado con su nombre, en la pantalla de después.
   En monoespaciada y seleccionable: se copia tal cual al Bizum, que
   es justo lo que se quiere que pase. Un concepto mal escrito es un
   pago que nadie sabe de quién es. */
.ev__concepto{
  margin:.7rem 0 1rem;
  padding:.8rem 1rem;
  border:1px dashed #cfc9bd;
  border-radius:12px;
  background:#faf8f4;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.92rem;
  font-weight:600;
  color:#0a0a0a;
  text-align:center;
  user-select:all;            /* un toque lo selecciona entero */
  -webkit-user-select:all;
}

.ev__form{ display:flex; flex-direction:column; gap:.85rem }
.ev__error{
  margin:0;
  font-size:.8rem;
  color:#a3231d;            /* 5,9:1 sobre blanco */
}
.ev__enviar{ width:100%; margin-top:.2rem }
.ev__enviar[disabled]{ opacity:.6; pointer-events:none }

/* ==========================================================
   LAS DOS CUENTAS DE INSTAGRAM
   ----------------------------------------------------------
   Van al final de la caja, separadas por una línea: no compiten
   con el botón de apuntarse, que es a lo que se ha entrado.

   Dos pastillas iguales, no una principal y una secundaria. La
   quedada la organizan los dos y en el momento en que una se ve
   más que la otra, la caja está diciendo algo que el cartel no
   dice.

   Sobre papel y no sobre la portada: esta caja tiene fondo claro,
   así que aquí mandan los grises oscuros del pop y no las
   variables de la web.
   ========================================================== */
.ev__redes{
  margin:1.4rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid #e6e2d9;
}
.ev__redes-ojo{
  margin:0 0 .7rem;
  font-family:var(--sans, inherit);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a8a8a;
}
/* Se parten en dos líneas cuando no caben en vez de encogerse: los
   nombres de usuario son largos y una arroba cortada no se puede
   escribir a mano si alguien la quiere buscar. */
.ev__redes-fila{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.ev__red{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .85rem;
  border:1px solid #ddd8cf;
  border-radius:999px;
  background:#fff;
  font-family:var(--sans, inherit);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:#1a1a1a;              /* 15,3:1 sobre blanco */
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s var(--ease, cubic-bezier(.22,.61,.36,1)),
             background .18s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.ev__red svg{ flex:0 0 auto; opacity:.75 }
/* La respuesta al dedo va en :active, que sí existe en un móvil.
   El hover, detrás de su puerta, como todo en esta hoja. */
.ev__red:active{ transform:scale(.97) }
@media (hover:hover) and (pointer:fine){
  .ev__red:hover{ border-color:#1a1a1a; background:#faf9f6 }
}
.ev__red:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .ev__red{ transition:none }
  .ev__red:active{ transform:none }
}

/* Con el pop abierto, la página de detrás no se mueve. */
body.con-pop{ overflow:hidden }


/* ==========================================================
   LOS DOS POPS
   ========================================================== */
/* El cartel a tamaño grande, que es lo que se pidió: quien pulsa
   el sello de 100 px quiere VER el cartel, no un recorte. */
/* EL CARTEL, A TAMAÑO DE LEERLO.
   ----------------------------------------------------------
   Lo tuve pequeño y centrado porque estorbaba para llegar a los
   dos campos. Pero el cartel ES la información: la distancia, el
   ritmo, quién organiza, la hora. A 190 px eso no se lee, y quien
   pulsa el cartel lo pulsa para verlo.

   Ocupa el ancho de la tarjeta y se le pone un tope de alto en
   pantallas bajas —60 % de la ventana— para que debajo siempre
   asome el formulario y se vea que hay algo más. Ese tope recorta
   con "object-fit: contain", así que nunca deforma el cartel:
   como mucho deja aire a los lados. */
.ev__cartel{
  display:block;
  width:100%;
  height:auto;
  max-height:60vh;
  object-fit:contain;
  margin:0 auto 1.2rem;
  border-radius:12px;
  background:#f2efe9;
}
/* En una pantalla alta y estrecha —un móvil de pie— el cartel
   puede permitirse más, porque el formulario cabe igual. */
@media (min-height:760px){
  .ev__cartel{ max-height:66vh }
}

/* EL LOGO DE LA COLABORACIÓN, ABRIENDO EL POP.
   Va antes que el texto porque es lo que responde a la pregunta
   que trae quien ha pulsado el sello: "¿esto qué es?". Centrado y
   contenido — es una firma, no una portada. */
.ev__logo{
  display:block;
  width:min(148px, 38%);
  height:auto;
  margin:0 auto 1.1rem;
}

/* UN SOLO MENSAJE, NO DOS FICHAS.
   Estaba en dos columnas, una por proyecto, y eso se lee como un
   directorio: dos cosas puestas al lado. Lo que se cuenta aquí es
   que se juntan, así que va seguido, en párrafos, como se lo
   contarías a alguien. */
/* PÁRRAFOS SEPARADOS DE VERDAD.
   Iban a 0,7 rem de distancia con una interlínea de 1,55: pegados,
   se leían como un bloque y había que buscar dónde empezaba cada
   idea. Con más aire entre ellos y algo más de interlínea, cada
   párrafo es una idea y se ve dónde acaba. */
.ev__texto{
  margin:0 0 1.05rem;
  font-size:.9rem;
  line-height:1.65;
  color:#3a3a3a;
}
/* El primero, un punto más grande: es el que resume y el que decide
   si se sigue leyendo. */
.ev__texto--guia{
  font-size:1rem;
  line-height:1.6;
  color:#1a1a1a;
}
.ev__texto b{ color:#0a0a0a; font-weight:700 }
.ev__cierre{
  margin:1.3rem 0 1.3rem;
  padding-top:1.1rem;
  border-top:1px solid #e6e2d9;
  font-weight:600;
  color:#0a0a0a;
}

.ev__suave{
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:#6a6a6a;
}


/* El sitio, enlazado dentro del párrafo del pop. Subrayado y del
   color del texto: no es un botón, es un dato con enlace. */
.ev-pop .waiver__lead a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}


/* EL PERMISO DE IMAGEN.
   Casilla y texto en una línea, con el texto pequeño y en gris:
   tiene que leerse como lo que es —algo opcional que se explica—
   y no competir con los tres campos que sí hacen falta. */
.ev__permiso{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  margin:.35rem 0 .1rem;
  padding-top:.85rem;
  border-top:1px solid #e6e2d9;
  font-size:.76rem;
  line-height:1.5;
  color:#5b5b5b;
  cursor:pointer;
}
.ev__permiso input{
  flex:0 0 auto;
  width:18px; height:18px;
  margin:.1rem 0 0;
  accent-color:#0a0a0a;
  cursor:pointer;
}
.ev__permiso b{ color:#0a0a0a; font-weight:700 }