/* =====================================================================
   reconstruccion.css — Scrolls de la reconstrucción de incendios · elDiario.es
   ---------------------------------------------------------------------
   Estilos para los DOS scrollytellings (los pinta reconstruccion.js):

     · Raíz .recons-incendios              → esqueleto común (figura sticky + pasos +
                                   tarjetas + kicker `momento`).
     · .recons-incendios-humo              → vídeo del humo. Escritorio: vídeo a un
                                   lado, texto al otro. Móvil: texto encima.
     · .recons-incendios-puntos            → mapa MapLibre a ancho completo; texto
                                   siempre superpuesto (estilo jets).

   Clases namespaced `recons-incendios-*`, sin estilos sobre elementos genéricos, para
   incrustar limpio en el CMS y que AMBOS scrolls convivan en una misma página
   sin pisarse (cada uno vive bajo su modificador de raíz).
   ===================================================================== */

/* ─────────────────────────  RAÍZ COMÚN  ───────────────────────── */
.recons-incendios {
    /* Tipografías de la casa. Sanomat la sirve el CMS; fallback editorial. */
    --recons-incendios-sanomat: 'Sanomat-regular', Georgia, 'Times New Roman', serif;
    --recons-incendios-encode:  'Encode Sans', system-ui, sans-serif;
    --recons-incendios-tinta:   #1a1a1a;
    --recons-incendios-rojo:    #d0021b;   /* rojo de incendios elDiario */
    /* Hueco para la barra de menú de la página de cálculos (evita que la
       figura fijada quede tapada). Ajusta si el menú cambia de alto. */
    --recons-incendios-menu:    60px;

    position: relative;
    width: 100%;
    background: #fff;
    color: var(--recons-incendios-tinta);
    text-align: left;
}

/* ---- Figura fija (vídeo o mapa) ---- */
.recons-incendios-figura {
    position: sticky;
    top: var(--recons-incendios-menu);
    height: calc(100vh - var(--recons-incendios-menu));
    z-index: 0;
    overflow: hidden;
}

/* ---- Columna de pasos ---- */
/* Por defecto (móvil y puntos siempre) los pasos se superponen a la figura:
   el margin-top negativo tira la columna sobre la figura sticky, descontando
   el hueco de menú para que casen. */
.recons-incendios-pasos {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--recons-incendios-menu) - 100vh);
    pointer-events: none;
}
.recons-incendios-paso {
    min-height: 130vh;             /* altura por defecto = duración de la transición.
                                      Se sobreescribe por paso con `alto`. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6vw;
}
.recons-incendios-tarjeta {
    pointer-events: auto;
    max-width: 360px;
    background: #fffffff2;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .18);
    padding: 18px 22px;
    font-family: var(--recons-incendios-sanomat);
    font-size: 18px;
    line-height: 1.2;
    color: var(--recons-incendios-tinta);
    text-align: left;
}
.recons-incendios-momento {
    display: block;
    font-family: var(--recons-incendios-encode);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--recons-incendios-rojo);
    margin-bottom: 6px;
}
.recons-incendios-tarjeta b,
.recons-incendios-tarjeta strong { font-weight: 700; color: #000; }

/* Foto dentro de una tarjeta de paso (fotos de apoyo en el relato).
   Uso en el `texto` del step:
     <figure class="recons-incendios-foto">
       <img src="URL" alt="" loading="lazy">
       <figcaption>Pie opcional. <span>Crédito</span></figcaption>
     </figure>
   La imagen ocupa todo el ancho de la tarjeta (mucho mejor que un thumbnail). */
.recons-incendios-foto {
    max-width: 250px;         /* foto de apoyo pequeña, que no abulte la tarjeta */
    margin: 14px auto 2px;    /* centrada; anula el margen por defecto de <figure> */
}
.recons-incendios-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}
.recons-incendios-foto figcaption {
    margin-top: 5px;
    font-family: var(--recons-incendios-encode);
    font-size: 11px;
    line-height: 1.35;
    color: #6a6a6a;
}
.recons-incendios-foto figcaption span { color: #9a9a9a; }   /* crédito, más tenue */

@media (min-width: 900px) {
    .recons-incendios-tarjeta { max-width: 400px; font-size: 20px; }
}
@media (max-width: 600px) {
    .recons-incendios-tarjeta { max-width: 300px; font-size: 16px; padding: 16px 18px; }
}


/* ═══════════════════════  SCROLL DEL HUMO  ═══════════════════════ */

/* Figura: centra el vídeo (que puede dejar margen blanco a los lados). */
.recons-incendios-humo .recons-incendios-figura {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Envoltorio que se ajusta al tamaño del vídeo: ancla el reloj a la esquina
   del VÍDEO (no de la figura). */
.recons-incendios-humo .recons-incendios-marco {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}
/* MÓVIL: vídeo a ancho completo, alto máx ~550px y recorte (cover) para que
   la Península se vea más grande. */
.recons-incendios-video {
    display: block;
    width: 100%;
    height: 550px;
    max-height: calc(100vh - var(--recons-incendios-menu));
    object-fit: cover;
}
/* Reloj (hora peninsular del fotograma): texto blanco con sombra, sin caja,
   directamente sobre el vídeo, en la esquina superior. */
.recons-incendios-reloj {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 2;
    font-family: var(--recons-incendios-encode);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8);
}
.recons-incendios-reloj-hora { font-weight: 700; }

/* DESKTOP: dos columnas (texto | vídeo). Solo el scroll del humo. */
@media (min-width: 900px) {
    .recons-incendios-humo {
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: start;
    }
    .recons-incendios-humo .recons-incendios-figura {
        grid-area: 1 / 2 / 2 / 3;   /* columna derecha */
        align-self: start;
    }
    .recons-incendios-humo .recons-incendios-marco { width: auto; }
    .recons-incendios-humo .recons-incendios-video {        /* Península entera, sin recortar */
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(100vh - var(--recons-incendios-menu));
        object-fit: contain;
    }
    .recons-incendios-humo .recons-incendios-pasos {
        grid-area: 1 / 1 / 2 / 2;   /* columna izquierda */
        margin-top: 0;              /* ya no se superpone */
    }
    .recons-incendios-humo .recons-incendios-paso {
        justify-content: flex-start;
        padding: 0 48px;
    }
    .recons-incendios-humo .recons-incendios-tarjeta { max-width: 380px; }
}


/* ═══════════════════════  SCROLL DE PUNTOS  ═══════════════════════ */

.recons-incendios-puntos .recons-incendios-figura { background: #eaeaea; }
.recons-incendios-mapa { position: absolute; inset: 0; }
.recons-incendios-mapa canvas { outline: none; }

/* Barra de escala (abajo-derecha). Tipografía y tono de la casa, línea limpia
   (solo borde inferior, sin los extremos en L). */
.recons-incendios-mapa .maplibregl-ctrl-scale {
    font-family: var(--recons-incendios-encode);
    font-size: 11px;
    font-weight: 400;
    color: #1a1a1a;
    background: #ffffffcc;
    border-bottom: 1px solid #1a1a1a;
    border-left: none;
    border-right: none;
    box-shadow: none;
    padding: 0 5px 1px;
    line-height: 1.2;
    text-align: center;
}

/* Fecha + hora (esquina superior del mapa): texto con halo, sin caja. Estilo
   GRIS (claro): texto oscuro con halo blanco. */
.recons-incendios-fecha {
    position: absolute;
    top: 12px; left: 14px; z-index: 3;
    font-family: var(--recons-incendios-encode);
    font-size: 16px; font-weight: 700; letter-spacing: .3px;
    color: #1a1a1a; text-shadow: 0 0 3px #fff, 0 1px 2px #fff, 0 0 6px #fff;
    pointer-events: none;
}

/* Leyenda de antigüedad (esquina inferior del mapa) */
.recons-incendios-leyenda {
    position: absolute;
    left: 14px; bottom: 14px; z-index: 3;
    background: #ffffffe6;
    border: 1px solid #0000001a;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: var(--recons-incendios-encode);
    font-size: 12px; line-height: 1.5;
    color: var(--recons-incendios-tinta);
    pointer-events: none;
}
.recons-incendios-leyenda-titulo { font-weight: 700; margin-bottom: 4px; }
.recons-incendios-leyenda-item { display: flex; align-items: center; gap: 6px; }
.recons-incendios-leyenda-punto { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; border: 1px solid #00000033; }

/* ---- Anotaciones sobre el mapa (punto + línea + texto), por paso ---- */
/* Color neutro (oscuro), para no confundirse con los focos rojo/naranja/amarillo.
   La estructura la genera el JS; se muestran/ocultan por paso. */
.recons-incendios-anot {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.recons-incendios-anot-texto {
    font-family: var(--recons-incendios-encode);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: #1a1a1aec;
    padding: 4px 9px;
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.recons-incendios-anot-linea { width: 2px; height: 42px; background: #1a1a1a; }
.recons-incendios-anot-punto {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 1px #00000033;
}

@media (max-width: 600px) {
    .recons-incendios-leyenda { font-size: 11px; }
}