/* =====================================================================
   PÁGINA «BUSCADOR DE FESTIVALES DE CINE» (/buscador-festivales-cine/, plantilla fuente/plantillas/landing.html)
   Va encima de ficha.css (título .display, .fc-k, .fc-cta…) y solo afecta a <main class="ficha landing">.
   Colores: solo los de tokens.css. Nada aparece con animaciones CSS: lo hace aparicion.js con fundido.js.
   ===================================================================== */

/* ---------- Arriba: texto a la izquierda, plazos reales que cierran pronto a la derecha ---------- */
.landing .ld-hero { padding: 72px 0 88px; }
/* ficha.css deja 440 px libres a la derecha del título de cada ficha (para su tarjeta): aquí no */
.ficha.landing.landing .fc-hero .wrap > * { max-width: none; }
.landing .ld-hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.landing .ld-k { color: var(--brand-ink); }
.landing .ld-hero h1 { margin: 16px 0 0; max-width: 13ch; font-size: clamp(54px, 7.6vw, 112px); line-height: .86; text-wrap: balance; }
.landing .ld-lead { margin: 24px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.landing .ld-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.landing .ld-garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.landing .ld-garantias li { display: inline-flex; align-items: center; gap: 7px; }
.landing .ld-garantias svg { width: 16px; height: 16px; color: var(--brand); }

.landing .ld-muestra { padding: 22px; border-radius: 26px; background: var(--soft); border: 1px solid var(--line); box-shadow: var(--shadow); }
.landing .ld-muestra-k { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.landing .ld-muestra-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.landing .ld-plazos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.landing .ld-plazo a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.landing .ld-plazo a:hover { border-color: var(--ink); color: var(--ink); }
.landing .ld-plazo-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.landing .ld-plazo-ico svg { width: 20px; height: 20px; }
.landing .ld-plazo-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.landing .ld-plazo-txt b { overflow: hidden; font-size: 15px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.landing .ld-plazo-txt small { overflow: hidden; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.landing .ld-plazo-dias { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--open); color: var(--open-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }   /* los colores de estado: fondo lleno + su tinta (contraste comprobado en tokens.css) */
.landing .ld-plazo-dias.urgente { background: var(--closed); color: var(--closed-ink); }
.landing .ld-muestra-mas { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.landing .ld-muestra-mas svg { width: 16px; height: 16px; }

/* ---------- Secciones ---------- */
.landing .ld-seccion { padding: 72px 0; border-top: 1px solid var(--line); }
.landing .ld-titular { margin-bottom: 36px; }
.landing .ld-titular h2 { margin: 12px 0 0; font-size: clamp(40px, 5vw, 68px); }

/* Antes y después */
.landing .ld-antes-despues { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.landing .ld-columna { padding: 30px 30px 26px; border-radius: 26px; border: 1px solid var(--line); }
.landing .ld-antes { background: var(--soft); }
.landing .ld-despues { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.landing .ld-columna-k { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.landing .ld-columna ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.landing .ld-columna li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.landing .ld-columna li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.landing .ld-antes li svg { color: var(--closed); }
.landing .ld-despues li svg { color: var(--brand); }

/* Tres puntos */
.landing .ld-puntos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.landing .ld-punto { padding: 30px; border-radius: 26px; background: var(--soft); }
.landing .ld-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ink); color: var(--bg); }
.landing .ld-ico svg { width: 24px; height: 24px; }
.landing .ld-punto h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 21px; line-height: 1.25; color: var(--ink); }
.landing .ld-punto p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.landing .ld-pronto { padding: 4px 10px; border-radius: 999px; background: var(--soon-tint); color: var(--soon-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Cifras */
.landing .ld-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.landing .ld-cifras li { display: grid; gap: 8px; align-content: start; padding: 4px 0 0 20px; border-left: 3px solid var(--brand); }
.landing .ld-cifras b { font-size: clamp(56px, 6.4vw, 92px); line-height: .85; color: var(--ink); }
.landing .ld-cifras span { max-width: 24ch; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

/* Preguntas */
.landing .ld-preguntas-rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.landing .ld-preguntas { display: grid; gap: 10px; }
.landing .ld-preguntas details { border-radius: 20px; background: var(--soft); }
.landing .ld-preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 17px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.landing .ld-preguntas summary::-webkit-details-marker { display: none; }
.landing .ld-preguntas summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--muted); }
.landing .ld-preguntas details[open] summary::after { content: "−"; }
.landing .ld-preguntas details p { margin: 0; padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* Llamada final (la franja verde de las fichas, más grande) */
.landing .ld-cta { margin-top: 24px; padding: 64px 60px; }
.landing .ld-cta p { max-width: 16ch; font-size: clamp(36px, 4.8vw, 66px); }
.landing .ld-cta-botones { flex: none; display: grid; justify-items: center; gap: 14px; }
.landing .ld-cta-link { font-size: 14px; font-weight: 600; color: var(--mix-claro); text-underline-offset: 3px; }
.landing .ld-cta-link:hover { color: var(--mix-claro); }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 960px) {
  .landing .ld-hero-rejilla, .landing .ld-preguntas-rejilla { grid-template-columns: 1fr; gap: 40px; }
  .landing .ld-puntos { grid-template-columns: 1fr; }
  .landing .ld-cifras { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .landing .ld-cta { padding: 44px 32px; }
  .landing .ld-cta-botones { justify-items: start; }
}
@media (max-width: 640px) {
  .landing .ld-hero { padding: 32px 0 56px; }
  .landing .ld-hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .landing .ld-lead { font-size: 16.5px; }
  .landing .ld-botones .btn { flex: 1 1 100%; justify-content: center; }
  .landing .ld-muestra { padding: 14px; border-radius: 22px; }
  .landing .ld-plazo a { gap: 12px; padding: 12px; }
  .landing .ld-plazo-ico { width: 36px; height: 36px; }
  .landing .ld-seccion { padding: 52px 0; }
  .landing .ld-antes-despues { grid-template-columns: 1fr; }
  .landing .ld-columna, .landing .ld-punto { padding: 24px 22px; border-radius: 22px; }
  .landing .ld-cifras b { font-size: 56px; }
  .landing .ld-preguntas summary { padding: 18px 20px; font-size: 16px; }
  .landing .ld-preguntas details p { padding: 0 20px 20px; }
  .landing .ld-cta { padding: 32px 22px; }
  .landing .ld-cta-botones { width: 100%; justify-items: stretch; }
  .landing .ld-cta-botones .btn { justify-content: center; }
  .landing .ld-cta-link { text-align: center; }
}