/* Campañas de página completa (static/landing.js). Solo se aplica con la clase
 * `con-landing` en <html>: el resto de páginas no cambia.
 *
 * Los valores por defecto reproducen la landing de «Mecenes del CFIS» con el
 * azul oscurecido a 7:1 sobre blanco (#005c92; el original, #007bc3, da 4,5:1 y
 * no llega al AAA comprometido). Cada campaña los cambia desde su tema. */

.con-landing {
  --l-color: #005c92;
  --l-texto-boton: #ffffff;
  --l-alterno: #f1f3f6;
  --l-pie: #005c92;
  --l-titulo-cabecera: #ffffff;
  --l-ancho: 74rem;
}
.con-landing body { background: #fff; }
/* La tipografía de la campaña manda también en los titulares y cifras de las
   páginas que no pinta landing.js (el formulario de donar). */
.con-landing[data-landing-tipo="raleway"] { --serif: 'Raleway', var(--sans); }
.con-landing[data-landing-tipo="sans"] { --serif: var(--sans); }
.con-landing[data-landing-tipo="raleway"] h1,
.con-landing[data-landing-tipo="raleway"] h2,
.con-landing[data-landing-tipo="raleway"] h3,
.con-landing[data-landing-tipo="raleway"] .cifra { font-family: 'Raleway', var(--sans); }

.l-contenedor { width: min(100% - 2.5rem, var(--l-ancho)); margin-inline: auto; }
.l-principal { padding: 0; }

/* ---- Menú de anclas */
.l-menu { background: #fff; border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 40; }
.l-menu-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.l-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: var(--tinta); }
.l-logo img { max-height: 3.25rem; max-width: 11rem; }
.l-menu-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.l-menu-lista a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta);
                  text-decoration: none; font-weight: 500; font-size: .975rem; }
.l-menu-lista a:hover, .l-menu-lista a:focus-visible { color: var(--l-color); text-decoration: underline; }
.l-menu-conmutar { display: none; margin-left: auto; min-width: 44px; min-height: 44px; background: none;
                   border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); }

/* ---- Cabecera a sangre */
.l-cabecera { position: relative; min-height: min(44rem, 92vh); display: flex; align-items: center;
              color: var(--l-titulo-cabecera); overflow: hidden; background: var(--l-color); }
.l-cabecera-fotos, .l-cabecera-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-cabecera-fotos img { object-fit: cover; }
.l-cabecera-fotos::after { content: ''; position: absolute; inset: 0;
  /* Velo: garantiza el contraste del texto blanco sea cual sea la foto. */
  background: linear-gradient(90deg, rgba(0,0,0,calc(var(--l-velo) + .2)) 0, rgba(0,0,0,var(--l-velo)) 45%,
              rgba(0,0,0,calc(var(--l-velo) * .5)) 100%); }
.l-cabecera-texto { position: relative; padding: 3rem 0; }
.l-cabecera h1 { color: var(--l-titulo-cabecera); font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08;
                 max-width: 16ch; margin: 0 0 1rem; font-weight: 700; }
.l-entradilla { max-width: 34rem; font-size: 1.15rem; line-height: 1.5; color: var(--l-titulo-cabecera);
                white-space: pre-line; margin-bottom: 1.5rem; }
.l-marcador { background: rgba(255,255,255,.97); color: var(--tinta); max-width: 28rem; padding: 1.4rem 1.6rem;
              border-radius: .25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.l-porcentaje { font-size: 2.1rem; font-weight: 700; color: var(--l-color); margin: 0 0 .25rem; line-height: 1; }
.l-marcador .progreso > span { background: var(--l-color); }
.l-marcador-boton { text-align: center; margin: 1.25rem 0 1rem; }
.l-compartir { display: flex; justify-content: center; gap: .6rem; }
.l-red { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
         background: #1a1714; color: #fff; border: 0; cursor: pointer; }
.l-red:hover, .l-red:focus-visible { background: var(--l-color); }
.l-fotos-control { position: absolute; right: 1.25rem; bottom: 1rem; display: flex; gap: .25rem; z-index: 2; }
.l-fotos-control button { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; display: grid;
                          place-items: center; }
.l-fotos-control button::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%;
                                  background: rgba(255,255,255,.55); border: 2px solid #fff; }
.l-fotos-control button[aria-pressed="true"]::before { background: #fff; }

/* ---- Botón de donar */
.l-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px;
           padding: .7rem 2.6rem; background: var(--l-color); color: var(--l-texto-boton); border: 2px solid var(--l-color);
           border-radius: .15rem; font-weight: 700; text-decoration: none; cursor: pointer; font-size: 1rem; }
.l-boton:hover { filter: brightness(.88); color: var(--l-texto-boton); }
.l-boton:focus-visible, .l-red:focus-visible, .l-faq button:focus-visible, .l-pestanas [role=tab]:focus-visible,
.l-menu-lista a:focus-visible, .l-logo:focus-visible { outline: 3px solid #1a1714; outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff; }
.l-boton-claro { background: #fff; color: var(--l-color); border-color: #fff; padding: .5rem 1rem; }
.l-boton-claro:hover { color: var(--l-color); }

/* ---- Bloques */
.l-bloque { padding: 3.5rem 0; }
.l-bloque h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 1.5rem; font-weight: 700; }
.l-bloque h3 { font-size: 1.3rem; margin: 0 0 .75rem; font-weight: 700; }
.l-fondo-claro, .l-fondo-alterno { background: var(--l-alterno); }
.l-fondo-blanco { background: #fff; }
.l-fondo-color { background: var(--l-color); color: #fff; }
.l-fondo-color h2, .l-fondo-color h3, .l-fondo-color a { color: #fff; }
.l-html { line-height: 1.6; }
.l-html p { max-width: 72ch; }
.l-html img { max-width: 100%; height: auto; }
.l-columnas { display: grid; gap: 2.5rem; }
.l-columnas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-imagen-ancha { display: block; width: 100%; height: auto; margin-top: 2rem; }

.l-pestanas [role="tablist"] { display: flex; flex-wrap: wrap; gap: 0 2rem; margin-bottom: 1.25rem; }
.l-pestanas [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; padding: .4rem 0;
                            min-height: 44px; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; }
.l-pestanas [role="tab"][aria-selected="true"] { border-bottom-color: currentColor; }
.l-pestanas [role="tabpanel"]:focus-visible { outline: 2px solid var(--l-color); outline-offset: 4px; }

.l-cita { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-cita > img { width: 100%; height: 100%; object-fit: cover; min-height: 18rem; }
.l-cita figure { margin: 0; background: var(--l-color); color: #fff; padding: 2.5rem; display: flex;
                 flex-direction: column; justify-content: center; }
.l-cita blockquote { margin: 0; }
.l-cita blockquote p { font-size: 1.05rem; line-height: 1.55; }
.l-cita figcaption { margin: .75rem 0 1rem; }
.l-compromisos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-compromisos-lista { background: var(--l-color); color: #fff; padding: 2.5rem; }
.l-compromisos-lista h2 { color: #fff; font-size: 1.35rem; }
.l-compromisos-lista .l-html { margin-bottom: 1rem; }
.l-lema { background: #fff; color: var(--l-color); font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.5;
          padding: 2.5rem; margin: 0; display: flex; align-items: center; }
.l-fondo-claro .l-compromisos, .l-fondo-alterno .l-compromisos { border: 0; }

.l-faq-item { border-bottom: 1px solid var(--linea); }
.l-faq h3 { margin: 0; font-size: 1.1rem; }
.l-faq button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                min-height: 56px; padding: .75rem 0; background: none; border: 0; font: inherit; font-weight: 700;
                text-align: left; color: var(--tinta); cursor: pointer; }
.l-faq button .l-icono { flex: none; transition: transform .2s; }
.l-faq button[aria-expanded="true"] .l-icono { transform: rotate(45deg); }
.l-faq [role="region"] { padding: 0 0 1.25rem; }

.l-nivel { margin-bottom: 2rem; }
.l-nivel h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.l-logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
           align-items: center; }
.l-logos img { max-height: 5rem; max-width: 12rem; width: auto; height: auto; display: block; }
.l-logos a { display: inline-block; }

.l-galeria { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem;
             grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.l-galeria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.l-video { background: #1a1714; color: #fff; aspect-ratio: 16 / 9; display: grid; place-content: center;
           justify-items: center; gap: .75rem; padding: 1.5rem; text-align: center; }
.l-video .l-nota { max-width: 40ch; font-size: .9rem; }
.l-video-marco { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.l-contacto { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.l-contacto li { display: flex; gap: .6rem; align-items: center; min-height: 44px; }
.l-enlaces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.l-enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
.l-franja { text-align: center; }

/* ---- Pie */
.l-pie { background: var(--l-pie); color: #fff; padding: 1.25rem 0; }
.l-pie a, .l-pie p { color: #fff; }
.l-pie .l-contenedor { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; }
.l-firma { margin: 0; font-size: .875rem; }

/* ---- Menú que no cabe en una línea (títulos largos): pasa a desplegable, como
   en el móvil, en lugar de partirse en dos filas (lo decide landing.js). */
.l-menu-compacto .l-menu-conmutar { display: inline-grid; place-items: center; }
.l-menu-compacto .l-menu-lista { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
                border-bottom: 1px solid var(--linea); padding: .5rem 1.25rem 1rem; }
.l-menu-compacto .l-menu-lista.abierto { display: block; }
.l-menu-compacto .l-menu-lista ul { flex-direction: column; }
.l-menu-compacto .l-menu-fila { position: relative; }
.l-menu-volver { margin-left: auto; }

/* ---- Móvil */
@media (max-width: 52rem) {
  .l-menu-conmutar { display: inline-grid; place-items: center; }
  .l-menu-lista { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
                  border-bottom: 1px solid var(--linea); padding: .5rem 1.25rem 1rem; }
  .l-menu-lista.abierto { display: block; }
  .l-menu-lista ul { flex-direction: column; }
  .l-menu { position: sticky; }
  .l-menu-fila { position: relative; }
  .l-cabecera { display: block; min-height: 0; background: #fff; color: var(--tinta); }
  .l-cabecera-fotos { position: relative; height: 15rem; }
  .l-cabecera-fotos img { position: absolute; }
  .l-cabecera-fotos::after { display: none; }
  .l-cabecera-texto { padding: 1.5rem 0 2rem; }
  .l-cabecera h1, .l-entradilla { color: var(--tinta); max-width: none; }
  .l-marcador { box-shadow: none; padding: 0; max-width: none; background: none; }
  .l-fotos-control { top: 12.5rem; bottom: auto; }
  .l-columnas-2, .l-cita, .l-compromisos { grid-template-columns: 1fr; }
  .l-boton { width: 100%; }
  .l-bloque { padding: 2.5rem 0; }
}
/* Cabecera con importes rápidos: texto a la izquierda, tarjeta a la derecha. */
.l-cabecera-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.l-cabecera-dos .l-sin-marcador { grid-column: 1 / -1; background: none; box-shadow: none; padding: 0; max-width: none; }
.l-sin-marcador .l-compartir { justify-content: flex-end; }
.l-entradilla + .l-entradilla { margin-top: -.9rem; }
.l-rapido { background: #fff; color: var(--tinta); padding: 1.75rem 1.75rem 1.5rem; border-radius: .5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align: center; }
.l-rapido h2 { font-size: 1.4rem; margin: 0 0 .25rem; color: var(--tinta); font-weight: 700; }
.l-rapido-sub { margin: 0 0 1.1rem; color: var(--tinta-suave); }
.l-rapido-importes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem;
                     grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
.l-rapido-importe { display: grid; place-items: center; min-height: 3.25rem; border: 2px solid var(--linea-fuerte, #6d635a);
                    border-radius: .4rem; font-weight: 700; font-size: 1.25rem; color: var(--tinta); text-decoration: none; }
.l-rapido-importe:hover, .l-rapido-importe:focus-visible { border-color: var(--l-color); color: var(--l-color); }
.l-rapido-importe:focus-visible { outline: 3px solid var(--l-color); outline-offset: 2px; }
.l-rapido-otra { font-size: .95rem; line-height: 1.2; padding: .25rem; }
.l-rapido-texto { font-size: .875rem; text-align: left; color: var(--tinta-suave); }
.l-rapido-texto p { margin: 0; }

/* Título (y entradilla) centrados, si el bloque lo pide. */
.l-centrado > .l-contenedor > h2 { text-align: center; }

/* Colores propios de un bloque (fondo + texto con 7:1). */
.l-fondo-propio { background: var(--l-bloque-fondo); color: var(--l-bloque-texto); }
.l-fondo-propio h2, .l-fondo-propio h3, .l-fondo-propio > .l-contenedor > .l-html a,
.l-fondo-propio .l-texto a { color: var(--l-bloque-texto); }

/* Destacado: imagen y texto, lado a lado o la imagen encima. */
.l-destacado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-destacado-imagen img { width: 100%; height: 100%; object-fit: cover; min-height: 18rem; display: block; }
.l-destacado-texto { background: var(--l-color); color: #fff; padding: 2.5rem; display: flex; flex-direction: column;
                     justify-content: center; }
.l-destacado-texto h2 { color: #fff; font-size: 1.35rem; margin-bottom: 1rem; }
.l-destacado-texto .l-html a { color: #fff; }
.l-destacado-derecha .l-destacado-imagen { order: 2; }
.l-destacado-arriba { grid-template-columns: minmax(0, 1fr); }
.l-destacado-arriba .l-destacado-texto { background: none; color: inherit; padding: 1.5rem 0 0; }
.l-destacado-arriba .l-destacado-texto h2 { color: inherit; }
.l-destacado-arriba .l-destacado-texto .l-html a { color: var(--l-color); }
/* El botón va con su texto (a la izquierda, en la columna de lectura), salvo en
   un bloque centrado. */
.l-destacado-arriba .l-destacado-boton { text-align: start; }
.l-centrado .l-destacado-arriba .l-destacado-boton { text-align: center; max-width: none; }
.l-destacado-arriba .l-boton-claro { background: var(--l-color); color: var(--l-texto-boton, #fff); border-color: var(--l-color); }
.l-destacado-arriba .l-destacado-imagen img { min-height: 0; height: auto; }
.l-destacado-texto h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1rem; }
.l-destacado-arriba .l-destacado-texto h3 { color: inherit; }
.l-destacado-intro { text-align: center; max-width: 60ch; margin: 0 auto 2rem; }
.l-destacado-video .l-video { width: 100%; height: 100%; }
.l-destacado-arriba .l-destacado-video { order: 2; margin-top: 1.5rem; }
.l-destacado-solo { grid-template-columns: minmax(0, 1fr); }
.l-fondo-propio .l-destacado-arriba .l-destacado-texto .l-html a { color: inherit; }
.l-fondo-propio .l-destacado-arriba .l-boton-claro { background: var(--l-bloque-texto, #fff); color: var(--l-bloque-fondo, #000);
  border-color: var(--l-bloque-texto, #fff); }

/* Participantes: muro de mecenas. */
.l-participantes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
                   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.l-participante { background: var(--l-alterno); border-bottom: 3px solid var(--l-color); padding: .9rem 1rem;
                  display: flex; flex-direction: column; gap: .15rem; }
.l-participante-nombre { font-weight: 700; font-size: 1.05rem; }
.l-participante-fecha { font-size: .875rem; color: var(--tinta-suave); }
.l-participante-importe { font-weight: 700; font-size: 1.15rem; }

@media (max-width: 760px) {
  .l-cabecera-dos { grid-template-columns: 1fr; gap: 1.25rem; }
  .l-rapido { box-shadow: none; border: 1px solid var(--linea); }
  .l-rapido-importes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-sin-marcador .l-compartir { justify-content: center; }
  .l-destacado { grid-template-columns: minmax(0, 1fr); }
  .l-destacado-derecha .l-destacado-imagen { order: 0; }
  .l-destacado-imagen img { min-height: 12rem; max-height: 16rem; }
  .l-destacado-texto { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .l-faq button .l-icono { transition: none; } }
@media print { .l-menu, .l-compartir, .l-fotos-control, .barra-acc { display: none !important; } }

.l-sin-corte { white-space: nowrap; }