/* ===========================================================================
   ACROLA — estilos compartidos
   Complementa a Tailwind: aquí viven las clases que se repiten en varias
   páginas (migas, cabeceras, títulos de bloque, fichas de contacto) y los
   estilos del modo de edición en línea.
   ========================================================================= */

/* ── Migas de pan ───────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: 12px;
  color: oklch(0.56 0.005 245);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.breadcrumb a {
  color: oklch(0.42 0.21 18);
  transition: color 0.15s;
}
.breadcrumb a:hover { color: oklch(0.32 0.16 18); }

/* ── Cabecera de página ─────────────────────────────────────────────────── */
.page-header {
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 2px solid oklch(0.90 0.006 245);
}
.page-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: oklch(0.22 0.10 18);
}

/* ── Título de bloque (barra de color con etiqueta) ─────────────────────── */
.block-title {
  border-bottom: 2px solid oklch(0.90 0.006 245);
  margin-bottom: 18px;
  line-height: 1;
}
.block-title > span {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: oklch(0.42 0.21 18);
  border-radius: 3px 3px 0 0;
}
.block-title-red { border-bottom-color: oklch(0.42 0.21 18); }

/* ── Ficha de contacto ──────────────────────────────────────────────────── */
.contact-box {
  background: oklch(0.99 0.003 18);
  border: 1px solid oklch(0.91 0.012 18);
  border-radius: 0 3px 3px 0;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: oklch(0.36 0.008 245);
}
.contact-icon { width: 16px; text-align: center; }

/* ── Texto corrido de páginas estáticas ─────────────────────────────────── */
.about-content {
  font-size: 14px;
  line-height: 1.85;
  color: oklch(0.30 0.008 245);
}
.about-content p { margin-bottom: 14px; }
.about-content p:last-child { margin-bottom: 0; }
.about-content a { color: oklch(0.42 0.21 18); text-decoration: underline; }

.text-ink-3 { color: oklch(0.50 0.007 245); }

/* ── Distintivos de sección ─────────────────────────────────────────────── */
.badge-noticias      { background: oklch(0.45 0.18 248); color: #fff; }
.badge-actividades   { background: oklch(0.45 0.18 145); color: #fff; }
.badge-fiestas       { background: oklch(0.55 0.20 55);  color: #fff; }
.badge-radio         { background: oklch(0.40 0.18 300); color: #fff; }
.badge-ciencia       { background: oklch(0.46 0.14 195); color: #fff; }
.badge-accion_social { background: oklch(0.45 0.22 18);  color: #fff; }
.badge-general       { background: oklch(0.52 0.01 240); color: #fff; }

/* Marcadores de posición cuando un contenido no tiene imagen */
.placeholder-noticias      { background: oklch(0.92 0.06 250); color: oklch(0.55 0.18 250); }
.placeholder-actividades   { background: oklch(0.92 0.06 148); color: oklch(0.52 0.16 148); }
.placeholder-fiestas       { background: oklch(0.95 0.06 48);  color: oklch(0.68 0.18 48); }
.placeholder-radio         { background: oklch(0.92 0.06 290); color: oklch(0.52 0.18 290); }
.placeholder-ciencia       { background: oklch(0.92 0.06 192); color: oklch(0.52 0.15 192); }
.placeholder-accion_social { background: oklch(0.93 0.06 18);  color: oklch(0.52 0.18 18); }
.placeholder-general       { background: oklch(0.92 0.01 0);   color: oklch(0.55 0.01 0); }

/* ── Paginación ─────────────────────────────────────────────────────────── */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid oklch(0.88 0.006 245);
  color: oklch(0.38 0.007 245);
  background: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pagination-btn:hover    { background: oklch(0.42 0.21 18); color: #fff; border-color: oklch(0.42 0.21 18); }
.pagination-btn.current  { background: oklch(0.42 0.21 18); color: #fff; border-color: oklch(0.42 0.21 18); cursor: default; }
.pagination-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ── Pestañas de sección ────────────────────────────────────────────────── */
.seccion-tab {
  display: inline-block;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: oklch(0.38 0.007 245);
  border-bottom: 2.5px solid transparent;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.seccion-tab:hover,
.seccion-tab.active { color: oklch(0.42 0.21 18); border-bottom-color: oklch(0.42 0.21 18); }

/* ===========================================================================
   Modo de edición (sólo se ve con la sesión de administración abierta)
   ========================================================================= */

#acrola-adminbar {
  position: sticky;
  top: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 7px 16px;
  background: oklch(0.28 0.02 250);
  color: oklch(0.92 0.01 250);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#acrola-adminbar a,
#acrola-adminbar button {
  color: oklch(0.85 0.02 250);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
#acrola-adminbar a:hover,
#acrola-adminbar button:hover {
  color: #fff;
  border-bottom-color: oklch(0.76 0.17 68);
}
#acrola-adminbar form { display: inline; }
#acrola-estado.ok    { color: oklch(0.80 0.16 150); }
#acrola-estado.error { color: oklch(0.75 0.18 25); }

.acrola-editable {
  outline: 1px dashed oklch(0.60 0.12 250 / 0.55);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-color 0.15s, background 0.15s;
  cursor: text;
}
.acrola-editable:hover {
  outline-color: oklch(0.55 0.18 250);
  background: oklch(0.55 0.18 250 / 0.05);
}
.acrola-editable:focus {
  outline: 2px solid oklch(0.55 0.18 250);
  background: oklch(0.55 0.18 250 / 0.06);
}

/* ── Ajustes responsive comunes ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-title { font-size: 24px; }
  .block-title > span { font-size: 12px; padding: 7px 13px; }
}

/* ===========================================================================
   Componentes de contenido
   ========================================================================= */

/* ── Fichas de noticia ──────────────────────────────────────────────────── */
.news-card-img { position: relative; padding-bottom: 56%; overflow: hidden; flex-shrink: 0; }
.news-card-img > span {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.50s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; align-items: center; justify-content: center;
}
.news-card:hover .news-card-img > span { transform: scale(1.06); }
.news-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.news-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: auto;
}

/* ── Cuerpo de artículo ─────────────────────────────────────────────────── */
.article-content { font-size: 16px; line-height: 1.85; color: oklch(0.22 0.008 245); }
.article-content h2 {
  font-size: 20px; font-weight: 700; margin: 30px 0 12px;
  color: oklch(0.18 0.008 245); padding-bottom: 8px;
  border-bottom: 1.5px solid oklch(0.90 0.006 245);
}
.article-content h3 { font-size: 17px; font-weight: 700; margin: 24px 0 10px; }
.article-content p { margin-bottom: 16px; }
.article-content a { color: oklch(0.42 0.21 18); text-decoration: underline; }
.article-content a:hover { color: oklch(0.32 0.16 18); }
.article-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 16px 0; }
.article-content ul, .article-content ol { padding-left: 22px; margin-bottom: 16px; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 6px; }
.article-content blockquote {
  border-left: 3px solid oklch(0.42 0.21 18);
  margin: 20px 0; padding: 12px 20px;
  background: oklch(0.97 0.006 18);
  font-style: italic; color: oklch(0.35 0.008 245);
}

/* ── Noticias relacionadas (columna lateral) ────────────────────────────── */
.rel-card {
  display: flex; gap: 12px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid oklch(0.93 0.003 245);
  color: inherit;
}
.rel-card:last-child { border-bottom: none; }
.rel-card:hover p { color: oklch(0.42 0.21 18) !important; }
.rel-card-img { width: 70px; flex-shrink: 0; position: relative; padding-bottom: 48px; overflow: hidden; }
.rel-card-img > span { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ── Eventos: línea temporal ────────────────────────────────────────────── */
.event-row {
  display: flex; gap: 24px; padding: 24px 0;
  border-bottom: 1px solid oklch(0.90 0.006 245);
  align-items: flex-start;
}
.event-row:last-child { border-bottom: none; }
.event-date-badge {
  flex-shrink: 0; width: 66px; text-align: center;
  background: oklch(0.42 0.21 18); color: #fff;
  padding: 10px 6px; border-radius: 6px; line-height: 1;
}
.event-date-badge .day   { font-size: 28px; font-weight: 700; font-family: 'Righteous', cursive; display: block; line-height: 1; }
.event-date-badge .month { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-top: 4px; opacity: 0.88; }
.event-date-badge .year  { font-size: 10px; display: block; margin-top: 2px; opacity: 0.65; }

@media (min-width: 640px) {
  .timeline-track { position: relative; }
  .timeline-track::before {
    content: ''; position: absolute; left: 33px; top: 0; bottom: 0; width: 2px; z-index: 0;
    background: linear-gradient(to bottom, oklch(0.42 0.21 18) 0%, oklch(0.76 0.17 68) 60%, transparent 100%);
  }
  .event-row { position: relative; z-index: 1; }
}

.event-inscription-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: oklch(0.76 0.17 68); color: oklch(0.15 0.06 18);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 3px; transition: background 0.18s;
}
.event-inscription-btn:hover { background: oklch(0.68 0.17 68); }

.past-card {
  background: oklch(0.97 0.004 245);
  border: 1px solid oklch(0.91 0.005 245);
  padding: 14px 16px; opacity: 0.75; color: inherit;
  transition: opacity 0.2s;
}
.past-card:hover { opacity: 1; }
.collapsible-content { overflow: hidden; transition: max-height 0.35s ease; }

/* ── Ficha de evento ────────────────────────────────────────────────────── */
.evento-meta-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: oklch(0.97 0.005 245);
  border: 1px solid oklch(0.91 0.005 245);
  border-radius: 6px; font-size: 14px; color: oklch(0.30 0.008 245);
}
.evento-meta-pill i { color: oklch(0.42 0.21 18); font-size: 15px; }

.evento-content { font-size: 15px; line-height: 1.85; color: oklch(0.22 0.008 245); }
.evento-content p { margin-bottom: 14px; }
.evento-content a { color: oklch(0.42 0.21 18); text-decoration: underline; }

.inscription-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 28px;
  background: oklch(0.76 0.17 68); color: oklch(0.12 0.06 18);
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  border-radius: 4px; transition: background 0.18s, transform 0.15s;
}
.inscription-btn:hover { background: oklch(0.68 0.17 68); transform: translateY(-1px); }

.past-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 4px; margin-bottom: 24px;
  background: oklch(0.95 0.01 55); border: 1px solid oklch(0.88 0.06 55);
  font-size: 13px; color: oklch(0.40 0.10 55);
}

/* ── Filas compactas de evento y noticia ────────────────────────────────── */
.event-row-sm {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid oklch(0.91 0.005 245);
}
.event-row-sm:last-child { border-bottom: none; }
.event-date-sm {
  flex-shrink: 0; width: 50px; text-align: center;
  background: oklch(0.42 0.21 18); color: #fff;
  padding: 7px 4px; border-radius: 5px; line-height: 1;
}
.event-date-sm .day { font-size: 20px; font-weight: 700; font-family: 'Righteous', cursive; }
.event-date-sm .mon { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; opacity: 0.85; }

.news-mini {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid oklch(0.93 0.003 245); color: inherit;
}
.news-mini:last-child { border-bottom: none; }
.news-mini:hover p:first-child { color: oklch(0.42 0.21 18) !important; }
.news-mini-img { width: 72px; flex-shrink: 0; position: relative; padding-bottom: 52px; overflow: hidden; }
.news-mini-img > span { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ── Cabecera de Actividades ────────────────────────────────────────────── */
.actividades-hero {
  background: linear-gradient(135deg, oklch(0.14 0.06 18) 0%, oklch(0.22 0.10 18) 50%, oklch(0.18 0.08 55) 100%);
  padding: 52px 0 42px; position: relative; overflow: hidden;
}
.activity-card {
  background: #fff; border: 1px solid oklch(0.90 0.006 245);
  padding: 22px 20px; text-align: center;
  transition: box-shadow 0.22s, transform 0.22s;
}
.activity-card:hover { box-shadow: 0 8px 28px oklch(0 0 0 / 0.10); transform: translateY(-3px); }
.activity-icon {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: oklch(0.95 0.04 18); color: oklch(0.42 0.21 18);
  transition: background 0.22s, color 0.22s;
}
.activity-card:hover .activity-icon { background: oklch(0.42 0.21 18); color: #fff; }
.activity-name { font-size: 14px; font-weight: 700; color: oklch(0.22 0.08 18); margin-bottom: 6px; }
.activity-meta { font-size: 12px; color: oklch(0.52 0.007 245); line-height: 1.5; }

.enrollment-box {
  background: oklch(0.97 0.008 18);
  border-left: 4px solid oklch(0.42 0.21 18);
  padding: 22px 26px; border-radius: 0 6px 6px 0;
}
.enrollment-box h3 {
  font-size: 16px; font-weight: 700; margin-bottom: 10px;
  color: oklch(0.22 0.10 18); font-family: 'Righteous', cursive;
}

/* ── Cabecera de Radio ──────────────────────────────────────────────────── */
.radio-hero {
  position: relative; overflow: hidden; padding: 52px 0 40px;
  background: linear-gradient(135deg, oklch(0.18 0.10 300) 0%, oklch(0.25 0.14 295) 50%, oklch(0.20 0.08 270) 100%);
}
.radio-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, oklch(0.60 0.20 300 / 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.radio-icon-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
}
.radio-icon-wrap::before, .radio-icon-wrap::after {
  content: ''; position: absolute;
  border: 2px solid oklch(0.60 0.20 300 / 0.40); border-radius: 50%;
  animation: radio-pulse 2.4s ease-out infinite;
}
.radio-icon-wrap::after { animation-delay: 1.2s; }
@keyframes radio-pulse {
  0%   { width: 80px;  height: 80px;  opacity: 0.8; }
  100% { width: 130px; height: 130px; opacity: 0; }
}
.radio-icon-inner {
  width: 72px; height: 72px; border-radius: 50%;
  background: oklch(0.40 0.18 300);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; position: relative; z-index: 1;
}
.radio-info-box {
  background: oklch(0.97 0.006 300);
  border-left: 4px solid oklch(0.40 0.18 300);
  padding: 22px 26px; border-radius: 0 6px 6px 0;
}

/* ── Cabecera de Ciencia ────────────────────────────────────────────────── */
.ciencia-hero {
  position: relative; overflow: hidden; padding: 54px 0 44px;
  background: linear-gradient(135deg, oklch(0.18 0.08 195) 0%, oklch(0.24 0.12 200) 50%, oklch(0.20 0.06 218) 100%);
}
.ciencia-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, oklch(0.65 0.18 195 / 0.07) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
}
.ciencia-info-box {
  background: oklch(0.97 0.008 200);
  border-left: 4px solid oklch(0.46 0.14 195);
  padding: 22px 26px; border-radius: 0 6px 6px 0;
}

/* ── Cabecera de Fiestas ────────────────────────────────────────────────── */
.fiestas-hero {
  position: relative; overflow: hidden; padding: 52px 0 40px;
  background: linear-gradient(135deg, oklch(0.22 0.15 38) 0%, oklch(0.32 0.18 48) 45%, oklch(0.18 0.10 28) 100%);
}
.fiestas-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, oklch(0.76 0.17 68 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.fiestas-hero-inner { position: relative; z-index: 1; }

/* ── ¿Quiénes somos? ────────────────────────────────────────────────────── */
.mission-block {
  background: linear-gradient(135deg, oklch(0.42 0.21 18 / 0.06) 0%, oklch(0.76 0.17 68 / 0.04) 100%);
  border-left: 5px solid oklch(0.42 0.21 18);
  border-radius: 0 4px 4px 0; padding: 22px 26px; margin-bottom: 28px;
}
.obj-card {
  background: oklch(0.99 0.003 18);
  border: 1px solid oklch(0.91 0.012 18);
  border-left: 4px solid oklch(0.42 0.21 18);
  border-radius: 3px; padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: box-shadow 0.18s, transform 0.18s;
}
.obj-card:hover { box-shadow: 0 4px 18px oklch(0.42 0.21 18 / 0.12); transform: translateY(-2px); }
.obj-num {
  width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px;
  background: oklch(0.42 0.21 18); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* ── Únete ──────────────────────────────────────────────────────────────── */
.benefit-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid oklch(0.93 0.008 18);
}
.benefit-item:last-child { border-bottom: none; }
.benefit-icon {
  width: 36px; height: 36px; flex-shrink: 0; margin-top: 1px;
  background: oklch(0.42 0.21 18 / 0.10); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.42 0.21 18); font-size: 14px;
}
.step-item { display: flex; align-items: flex-start; gap: 16px; position: relative; }
.step-item:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 42px;
  width: 2px; height: calc(100% - 12px);
  background: oklch(0.42 0.21 18 / 0.20);
}
.step-num {
  width: 40px; height: 40px; flex-shrink: 0;
  background: oklch(0.42 0.21 18); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.price-badge {
  display: inline-flex; align-items: baseline; gap: 3px;
  background: linear-gradient(135deg, oklch(0.42 0.21 18), oklch(0.52 0.19 22));
  color: #fff; border-radius: 6px; padding: 10px 22px;
  box-shadow: 0 4px 18px oklch(0.42 0.21 18 / 0.35);
}

/* ── Únete ──────────────────────────────────────────────────────────────────
   Página informativa: neutros cálidos y tinta oscura como base; el carmesí y
   el oro sólo aparecen en detalles menores (enlaces, numeración, filete).
   ------------------------------------------------------------------------ */
.unete-page {
  --unete-papel:  oklch(0.985 0.006 45);
  --unete-panel:  oklch(0.968 0.009 48);
  --unete-linea:  oklch(0.905 0.008 40);
  --unete-tinta:  oklch(0.26 0.012 25);
  --unete-tinta2: oklch(0.44 0.010 25);
  --unete-tinta3: oklch(0.57 0.008 25);
  --unete-acento: oklch(0.42 0.21 18);
  --unete-oro:    oklch(0.76 0.17 68);

  background: var(--unete-papel);
  border: 1px solid var(--unete-linea);
  border-radius: 4px;
  padding: 34px 40px 40px;
  color: var(--unete-tinta2);
  font-size: 16px;
  line-height: 1.7;
}

/* Medida de lectura: unos 68 caracteres por línea. */
.unete-medida { max-width: 34em; }

.unete-page a {
  color: var(--unete-acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
}
.unete-page a:hover { color: oklch(0.32 0.16 18); }

/* Cabecera */
.unete-cabecera {
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--unete-linea);
}
.unete-regla {
  width: 34px; height: 2px;
  background: var(--unete-oro);
  margin-bottom: 18px;
}
.unete-titulo {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--unete-tinta);
}
.unete-subtitulo {
  margin-top: 8px;
  font-size: 12.8px;
  letter-spacing: 0.02em;
  color: var(--unete-tinta3);
}

.unete-entrada { color: var(--unete-tinta2); }

/* Ritmo entre secciones: no todas respiran igual. */
.unete-seccion { margin-top: 40px; }
.unete-seccion-amplia { margin-top: 52px; }

.unete-h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--unete-tinta);
  margin-bottom: 14px;
}

/* Cuota */
.unete-cuota-bloque {
  background: var(--unete-panel);
  border: 1px solid var(--unete-linea);
  border-radius: 3px;
  padding: 20px 24px 18px;
  max-width: 34em;
}
.unete-cuota-linea { color: var(--unete-tinta); }
.unete-importe {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--unete-tinta);
}
.unete-nota {
  margin-top: 8px;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--unete-tinta3);
}

/* Pasos de la afiliación: numeración discreta, sin círculos ni barras. */
.unete-pasos {
  list-style: none;
  counter-reset: unete-paso;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.unete-paso {
  counter-increment: unete-paso;
  position: relative;
  padding-left: 30px;
  max-width: 34em;
}
.unete-paso::before {
  content: counter(unete-paso) ".";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12.8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--unete-acento);
}
.unete-paso-titulo {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--unete-tinta);
  margin-bottom: 2px;
}

/* Datos de contacto */
.unete-contacto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  padding-top: 20px;
  border-top: 1px solid var(--unete-linea);
}
.unete-dato dt {
  font-size: 12.8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--unete-tinta3);
  margin-bottom: 4px;
}
.unete-dato dd {
  margin: 0;
  line-height: 1.6;
  color: var(--unete-tinta);
}
.unete-pie {
  margin-top: 30px;
  font-size: 12.8px;
  color: var(--unete-tinta3);
}

@media (max-width: 640px) {
  .unete-page { padding: 24px 18px 30px; font-size: 15.5px; }
  .unete-titulo { font-size: 26px; }
  .unete-h2 { font-size: 19px; }
  .unete-importe { font-size: 19px; }
  .unete-cuota-bloque { padding: 16px 16px 14px; }
  .unete-seccion { margin-top: 32px; }
  .unete-seccion-amplia { margin-top: 40px; }
  .unete-contacto { grid-template-columns: 1fr; gap: 16px; }
}

/* ===========================================================================
   Sección Huerto
   ========================================================================= */

.badge-huerto       { background: oklch(0.44 0.13 138); color: #fff; }
.placeholder-huerto { background: oklch(0.92 0.06 138); color: oklch(0.44 0.13 138); }

.huerto-hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 44px;
  background: linear-gradient(135deg,
    oklch(0.20 0.07 145) 0%,
    oklch(0.26 0.10 138) 48%,
    oklch(0.18 0.05 120) 100%);
}
/* Trama de hojas muy tenue, para dar textura sin ruido */
.huerto-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 30% 40%, oklch(0.70 0.15 130 / 0.07) 2px, transparent 2px),
    radial-gradient(circle at 80% 70%, oklch(0.70 0.15 130 / 0.05) 1.5px, transparent 1.5px);
  background-size: 46px 46px, 34px 34px;
}

.huerto-icono {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
  background: oklch(0.44 0.13 138);
}

.huerto-info-box {
  background: oklch(0.975 0.010 138);
  border: 1px solid oklch(0.91 0.015 138);
  border-radius: 8px;
  padding: 24px 28px;
}

@media (max-width: 640px) {
  .huerto-hero { padding: 38px 0 32px; }
  .huerto-icono { width: 54px; height: 54px; font-size: 22px; }
  .huerto-info-box { padding: 20px 18px; }
}

/* Galería de fotos dentro de una noticia importada */
.galeria-huerto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 20px 0 6px;
}
.galeria-huerto img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0;
}
.fuente-original { font-size: 12.5px; color: oklch(0.55 0.008 245); margin-top: 18px; }

/* ===========================================================================
   Cuadro de actividades del curso
   Rejilla de cuatro columnas en escritorio; en móvil cada fila se apila y
   cada dato muestra su etiqueta.
   ========================================================================= */

.cuadro-actividades {
  border: 1px solid oklch(0.90 0.006 245);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 40px;
}

.cuadro-cabecera,
.cuadro-fila {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: center;
}

.cuadro-cabecera {
  padding: 11px 20px;
  background: oklch(0.42 0.21 18);
  color: oklch(0.97 0.01 30);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cuadro-fila {
  padding: 15px 20px;
  border-top: 1px solid oklch(0.94 0.004 245);
  transition: background 0.15s;
}
.cuadro-fila:nth-child(odd) { background: oklch(0.988 0.003 40); }
.cuadro-fila:hover          { background: oklch(0.97 0.012 30); }

.cuadro-nombre { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.cuadro-icono {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.95 0.035 25);
  color: oklch(0.42 0.21 18);
  font-size: 15px;
}
.cuadro-nombre h2 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: oklch(0.20 0.05 18);
  margin: 2px 0 0;
}
.cuadro-detalle { font-size: 12.5px; color: oklch(0.52 0.008 245); margin: 3px 0 0; line-height: 1.5; }
.cuadro-imparte { font-size: 12px; color: oklch(0.58 0.06 250); margin: 3px 0 0; font-style: italic; }

.cuadro-dato {
  font-size: 13.5px;
  color: oklch(0.34 0.008 245);
  line-height: 1.5;
  min-width: 0;
}
.cuadro-dato i {
  color: oklch(0.66 0.02 30);
  font-size: 11px;
  margin-right: 7px;
}
.cuadro-precio { font-weight: 600; }
.cuadro-precio.es-gratis { color: oklch(0.45 0.16 150); }
.cuadro-precio.es-gratis i { color: oklch(0.55 0.14 150); }

@media (max-width: 860px) {
  .cuadro-cabecera { display: none; }
  .cuadro-fila {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 18px 18px 20px;
  }
  .cuadro-dato { display: flex; align-items: baseline; gap: 8px; }
  .cuadro-dato::before {
    content: attr(data-etiqueta);
    flex: 0 0 74px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.62 0.01 245);
  }
  .cuadro-dato i { display: none; }
}

/* ── Recuadro de matriculación ──────────────────────────────────────────── */
.matricula {
  background: oklch(0.975 0.012 30);
  border: 1px solid oklch(0.91 0.018 28);
  border-radius: 8px;
  padding: 24px 28px;
}
.matricula h2 {
  font-family: 'Righteous', cursive;
  font-size: 17px;
  color: oklch(0.24 0.10 18);
  margin: 0 0 14px;
}
.matricula h2 i { color: oklch(0.42 0.21 18); }
.matricula-texto {
  font-size: 14px;
  line-height: 1.85;
  color: oklch(0.30 0.010 30);
  max-width: 68ch;
}
.matricula-contacto {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid oklch(0.92 0.012 28);
  font-size: 13.5px;
  color: oklch(0.40 0.008 245);
}
.matricula-contacto i { color: oklch(0.42 0.21 18); margin-right: 7px; }
.matricula-contacto a { color: oklch(0.42 0.21 18); font-weight: 600; }
.matricula-contacto a:hover { text-decoration: underline; }
.matricula-sep { margin: 0 10px; color: oklch(0.78 0.01 30); }

@media (max-width: 640px) {
  .matricula { padding: 20px 18px; }
  .cuadro-icono { width: 34px; height: 34px; font-size: 14px; }
}

/* Aviso de estado del huerto (lista de espera, cierre temporal…) */
.huerto-aviso {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 13px;
  background: oklch(0.95 0.045 85);
  border: 1px solid oklch(0.87 0.07 82);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: oklch(0.38 0.09 70);
}
.huerto-aviso i { font-size: 12px; color: oklch(0.58 0.13 70); }

/* ===========================================================================
   Ficha clicable entera
   El enlace del título se estira sobre toda la tarjeta, de modo que se puede
   pulsar en cualquier parte sin anidar enlaces.
   ========================================================================= */

.news-card { position: relative; }
.news-card .enlace-ficha::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.news-card:hover .enlace-ficha { color: oklch(0.42 0.21 18) !important; }
.news-card:focus-within {
  outline: 2px solid oklch(0.52 0.22 18);
  outline-offset: 3px;
}
.news-card .enlace-ficha:focus-visible { outline: none; }

/* ===========================================================================
   Imagen principal de una noticia o un evento
   Se muestra entera (sin recortar) y se puede ampliar.
   ========================================================================= */

.imagen-principal { margin: 0 0 26px; }
.imagen-principal .ampliar {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid oklch(0.92 0.005 245);
  border-radius: 6px;
  background: oklch(0.975 0.004 245);
  cursor: zoom-in;
  overflow: hidden;
}
.imagen-principal img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}
.ampliar-pista {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  background: oklch(0.20 0.02 250 / 0.72);
  color: oklch(0.97 0.005 250);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.imagen-principal .ampliar:hover .ampliar-pista,
.imagen-principal .ampliar:focus-visible .ampliar-pista { opacity: 1; }

/* Las imágenes dentro del texto también se pueden ampliar */
.article-content img,
.galeria-huerto img { cursor: zoom-in; }

/* ===========================================================================
   Visor de imagen a pantalla completa
   ========================================================================= */

#visor-imagen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: oklch(0.12 0.01 250 / 0.94);
}
#visor-imagen.abierto { display: flex; }
#visor-imagen img {
  max-width: 94vw;
  max-height: 86vh;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.5);
}
#visor-imagen .visor-pie {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  text-align: center;
  color: oklch(0.88 0.01 250);
  font-size: 13px;
  padding: 0 60px;
}
#visor-imagen .visor-cerrar {
  position: absolute;
  top: 18px; right: 22px;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.12);
  color: oklch(0.96 0.005 250);
  font-size: 19px;
  cursor: pointer;
  transition: background 0.15s;
}
#visor-imagen .visor-cerrar:hover { background: oklch(1 0 0 / 0.24); }

@media (max-width: 640px) {
  .imagen-principal img { max-height: 60vh; }
  .ampliar-pista { opacity: 1; font-size: 11px; padding: 5px 10px; }
  #visor-imagen { padding: 12px; }
}

/* ===========================================================================
   Archivo fotográfico por años
   ========================================================================= */

.archivo { margin: 0 0 44px; }
.archivo-intro {
  font-size: 14px;
  line-height: 1.7;
  color: oklch(0.46 0.008 245);
  max-width: 68ch;
  margin: 0 0 24px;
}
.archivo-anio { margin-bottom: 30px; }
.archivo-etiqueta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
}
.archivo-etiqueta span {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 4px;
  color: #fff;
  font-family: 'Righteous', cursive;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.archivo-etiqueta em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.58 0.008 245);
}

.archivo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.archivo-pieza {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: oklch(0.94 0.005 245);
  aspect-ratio: 4 / 3;
  display: block;
}
.archivo-pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-in;
}
.archivo-pieza:hover img { transform: scale(1.06); }
.archivo-pieza.es-video img { cursor: pointer; }

.archivo-pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 10px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: oklch(0.98 0.005 250);
  background: linear-gradient(to top, oklch(0.12 0.02 250 / 0.88), transparent);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.archivo-pieza:hover .archivo-pie,
.archivo-pieza:focus-visible .archivo-pie { opacity: 1; }

.archivo-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.15 0.02 250 / 0.66);
  color: #fff;
  font-size: 14px;
  padding-left: 3px;
}
.archivo-pieza.es-video:hover .archivo-play { background: oklch(0.44 0.13 138); }
.archivo-sin-imagen {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: oklch(0.90 0.02 138);
  color: oklch(0.45 0.10 138);
  font-size: 24px;
}

@media (max-width: 640px) {
  .archivo-rejilla { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
  .archivo-pie { opacity: 1; font-size: 10.5px; padding: 18px 8px 6px; }
}

/* ===========================================================================
   Programas (grupos, ciclos, fiestas) y el índice «Qué hacemos»
   El matiz llega como --tono, así que un programa nuevo se ve bien sin
   escribir una línea de CSS.
   ========================================================================= */

.programa-hero {
  position: relative;
  overflow: hidden;
  padding: 50px 0 42px;
  background: linear-gradient(135deg,
    oklch(0.20 0.07 var(--tono)) 0%,
    oklch(0.27 0.11 var(--tono)) 50%,
    oklch(0.17 0.05 calc(var(--tono) - 18)) 100%);
}
.programa-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, oklch(0.72 0.14 var(--tono) / 0.08) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
}
.programa-icono {
  width: 66px; height: 66px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; color: #fff;
  background: oklch(0.46 0.15 var(--tono));
}
.programa-clase {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(1 0 0 / 0.52); margin: 0 0 6px;
}
.programa-titulo {
  font-family: 'Righteous', cursive;
  font-size: 34px; line-height: 1.08; color: #fff; margin: 0 0 6px;
}
.programa-lema { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.programa-resumen {
  color: oklch(1 0 0 / 0.74); font-size: 15px; max-width: 600px; line-height: 1.65; margin: 0;
}
.programa-pista {
  background: oklch(1 0 0 / 0.12); color: oklch(1 0 0 / 0.86);
  border: 1px solid oklch(1 0 0 / 0.18);
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
}

.programa-ficha {
  background: oklch(0.975 0.012 var(--tono));
  border: 1px solid oklch(0.91 0.018 var(--tono));
  border-radius: 8px;
  padding: 24px 28px;
}
.programa-subtitulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: oklch(0.46 0.02 var(--tono)); margin: 0 0 12px;
}
.programa-aviso {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 14px; padding: 10px 13px;
  background: oklch(0.95 0.045 85);
  border: 1px solid oklch(0.87 0.07 82);
  border-radius: 6px;
  font-size: 13px; line-height: 1.6; color: oklch(0.38 0.09 70);
}
.programa-aviso i { font-size: 12px; color: oklch(0.58 0.13 70); }
.programa-email {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}

/* ── Índice «Qué hacemos» ───────────────────────────────────────────────── */
.qh-hero {
  position: relative; overflow: hidden; padding: 50px 0 42px;
  background: linear-gradient(135deg, oklch(0.14 0.06 18) 0%, oklch(0.22 0.10 18) 55%, oklch(0.18 0.08 55) 100%);
}
.qh-bloque { margin-bottom: 44px; }
.qh-encabezado { margin-bottom: 18px; }
.qh-encabezado h2 {
  font-family: 'Righteous', cursive;
  font-size: 22px; color: oklch(0.22 0.08 18); margin: 0 0 4px;
}
.qh-encabezado p { font-size: 14px; color: oklch(0.50 0.008 245); margin: 0; max-width: 64ch; }

.qh-cursos {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px;
  border: 1px solid oklch(0.91 0.006 245); border-radius: 8px; overflow: hidden;
  background: oklch(0.91 0.006 245);
}
.qh-cursos li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 15px; background: #fff; font-size: 13.5px;
}
.qh-cursos i { color: oklch(0.52 0.16 25); font-size: 12px; width: 15px; }
.qh-curso-nombre { font-weight: 600; color: oklch(0.24 0.04 18); }
.qh-curso-dato { margin-left: auto; font-size: 11.5px; color: oklch(0.58 0.008 245); text-align: right; }

.qh-enlace {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: oklch(0.42 0.21 18);
}
.qh-enlace i { font-size: 11px; transition: transform 0.18s; }
.qh-enlace:hover i { transform: translateX(3px); }

.qh-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px;
}
.qh-tarjeta {
  position: relative;
  background: #fff;
  border: 1px solid oklch(0.91 0.006 245);
  border-top: 3px solid oklch(0.50 0.15 var(--tono));
  border-radius: 7px;
  padding: 20px 22px 18px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.qh-tarjeta:hover { box-shadow: 0 8px 26px oklch(0 0 0 / 0.09); transform: translateY(-2px); }
.qh-tarjeta-enlace { display: flex; align-items: center; gap: 12px; }
.qh-tarjeta-enlace::after { content: ''; position: absolute; inset: 0; }
.qh-tarjeta-icono {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.94 0.05 var(--tono));
  color: oklch(0.46 0.15 var(--tono));
  font-size: 16px;
}
.qh-tarjeta h3 {
  font-size: 16px; font-weight: 700; margin: 0;
  color: oklch(0.22 0.06 var(--tono));
}
.qh-tarjeta:hover h3 { color: oklch(0.42 0.16 var(--tono)); }
.qh-tarjeta-lema {
  font-size: 12.5px; font-weight: 600; margin: 10px 0 0;
  color: oklch(0.48 0.12 var(--tono));
}
.qh-tarjeta-texto { font-size: 13px; line-height: 1.6; color: oklch(0.45 0.008 245); margin: 7px 0 0; }
.qh-tarjeta-datos { list-style: none; margin: 12px 0 0; padding: 0; }
.qh-tarjeta-datos li {
  font-size: 12px; color: oklch(0.54 0.008 245); line-height: 1.6;
  display: flex; align-items: baseline; gap: 7px;
}
.qh-tarjeta-datos i { font-size: 10px; color: oklch(0.66 0.04 var(--tono)); width: 12px; }

@media (max-width: 640px) {
  .programa-hero { padding: 36px 0 30px; }
  .programa-titulo { font-size: 27px; }
  .programa-icono { width: 52px; height: 52px; font-size: 21px; }
  .programa-ficha { padding: 20px 18px; }
  .qh-curso-dato { display: none; }
}

/* ===========================================================================
   Portada
   ========================================================================= */

.portada-hero {
  position: relative; overflow: hidden;
  min-height: 360px; display: flex; align-items: center;
  /* La base va de oscura por la izquierda, donde está el texto, a cálida por
     la derecha, que es por donde asoma el dibujo. El brillo que lo recorta
     lo pone .marca-fondo, que sabe dónde queda exactamente. */
  background: linear-gradient(102deg,
    oklch(0.095 0.035 24) 0%,
    oklch(0.13 0.065 20) 44%,
    oklch(0.175 0.095 16) 100%);
}
.portada-hero-fondo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.portada-trama {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg,
    oklch(1 0 0 / 0.015) 0px, oklch(1 0 0 / 0.015) 1px, transparent 1px, transparent 28px);
}
.portada-hero-contenido { position: relative; z-index: 1; width: 100%; padding: 48px 0; }

.portada-lugar {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.76 0.17 68); margin-bottom: 16px;
}
.portada-lugar span { display: block; width: 28px; height: 2px; background: oklch(0.76 0.17 68); border-radius: 1px; }
.portada-titulo {
  font-family: 'Righteous', cursive; font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.05; margin-bottom: 10px; letter-spacing: -0.01em;
}
.portada-nombre {
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.52); margin-bottom: 14px;
}
.portada-lema {
  font-size: clamp(16px, 2.1vw, 20px); color: oklch(0.86 0.02 30);
  font-weight: 300; line-height: 1.5; margin-bottom: 30px;
}
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada-boton {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid oklch(1 0 0 / 0.30); color: oklch(0.93 0.01 30);
  font-size: 14px; font-weight: 600; letter-spacing: 0.03em;
  padding: 11px 22px; border-radius: 4px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.portada-boton:hover { background: oklch(1 0 0 / 0.08); transform: translateY(-1px); color: #fff; }
.portada-boton-fuerte {
  background: oklch(0.42 0.21 18); border-color: oklch(0.52 0.22 18); color: #fff;
}
.portada-boton-fuerte:hover { background: oklch(0.52 0.22 18); }

.portada-seccion { padding: 52px 0 48px; }
.portada-encabezado {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 26px;
}
.portada-vertodo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: oklch(0.42 0.21 18);
  padding-bottom: 3px; border-bottom: 1.5px solid oklch(0.42 0.21 18 / 0.30);
}
.portada-vertodo i { font-size: 11px; transition: transform 0.18s; }
.portada-vertodo:hover i { transform: translateX(3px); }

/* ── Agenda ─────────────────────────────────────────────────────────────── */
.agenda-lista { border-top: 1px solid oklch(0.92 0.006 245); }
.agenda-fila { border-bottom: 1px solid oklch(0.92 0.006 245); }
.agenda-enlace {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 10px 16px 4px;
  transition: background 0.15s;
}
.agenda-enlace:hover { background: oklch(0.975 0.01 var(--tono)); }
.agenda-fecha {
  flex-shrink: 0; width: 62px; text-align: center;
  border-radius: 6px; padding: 9px 4px; line-height: 1;
  background: oklch(0.46 0.15 var(--tono)); color: #fff;
}
.agenda-dia { display: block; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.agenda-mes {
  display: block; font-size: 10.5px; font-weight: 700; margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.08em; color: oklch(1 0 0 / 0.82);
}
.agenda-cuerpo { flex: 1; min-width: 0; }
.agenda-etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 5px; }
.agenda-tipo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
  background: oklch(0.94 0.05 var(--tono)); color: oklch(0.42 0.15 var(--tono));
}
.agenda-seccion { font-size: 11px; color: oklch(0.60 0.008 245); align-self: center; }
.agenda-titulo {
  font-size: 16px; font-weight: 700; line-height: 1.32; margin: 0 0 5px;
  color: oklch(0.20 0.04 18);
}
.agenda-enlace:hover .agenda-titulo { color: oklch(0.44 0.15 var(--tono)); }
.agenda-datos { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: oklch(0.52 0.008 245); }
.agenda-datos i { margin-right: 5px; font-size: 10.5px; color: oklch(0.68 0.03 var(--tono)); }
.agenda-imagen {
  flex-shrink: 0; width: 96px; height: 68px; border-radius: 5px; overflow: hidden;
  background: oklch(0.94 0.005 245);
}
.agenda-imagen img { width: 100%; height: 100%; object-fit: cover; }

/* ── Noticias en portada ────────────────────────────────────────────────── */

/* ── Resumen por secciones ──────────────────────────────────────────────── */
/* ── Portada · índice de secciones ──────────────────────────────────────
   Son enlaces, no fichas: el contenido de cada sección ya está arriba,
   en el muro de carteles. */
.indice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
  gap: 0 30px;
}
.indice-fila {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 10px 14px 2px;
  border-bottom: 1px solid oklch(0.93 0.005 245);
  transition: padding-left 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.indice-fila:hover { padding-left: 8px; }
.indice-icono {
  width: 31px; height: 31px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: oklch(0.94 0.05 var(--tono)); color: oklch(0.45 0.15 var(--tono));
  transition: background 0.16s, color 0.16s;
}
.indice-fila:hover .indice-icono {
  background: oklch(0.46 0.16 var(--tono)); color: oklch(0.98 0.01 var(--tono));
}
.indice-texto { min-width: 0; }
.indice-nombre {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3;
  color: oklch(0.22 0.05 var(--tono));
}
.indice-lema {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45; color: oklch(0.47 0.008 245);
}
.indice-cuenta {
  display: block; margin-top: 4px;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: oklch(0.66 0.008 245);
}

@media (max-width: 640px) {
  .agenda-enlace { gap: 13px; padding: 14px 4px; flex-wrap: wrap; }
  .agenda-imagen { display: none; }
  .portada-seccion { padding: 38px 0 34px; }
}

/* ===========================================================================
   Desplegable del menú principal
   En escritorio se abre al pasar el ratón o con el botón; en móvil queda
   como una lista sangrada dentro del menú plegable.
   ========================================================================= */

.nav-grupo { position: relative; display: flex; align-items: center; }
.nav-abrir {
  background: none; border: none; cursor: pointer;
  color: oklch(0.72 0.02 30);
  padding: 0 8px 0 0;
  font-size: 10px;
  line-height: 52px;
  transition: color 0.18s, transform 0.2s;
}
.nav-abrir:hover { color: oklch(0.97 0.005 30); }
.nav-grupo.abierto .nav-abrir { color: oklch(0.76 0.17 68); transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: 100%; left: -10px;
  z-index: 240;
  min-width: 272px;
  padding: 10px 0 12px;
  background: oklch(0.16 0.03 18);
  border: 1px solid oklch(0.30 0.05 18);
  border-top: 2px solid oklch(0.76 0.17 68);
  border-radius: 0 0 7px 7px;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.45);
}
.nav-sub[hidden] { display: none; }

.nav-sub-titulo {
  margin: 10px 0 3px;
  padding: 0 16px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.58 0.03 30);
}
.nav-sub-titulo:first-child { margin-top: 2px; }

.nav-sub-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 8px 16px;
  color: oklch(0.88 0.015 30);
  transition: background 0.14s, color 0.14s;
}
.nav-sub-item:hover,
.nav-sub-item:focus-visible { background: oklch(0.22 0.05 18); color: #fff; }
.nav-sub-item i {
  width: 17px;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: oklch(0.66 0.13 var(--tono, 40));
}
.nav-sub-item span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.nav-sub-item em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: oklch(0.62 0.02 30);
  margin-top: 1px;
}

/* En móvil, dentro del menú plegable, se muestra como lista sangrada */
@media (max-width: 767px) {
  .nav-grupo { display: block; width: 100%; }
  .nav-abrir {
    position: absolute; top: 0; right: 6px;
    line-height: 44px; padding: 0 14px; font-size: 13px;
  }
  .nav-sub {
    position: static;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: oklch(0.12 0.03 18);
    padding: 4px 0 8px;
  }
  .nav-sub-item { padding-left: 30px; }
  .nav-sub-titulo { padding-left: 30px; }
}

/* ── Eventos ya celebrados de una sección ───────────────────────────────── */
.pasados-lista { border-top: 1px solid oklch(0.93 0.006 245); }
.pasado-fila {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 8px 13px 2px;
  border-bottom: 1px solid oklch(0.93 0.006 245);
  color: inherit;
  transition: background 0.15s;
}
.pasado-fila:hover { background: oklch(0.975 0.012 var(--tono)); }
.pasado-fila time {
  flex-shrink: 0; width: 56px; text-align: center; line-height: 1.15;
  padding: 6px 2px; border-radius: 5px;
  background: oklch(0.95 0.025 var(--tono));
  color: oklch(0.42 0.13 var(--tono));
}
.pasado-dia  { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.pasado-mes  { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pasado-anio { display: block; font-size: 10px; opacity: 0.70; }
.pasado-cuerpo { flex: 1; min-width: 0; }
.pasado-tipo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: oklch(0.52 0.12 var(--tono));
}
.pasado-cuerpo h3 {
  font-size: 14.5px; font-weight: 700; line-height: 1.35; margin: 2px 0 0;
  color: oklch(0.24 0.03 18);
}
.pasado-fila:hover h3 { color: oklch(0.42 0.14 var(--tono)); }
.pasado-cuerpo p { font-size: 12.5px; color: oklch(0.54 0.008 245); margin: 3px 0 0; }
.pasado-cartel {
  flex-shrink: 0; width: 52px; height: 70px; border-radius: 4px; overflow: hidden;
  background: oklch(0.94 0.005 245);
}
.pasado-cartel img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .pasado-fila { gap: 12px; }
  .pasado-cartel { width: 42px; height: 56px; }
}

/* ── Agenda: rótulos, filtros y archivo ─────────────────────────────────── */
.agenda-rotulo {
  font-family: 'Righteous', cursive; font-size: 19px; font-weight: 400;
  color: oklch(0.30 0.09 18); margin: 0 0 12px;
}
.agenda-anio {
  display: block; font-size: 9.5px; font-weight: 600; margin-top: 2px;
  letter-spacing: 0.06em; color: oklch(1 0 0 / 0.68);
}

.agenda-filtros {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 13px; margin-bottom: 14px; border-radius: 8px;
  background: oklch(0.975 0.006 30); border: 1px solid oklch(0.92 0.01 30);
}
.agenda-filtros label { display: flex; align-items: center; margin: 0; }
.agenda-buscar {
  position: relative; flex: 1 1 230px;
}
.agenda-buscar i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: oklch(0.64 0.02 30); pointer-events: none;
}
.agenda-buscar input {
  width: 100%; padding: 8px 11px 8px 31px; font-size: 13.5px;
  border: 1px solid oklch(0.87 0.012 30); border-radius: 6px;
  background: #fff; color: oklch(0.25 0.02 30);
}
.agenda-filtros select {
  padding: 8px 10px; font-size: 13px; border-radius: 6px;
  border: 1px solid oklch(0.87 0.012 30); background: #fff;
  color: oklch(0.30 0.02 30); max-width: 230px;
}
.agenda-buscar input:focus, .agenda-filtros select:focus {
  outline: 2px solid oklch(0.62 0.14 18); outline-offset: 1px;
}
.agenda-boton {
  padding: 8px 17px; font-size: 13px; font-weight: 700; border-radius: 6px;
  border: none; cursor: pointer; color: #fff;
  background: oklch(0.42 0.21 18);
}
.agenda-boton:hover { background: oklch(0.36 0.19 18); }
.agenda-limpiar { font-size: 12.5px; color: oklch(0.50 0.03 30); text-decoration: underline; }

.agenda-cuenta {
  font-size: 12.5px; color: oklch(0.54 0.008 245); margin: 0 0 6px;
}
.agenda-vacio {
  padding: 28px 18px; text-align: center; border-radius: 8px;
  border: 1px dashed oklch(0.86 0.04 18);
  font-size: 14px; color: oklch(0.46 0.03 18);
}
.agenda-vacio i { display: block; font-size: 26px; color: oklch(0.82 0.05 18); margin-bottom: 9px; }
.agenda-vacio a { color: oklch(0.42 0.21 18); font-weight: 600; text-decoration: underline; }

@media (max-width: 640px) {
  .agenda-filtros select, .agenda-buscar { flex: 1 1 100%; max-width: none; }
  .agenda-filtros label { width: 100%; }
  .agenda-filtros select { width: 100%; }
}

/* ── Portada · muro de carteles ─────────────────────────────────────────── */
.portada-muro {
  background: oklch(0.973 0.006 30);
  border-top: 1px solid oklch(0.92 0.01 30);
}

.muro {
  display: grid;
  /* Con una pieza por sección, estos anchos dan 4, 3, 2 o 1 columna:
     divisores de 12, así la última fila nunca queda coja. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px 24px;
}

/* Sin marco ni sombra: el cartel es la pieza, no una tarjeta que lo envuelve. */
.muro-pieza { display: block; }

.muro-cartel {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  background: oklch(0.90 0.02 var(--tono));
  box-shadow: 0 1px 2px oklch(0.30 0.05 var(--tono) / 0.16);
}
.muro-cartel img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.muro-pieza:hover .muro-cartel img { transform: scale(1.035); }

.muro-sincartel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: oklch(0.62 0.12 var(--tono) / 0.55);
}

.muro-seccion {
  position: absolute; left: 0; bottom: 0;
  max-width: 100%;
  padding: 5px 10px 5px 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.98 0.01 var(--tono));
  background: oklch(0.44 0.16 var(--tono));
  border-radius: 0 4px 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.muro-fecha {
  margin: 9px 0 2px;
  font-size: 11.5px; color: oklch(0.54 0.008 245);
}
.muro-fecha span { color: oklch(0.47 0.11 var(--tono)); font-weight: 600; }

.muro-titulo {
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1.34;
  color: oklch(0.21 0.04 18);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.muro-pieza:hover .muro-titulo { color: oklch(0.44 0.17 var(--tono)); }

@media (max-width: 560px) {
  .muro { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 20px 14px; }
  .muro-titulo { font-size: 13px; -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .muro-cartel img { transition: none; }
  .muro-pieza:hover .muro-cartel img { transform: none; }
}

/* ── Portada · el próximo acto, con su cartel entero ────────────────────── */
.proximo {
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.proximo-sincartel { grid-template-columns: 1fr; }

.proximo-cartel {
  display: block; border-radius: 4px; overflow: hidden;
  background: oklch(0.94 0.02 var(--tono));
  box-shadow: 0 2px 5px oklch(0.30 0.06 var(--tono) / 0.17),
              0 14px 34px oklch(0.30 0.06 var(--tono) / 0.13);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.proximo-cartel:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 7px oklch(0.30 0.06 var(--tono) / 0.2),
              0 20px 44px oklch(0.30 0.06 var(--tono) / 0.18);
}
.proximo-cartel img { display: block; width: 100%; height: auto; }

/* Título y texto comparten medida: así el bloque no queda desigual. */
.proximo-ficha { padding-top: 3px; max-width: 62ch; }

.proximo-cuando {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  margin: 0 0 11px;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.50 0.13 var(--tono));
}
.proximo-cuando strong {
  font-family: 'Righteous', cursive; font-weight: 400;
  font-size: 30px; letter-spacing: 0; margin: 0 1px;
  color: oklch(0.42 0.18 var(--tono));
}
.proximo-hora {
  padding: 3px 10px; border-radius: 20px; font-size: 11px; letter-spacing: 0.06em;
  background: oklch(0.95 0.04 var(--tono)); color: oklch(0.42 0.14 var(--tono));
}

.proximo-etiquetas { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 9px; }

.proximo-titulo {
  font-family: 'Righteous', cursive; font-weight: 400;
  font-size: 30px; line-height: 1.15; margin: 0 0 12px;
  color: oklch(0.22 0.06 18);
}
.proximo-titulo a { color: inherit; }
.proximo-titulo a:hover { color: oklch(0.44 0.18 var(--tono)); }

.proximo-entrada {
  font-size: 14.5px; line-height: 1.68; margin: 0 0 16px;
  color: oklch(0.38 0.008 245);
}

.proximo-datos { list-style: none; margin: 0 0 20px; padding: 0; }
.proximo-datos li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13.5px; color: oklch(0.44 0.008 245); margin-bottom: 6px;
}
.proximo-datos i { width: 14px; flex-shrink: 0; font-size: 12px; color: oklch(0.60 0.11 var(--tono)); }

.proximo-acciones { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; margin: 0; }
.proximo-boton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 6px;
  font-size: 13.5px; font-weight: 700;
  background: oklch(0.44 0.17 var(--tono)); color: oklch(0.99 0.01 var(--tono));
  transition: background 0.18s;
}
.proximo-boton:hover { background: oklch(0.36 0.16 var(--tono)); }
.proximo-boton i { font-size: 11px; }
.proximo-inscribir {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 6px;
  font-size: 13.5px; font-weight: 700;
  border: 1px solid oklch(0.80 0.08 var(--tono)); color: oklch(0.42 0.16 var(--tono));
  transition: background 0.18s, border-color 0.18s;
}
.proximo-inscribir:hover {
  background: oklch(0.96 0.03 var(--tono)); border-color: oklch(0.66 0.13 var(--tono));
}

/* Los siguientes actos van en el mismo muro que la cartelera, más apretados. */
.muro-proximos {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid oklch(0.93 0.006 245);
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 24px 20px;
}

@media (max-width: 760px) {
  .proximo { grid-template-columns: 1fr; gap: 22px; }
  .proximo-cartel { max-width: 320px; }
  .proximo-titulo { font-size: 25px; }
  .proximo-cuando strong { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .proximo-cartel { transition: none; }
  .proximo-cartel:hover { transform: none; }
}

/* ── Marca ──────────────────────────────────────────────────────────────────
   El logo es un dibujo de trazo fino que no aguanta tamaños de menú, así que
   la rotulación de la cabecera y de la portada sigue siendo texto. El dibujo
   aparece en dos sitios donde no compite con nada: apagado al fondo del hero
   y pequeño al cerrar el pie. */

/* El logo, apagado al fondo de las cabeceras oscuras.
   La capa repite la caja del contenido para que el dibujo acabe donde acaba
   el texto y no en el borde de la ventana. Como cada cabecera tiene su propio
   ancho de contenido, se pasa por variables. Todas las cabeceras llevan
   overflow:hidden, así que lo que asoma por abajo queda recortado. */
.marca-fondo {
  position: absolute; inset: 0;
  max-width: var(--caja, 72rem);
  margin: 0 auto;
  pointer-events: none;
}
/* Destello: una copia del dibujo más encendida que sólo asoma en dos
   puntos —el sombrero y la cara, y el centro de la rotulación—, como si les diera
   la luz. Va detrás del dibujo apagado y se tiñe con el tono de la sección. */
.marca-fondo::before,
.marca-fondo::after {
  content: '';
  position: absolute;
  right: var(--sangria, 1rem);
  bottom: var(--marca-bajo, -28px);
  width: var(--marca-ancho, 470px);
  height: calc(var(--marca-ancho, 470px) * 0.7125);
  background: url('../marca/logo-claro.png') no-repeat center / contain;
}
.marca-fondo::before {
  background: oklch(0.82 0.11 calc(var(--tono, 18) + 45));
  opacity: var(--marca-destello, 0.20);
  /* El color sólo queda donde coinciden el trazo y alguno de los dos puntos. */
  -webkit-mask-image:
    url('../marca/logo-claro.png'),
    radial-gradient(ellipse 17% 22% at 75% 62%, #000 0%, transparent 100%),
    radial-gradient(ellipse 13% 15% at 60% 30%, rgb(0 0 0 / 0.6) 0%, transparent 100%);
  -webkit-mask-composite: source-in, source-over;
          mask-image:
    url('../marca/logo-claro.png'),
    radial-gradient(ellipse 17% 22% at 75% 62%, #000 0%, transparent 100%),
    radial-gradient(ellipse 13% 15% at 60% 30%, rgb(0 0 0 / 0.6) 0%, transparent 100%);
          mask-composite: intersect, add;
  -webkit-mask-size: contain, 100% 100%, 100% 100%;
          mask-size: contain, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.marca-fondo::after {
  opacity: var(--marca-tenue, 0.075);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--marca-funde, 0%));
          mask-image: linear-gradient(to right, transparent 0%, #000 var(--marca-funde, 0%));
}
@media (min-width: 640px) {
  .portada-hero .marca-fondo::before,
  .portada-hero .marca-fondo::after { right: 1.5rem; }
}
@media (max-width: 900px) {
  .marca-fondo::before,
  .marca-fondo::after { width: calc(var(--marca-ancho, 470px) * 0.72); height: calc(var(--marca-ancho, 470px) * 0.72 * 0.7125); }
  .marca-fondo::after { opacity: 0.06; }
}
@media (max-width: 560px) {
  .marca-fondo { display: none; }
}

.pie-cierre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}
.pie-cierre p { font-size: 12px; color: oklch(0.55 0.01 30); margin: 0; }
.pie-logo {
  width: 78px; height: auto; flex-shrink: 0;
  opacity: 0.92;
  transition: opacity 0.3s;
}
.pie-cierre:hover .pie-logo { opacity: 1; }

@media (max-width: 900px) {
  .portada-marca::after { width: 340px; height: 242px; opacity: 0.045; }
}
@media (max-width: 560px) {
  .portada-marca { display: none; }
  .pie-cierre { justify-content: center; text-align: center; gap: 12px; }
  .pie-logo { width: 68px; }
}

/* ── Programa · próximas citas, con el mismo formato que el próximo acto de
   la portada. Varias seguidas se separan con una raya fina. */
.programa-proximos { padding-top: 6px; }
.programa-proximos > .proximo + .proximo {
  margin-top: 34px; padding-top: 34px;
  border-top: 1px solid oklch(0.93 0.006 245);
}