/* ==========================================================================
   LA PORTADA — EL CONTENIDO, ENTRE LA BANDA Y EL PIE

   Porteado de `especificaciones/MAQUETA-INICIO-ESCENARIO.html` el 12/09/2026.
   El relevamiento que lo respalda es `especificaciones/INICIO.md`; la version
   para cualquiera, `INICIO-EN-CRIOLLO.md`.

   Fran eligio el escenario sobre la cartelera. `MAQUETA-INICIO-CARTELERA.html`
   sigue en el repo a proposito: documenta la alternativa y su justificacion.

   EL CSS SE COPIA, NO SE REINTERPRETA: los tokens, los radios, las sombras y
   sobre todo los nombres de clase son los mismos que en la maqueta. El diff
   contra el `<style>` de la maqueta tiene que seguir siendo corto, y se
   comprueba asi:

     sed -n '232,239p;277,280p;386,452p;492,738p' \
       especificaciones/MAQUETA-INICIO-ESCENARIO.html

   LOS CORTES NO SON REDONDOS A PROPOSITO, Y CONVIENE COMPROBARLOS UNA VEZ. El
   primer intento arranco el ultimo tramo en la 494 en vez de la 492, o sea
   DENTRO de un bloque de comentario. El cierre de comentario huerfano que
   quedaba hacia que el navegador se comiera en silencio el bloque `:root` con
   los tokens del escenario, asi que el degradado de marca no se pintaba: fondo
   blanco con texto blanco encima. No hay error de CSS que avise de eso, y se
   encontro mirando la pagina, no leyendo la hoja.

   Y OJO CON ESCRIBIR UN CIERRE DE COMENTARIO ADENTRO DE UN COMENTARIO, que es
   como se rompio la segunda vez: CSS no anida comentarios, asi que esa
   secuencia de dos caracteres cierra el bloque donde aparezca y todo lo que
   sigue pasa a leerse como CSS. Por eso este parrafo lo dice con palabras.

   ==========================================================================
   POR QUE ESTAS CLASES NO LLEVAN `svo-`, Y LAS DE LA BANDA SI

   `svo-banda.css` carga en TODAS las paginas, asi que sus clases se prefijan:
   un `.pie` suelto le pintaria el pie a cada modal del panel. Esta hoja carga
   en UNA sola pantalla —la portada— igual que `panel.css` y `mapas.css`, asi
   que `.escenario`, `.destacado`, `.evento`, `.grilla` y `.pastillas` van sin
   prefijo. La regla completa, con la tabla de que significaba cada clase
   donde, esta en la skill `survivo-design`, seccion 6.

   Y por eso las reglas de abajo pueden tocar `body`, `a` y `h1..h4` sin
   protegerse: `functions.php` encola esta hoja SOLO donde vive el shortcode
   `[survivo_home]`. En cualquier otra pagina no existe.

   ==========================================================================
   LO QUE SE SACO AL PORTEAR, Y DONDE ESTA AHORA

   Se anota en vez de borrarse en silencio, como manda la regla de porteo:

     `.dev`                        la barra de controles de la maqueta. No se
                                   portea: existe para mirar el archivo solo.
     los tres bloques `:root`      son los cimientos, y ya viven en
                                   `svo-tokens.css`, que carga antes que esta.
     `--tinta-lima` `--tinta-violeta`  idem: `svo-tokens.css`.
     `.solo-lectores` `.svo-franja`    ya estan en `svo-banda.css`.
     la cabecera y el pie enteros  son `svo-banda.css`, desde el 12/09/2026.
     `.degrade`                    no lo usa ninguna superficie de ESTA
                                   pantalla, y no es un olvido. En la grilla,
                                   `.evento .sin-imagen` lo neutraliza a
                                   proposito —diez tiles de lima y violeta
                                   repetian diez veces el escenario— y en el
                                   destacado sin flyer la caja de la imagen no
                                   se dibuja. Copiarlo seria CSS muerto.

   Lo que el sitio AGREGA va al final, bajo `AÑADIDOS DEL TEMA`, nunca
   intercalado.

   ==========================================================================
   LA VERSION SE SUBE A MANO Y EN EL MISMO COMMIT QUE EL CSS

   En `functions.php`. Si se toca esta hoja y no sube ese numero, el navegador
   sigue sirviendo la vieja: sin error y sin aviso. Es la trampa 1 de la skill
   `survivo-design`.
   ========================================================================== */


/* ==========================================================================
   LA BASE — de `cimientos.css`, lo que `svo-tokens.css` deja afuera

   `svo-tokens.css` trae SOLO los tres bloques de `:root` porque carga en todo
   el sitio y un `body{...}` ahi le cambiaria el fondo, la tinta y el cuerpo de
   letra al carrito, al checkout y a cada pagina de contenido. Aca no hay ese
   riesgo: esta hoja es la portada y nada mas, y la portada ES la maqueta.
   ========================================================================== */
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;font-variation-settings:"wdth" 100;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

body{margin:0}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3,h4,p{margin:0}



/* ==========================================================================
   LOS BOTONES — el vocabulario del panel, copiado
   `.btn` es el del panel. `.btn.comprar` es el `.comprar` de la ficha: el
   unico boton saturado, en acento y con radio de pildora. Se llama igual en
   las dos maquetas y en la ficha para que un comprador aprenda una sola vez
   que es el boton que compra.
   ========================================================================== */
.btn{background:var(--ink);color:var(--ground);border:0;border-radius:9px;padding:10px 17px;
  font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;white-space:nowrap;cursor:pointer;min-height:44px}
.btn:hover{background:var(--acento);color:var(--acento-txt)}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--line-fuerte);font-weight:600}
.btn.sec:hover{background:var(--surface-2);border-color:var(--acento);color:var(--acento)}
.btn.comprar{background:var(--acento);color:var(--acento-txt);border-radius:999px;
  padding:13px 26px;font-size:14.5px;min-height:44px}
.btn.comprar:hover{background:var(--ink);color:var(--ground)}
.btn svg{width:16px;height:16px;flex:none}


/* ==========================================================================
   EL RESPALDO SIN IMAGEN
   La tarjeta de un evento que no subio flyer: el nombre grande sobre la caja
   del flyer. No se inventa una ilustracion; el nombre es lo que el comprador
   necesita leer.

   OJO, LA MAQUETA DICE OTRA COSA ACA Y ESTA DESACTUALIZADA: dice que el fondo
   es el `.degrade` de los cimientos. Ya no lo es en ninguna de las dos
   superficies de esta pantalla. En la grilla lo pisa `.evento .sin-imagen`
   —mas abajo, con su porque— y en el destacado sin flyer la caja ni se
   dibuja. Por eso `.degrade` no se porteo. Lo que queda de esta regla es la
   tipografia, el centrado y el corte de palabras.

   En la base local del 12/09/2026 los 32 eventos tienen imagen, asi que hoy
   este respaldo no se ve nunca. Se escribe igual por dos motivos: el alta deja
   publicar sin flyer, y `uploads/` no viaja con el deploy, asi que un Survivo
   recien desplegado —Colombia el primer dia— arranca sin ninguna.
   ========================================================================== */
.sin-imagen{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:12px;color:var(--tinta-violeta);font-weight:800;font-variation-settings:"wdth" 118;line-height:1.1;
  font-size:clamp(15px,4vw,22px);text-shadow:0 2px 20px rgba(10,10,10,.35);overflow-wrap:break-word;hyphens:auto}


/* ==========================================================================
   EL BLOQUE DE PRODUCTORES — AL FINAL, ANTES DEL PIE

   Va al final por evidencia y no por cortesia: el comprador es dueño de la
   primera pantalla (NN/g, Sherwin 2015; y es lo que hacen Airbnb, Eventbrite
   y DICE). Pero tiene bloque propio y no un renglon: es la mitad del negocio
   y el brand book le promete tres cosas concretas —comisiones visibles,
   digital, regional— que aca se dicen en tres lineas y no en tres tarjetas
   con icono, porque en telefono lo secundario se acorta (NN/g, mobile).

   Es EL MISMO en las dos maquetas, a proposito: la diferencia entre ellas es
   como reciben al comprador, no como le hablan al productor.
   ========================================================================== */
.productores{margin-top:56px;border-top:1px solid var(--line);padding:40px 0 8px}
.productores .adentro{display:grid;gap:22px;align-items:start}
@media (min-width:880px){.productores .adentro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}}
.productores h2{font-size:clamp(26px,3.4vw,30px);font-weight:800;font-variation-settings:"wdth" 114;
  line-height:1.15;max-width:22ch;text-wrap:balance}
.productores .bajada{font-size:15.5px;color:var(--ink-2);margin-top:10px;max-width:52ch;line-height:1.55}
.productores ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.productores li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.productores li svg{width:20px;height:20px;flex:none;color:var(--ink-3);margin-top:1px}
.productores li b{display:block;font-weight:700}
.productores li span{color:var(--ink-2)}
.productores .acciones{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:18px}
.productores .acciones a.entrar{font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;padding:12px 0}
.productores .acciones a.entrar:hover{color:var(--acento)}


/* ==========================================================================
   ==========================================================================
   EMPIEZA EL ESCENARIO — DE ACA PARA ABAJO ES LO PROPIO DE ESTE MODELO
   ==========================================================================
   ========================================================================== */

/* LOS TOKENS PROPIOS DEL ESCENARIO, en los tres bloques como manda cimientos.
   En oscuro se atenua el VIOLETA (62% de violeta sobre negro) y se achican
   las manchas de lima; el lima no se toca. Antes habia un velo negro al 38%
   sobre todo el escenario, y la critica de color lo midio: el velo dejaba el
   violeta bien pero convertia el lima en un verde oliva (#7e9542) distinto
   del lima de la banda de arriba. Atenuar solo el violeta deja el mismo
   violeta hondo de antes y el lima de siempre, en dosis mas chica. */
:root{ --escenario-base:var(--violeta); --escenario-lima-1:52% 66%; --escenario-lima-2:38% 48% }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --escenario-base:color-mix(in srgb, var(--violeta) 62%, #0a0a0a); --escenario-lima-1:34% 44%; --escenario-lima-2:24% 30% } }
:root[data-theme="dark"]{
  --escenario-base:color-mix(in srgb, var(--violeta) 62%, #0a0a0a); --escenario-lima-1:34% 44%; --escenario-lima-2:24% 30% }

/* ---- el escenario ------------------------------------------------------- */
.escenario{position:relative;color:var(--tinta-violeta);background-color:var(--escenario-base);
  background-image:
    radial-gradient(var(--escenario-lima-1) at 100% 0%, var(--lima) 0%, transparent 50%),
    radial-gradient(var(--escenario-lima-2) at 88% 105%, var(--lima) 0%, transparent 48%),
    radial-gradient(70% 90% at 0% 100%, var(--violeta-hondo) 0%, transparent 62%),
    radial-gradient(60% 60% at 35% 30%, var(--escenario-base) 0%, transparent 60%)}
.escenario > .svo-franja{position:relative;display:grid;gap:12px;padding-top:20px}
.escenario h1{font-size:clamp(40px,10vw,72px);font-weight:800;font-variation-settings:"wdth" 122;
  line-height:.96;letter-spacing:-.012em;text-wrap:balance}
.escenario .bajada{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:42ch;margin-top:8px}
/* El escenario no tiene padding abajo: lo cierra la tarjeta, que se monta
   sobre el borde con margen negativo. Ver la tesis. */
.escenario .texto{padding-bottom:4px}
@media (min-width:880px){
  .escenario > .svo-franja{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:40px}
  .escenario .texto{padding-bottom:64px}
  .escenario .bajada{font-size:17px;margin-top:16px}
}

/* ---- el destacado: el proximo evento, ya comprable ----------------------- */
/* EL FLYER DEL DESTACADO MIDE 42%, NO 37%. Con 37% era la imagen mas chica de
   la pagina (124 px contra 173 de cualquier tarjeta de la grilla que asoma
   debajo): el cuadro que dice "este es el proximo" pesaba menos que los que
   dicen "estos son los demas". Con 42% mide 141 y el boton sigue entrando.
   Y va centrado: un item con aspect-ratio no se estira en la grilla, y sin
   `align-self:center` quedaban 8 px arriba y 36 abajo. */
.destacado{display:grid;grid-template-columns:42% minmax(0,1fr);gap:14px;
  background:var(--surface);color:var(--ink);border-radius:var(--r);box-shadow:var(--sombra);
  padding:10px;margin-bottom:-58px;position:relative;z-index:2;text-decoration:none;
  border:1px solid var(--line-fuerte)}
.destacado .flyer{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--surface-2);
  align-self:center}
/* SIN FLYER, EL DESTACADO NO DIBUJA UN CUADRO FALSO. Es el estado del primer
   dia de Colombia. Con un cuadro de degradado adentro de la tarjeta, el
   degradado aparecia cuatro veces en la primera pantalla —escenario, cuadro,
   y dos tiles de la grilla— y la tarjeta dejaba de ser figura sobre el
   escenario. Sin flyer la tarjeta es solo texto: el nombre grande, la fecha,
   el lugar, el precio y el boton, el unico bloque no violeta de la pantalla. */
.destacado.sin-flyer{grid-template-columns:minmax(0,1fr)}
.destacado.sin-flyer .flyer{display:none}
.destacado.sin-flyer .cuerpo{padding:8px 6px 6px}
.destacado .flyer img{width:100%;height:100%;object-fit:cover;display:block}
.destacado .cuerpo{display:grid;gap:5px;align-content:center;min-width:0;padding:2px 4px 2px 0}
.destacado .cuando{font-size:12.5px;font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.destacado .cuando .hora{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums;font-size:12px}
/* HOY en tinta: la identidad violeta la dan el fondo y el borde. Acento sobre
   acento-soft daba 4,1:1 en oscuro a 10 px, que es texto chico sin excepcion. */
.destacado .cuando .hoy{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink);background:var(--acento-soft);border:1px solid var(--acento-borde);padding:1px 7px;border-radius:999px}
/* El nombre de lo que se compra mide mas que el rotulo de la seccion que lo
   sigue (23 contra 20 en 390) y 1,6x el titulo de una tarjeta. Antes median lo
   mismo. Y 1.14 de interlinea para que las tildes de una linea no toquen las
   descendentes de la de arriba. */
.destacado .titulo{font-size:clamp(22px,6vw,28px);font-weight:800;font-variation-settings:"wdth" 112;line-height:1.14;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.destacado .lugar{font-size:12px;color:var(--ink-2)}
.destacado .precio{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:2px}
.destacado .precio small{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:500;color:var(--ink-2);margin-right:5px}
/* El boton de comprar es EL MISMO que en la ficha, tambien en telefono: 14,5 y
   44. Estaba achicado a 13,5/40 justo en la pantalla que mas importa. */
.destacado .btn.comprar{justify-self:start;margin-top:8px;padding:12px 22px}
.destacado .pil{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid;justify-self:start}
.destacado .pil.ultimas{background:var(--espera-soft);color:var(--espera);border-color:var(--espera-borde)}
@media (min-width:560px){
  .destacado{grid-template-columns:200px minmax(0,1fr);padding:14px;gap:20px;max-width:600px}
  .destacado .cuerpo{padding:6px 8px 6px 0}
  .destacado .lugar{font-size:13.5px}
  .destacado .precio{font-size:15px}
  .destacado .btn.comprar{padding:12px 24px}
}
@media (min-width:880px){.destacado{margin-bottom:-64px;justify-self:end;width:100%}}
/* El anillo de foco del destacado: sobre el violeta del escenario el acento
   se fundia (1,0:1 en claro). Dos tonos: el blanco se ve sobre el violeta, el
   halo de acento se ve sobre el ground. */
.destacado:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--acento),var(--sombra)}

/* ---- la grilla ---------------------------------------------------------- */
/* El corte entre el destacado y "Todos los eventos" media 26 px, el unico de
   la pagina fuera de escala (los demas estan entre 39 y 48), y el titulo
   quedaba equidistante entre la tarjeta y sus pastillas. Ahora: tarjeta, 32,
   titulo, 17, pastillas. Y cuando no hay destacado, el padding que compensa
   el margen negativo de la tarjeta no tiene que quedar huerfano. */
.proximos{padding-top:90px}
@media (min-width:880px){.proximos{padding-top:96px}}
.sin-destacado .proximos{padding-top:36px}
.sin-eventos .proximos{padding-top:8px}
.sin-eventos .proximos .encabezado,.sin-eventos .barra-pastillas,.barra-pastillas[hidden]{display:none}
.proximos .encabezado{display:flex;align-items:baseline;gap:12px;margin-bottom:0}
.proximos h2{font-size:20px;font-weight:800;font-variation-settings:"wdth" 112}
/* La cuenta solo cuando hay un filtro puesto, que es cuando informa algo, y al
   lado del titulo: a la derecha a 1280 quedaba a 925 px de lo que califica, y
   en el lugar exacto donde todo marketplace pone "ver todos". */
.proximos .cuenta{font-size:12.5px;color:var(--ink-2);font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.proximos .cuenta:empty{display:none}

/* ---- las pastillas, las mismas de la cartelera, pegadas con su fondo -------
   Cuatro cosas que la critica midio y se cambiaron:
   - LA ACTIVA ES UN ANILLO, NO UN BLOQUE DE TINTA. En tinta plena era una
     pildora de 60x38 a 115 px del boton de comprar, con 2,25x su contraste en
     claro y 4,2x en oscuro: el filtro le ganaba el barrido a la accion. Con
     borde negro y texto en tinta sigue siendo inequivoca, y deja de pesar.
   - 44 DE ALTO, no 38: es el control que se usa con el pulgar mientras se
     scrollea. La barra sigue midiendo 58.
   - EL FOCO NO SE RECORTA. El contenedor con overflow clipea el anillo por
     arriba, abajo y a la izquierda; 4 px de padding con margen negativo le
     hacen lugar sin mover nada.
   - EL DESVANECIDO SOLO CUANDO DESBORDA. Con las cuatro entrando justas, el
     desvanecido tapaba la cuenta de la ultima y la hacia parecer apagada.
   - EL BORDE EN --ink-3: 3,1:1, que es lo que pide un limite de control. Es el
     rol que ese token debe tener: borde e icono, no texto. */
.barra-pastillas{position:sticky;top:-1px;z-index:20;background:var(--ground);padding:5px 0;
  box-shadow:0 1px 0 var(--line)}
.pastillas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px;margin:-2px -4px;min-width:0;
  scroll-padding-inline:24px}
.pastillas.desborda{mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.pastillas::-webkit-scrollbar{display:none}
.pastillas button{flex:none;border:1px solid var(--ink-3);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:0 10px;height:44px;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.pastillas button .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
.pastillas button.on{background:var(--surface);border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pastillas button[disabled]{opacity:.42;cursor:not-allowed}
@media (forced-colors:active){.pastillas button[aria-pressed="true"]{outline:3px solid ButtonText;outline-offset:-3px}}
@media (min-width:560px){.pastillas button{padding:0 14px;font-size:13.5px}}

.grilla{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;padding-top:10px}
@media (min-width:720px){.grilla{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px 20px;padding-top:18px}}
@media (min-width:1100px){.grilla{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* CADA TARJETA MIDE LO QUE SU PROPIO CONTENIDO PIDE, SIN EMPAREJARSE CON LA
   FILA. Se probaron dos formas de igualar la altura del titulo entre
   tarjetas para que el precio quedara a la misma altura, y las dos salieron
   peor que no igualar nada:

     min-height fijo   reservaba dos lineas de titulo SIEMPRE, aunque el
                        titulo entrara en una sola: quedaba un hueco debajo
                        de cualquier titulo corto, tuviera o no un vecino
                        con titulo largo.
     subgrid            arreglaba eso pero trasladaba el problema: el alto
                        del renglon de titulo se comparte con TODA la fila
                        visual de la grilla, asi que un titulo corto que
                        cae al lado de un titulo largo —"Charly Sinfonico:
                        memoria del rock nacional" en la misma fila que
                        "Boy Olmi: Unipersonal"— hereda igual el hueco de
                        dos lineas. El resultado se ve raro: la MISMA
                        tarjeta corta tiene aire distinto segun con quien
                        comparta fila, y mirando una sola tarjeta no se
                        entiende por que.

   La diferencia real que se pierde sin ninguna de las dos —el precio de
   dos tarjetas vecinas puede quedar a un par de pixeles de distancia
   cuando una tiene titulo de una linea y la otra de dos— es menor y se
   entiende de un vistazo. La confusion de un hueco sin explicacion visible
   no. */
.evento{display:grid;gap:7px;align-content:start;text-decoration:none;color:inherit;position:relative}
.evento .flyer{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.evento .flyer img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* La fecha en secundario y peso medio: en tinta y 600 a 12,5 sobre un titulo
   de 14,5 y 700 eran dos negritas casi iguales, una sobre otra, y las nueve
   tarjetas se leian por fecha y por nombre a la vez. El nombre es el unico
   renglon en tinta y negrita; "Hoy" sigue en su pildora. */
.evento .cuando{font-size:12.5px;font-weight:500;color:var(--ink-2);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin-top:2px}
.evento .cuando .hora{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums;font-size:12px}
/* El lugar en dos lineas en vez de una con puntos suspensivos: a 173 px
   "Casa de la Cultura, General Roca" se cortaba justo antes de la ciudad en
   7 de 9 tarjetas, que es el dato que distingue. */
.evento .titulo{font-size:14.5px;font-weight:700;font-variation-settings:"wdth" 106;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.evento .lugar{font-size:12px;color:var(--ink-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evento .abajo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:1px}
.evento .precio{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.evento .precio small{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:500;color:var(--ink-2);margin-right:4px}
/* La pildora de estado va sobre el flyer, arriba a la izquierda: al lado del
   precio no entraba ("Desde $ 45.000" mas "AGOTADO" pasan los 173) y partia
   la fila en dos alturas. Sobre el flyer tiene lugar y no lo tapa el .55 de
   opacidad del agotado porque cuelga de la tarjeta, no del flyer. */
.evento .pil{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid;
  position:absolute;top:8px;left:8px;z-index:1}
.evento .pil.ultimas{background:var(--espera-soft);color:var(--espera);border-color:var(--espera-borde)}
.evento .pil.agotado{background:var(--baja-soft);color:var(--baja);border-color:var(--baja-borde)}
.evento.agotado .titulo,.evento.agotado .cuando,.evento.agotado .precio{color:var(--ink-2)}
.evento.agotado .flyer{opacity:.55}
@media (min-width:720px){.evento .titulo{font-size:15.5px}.evento .lugar{font-size:12.5px;-webkit-line-clamp:1}}
/* EL RESPALDO SIN FLYER DE LA GRILLA ES NEUTRO, no el degradado. Con diez
   tiles de lima y violeta la grilla repetia diez veces la superficie del
   escenario, y en oscuro brillaban mas que el escenario mismo. El flyer es
   el color de la tarjeta; sin flyer, un cartel tipografico en tinta sobre
   surface-3 (15,4:1) dice el nombre y no compite con nada. En la ficha el
   degradado sigue: ahi es la unica superficie de marca en pantalla. */
.evento .sin-imagen{background-image:none;background-color:var(--surface-3);color:var(--ink);text-shadow:none;
  font-size:clamp(14px,3.6vw,18px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;place-items:unset;align-content:center}
/* El hover solo donde hay puntero: en tactil se quedaba pegado como "prendido". */
@media (hover:hover){
  .evento:hover .titulo{color:var(--acento)}
  .evento.agotado:hover .titulo{color:var(--ink)}
  .destacado:hover .titulo{color:var(--acento)}
}

/* ---- el estado vacio ---- */
.estado-vacio{padding:52px 24px;text-align:center;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);margin-top:18px}
.estado-vacio[hidden]{display:none}
.estado-vacio .grande{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px;font-variation-settings:"wdth" 112;text-wrap:balance}
.estado-vacio p{margin:0 0 18px;font-size:14.5px;max-width:44ch;margin-left:auto;margin-right:auto}
.estado-vacio .acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- como funciona: tres lineas, numeradas porque SON una secuencia ---- */
.como{margin-top:56px;border-top:1px solid var(--line);padding-top:40px}
.como h2{font-size:20px;font-weight:800;font-variation-settings:"wdth" 112;margin-bottom:16px}
.como ol{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:14px}
@media (min-width:720px){.como ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.como li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:14.5px;line-height:1.45;counter-increment:paso}
.como li::before{content:counter(paso);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;
  color:var(--ink-2);padding-top:2px}
.como li b{display:block;font-weight:700}
.como li span{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   AÑADIDOS DEL TEMA — lo que no esta en la maqueta, y por que

   Va al final y con rotulo, como manda la regla de porteo: nunca intercalado
   entre lo copiado, para que el diff contra la maqueta siga siendo legible.
   ========================================================================== */

/* 1. LA TIPOGRAFIA TIENE QUE GANARLE A UN `!important`.

   `astra-child/style.css` le clava `font-family:'Owners Wide' !important` a
   `body, button, input, select, textarea`. Owners Wide es la tipografia del
   LOCKUP, no de texto, y ademas el tema hijo solo tiene la Regular: sin estas
   dos lineas la portada entera se dibuja con ella y ninguna de las medidas del
   diseño existe —ni los ejes variables de Archivo, ni el `wdth` que le da
   caracter a los titulos—.

   El `body` gana por orden de fuente: mismo peso de selector, esta hoja carga
   despues. Los botones y las pastillas NO: `button` con `!important` le gana a
   heredar, asi que necesitan su propia regla. Es la misma solucion que ya
   aplica `svo-banda.css`, y la trampa 4 de la skill `survivo-design`. */
body{font-family:"Archivo",system-ui,-apple-system,sans-serif!important}
.btn,.pastillas button{font-family:"Archivo",system-ui,-apple-system,sans-serif!important}

/* 2. ASTRA LE PONE UN `margin-bottom` A CADA `<section>` DE CONTENIDO, y el
   escenario lo usa como superficie a sangre: un hueco del color del `body`
   entre la banda y el degradado parte la primera pantalla en dos. Medido en
   el HTML servido, no deducido del CSS. */
.svo-inicio section{margin-bottom:0}

/* 3. EL ESCENARIO VA A SANGRE, Y EL SHORTCODE VIVE ADENTRO DE UN CONTENEDOR.
   `survivo_child_ancho_completo()` ya pide el layout `page-builder` de Astra
   para esta pagina, que saca la caja de 1200. Esto es el cinturon: si alguien
   cambia ese filtro, el degradado sigue llegando a los bordes en vez de
   quedar encajonado. El `1260` de adentro lo sigue poniendo `.svo-franja`. */
.svo-inicio{max-width:none;width:auto;margin:0;padding:0}

/* 4. LA TARJETA DESTACADA SE MONTA SOBRE EL BORDE DEL ESCENARIO con
   `margin-bottom` negativo, y eso solo funciona si nada recorta. Astra pone
   `overflow:hidden` en varios contenedores de contenido segun la version. */
.svo-inicio,.svo-inicio .escenario{overflow:visible}

/* 5. EL DESTACADO ES UN `<a>` QUE ENVUELVE UN `<span class="btn comprar">`.
   El tema y WooCommerce subrayan los enlaces del contenido; la tarjeta no
   lleva subrayado en ningun estado porque el subrayado es el afiche, el
   titulo y el boton. Se acota a esta pantalla. */
.svo-inicio a{text-decoration:none}
.svo-inicio .productores .acciones a.entrar{text-decoration:underline}

/* 6. LA GRILLA NO ES UNA LISTA DE CONTENIDO. Astra y WooCommerce le ponen
   `list-style` y `padding-left` a `ul` dentro de `.entry-content`; el bloque
   de productores, el pie de "Comprar es asi" y la grilla usan `ul`/`ol` como
   estructura, no como viñetas. La maqueta lo resuelve con el reset del
   navegador, que aca no alcanza. */
.svo-inicio ul,.svo-inicio ol{list-style:none;margin:0;padding:0}

/* 7. UNA TARJETA ESCONDIDA TIENE QUE ESCONDERSE. `.evento{display:grid}` le
   gana al `[hidden]{display:none}` del navegador, que es una regla de
   ELEMENTO: la tarjeta del destacado —que se repite en la grilla escondida,
   para que el filtro la pueda mostrar— quedaria visible dos veces. Es el
   clasico de `hidden` contra una clase con `display`. */
.evento[hidden]{display:none}

/* 8. "SERVICIO INCLUIDO", QUE LA MAQUETA NO TIENE PORQUE ERA UNA DECISION
   ABIERTA. Fran la cerro el 12/09/2026: el "Desde $ X" muestra el precio
   FINAL, con el cargo por servicio adentro. El numero solo no alcanza —un
   precio final que no se anuncia como final se lee como uno que todavia va a
   subir, que es justo lo que pasa en las otras 27 ticketeras—, asi que lleva
   su rotulo.

   Va en un renglon propio debajo del importe y no al lado: a 171 px de ancho
   —la tarjeta de la grilla en un telefono de 390— "Desde $ 50.400 servicio
   incluido" no entra en una linea y partirlo deja el importe huerfano. En
   `--ink-2` y no en `--ink-3`, que no llega a 4,5:1 en ningun tema. */
.evento .precio,.destacado .precio{display:flex;flex-wrap:wrap;align-items:baseline}
.precio small.servicio{flex-basis:100%;font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px;font-weight:500;color:var(--ink-2);margin:1px 0 0;letter-spacing:.01em}
.evento.agotado .precio small.servicio{color:var(--ink-2)}

/* ==========================================================================
   9. LO QUE ASTRA PISA, MEDIDO CONTRA LA PAGINA SERVIDA

   Nada de esto se deduce leyendo CSS, y por eso va junto y con el nombre del
   selector que gana. Astra no escribe su tema en un archivo: lo IMPRIME INLINE
   en el `<head>` de cada pagina, desde el Personalizador. Eso importa dos
   veces: una hoja inline que se imprime despues le gana a un archivo encolado
   con la misma especificidad, y el archivo no esta en el repositorio, asi que
   ningun `grep` lo encuentra. Es la memoria del proyecto, textual: el CSS que
   rompe no esta en el repo.

   POR ESO CADA REGLA DE ABAJO GANA POR ESPECIFICIDAD Y NO POR ORDEN. Empatar
   en especificidad y confiar en cargar ultimo es apoyarse en algo que cambia
   solo: basta que alguien mueva un `wp_enqueue_style()` o que Astra agregue una
   hoja inline mas. Donde no alcanza la especificidad se usa `!important`, y se
   dice por que.

   Se corrigio lo minimo: cada regla apaga UNA regla de Astra, nombrada, y
   ninguna sale de `.svo-inicio` salvo la del fondo, que es del `body`.
   ========================================================================== */

/* EL FONDO DE LA PAGINA. Gana `.ast-page-builder-template{background-color:
   var(--ast-global-color-1)}` —blanco— que es una clase SOBRE EL BODY, asi que
   el `body{background:var(--ground)}` de los cimientos pierde: elemento contra
   clase. Se agrega la clase al selector y pasa a ganar sin `!important`.

   Sin esto la portada es blanca, y las tarjetas —que son `--surface`, tambien
   blanco— no se despegan del fondo: se pierde la unica separacion entre la
   figura y el papel, que es de lo que vive una grilla de flyers. */
body.ast-page-builder-template,body.ast-plain-container,body.ast-separate-container{
  background-color:var(--ground)}

/* LOS TITULOS. Astra le clava `font-family:Montserrat` y `color:
   var(--ast-global-color-6)` a `h1..h6` y a `.entry-content :where(h1..h6)`.

   Montserrat no es la voz de la marca, y ademas NO TIENE EL EJE `wdth`: la
   hoja pedia `font-variation-settings:"wdth" 122` contra una fuente sin ese
   eje y no pasaba nada. Sin error y sin aviso, que es exactamente la trampa
   que la skill `survivo-design` describe en su seccion 4. El titulo se veia
   igual de grande y sin una gota del caracter de la marca.

   El color va a `inherit` y NO a un token: cada titulo de esta pantalla ya
   hereda el que le toca —blanco adentro del escenario, `--ink` afuera— y
   fijarlo a `--ink` pintaria de negro el "Vivilo en vivo." sobre el violeta. */
.svo-inicio h1,.svo-inicio h2,.svo-inicio h3,.svo-inicio h4{
  font-family:"Archivo",system-ui,-apple-system,sans-serif;color:inherit}

/* EL SUBRAYADO DE LAS TARJETAS. Gana `.ast-single-post .entry-content a{
   text-decoration:underline}`.

   Una tarjeta con la fecha, el titulo, el lugar y el precio subrayados no se
   lee, y ademas el subrayado deja de significar "esto es un enlace" cuando lo
   lleva todo. La tarjeta ENTERA es el enlace; lo que lo señala son el flyer, el
   titulo y, en el destacado, el boton.

   Va con `!important` y no con mas clases: el selector de Astra mide lo mismo
   que cualquier combinacion razonable que cuelgue de `.svo-inicio`, asi que
   sin `!important` el resultado dependeria de cual de las dos hojas imprime
   Astra ultimo ese dia. El `a.entrar` del bloque de productores SI es un
   enlace de texto y SI lleva subrayado: lo recupera con su propia regla, que
   le gana por especificidad. */
.svo-inicio a{text-decoration:none!important}
.svo-inicio .productores .acciones a.entrar{text-decoration:underline!important}

/* LOS MARGENES Y LA INTERLINEA QUE ASTRA LE AGREGA AL TEXTO DE CONTENIDO.

   Astra trata todo lo que cae adentro de `.entry-content` como si fuera un
   articulo: le suma `margin-bottom` a cada parrafo y a cada titulo, y les baja
   la interlinea. En un articulo esta bien. En una pantalla compuesta con grid
   —donde el aire lo pone el `gap` del contenedor— cada uno de esos margenes es
   un hueco que nadie pidio. Medido: el escenario media 355 px de alto contra
   los 294 de la maqueta, y todo el sobrante eran estos margenes.

   LAS REGLAS VAN UNA POR UNA Y NO COMO UN RESET GENERAL, a proposito. Un
   `.svo-inicio :is(h1,h2,p){margin-bottom:0}` con especificidad suficiente
   para ganarle a Astra le gana TAMBIEN a `.como h2{margin-bottom:16px}`, a
   `.estado-vacio p` y a `.estado-vacio .grande`, que son de la maqueta y estan
   bien. Habria que volver a escribir esos tres numeros aca, y un numero de
   diseño escrito dos veces se separa en el primer cambio.

   Asi que se nombra solo lo que Astra rompe, que son cinco elementos. Los
   demas ya ganan solos: los del estado vacio empatan en especificidad con
   `.entry-content p` y ganan por orden, porque esta hoja carga despues.

   Los selectores de Astra que se estan apagando, medidos en la pagina servida:
     .entry-content p                  margin-bottom: 1.6em
     .entry-content :where(h1..h6)     margin-bottom: 20px
     .woocommerce-js h2                margin-bottom: 0.7em            */
.svo-inicio .escenario h1{margin-bottom:0}
.svo-inicio .escenario .bajada{margin-bottom:0}
.svo-inicio .proximos h2{margin-bottom:0}
.svo-inicio .productores h2{margin-bottom:0}
.svo-inicio .productores .bajada{margin-bottom:0}

/* LA INTERLINEA DE LOS TITULOS, TAMBIEN UNO POR UNO Y POR LA MISMA RAZON.

   Astra les baja la interlinea a los titulos con `.entry-content :where(h1..h6)`
   —`:where()` no suma especificidad, por eso Astra la usa— y en la maqueta esos
   titulos heredan el 1.5 del `body` de los cimientos. A 20 px son 4 px de alto
   por titulo, que no se notan solos pero corren todo lo que viene abajo.

   El primer intento fue una sola regla, `.svo-inicio :is(h1..h6)`, y estaba
   MAL: `:is()` vale lo que su argumento mas especifico, o sea un elemento, asi
   que esa regla mide exactamente lo mismo que `.escenario h1` y que
   `.productores h2` —una clase y un elemento— y les ganaba por orden. El h1 del
   escenario paso de 38 a 60 px de alto. Medido, no deducido.

   Asi que se nombran solo los dos titulos que en la maqueta NO declaran
   interlinea propia. El 1.5 no es un numero nuevo: es el del `body`. */
.svo-inicio .proximos h2,.svo-inicio .como h2{line-height:1.5}

/* EL ANILLO DE FOCO DE TECLADO, QUE ASTRA APAGA.

   Dos reglas de `main.min.css`, las dos con un nombre de elemento de mas que
   el `:focus-visible` pelado de los cimientos, o sea que le ganan:

     button:focus { outline: 0 }              -> las pastillas de fecha y los
                                                 botones del estado vacio se
                                                 quedaban SIN anillo. Medido
                                                 contra la maqueta, que da
                                                 `2px solid #5b00ea`: el sitio
                                                 daba `0px none`.
     a:focus { outline: thin dotted }         -> las tarjetas de la grilla
                                                 quedaban con un punteado de
                                                 1 px del color del texto.

   Esto NO es cosmetico: sin anillo, quien navega con teclado no sabe donde
   esta parado, y la critica del 12/09/2026 arreglo justo este punto en las
   maquetas —el anillo de las pastillas se recortaba y el del destacado se
   fundia con el violeta—. Llegar al sitio y perderlo seria deshacer a mano lo
   que se arreglo a proposito.

   EL DESTACADO SE EXCLUYE CON `:not()` Y NO ES UN DETALLE. Su anillo es otro
   —blanco con halo de acento, porque va sobre el violeta del escenario— y lo
   declara la maqueta con un solo nombre de clase. Una regla generica para
   todos los enlaces de la portada le ganaria por especificidad y le devolveria
   el anillo violeta que no se ve sobre violeta. Excluyendolo, la regla de la
   maqueta sigue mandando y no hay que repetir sus valores aca.

   No se copia el `border-radius:4px` del `:focus-visible` de los cimientos a
   proposito: todo lo que se enfoca en esta pantalla declara su propio radio y
   se lo gana igual, tambien en la maqueta. Repetirlo seria ruido. */
.svo-inicio button:focus-visible,
.svo-inicio a:not(.destacado):focus-visible{outline:2px solid var(--acento);outline-offset:2px}