/* CIEMF — capa de firma "Travesía" (canvas náutico + reveals). Compartida por todas las páginas. */
/* ============================================================
           VARIANTE C · TRAVESÍA — capas decorativas
           Todas las animaciones usan solo transform/opacity/canvas.
           ============================================================ */

        /* Canvas de flow-field/estela dentro del hero.
           Se sitúa por encima de la imagen pero por debajo del texto (z-0 vs z-10). */
        .c-hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;               /* encima de la imagen (z-0) y su overlay */
            pointer-events: none;
            opacity: 0;
            transition: opacity 900ms ease;
        }
        .c-hero-canvas.c-ready { opacity: 1; }

        /* Canvas fijo de la ruta náutica: detrás de TODO el contenido. */
        .c-route-canvas {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;               /* body es bg-surface; el canvas queda sobre el bg pero bajo secciones */
            pointer-events: none;
        }
        /* El contenido debe quedar por encima de la carta de ruta (canvas fixed z-0).
           Cubrimos tanto páginas con secciones sueltas como las envueltas en <main>. */
        body > header,
        body > main,
        body > section,
        body > footer { position: relative; z-index: 1; }

        /* Waypoints DOM: marcadores ⯁ + anillo de ping.
           Se anclan por JS con posición fixed sobre la ruta. */
        .c-waypoint {
            position: fixed;
            z-index: 2;
            transform: translate(-50%, -50%);
            pointer-events: none;
            width: 0; height: 0;
            will-change: transform, opacity;
        }
        .c-waypoint .c-wp-diamond {
            position: absolute;
            left: 0; top: 0;
            transform: translate(-50%, -50%);
            font-family: "JetBrains Mono", monospace;
            font-size: 13px;
            line-height: 1;
            color: #5eb7ff;
            text-shadow: 0 0 6px rgba(0, 27, 61, 0.9);
            opacity: 0.55;
            transition: opacity 400ms ease, color 400ms ease;
        }
        .c-waypoint.c-arrived .c-wp-diamond { opacity: 1; color: #95ccff; }
        .c-waypoint .c-wp-label {
            position: absolute;
            left: 14px; top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            font-family: "JetBrains Mono", monospace;
            font-size: 9px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #95ccff;
            opacity: 0;
            transition: opacity 500ms ease;
            text-shadow: 0 0 8px rgba(0, 27, 61, 0.95);
        }
        .c-waypoint.c-arrived .c-wp-label { opacity: 0.85; }
        /* Anillo de ping — se dispara agregando la clase .c-ping-go */
        .c-waypoint .c-wp-ring {
            position: absolute;
            left: 0; top: 0;
            width: 14px; height: 14px;
            transform: translate(-50%, -50%) scale(0.4);
            border: 1px solid #5eb7ff;
            opacity: 0;
        }
        .c-waypoint.c-ping-go .c-wp-ring {
            animation: c-ping 900ms ease-out forwards;
        }
        @keyframes c-ping {
            0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
            100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; }
        }

        /* Revelado de secciones ligado al viewport (fade + translateY leve). */
        .c-reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 700ms ease, transform 700ms ease;
            will-change: transform, opacity;
        }
        .c-reveal.c-in { opacity: 1; transform: none; }

        /* Reduced-motion: nada se anima; todo visible de una. */
        @media (prefers-reduced-motion: reduce) {
            .c-hero-canvas { transition: none; }
            .c-reveal { opacity: 1; transform: none; transition: none; }
            .c-waypoint .c-wp-diamond { opacity: 1; }
            .c-waypoint .c-wp-label { opacity: 0.85; }
            .c-waypoint.c-ping-go .c-wp-ring { animation: none; }
        }