/* ==========================================================================
   PONARTE 2027 · Arte para cambiar vidas
   Submarca del Comité de Damas con línea visual propia — Manual PonArte 2027.
   Solo se aplica dentro de las páginas de PONARTE, que llevan la clase
   .pa-page en el contenedor raíz de la plantilla.

   Índice
   00 · Tokens                       :root
   01 · Barra de regreso             .pa-return
   02 · Encabezado                   .pa-header
   03 · Pie de página                .pa-footer
   04 · Tipografía de la submarca    .pa-display, .pa-oro, .pa-cintillo
   05 · Botones                      .pa-btn
   06 · Landing · Hero               .pa-hero
   07 · Landing · Collages           .pa-collage
   08 · Landing · Tres conceptos     .pa-tri
   09 · Landing · Siete comunidades  .pa-banda
   10 · Landing · Impacto por año    .pa-yr, .pa-delta
   11 · Landing · Claim central      .pa-claim
   12 · Landing · Fechas             .pa-fecha
   13 · Landing · Pasos de compra    .pa-paso
   14 · Catálogo · Ficha de obra     .pa-obra
   15 · Artistas · Ficha de artista  .pa-artista
   16 · Catálogo y Artistas · Filtro .pa-filtros
   17 · Formulario de inscripción    .pa-form
   18 · Preguntas frecuentes        .pa-faq
   19 · Ventana de inscripción      .pa-popup
   20 · Cintillo de patrocinadores  .pa-patrocinadores
   ========================================================================== */

/* ---------- 00 · Tokens -------------------------------------------------- */
/* Los colores y las tipografías viven en el Kit de Elementor (post 7) y se
   consumen en esta hoja con var(--e-global-color-…) y
   var(--e-global-typography-…). Aquí solo quedan los valores que el Kit no
   sabe guardar. --pa-azul-hover se ha borrado: no lo usaba nadie y su valor
   está en el Kit como pa_azul_hover. */
.pa-page {
  /* El Kit no guarda colores derivados con transparencia. Se calculan desde su
     variable para que sigan a un solo origen. Ojo: --pa-azul-60 vale 0.62. */
  --pa-azul-12:    color-mix(in srgb, var(--e-global-color-pa_azul) 12%, transparent);
  --pa-azul-60:    color-mix(in srgb, var(--e-global-color-pa_azul) 62%, transparent);

  /* El Kit guarda una sola familia por tipografía, sin pila de reserva. Estos
     dos tokens existen solo para añadirle esa reserva: el valor viene del Kit. */
  --pa-display:    var(--e-global-typography-pa_display-font-family), "Times New Roman", Georgia, serif;
  --pa-texto:      var(--e-global-typography-pa_texto-font-family), "Aileron", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pa-radius-img: 12px;
  --pa-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* El cuerpo de las páginas de PONARTE usa la tipografía de la submarca,
   no la Open Sans / Georgia del Comité. */
.pa-page,
.pa-page p,
.pa-page li { font-family: var(--pa-texto); }
/* El color ya no se pone en el <p>: cada editor de texto lo fija en Estilo >
   Color del texto, y el parrafo lo hereda. */
.pa-page,
.pa-page li { color: var(--e-global-color-pa_tinta); }

/* ---------- 01 · Barra de regreso al sitio del Comité -------------------- */
/* La nota de la derecha se cae en pantalla pequeña, como en el origen: ahí
   ocupa dos líneas y, con el encabezado entero fijo, se llevaría 70 px de
   pantalla en cada desplazamiento para repetir lo que ya dice el enlace. */

/* ---------- 02 · Encabezado (plantilla «Encabezado · PONARTE») ----------- */
/* El encabezado entero se queda pegado arriba al desplazar, franja azul de
   regreso al sitio del Comité incluida. La franja y la barra son dos
   contenedores HERMANOS dentro del <header> con que Elementor envuelve la
   plantilla, así que lo que tiene que pegarse es el envoltorio, no cada uno
   por su lado: dos `sticky` hermanos se solapan al desplazar.
   `rotarianas.css` le quita la caja a ese envoltorio con `display: contents`
   —allí está el porqué—; aquí se la devolvemos, y solo al encabezado de
   PONARTE: el `:has` lo distingue del encabezado del Comité sin depender del
   ID de la plantilla. */
header.elementor-location-header:has(> .pa-header) {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Dentro del envoltorio fijo la barra ya no se pega por su cuenta. La regla
   de abajo se queda como respaldo para navegadores sin `:has`, donde el
   envoltorio sigue sin caja y la barra tiene que pegarse ella sola. La doble
   clase gana a la posición relativa que Elementor da a todos los
   contenedores. */
header.elementor-location-header:has(> .pa-header) > .pa-page.pa-header {
  position: relative;
  z-index: auto;
}
.pa-page.pa-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Con el encabezado completo fijo, un enlace interno (#convocatoria, #faq…)
   dejaría el titular de su sección debajo de la barra. Mide 125 px a 1440 px
   y 90 con el menú plegado; se reserva eso más un poco de aire. */
.pa-page[id] { scroll-margin-top: 100px; }
@media (min-width: 1081px) {
  .pa-page[id] { scroll-margin-top: 140px; }
}
.pa-header .pa-nav .elementor-item {
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--pa-ease), border-color 0.2s var(--pa-ease);
}
.pa-header .pa-nav .elementor-item.elementor-item-active {
  border-bottom-color: var(--e-global-color-pa_dorado);
}

/* ---------- 03 · Pie de página (plantilla «Pie · PONARTE») --------------- */
.pa-page .pa-footer-claim .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
  letter-spacing: normal;
}
/* En el pie todos los enlaces pesan igual: marcar la página en curso ahí no
   orienta a nadie y rompe la lectura de la columna. */

/* ---------- 04 · Tipografía de la submarca ------------------------------- */
/* Titulares serif extra condensada — clase en el widget Título.
   El tamaño lo manda la clase,
no la etiqueta: en el origen los titulares de
   sección son <h2 class="pa-h2"> y el tamaño de h2 del Kit se queda un escalón
   por debajo (40px en vez de 64). */
.pa-page .pa-display .elementor-heading-title,
.pa-page .pa-display.elementor-widget-heading .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}
/* Dentro de la ventana emergente el titular baja de escala: ahí compite con el
   formulario,
no con la página entera. */
/* La cabecera de la ventana se separa del formulario con una hairline, como el
   .pa-modal__head del origen. */

/* Titular de página (Catálogo,
Artistas): un escalón por encima del de sección.
   Se escribe junto a .pa-display,
del que hereda familia,
color y versales. */

/* Subtítulo dentro de una sección — en la tipografía de texto,
no en la serif. */
/* La palabra protagonista del titular va en dorado: se marca con <span
   class="pa-oro"> dentro del propio texto del widget. */
.pa-page .pa-oro { color: var(--e-global-color-pa_dorado); }
/* Segunda línea en cursiva y caja baja, contrapunto del titular en versales. */
.pa-page .pa-cursiva {
  display: block;
  font-style: italic;
  text-transform: lowercase;
  color: var(--e-global-color-pa_dorado);
}
/* En el claim la segunda línea también va en dorado, como en la referencia: la
   cursiva marca el giro de la frase y el color, el remate. */

/* Cintillo dorado — etiqueta corta sobre un titular o un paso. */
.pa-page .pa-cintillo .elementor-heading-title {
  display: inline-block;
  padding: 0.3rem 0.85rem 0.35rem;
  background: var(--e-global-color-pa_dorado);
  font-family: var(--pa-texto);
}

/* Regla dorada de sección — 56x4, más ancha que la del Comité.
   Deja 1.6rem hasta el titular; el contenedor aporta 20px y el resto va aquí. */

/* ---------- 05 · Botones ------------------------------------------------- */
/* Elementor deja el botón con interlineado 1; el sistema de origen usa el del
   cuerpo, y de ahí salen los 57px de alto en lugar de 45. */

/* Flecha del botón. Es el mismo trazo del SVG del origen (15×10, con asta),
   puesto como máscara para que herede el color de cada variante. En el origen
   no la llevan todos los botones — «Ver bases» o «Quiero comprar una obra» van
   sin ella —, así que se escribe con un modificador y no por defecto. */
.pa-page .pa-btn--flecha .elementor-button-content-wrapper::after,
.pa-page .pa-link .elementor-button-content-wrapper::after {
  content: "";
  flex: none;
  align-self: center;
  width: 15px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M10 1l4 4-4 4M14 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M10 1l4 4-4 4M14 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s var(--pa-ease);
}
.pa-page .pa-link .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pa-page .pa-btn--flecha .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(4px); }
.pa-page .pa-link .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(3px); }

/* Variante dorada — la acción principal de la convocatoria. */

/* Variante de línea. */

/* Enlace subrayado en dorado. */
.pa-link .elementor-button {
  border: 0;
  border-bottom: 1.5px solid var(--e-global-color-pa_dorado);
}

/* ---------- 06 · Landing · Hero ----------------------------------------- */
.pa-page .pa-hero-title .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}
/* «para cambiar vidas» va más pequeño y en dorado, en su propia línea. */
/* «para cambiar vidas» es la segunda línea del titular: más pequeña, en cursiva
   y en caja baja, que es el contrapunto de las versales del manual. No basta
   con el dorado: sin la cursiva y sin `lowercase` sale como un segundo titular
   en versales y ocupa dos líneas. */
.pa-page .pa-hero-title .pa-script,
.pa-page .pa-hero-title .pa-oro {
  display: block;
  margin-top: 0.08em;
  font-size: 0.62em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--e-global-color-pa_dorado);
}

/* ---------- 07 · Landing · Collages de obra ------------------------------ */
/* Tres imágenes: una vertical a la izquierda y dos apiladas a la derecha. */
.pa-collage-hero > *:first-child img { aspect-ratio: 1 / 2; }
.pa-collage-hero > *:not(:first-child) img { aspect-ratio: 5 / 4; }

/* Cuatro imágenes de la convocatoria, en dos columnas desiguales.
   La retícula y la colocación de cada imagen viven en los ajustes de Elementor:
   el contenedor es de tipo Cuadrícula con columnas 1.18fr / 0.82fr y filas
   automáticas, y cada imagen lleva su columna y su fila en Avanzado. Aquí solo
   quedan los recortes, que el widget Imagen no sabe declarar. */
.pa-collage-conv img { object-fit: cover; }
.pa-collage-conv > *:nth-child(1) img { aspect-ratio: 4 / 3; }
.pa-collage-conv > *:nth-child(2) img { aspect-ratio: 8 / 5; }
.pa-collage-conv > *:nth-child(3) img { aspect-ratio: 2 / 1; }
.pa-collage-conv > *:nth-child(4) img { height: 100%; }

/* En pantalla estrecha el collage se reorganiza como en el origen: la primera
   a todo el ancho, las dos de en medio en pareja y la ultima a todo el ancho.

   Hay dos cosas contra las que pelear, las dos de Elementor y ninguna con
   variante responsiva: pasa la cuadricula a una sola columna, y escribe la
   colocacion de cada imagen con (0,3,0). De ahi el .pa-page delante.

   El recorte sigue siendo cover, como el origen: con contain las fotos
   saldrian con franjas blancas. Lo que cambia es la proporcion de cada una. */
@media (max-width: 767px) {
  .pa-page .pa-collage-conv.e-grid {
    --e-con-grid-template-columns: 1fr 1fr;
    --e-con-grid-template-rows: auto;
    gap: 8px;
  }
  .pa-page .pa-collage-conv > *:nth-child(1),
  .pa-page .pa-collage-conv > *:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .pa-page .pa-collage-conv > *:nth-child(2),
  .pa-page .pa-collage-conv > *:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
  .pa-page .pa-collage-conv > *:nth-child(4) { margin-top: 0; }

  .pa-collage-conv > *:nth-child(1) img { aspect-ratio: 4 / 3; }
  .pa-collage-conv > *:nth-child(2) img,
  .pa-collage-conv > *:nth-child(3) img { aspect-ratio: 1 / 1; }
  .pa-collage-conv > *:nth-child(4) img { height: auto; aspect-ratio: 3 / 2; }
}

/* Fotografía de un bloque imagen + texto. El recorte lo fija la clase y no el
   archivo: 4:3 por defecto y 3:4 en los bloques de texto largo, igual que el
   .pa-split__media del origen. */

/* Tira horizontal de tres fotografías del programa. El recorte es vertical
   (3:4), como en el origen: son retratos de la entrega en comunidad. */
.pa-tira img { aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- 08 · Landing · Tres conceptos (Arte · Solidaridad · Impacto) - */
/* Tres columnas sobre una hairline superior, separadas por hairlines
   verticales. El primero no lleva la de la izquierda ni relleno a ese lado,
   para que el texto arranque alineado con el resto de la página. */
.pa-page .pa-tri-word .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}
/* El concepto del medio va en dorado para romper la simetría de los tres. */

/* ---------- 09 · Landing · Banda de las siete comunidades ---------------- */
.pa-page .pa-banda-total .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}

/* ---------- 10 · Landing · Impacto por año ------------------------------- */
.pa-page .pa-yr-value .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}
/* El último año es el resultado: se resalta en dorado. */

/* Barra proporcional al valor. El ancho lo fija el widget Barra de progreso. */
.pa-yr-bar .elementor-progress-wrapper {
  height: 6px;
  border-radius: 0;
}
.pa-yr-bar .elementor-progress-bar { height: 6px; }
.pa-yr-bar .elementor-progress-text,
.pa-yr-bar .elementor-progress-percentage { display: none; }

.pa-page .pa-delta-num .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
  white-space: nowrap;
}
.pa-delta-num .pa-pp { font-size: 0.3em; letter-spacing: 0.08em; }

/* ---------- 11 · Landing · Claim central --------------------------------- */
.pa-page .pa-claim .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
  width: 100%;
  max-width: 9.93em;
  margin-inline: auto;
}

/* ---------- 12 · Landing · Fechas importantes ---------------------------- */
/* Los dos hitos públicos (cierre e inauguración) se marcan en negro. */

/* ---------- 13 · Landing · Pasos de compra ------------------------------- */

/* ---------- 14 · Catálogo · Ficha de obra -------------------------------- */
/* La obra no se enmarca: se apoya sobre el blanco de la página y se muestra
   entera (`contain`), como el collage del hero. */
.pa-obra img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Al pasar el cursor la fotografía crece muy poco y aparece un velo blanco con
   el rótulo: toda la imagen es el enlace a la obra. En pantallas táctiles no
   hay cursor, así que el rótulo se queda a la vista en una esquina. */
.pa-page .pa-obra .elementor-widget-theme-post-featured-image,
.pa-page .pa-artista .elementor-widget-theme-post-featured-image {
  position: relative;
  overflow: hidden;
}
.pa-page .pa-obra .elementor-widget-theme-post-featured-image img,
.pa-page .pa-artista .elementor-widget-theme-post-featured-image img {
  transition: transform 0.6s var(--pa-ease);
}
.pa-page .pa-obra:hover .elementor-widget-theme-post-featured-image img,
.pa-page .pa-artista:hover .elementor-widget-theme-post-featured-image img {
  transform: scale(1.02);
}
.pa-page .pa-obra .elementor-widget-theme-post-featured-image::before,
.pa-page .pa-artista .elementor-widget-theme-post-featured-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--pa-ease);
}
.pa-page .pa-obra .elementor-widget-theme-post-featured-image::after,
.pa-page .pa-artista .elementor-widget-theme-post-featured-image::after {
  content: "Ver ficha";
  position: absolute;
  inset: 0;
  margin: auto;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  padding: 0.5rem 1.1rem;
  background: #fff;
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-global-color-pa_azul);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.3s var(--pa-ease), transform 0.3s var(--pa-ease);
}
.pa-page .pa-obra:hover .elementor-widget-theme-post-featured-image::before,
.pa-page .pa-artista:hover .elementor-widget-theme-post-featured-image::before { opacity: 1; }
.pa-page .pa-obra:hover .elementor-widget-theme-post-featured-image::after,
.pa-page .pa-artista:hover .elementor-widget-theme-post-featured-image::after {
  opacity: 1;
  transform: none;
}
/* Ritmo de la ficha. La foto respira más que el resto y el precio se va al pie
   de la tarjeta, para que todas las fichas de una fila cierren a la misma
   altura aunque el título ocupe dos líneas. */
.pa-page .pa-obra .pa-obra-pie { margin-top: auto; }

/* El titular de la obra acompaña al hover de la tarjeta. */
.pa-page .pa-obra:hover .pa-obra-title .elementor-heading-title,
.pa-page .pa-artista:hover .pa-artista-name .elementor-heading-title { color: var(--e-global-color-pa_dorado); }
.pa-page .pa-obra-title .elementor-heading-title,
.pa-page .pa-artista-name .elementor-heading-title { transition: color 0.2s var(--pa-ease); }

@media (hover: none) {
  .pa-page .pa-obra .elementor-widget-theme-post-featured-image::after,
  .pa-page .pa-artista .elementor-widget-theme-post-featured-image::after {
    inset: auto auto 0.6rem 0.6rem;
    margin: 0;
    opacity: 1;
    transform: none;
  }
}
.pa-page .pa-obra-title .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}
/* La autoría es un widget Título, no un párrafo: sin esta regla se queda con
   la tipografía global de titulares y sale en Open Sans negrita azul. */
.pa-page .pa-obra-precio .elementor-heading-title {
  font-family: var(--pa-texto);
  font-variant-numeric: tabular-nums;
}
/* Solo se rotula lo vendido: la ausencia de sello significa disponible. */
.pa-obra--vendida img { opacity: 0.55; }
.pa-page .pa-obra--vendida .pa-obra-estado .elementor-heading-title { color: var(--e-global-color-pa_dorado); }

/* Marco de la obra cuya imagen aún no envía el artista. */

/* Ficha ampliada de la obra (ventana emergente del catálogo). */

/* ---------- 15 · Artistas · Ficha de artista ----------------------------- */
/* Sin fotografía: las iniciales del artista sobre fondo alterno. */
.pa-artista-fig { aspect-ratio: 4 / 5; }
.pa-page .pa-artista-ini .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}
.pa-page .pa-artista-name .elementor-heading-title {
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
}

/* ---------- 16 · Catálogo y Artistas · Barra de filtro ------------------- */
/* Widget Filtro por taxonomía de Elementor Pro, con la piel de PONARTE. */
/* Texto solo para lectores de pantalla. El sitio de origen lo trae en su base;
   aquí hace falta porque la barra etiqueta el desplegable sin rótulo visible. */
.pa-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Barra del catálogo y de artistas: píldoras a la izquierda, y a la derecha el
   interruptor de disponibles, el orden y el conteo. Se apila en móvil. */
.pa-toolbar-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem clamp(1rem, 2vw, 1.75rem);
}
.pa-page .pa-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  color: var(--e-global-color-pa_azul);
  cursor: pointer;
}
.pa-page .pa-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--e-global-color-pa_azul);
  cursor: pointer;
}
/* El desplegable es una píldora, como las de disciplina: los tres controles de
   la barra comparten forma y así se leen como un mismo grupo. */
.pa-page .pa-orden-select {
  -webkit-appearance: none;
          appearance: none;
  padding: 0.5rem 1.9rem 0.5rem 0.85rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23174690' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  border: 1px solid var(--pa-azul-12);
  border-radius: 100px;
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--e-global-color-pa_azul);
  cursor: pointer;
}
.pa-page .pa-orden-select:hover { border-color: var(--e-global-color-pa_azul); }
.pa-page .pa-conteo {
  margin: 0;
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  color: var(--e-global-color-pa_humo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .pa-toolbar-ctrl { justify-content: flex-start; gap: 1rem; }
}

/* Barra de filtro: forma, tipografia y los tres estados (normal, hover y
   activo) viven en los ajustes del widget Filtro por taxonomia. Aqui solo
   queda la transicion, que es lo unico que ese widget no sabe declarar. */
.pa-page .pa-filtros .e-filter-item {
  transition: background 0.2s var(--pa-ease), color 0.2s var(--pa-ease),
              border-color 0.2s var(--pa-ease);
}
/* Nota fina al pie de un encabezado («fichas de muestra»). La regla dorada de la
   izquierda la separa del texto de la página sin necesidad de una caja. */

/* ---------- 17 · Formulario de inscripción de obras ---------------------- */
/* Cinco grupos de campos, cada uno con un rótulo mínimo. La etiqueta va en
   versales azules y el campo lleva un borde muy tenue (azul al 12 %), que es lo
   que deja el formulario tranquilo pese a ser largo. */
.pa-page .pa-form .elementor-field-group > label {
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-global-color-pa_azul);
  margin-bottom: 0.45rem;
}
/* La cadena larga es para ganarle al Kit, que fija el relleno de los campos con
   `.elementor-kit-7 input:not([type=button]):not([type=submit])`. */
.pa-page .pa-form .elementor-form .elementor-field-group .elementor-field-textual {
  padding: 0.9rem 1rem;
  line-height: 1.7;
  background: #fff;
  border: 1px solid var(--pa-azul-12);
  border-radius: 4px;
  font-family: var(--pa-texto);
  color: var(--e-global-color-pa_tinta);
  transition: border-color 0.2s var(--pa-ease), box-shadow 0.2s var(--pa-ease);
}
.pa-page .pa-form .elementor-field-textual:focus {
  border-color: var(--e-global-color-pa_azul);
  box-shadow: 0 0 0 3px var(--pa-azul-12);
  outline: none;
}
.pa-page .pa-form .elementor-field-textual::placeholder { color: var(--e-global-color-pa_humo); }
.pa-page .pa-form textarea.elementor-field-textual {
  min-height: 150px;
  resize: vertical;
}
/* El desplegable usa el galón azul del origen en lugar del nativo. */
.pa-page .pa-form .elementor-form .elementor-field-group select.elementor-field-textual {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23174690' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
/* Título de grupo dentro del formulario (campo HTML). En el origen es un
   rótulo mínimo en gris, no un cintillo dorado: dentro de un formulario tan
   largo, cinco bloques dorados compiten con los campos y con el botón de
   envío, que es la única pieza que debe destacar. */
.pa-page .pa-form .pa-form-grupo { margin-top: clamp(1.5rem, 2.8vw, 2.25rem); }
.pa-page .pa-form .pa-form-grupo:first-child { margin-top: 0; }
.pa-page .pa-form .pa-form-grupo span {
  display: block;
  margin-bottom: 1rem;
  padding: 0;
  background: none;
  font-family: var(--pa-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e-global-color-pa_humo);
}
.pa-page .pa-form .pa-form-grupo p {
  margin-top: -0.35rem;
  margin-bottom: 1.1rem;
  font-size: 0.8125rem;
  color: var(--e-global-color-pa_humo);
}
/* El precio se pide en dólares: el signo queda a la vista dentro del campo. */
.pa-form .pa-precio .elementor-field-textual { padding-left: 1.9rem; }
.pa-form .pa-precio { position: relative; }
.pa-form .pa-precio::after {
  content: "$";
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  font-weight: 600;
  color: var(--e-global-color-pa_humo);
  pointer-events: none;
}
.pa-page .pa-form .elementor-field-type-acceptance label {
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
  color: var(--e-global-color-pa_humo);
}
.pa-page .pa-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.pa-page .pa-form .elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: 0.35rem;
  accent-color: var(--e-global-color-pa_azul);
}

/* El botón de envío lleva la misma flecha que los demás botones dorados. */
.pa-page .pa-form .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}
.pa-page .pa-form .elementor-button-content-wrapper::after {
  content: "";
  flex: none;
  width: 15px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M10 1l4 4-4 4M14 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M10 1l4 4-4 4M14 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s var(--pa-ease);
}
.pa-page .pa-form .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(4px); }
/* Campo de teléfono internacional. El selector de bandera va en posición
   absoluta sobre el campo, así que el número necesita sitio a la izquierda: sin
   esto el texto se monta sobre la bandera. La cadena es larga porque el relleno
   general del formulario se declara con esa misma especificidad. */
.pa-page .pa-form .elementor-form .elementor-field-group .iti > input.elementor-field-textual,
.pa-popup .pa-page .pa-form .elementor-form .elementor-field-group .iti > input.elementor-field-textual {
  padding-left: 56px;
}
.pa-page .pa-form .iti__flag-container { z-index: 2; }
.pa-form .iti { width: 100%; }

/* Aviso escrito dentro del HTML de un campo del formulario (nota del precio).
   No es un widget, asi que no tiene ajustes de Elementor: se queda aqui. */
.pa-page .pa-form p.pa-aviso {
  padding-left: 0.9rem;
  border-left: 2px solid var(--e-global-color-pa_dorado);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--e-global-color-pa_tinta);
  max-width: 78ch;
}

/* ---------- 18 · Landing · Preguntas frecuentes ------------------------- */
/* Widget Acordeón anidado. Como en el origen, no hay caja ni relleno lateral:
   solo una hairline arriba y otra entre preguntas, y el signo en dorado. */
.pa-page .pa-faq .e-n-accordion { border-top: 1px solid var(--e-global-color-pa_linea); }
.pa-page .pa-faq .e-n-accordion-item { border-bottom: 1px solid var(--e-global-color-pa_linea); }
/* Elementor encajona cada pregunta con un borde propio de 1px. En el origen no
   hay caja: solo la hairline entre filas, y el signo se va al extremo derecho. */
.pa-page .pa-faq .e-n-accordion-item-title {
  border: 0;
  border-radius: 0;
  justify-content: space-between;
}
.pa-page .pa-faq .e-n-accordion-item-title-header { flex: 1 1 auto; }
.pa-page .pa-faq .e-n-accordion-item > .e-con { border: 0; }
/* 1.34rem y no 1.4rem: el icono del acordeón de Elementor levanta la caja de
   línea 2px más que el botón del origen, y así la pregunta mide lo mismo. */
.pa-faq .e-n-accordion-item-title {
  padding: 1.4rem 0;
  background: transparent;
  transition: color 0.2s var(--pa-ease);
}
.pa-faq .e-n-accordion-item-title-text {
  font-family: var(--pa-texto);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--e-global-color-pa_tinta);
}
.pa-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.pa-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text { color: var(--e-global-color-pa_azul); }
.pa-faq .e-n-accordion-item-title-icon { color: var(--e-global-color-pa_dorado); }
.pa-faq .e-n-accordion-item > .e-con p {
  padding-bottom: 1.5rem;
  max-width: 62ch;
  color: var(--e-global-color-pa_humo);
}

/* Dentro de la ventana el formulario cambia de piel: el campo pierde la caja y
   se queda en una línea inferior, y la etiqueta baja a gris en caja normal. Es
   lo que hace el origen y es lo que sostiene un formulario de treinta campos
   sin que parezca una planilla. */
.pa-popup .pa-page .pa-form .elementor-field-group > label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
  color: var(--e-global-color-pa_humo);
  margin-bottom: 0.4rem;
}
.pa-popup .pa-page .pa-form .elementor-form .elementor-field-group .elementor-field-textual {
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--e-global-color-pa_linea);
  border-radius: 0;
}
.pa-popup .pa-page .pa-form .elementor-field-textual:focus {
  box-shadow: none;
  border-bottom-color: var(--e-global-color-pa_azul);
}
.pa-popup .pa-page .pa-form textarea.elementor-field-textual {
  min-height: 76px;
  padding-top: 0.3rem;
}
.pa-popup .pa-page .pa-form .elementor-form .elementor-field-group select.elementor-field-textual {
  padding-right: 1.5rem;
  background-position: right 0 center;
}
.pa-popup .pa-page .pa-form .elementor-field-textual::placeholder { color: #c3c7d0; }

/* ---------- 19 · Catálogo · Ficha ampliada de la obra -------------------- */
/* Es un <dialog> propio y no una ventana de Elementor: una ventana es una
   plantilla única y aquí hace falta una ficha por obra. El script rellena
   siempre el mismo diálogo con los datos de la obra pulsada.

   Todas las reglas van prefijadas con .pa-ficha-modal a propósito. Sin el
   prefijo pierden contra `.pa-page, .pa-page p, .pa-page li`, que lleva un
   elemento en el selector y por tanto gana a una sola clase: los párrafos de la
   ficha salían en tinta y en la tipografía de texto en lugar de en gris y en la
   serif. El titular, por lo mismo, caía en el h2 global. */
.pa-ficha-modal {
  width: min(920px, calc(100vw - 2rem));
  max-height: min(88svh, 880px);
  padding: 0;
  border: 0;
  border-radius: var(--pa-radius-img);
  background: #fff;
  color: var(--e-global-color-pa_tinta);
  box-shadow: 0 40px 90px -30px rgba(16, 19, 26, 0.45);
  overflow: hidden;
}
.pa-ficha-modal::backdrop { background: rgba(16, 19, 26, 0.55); }
body.pa-modal-abierto { overflow: hidden; }

/* Las reglas de autor (.pa-ficha__fila) ganan al display:none del navegador,
   así que el ocultado de las filas sin dato se declara aquí. */
.pa-ficha-modal [hidden] { display: none !important; }

.pa-ficha-modal .pa-ficha__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
}

.pa-ficha-modal .pa-ficha__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.25rem, 3vw, 2.25rem) 1.1rem;
  border-bottom: 1px solid var(--e-global-color-pa_linea);
}
.pa-ficha-modal .pa-ficha__eyebrow {
  margin: 0;
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e-global-color-pa_humo);
}
.pa-ficha-modal .pa-ficha__title {
  margin: 0.45rem 0 0;
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--e-global-color-pa_azul);
}
.pa-ficha-modal .pa-ficha__autor {
  margin: 0.45rem 0 0;
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
  color: var(--e-global-color-pa_tinta);
}
/* La doble clase gana a los estilos de botón del tema y del Kit, que lo
   pintarían azul relleno. */
.pa-ficha-modal .pa-ficha__close {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--pa-azul-12);
  border-radius: 50%;
  color: var(--e-global-color-pa_azul);
  cursor: pointer;
  transition: background 0.2s var(--pa-ease), color 0.2s var(--pa-ease);
}
.pa-ficha-modal .pa-ficha__close:hover { background: var(--e-global-color-pa_azul); color: #fff; }

.pa-ficha-modal .pa-ficha__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
}
@media (max-width: 720px) {
  .pa-ficha-modal .pa-ficha__body { grid-template-columns: 1fr; }
}

/* La obra se ve entera sobre un fondo neutro, nunca recortada. */
.pa-ficha-modal .pa-ficha__fig {
  margin: 0;
  background: var(--e-global-color-pa_fondo_alt);
  border-radius: var(--pa-radius-img);
  overflow: hidden;
}
.pa-ficha-modal .pa-ficha__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.pa-ficha-modal .pa-ficha__desc {
  margin: 0;
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--e-global-color-pa_humo);
}
.pa-ficha-modal .pa-ficha__dl { margin: 1.5rem 0 1rem; }
.pa-ficha-modal .pa-ficha__fila {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--e-global-color-pa_linea);
}
@media (max-width: 520px) {
  .pa-ficha-modal .pa-ficha__fila { grid-template-columns: 1fr; gap: 0.15rem; }
}
.pa-ficha-modal .pa-ficha__fila dt {
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-global-color-pa_humo);
}
.pa-ficha-modal .pa-ficha__fila dd {
  margin: 0;
  font-family: var(--pa-texto);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
  color: var(--e-global-color-pa_tinta);
}

.pa-ficha-modal .pa-ficha__pie {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--e-global-color-pa_linea);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.pa-ficha-modal .pa-ficha__precio {
  margin: 0;
  font-family: var(--pa-display);
  font-stretch: extra-condensed;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  color: var(--e-global-color-pa_azul);
  font-variant-numeric: tabular-nums;
}
.pa-ficha-modal .pa-ficha__estado {
  margin: 0;
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-global-color-pa_humo);
}
.pa-ficha-modal.pa-ficha-modal--vendida .pa-ficha__estado { color: var(--e-global-color-pa_dorado); }
.pa-ficha-modal .pa-ficha__nota {
  margin: 1.25rem 0 0;
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--e-global-color-pa_humo);
}

.pa-ficha-modal .pa-ficha__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
  border-top: 1px solid var(--e-global-color-pa_linea);
  background: var(--e-global-color-pa_fondo_alt);
}
/* Los botones de la ficha son enlaces sueltos, no widgets de Elementor, así
   que repiten aquí la piel del botón del sistema, en la escala compacta que
   usa el pie de la ficha. */
.pa-ficha-modal .pa-ficha__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid var(--e-global-color-pa_azul);
  border-radius: 4px;
  background: var(--e-global-color-pa_azul);
  color: #fff;
  font-family: var(--pa-texto);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--pa-ease), color 0.25s var(--pa-ease),
              border-color 0.25s var(--pa-ease);
}
.pa-ficha-modal .pa-ficha__btn svg { transition: transform 0.25s var(--pa-ease); }
.pa-ficha-modal .pa-ficha__btn:hover svg { transform: translateX(4px); }
.pa-ficha-modal .pa-ficha__btn--oro {
  background: var(--e-global-color-pa_dorado);
  border-color: var(--e-global-color-pa_dorado);
  color: var(--e-global-color-pa_negro);
}
.pa-ficha-modal .pa-ficha__btn--oro:hover {
  background: #fff;
  border-color: var(--e-global-color-pa_negro);
  color: var(--e-global-color-pa_negro);
}
.pa-ficha-modal .pa-ficha__btn--linea {
  background: transparent;
  color: var(--e-global-color-pa_azul);
}
.pa-ficha-modal .pa-ficha__btn--linea:hover { background: var(--e-global-color-pa_azul); color: #fff; }

@media (max-width: 560px) {
  .pa-ficha-modal { width: 100vw; max-width: 100vw; max-height: 100svh; border-radius: 0; }
  .pa-ficha-modal .pa-ficha__panel { max-height: 100svh; }
}

/* ---------- 20 · Ventana de inscripción ---------------------------------- */
/* El formulario de la convocatoria no vive dentro de la página: se abre en una
   ventana emergente (plantilla «Ventana · Inscripción PONARTE»), igual que el
   <dialog> del sitio de origen. Los botones «Quiero participar», el ítem del
   menú y el enlace del pie la abren con la acción de enlace popup:open de
   Elementor, así que no hay JavaScript propio que mantener.

   La ventana se limita en alto y desplaza su propio contenido: el formulario
   es largo y si no, empujaría la página de fondo. */
.pa-popup .dialog-message {
  max-height: min(88svh, 880px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Elementor solo deja elegir el color del botón de cierre: el área de toque, la
   posición y el centrado del aspa se dan aquí. Elementor lo declara `flex` con
   `justify-content` sin fijar, así que el aspa se queda pegada a la izquierda
   del círculo; hace falta encadenar .dialog-widget-content para ganarle. */
.pa-popup .dialog-widget-content .dialog-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pa-popup .dialog-close-button {
  top: clamp(1rem, 2.5vw, 1.5rem);
  right: clamp(1rem, 2.5vw, 1.5rem);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--e-global-color-pa_linea);
  border-radius: 50%;
  background: #fff;
  opacity: 1;
  transition: border-color 0.2s var(--pa-ease), color 0.2s var(--pa-ease);
}
.pa-popup .dialog-close-button:hover { border-color: var(--e-global-color-pa_azul); }

@media (max-width: 767px) {
  .pa-popup .dialog-message { max-height: 92svh; }
}

/* ---------- 20 · Cintillo de patrocinadores ------------------------------ */
/* Cada logo va en una casilla de medida fija y la imagen se contiene dentro.
   Parece un rodeo —lo natural sería medir la imagen— pero es lo único que
   funciona con este plugin:

   MarqueeAll mide la tira en JavaScript nada más arrancar y la duplica hasta
   cubrir el ancho del contenedor. Si en ese momento las imágenes no han
   cargado, miden 0 y el plugin clona de más; luego cargan, la tira se hincha y
   queda una cinta de 9.600 px que tarda cuatro minutos en dar la vuelta. Pasó:
   108 imágenes en seis grupos. Con la casilla fija la medida es la misma antes
   y después de cargar, así que el plugin acierta a la primera.

   El tamaño de la casilla sale de cómo se exportaron los logos: los verticales
   a 140 px de alto y los apaisados recortados a 380 px de ancho. Escalado por
   0.4, eso es 152x56. Los dos controles de tamaño del widget se dejan vacíos:
   su «Image Height» escribe un `height` fijo que deforma los apaisados.

   Van a color, sin filtro de gris: el sitio ya es de color y el cliente lo
   pidió así. */
.pa-page .pa-patrocinadores .masscie-item {
  width: 152px;
  height: 56px;
}
.pa-page .pa-patrocinadores .masscie-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* El plugin escribe --masscie-gap en el atributo style del contenedor, y ahí no
   se le puede ganar desde la hoja. Se fija el hueco en la propia tira, que sí
   es nuestra. */
.pa-page .pa-patrocinadores .masscie-track { gap: 40px; }

@media (max-width: 767px) {
  .pa-page .pa-patrocinadores .masscie-item {
    width: 120px;
    height: 44px;
  }
  .pa-page .pa-patrocinadores .masscie-track { gap: 28px; }
}

/* El cintillo se mueve solo. Quien haya pedido menos movimiento en el sistema no
   debería verlo animarse, y el plugin gobierna la marcha con
   `animation-play-state` desde JavaScript —así que pausarla no basta: hay que
   anular la animación entera y dejar la tira quieta. */
@media (prefers-reduced-motion: reduce) {
  .pa-page .pa-patrocinadores .masscie-group { animation: none !important; }
}