/* ============================================================================
   SOLIDARIDAD · TORMENTA RACHEL · Festival del Conocimiento
   ----------------------------------------------------------------------------
   Aviso temporal (14 de octubre de 2026): las sedes del festival reciben
   donativos para las familias afectadas por la tormenta Rachel.

     · Cintillo bajo la portada, con un botón «Cómo ayudar».
     · Ventana con la información completa. Se abre sola la primera vez que
       alguien entra y siempre con /#ayuda (solidaridad.js).

   Sobrio a propósito: es un tema serio. Nada de los colores de fiesta del
   festival; azul oscuro, blanco y grises, líneas finas, y el énfasis por el
   peso de la letra y no por el color. Todo el texto es de 16 px o más.

   Usa los tokens de landing.css («--fdc-…»): el bloque vive dentro de «.fdc».
   Para retirarlo, ver la nota en index.html.
   ========================================================================== */

/* ================================================================ CINTILLO */
/* Fucsia y no azul oscuro (14 de octubre de 2026): el cintillo tiene que
   resaltar en la portada. Es el magenta de las secciones de color (#D4116F),
   que con letra blanca da 5.1:1; el del logotipo se queda en 4.3:1. La
   ventana sigue sobria. */
.fdc-ayuda {
  position: relative; z-index: 1;
  background: #D4116F; color: #fff;
  padding: clamp(28px, 3.4vw, 44px) 0;
}
/* Sangrado completo, como las demás secciones de la portada. */
.fdc--bleed .fdc-ayuda {
  width: var(--fdc-vw);
  margin-left: calc(50% - var(--fdc-vw) / 2);
  margin-right: calc(50% - var(--fdc-vw) / 2);
}
.fdc-ayuda__in { display: flex; align-items: center; gap: 16px clamp(18px, 2.4vw, 40px); }
.fdc-ayuda__txt {
  flex: 1 1 auto; margin: 0;
  font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; color: #fff;
}
.fdc-ayuda__txt b {
  display: block; margin-bottom: 6px;
  font-family: var(--fdc-f-body); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em; color: #fff;
  text-wrap: balance;   /* que «Rachel.» no quede sola en el segundo renglón */
}
.fdc-ayuda__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 12px 26px; border-radius: 8px; cursor: pointer;
  background: #fff; color: #D4116F; border: 1.5px solid #fff;
  font-family: var(--fdc-f-body); font-size: 1.1rem; font-weight: 700; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fdc-ayuda__btn:hover { background: var(--fdc-dark); color: #fff; border-color: var(--fdc-dark); }
.fdc-ayuda__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fdc-ayuda__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 720px) {
  .fdc-ayuda__in { flex-direction: column; align-items: flex-start; }
  .fdc-ayuda__btn { width: 100%; justify-content: center; }
}

/* ================================================================= VENTANA
   La lámina del aviso (aviso-tormenta-rachel.webp, 1254 × 1254), entera. La
   ventana es cuadrada como la imagen y nunca más alta que la pantalla, para
   que se vea completa sin desplazarse.
   ========================================================================== */
.fdc-ayuda-dlg {
  width: min(680px, calc(100vw - 32px), calc(100dvh - 32px));
  padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 24px 64px rgba(23,32,51,.35);
}
/* El foco inicial va a la ventana misma (solidaridad.js); sin contorno. */
.fdc-ayuda-dlg:focus { outline: none; }
.fdc-ayuda-dlg::backdrop { background: rgba(23,32,51,.7); }
.fdc-ayuda-dlg[open] { animation: fdc-ayuda-entra .25s ease-out; }
@keyframes fdc-ayuda-entra { from { opacity: 0; } to { opacity: 1; } }
/* Con la ventana abierta, la página de atrás no se desplaza. */
html:has(.fdc-ayuda-dlg[open]) { overflow: hidden; }

.fdc-ayuda-dlg__marco { position: relative; }
.fdc-ayuda-dlg__lamina { position: relative; }
.fdc-ayuda-dlg__lamina img { display: block; width: 100%; height: auto; }

.fdc-ayuda-dlg__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 0; color: var(--fdc-dark);
  box-shadow: 0 2px 10px rgba(23,32,51,.2);
  transition: background .2s ease;
}
.fdc-ayuda-dlg__cerrar:hover { background: #fff; }
.fdc-ayuda-dlg__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Las dos zonas activas, sobre lo que la lámina trae dibujado. Medidas en la
   imagen original: el botón «Ver sedes y horarios» va de (751, 1014) a
   (1183, 1070) y la franja «Si no puedes donar…» de (233, 1072) a
   (1037, 1143), sobre 1254 px. Llevan un margen de unos píxeles para que
   sean fáciles de atinar. */
.fdc-ayuda-dlg__zona {
  position: absolute; z-index: 1; display: block;
  padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
.fdc-ayuda-dlg__zona:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.fdc-ayuda-dlg__zona:focus-visible { outline: 3px solid #F6D20A; outline-offset: 2px; }
.fdc-ayuda-dlg__zona--sedes     { left: 59.4%; top: 80.4%; width: 35.4%; height: 5.4%; }
.fdc-ayuda-dlg__zona--compartir { left: 18.2%; top: 85.5%; width: 64.9%; height: 5.9%; }

@media (prefers-reduced-motion: reduce) {
  .fdc-ayuda-dlg[open] { animation: none; }
}