/* Generado por scripts/generar-assets-plugin.mjs — no editar a mano. La fuente es wordpress-plugin/agenda-cosquin-embed.html */ /* Las variables y la tipografía se declaran también en .ag-modal porque al abrirlo lo movemos a (ver "portal" en el script): ahí afuera ya no hereda nada de #agenda-cosquin. */ #agenda-cosquin, .ag-modal { --navy: #183c52; --cyan: #35ccef; --texto: #5a6b76; --linea: #e3e9ed; --fondo-suave: #f5f8fa; font-family: "Open Sans", Helvetica, Arial, sans-serif; color: var(--texto); font-size: 15px; line-height: 1.6; box-sizing: border-box; } #agenda-cosquin { max-width: 1180px; margin: 0 auto; padding: 0 0 40px; } #agenda-cosquin *, #agenda-cosquin *::before, #agenda-cosquin *::after, .ag-modal *, .ag-modal *::before, .ag-modal *::after { box-sizing: border-box; } /* ── Filtros ─────────────────────────────────────────── */ .ag-filtros { border-bottom: 1px solid var(--linea); padding-bottom: 22px; margin-bottom: 26px; } .ag-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .ag-cat { font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 9px 18px; border-radius: 100px; border: 1px solid var(--linea); background: #fff; color: var(--navy); cursor: pointer; line-height: 1.2; transition: background .15s, color .15s, border-color .15s; } .ag-cat:hover { border-color: var(--cyan); color: var(--cyan); } .ag-cat[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; } .ag-cat[aria-pressed="true"]:hover { color: #fff; } .ag-cat .ag-cat-n { opacity: .55; margin-left: 6px; font-weight: 600; } .ag-busqueda { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } /* En desktop el botón no existe: los filtros están siempre a la vista. */ .ag-toggle { display: none; } .ag-aviso { padding: 16px; border: 1px solid var(--linea); border-radius: 8px; color: var(--navy); } /* En pantallas chicas el bloque de filtros medía más que la pantalla entera y la primera actividad quedaba a 756px del inicio: el visitante scrolleaba y solo veía filtros. Acá los chips pasan a una tira que se desliza y el resto se pliega detrás de un botón. */ /* El desplegable de categorías es solo para mobile: en pantalla chica los nueve chips se apilan en seis filas y quedan feos. Lleva el id adelante porque comparte el elemento con .ag-campo, que también declara display y está más abajo en la hoja: sin esto, gana .ag-campo y el desplegable aparece también en desktop, duplicando los chips. */ #agenda-cosquin .ag-cat-movil { display: none; } @media (max-width: 700px) { /* Los chips se reemplazan por el desplegable, que ocupa un renglón. */ #agenda-cosquin.ag-con-js .ag-cats { display: none; } #agenda-cosquin.ag-con-js .ag-cat-movil { display: flex; margin-bottom: 12px; } /* El botón y el plegado solo existen si el JS arrancó (clase ag-con-js). Si no, los filtros quedan a la vista: esconder contenido que solo el script puede volver a mostrar deja la página en blanco cuando algo falla, que es justamente lo que hay que evitar. */ #agenda-cosquin.ag-con-js .ag-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 12px 16px; min-height: 46px; cursor: pointer; color: var(--navy); font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } #agenda-cosquin.ag-con-js .ag-toggle::after { content: ''; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; } #agenda-cosquin.ag-con-js .ag-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); } #agenda-cosquin.ag-con-js .ag-busqueda { display: none; margin-top: 14px; } #agenda-cosquin.ag-con-js .ag-busqueda.ag-abierta { display: flex; } } .ag-campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 190px; min-width: 0; } .ag-campo-lbl { font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--navy); } /* El :not() es necesario: sin él esta regla, que gana por especificidad de id, estira el checkbox a todo el ancho del campo. */ #agenda-cosquin input:not([type="checkbox"]), #agenda-cosquin select { width: 100%; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--navy); background: #fff; -webkit-appearance: none; appearance: none; min-height: 44px; } #agenda-cosquin select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23183c52' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 34px; } #agenda-cosquin input:focus, #agenda-cosquin select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); } .ag-check { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; font-size: 14px; color: var(--navy); user-select: none; } #agenda-cosquin .ag-check input { width: 17px; height: 17px; min-height: 0; padding: 0; margin: 0; accent-color: var(--cyan); cursor: pointer; flex: 0 0 auto; -webkit-appearance: checkbox; appearance: checkbox; } .ag-limpiar { flex: 0 0 auto; background: none; border: none; padding: 12px 4px; cursor: pointer; font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; } .ag-limpiar:hover { color: var(--navy); } .ag-conteo { font-size: 13px; color: var(--texto); margin: 0 0 18px; } .ag-conteo b { color: var(--navy); } /* ── Grilla de tarjetas ──────────────────────────────── */ .ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 980px) { .ag-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 600px) { .ag-grid { grid-template-columns: 1fr; } } .ag-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; width: 100%; box-shadow: 0 1px 3px rgba(24,60,82,.06); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .ag-card:hover { box-shadow: 0 12px 28px rgba(24,60,82,.14); transform: translateY(-3px); border-color: #cfe0e9; } .ag-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .ag-figura { position: relative; margin: 0; background: var(--fondo-suave); } .ag-figura img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .ag-badge { position: absolute; top: 12px; left: 12px; color: #fff; font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 6px 13px; border-radius: 100px; line-height: 1.2; } .ag-finalizada { position: absolute; top: 12px; right: 12px; background: rgba(24,60,82,.82); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; } .ag-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .ag-fecha { font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); margin: 0 0 8px; } .ag-titulo { font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--navy); margin: 0 0 12px; } .ag-meta { font-size: 13.5px; margin: 0 0 6px; display: flex; gap: 8px; align-items: flex-start; } .ag-meta svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 3px; fill: none; stroke: var(--cyan); stroke-width: 1.8; } .ag-mas { margin-top: auto; padding-top: 14px; font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); } .ag-card:hover .ag-mas { color: var(--cyan); } .ag-vacio { text-align: center; padding: 50px 20px; color: var(--texto); font-size: 15px; } .ag-vacio button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--cyan); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ── Modal de detalle ────────────────────────────────── */ .ag-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .ag-modal[hidden] { display: none; } .ag-modal-fondo { position: absolute; inset: 0; background: rgba(11,28,40,.72); } .ag-modal-caja { position: relative; background: #fff; border-radius: 12px; width: 100%; max-width: 940px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); } /* overscroll-behavior evita que al llegar al final del texto el scroll "salte" y siga moviendo la página de atrás. */ .ag-modal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Desktop: flyer a la izquierda ocupando el alto, título y datos a la derecha. Mobile: una sola columna y el título ARRIBA del flyer, para no obligar a scrollear un flyer entero antes de saber de qué actividad se trata. */ .ag-modal-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "foto cabecera" "foto texto"; align-content: start; } .ag-modal-cab { grid-area: cabecera; padding: 26px 32px 0; } .ag-modal-foto { grid-area: foto; background: var(--fondo-suave); display: flex; align-items: flex-start; justify-content: center; } .ag-modal-txt { grid-area: texto; } @media (max-width: 760px) { .ag-modal-cols { grid-template-columns: 1fr; grid-template-areas: "cabecera" "foto" "texto"; } /* Espacio a la derecha para que el botón de cerrar no tape el título. */ .ag-modal-cab { padding: 22px 62px 16px 20px; } .ag-modal-foto { padding: 0 20px; background: none; } } .ag-modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.94); color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.22); } .ag-modal-x:hover { background: #fff; color: var(--cyan); } .ag-modal-img { width: 100%; object-fit: contain; display: block; } @media (max-width: 760px) { /* Acotado para que abajo del flyer siempre entre algo más en pantalla. */ .ag-modal-img { max-height: 46vh; width: auto; max-width: 100%; border-radius: 8px; } } .ag-modal-txt { padding: 22px 32px 34px; } @media (max-width: 760px) { .ag-modal-txt { padding: 20px 20px 28px; } } .ag-modal-cab h2 { font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 27px; font-weight: 700; line-height: 1.25; color: var(--navy); margin: 12px 0 0; } @media (max-width: 760px) { .ag-modal-cab h2 { font-size: 22px; } } .ag-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; margin: 0 0 22px; padding: 18px 20px; background: var(--fondo-suave); border-radius: 8px; } .ag-dato-lbl { font-family: "Gilroy Medim", "Gilroy", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cyan); margin: 0 0 3px; } .ag-dato-val { color: var(--navy); font-size: 14.5px; margin: 0; } .ag-desc { white-space: pre-line; font-size: 15px; line-height: 1.75; } .ag-desc a { color: var(--cyan); word-break: break-word; }