<?xml version="1.0" encoding="UTF-8"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[La Prensa]]></title><link>https://www.prensa.com</link><atom:link href="https://www.prensa.com/arc/outboundfeeds/rss/" rel="self" type="application/rss+xml"/><description><![CDATA[La Prensa News Feed]]></description><lastBuildDate>Tue, 07 Jul 2026 18:30:32 +0000</lastBuildDate><language>es</language><ttl>1</ttl><sy:updatePeriod>hourly</sy:updatePeriod><sy:updateFrequency>1</sy:updateFrequency><item><title><![CDATA[especial deportes nota_especial]]></title><link>https://www.prensa.com/deportes/especial-deportes-nota-especial/</link><guid isPermaLink="true">https://www.prensa.com/deportes/especial-deportes-nota-especial/</guid><dc:creator><![CDATA[Redacción de LP]]></dc:creator><description></description><pubDate>Fri, 03 Jul 2026 16:41:21 +0000</pubDate><content:encoded><![CDATA[<p><!-- JSON-LD Structured Data -->
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": "Dante en Ucrania: la historia de un panameño reclutado para la guerra",
        "description": "Sin dinero, herido y atrapado en Europa, el joven recibe una oferta para enrolarse en la guerra de Ucrania.",
        "image": "https://sandbox.prensa.com/resizer/v2/C4LNG7Z55BHBJAT6KOHQ33RSJY.jpg?auth=9b35e4941a113e5c4b7b9d8018ed97dc9dd3304fcd24537dfb174ebabfeb28f8",
        "datePublished": "2026-06-01T00:00:00-05:00",
        "dateModified": "2026-06-01T00:00:00-05:00",
        "author": {
            "@type": "Person",
            "name": "Fernando Berguido"
        },
        "publisher": {
            "@type": "Organization",
            "name": "La Prensa Panamá",
            "logo": {
                "@type": "ImageObject",
                "url": "https://www.prensa.com/favicon.ico"
            }
        },
        "mainEntityOfPage": "https://www.prensa.com/especial/dante-en-ucrania/",
        "articleSection": "Especiales",
        "inLanguage": "es-PA",
        "keywords": "Ucrania, guerra, Panamá, mercenarios, Rusia, Fernando Berguido"
    }
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Roboto:wght@400;700;900&display=swap"
    rel="stylesheet"
/>
<style>
    :root {
        --black: #0a0a0a;
        --white: #ffffff;
        --bg: #faf9f7;
        --text: #111;
        --muted: #6b6b6b;
        --rule: #d4d0c8;
        --accent: #c8102e;
        --military: #2e2e2e;
        --topbar-h: 52px;
        --body-w: 680px;
        --ui: "Inter", sans-serif;
        --body: "PT Serif", serif;
        --hero: "Playfair Display", serif;
    }
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: var(--body);
        background: var(--bg);
        color: var(--text);
        line-height: 1.7;
        overflow-x: clip;
    }
    img {
        display: block;
        max-width: 100%;
    }
    a {
        color: inherit;
        text-decoration: none;
    }

    /* ─── TOP BAR ─────────────────────────────────────────────────────────────── */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 200;
        background: var(--black);
        height: var(--topbar-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    .topbar__back {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ui);
        font-size: 0.72rem;
        font-weight: 500;
        color: #888;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: color 0.2s;
        flex-shrink: 0;
    }
    .topbar__back:hover {
        color: var(--white);
    }
    .topbar__back svg {
        width: 13px;
        height: 13px;
        fill: currentColor;
    }
    .topbar__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .topbar__logo img {
        height: 24px;
        width: auto;
    }
    .topbar__nav {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
    }
    .topbar__nav-label {
        font-family: var(--ui);
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #555;
        margin-right: 4px;
    }
    .pill {
        font-family: var(--ui);
        font-size: 0.68rem;
        font-weight: 700;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #3a3a3a;
        color: #666;
        transition:
            background 0.2s,
            color 0.2s,
            border-color 0.2s;
        cursor: pointer;
    }
    .pill.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--white);
    }
    .pill.soon {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }
    .pill:not(.active):not(.soon):hover {
        border-color: #888;
        color: #ccc;
    }

    @media (max-width: 600px) {
        .topbar {
            height: auto;
            flex-wrap: wrap;
            padding: 0 16px;
        }
        .topbar__back {
            order: 1;
            flex-shrink: 0;
            height: var(--topbar-h);
            align-self: center;
        }
        .topbar__logo {
            order: 2;
            position: static;
            transform: none;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: var(--topbar-h);
        }
        .topbar__nav {
            order: 3;
            flex-basis: 100%;
            justify-content: center;
            padding: 8px 0;
            gap: 8px;
            border-top: 1px solid #1e1e1e;
        }
        .topbar__nav-label {
            display: none;
        }
        .pill {
            width: 24px;
            height: 24px;
            font-size: 0.62rem;
        }
        .back-label {
            display: none;
        }
    }

    /* ─── ABOVE-FOLD ──────────────────────────────────────────────────────────── */
    .above-fold {
        display: contents;
    }
    @media (max-width: 600px) {
        .above-fold {
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - var(--topbar-h) - 40px);
        }
        .above-fold .hero {
            flex: 1;
            min-height: 0;
            height: auto;
        }
        .above-fold .stats-wrap {
            margin-top: 0;
            padding: 0;
            flex-shrink: 0;
        }
        .above-fold .stats-band {
            border-radius: 0;
        }
    }

    /* ─── HERO ────────────────────────────────────────────────────────────────── */
    .hero {
        position: relative;
        height: calc(92vh - var(--topbar-h));
        min-height: 580px;
        background: url("https://sandbox.prensa.com/resizer/v2/C4LNG7Z55BHBJAT6KOHQ33RSJY.jpg?auth=9b35e4941a113e5c4b7b9d8018ed97dc9dd3304fcd24537dfb174ebabfeb28f8")
            center/cover no-repeat;
        overflow: hidden;
    }
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.88) 0%,
                rgba(0, 0, 0, 0.75) 38%,
                rgba(0, 0, 0, 0.2) 65%,
                rgba(0, 0, 0, 0) 100%
            ),
            linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 35%);
    }
    .hero__inner {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 0 5% 80px;
        color: var(--white);
    }
    .hero__text {
        max-width: 500px;
        flex-shrink: 0;
    }
    .hero__img-mobile {
        display: none;
    }

    /* — Animaciones de entrada: título e intro — */
    @keyframes heroFadeUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .hero__serie {
        display: inline-flex;
        align-items: center;
        font-family: var(--ui);
        font-size: 0.75rem;
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--white);
        background: var(--accent);
        padding: 5px 11px 4px;
        margin-bottom: 10px;
        animation: heroFadeUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: 0.1s;
    }
    .hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--ui);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #f5c800;
        margin-bottom: 0;
        margin-top: 20px;
        margin-bottom: 10px;
        background: none;
        padding: 0;
        animation: heroFadeUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: 0.55s;
    }
    .hero__eyebrow::before,
    .hero__eyebrow::after {
        content: "";
        display: block;
        height: 1px;
        width: 18px;
        background: #f5c800;
        opacity: 0.7;
    }
    .hero__title {
        font-family: var(--hero);
        font-size: clamp(1.9rem, 3.6vw, 3.4rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin-bottom: 0;
        position: relative;
        text-shadow:
            0 2px 24px rgba(0, 0, 0, 0.6),
            0 1px 4px rgba(0, 0, 0, 0.5);
        animation: heroFadeUp 0.75s 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .hero__title em {
        font-style: italic;
        font-weight: 700;
    }

    /* — Glitch loop en el título — */
    @keyframes glitch {
        0%,
        85%,
        100% {
            text-shadow: none;
            transform: translateY(0) skewX(0deg);
            clip-path: none;
        }
        86% {
            text-shadow:
                -4px 0 #ff003c,
                4px 0 #0ff;
            transform: translate(-3px, 0) skewX(-0.5deg);
            clip-path: inset(22% 0 56% 0);
        }
        86.5% {
            text-shadow:
                4px 0 #ff003c,
                -5px 0 #0ff;
            transform: translate(3px, 1px) skewX(0.5deg);
            clip-path: none;
        }
        87% {
            text-shadow:
                -3px 0 #0ff,
                4px 0 #ff003c;
            transform: translate(-2px, 0);
            clip-path: inset(60% 0 16% 0);
        }
        87.5% {
            text-shadow:
                5px 0 #0ff,
                -3px 0 #ff003c;
            transform: translate(2px, -1px);
            clip-path: none;
        }
        88% {
            text-shadow: -2px 0 rgba(255, 0, 60, 0.5);
            transform: translate(-1px, 0);
            clip-path: inset(38% 0 40% 0);
        }
        88.5% {
            text-shadow: none;
            transform: translateY(0);
            clip-path: none;
        }
    }
    .hero__summary {
        font-family: var(--ui);
        font-size: clamp(1.15rem, 1.5vw, 1.05rem);
        font-weight: 300;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 0;
        animation: heroFadeUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: 0.6s;
    }
    .hero__meta {
        font-family: var(--ui);
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.5);
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .hero__meta strong {
        color: rgba(255, 255, 255, 0.9);
    }

    /* ─── SERIGRAFIA ──────────────────────────────────────────────────────────── */
    @keyframes slideFromRight {
        from {
            opacity: 0;
            transform: translateX(60px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    .hero__soldiers {
        position: absolute;
        bottom: 0;
        right: 4%;
        width: 28%;
        max-width: 380px;
        display: flex;
        align-items: flex-end;
    }
    .hero__soldiers .soldier {
        display: block;
        width: 100%;
        height: auto;
        max-height: 88vh;
        object-fit: contain;
        object-position: bottom right;
        animation: slideFromRight 0.9s 0.5s cubic-bezier(0.22, 0.61, 0.36, 1)
            both;
    }

    /* Scroll indicator — solo móvil */
    .scroll-hint {
        display: none;
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-family: var(--ui);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }
    .scroll-hint__arrow {
        width: 20px;
        height: 20px;
        border-right: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        transform: rotate(45deg);
        animation: bounceDown 1.4s ease-in-out infinite;
    }
    @keyframes bounceDown {
        0%,
        100% {
            transform: rotate(45deg) translateY(0);
        }
        50% {
            transform: rotate(45deg) translateY(5px);
        }
    }

    /* Ajustes hero en móvil */
    @media (max-width: 600px) {
        .hero {
            height: 100svh;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        .hero__img-mobile {
            display: block;
            width: 64%;
            margin: 20px auto 0;
            object-fit: contain;
            object-position: bottom center;
            position: relative;
            z-index: 3;
            flex-shrink: 0;
            -webkit-mask-image: linear-gradient(
                to bottom,
                black 45%,
                transparent 88%
            );
            mask-image: linear-gradient(to bottom, black 45%, transparent 88%);
            margin-bottom: -100px;
            animation: slideFromRight 0.9s 0.3s
                cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }
        .hero__inner {
            flex: 1;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 0 5% 36px;
            gap: 0;
            position: relative;
            z-index: 4;
        }
        .hero__title {
            font-size: clamp(2.4rem, 8.5vw, 3.2rem);
        }
        .hero__text {
            max-width: 100%;
        }
        .hero__soldiers {
            display: none;
        }
        .scroll-hint {
            display: none;
        }
    }

    /* ─── CIFRAS ──────────────────────────────────────────────────────────────── */
    .stats-wrap {
        position: relative;
        z-index: 10;
        margin-top: -64px;
        padding: 0 5%;
    }
    .stats-band {
        background: var(--accent);
        border-radius: 6px;
        padding: 32px 36px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
    }

    /* Animación de entrada de las cifras */
    @keyframes statReveal {
        from {
            opacity: 0;
            transform: translateY(22px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .stat {
        text-align: center;
        color: var(--white);
        padding: 0 20px;
        position: relative;
        animation: statReveal 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .stat:nth-child(1) {
        animation-delay: 0.9s;
    }
    .stat:nth-child(2) {
        animation-delay: 1.05s;
    }
    .stat:nth-child(3) {
        animation-delay: 1.2s;
    }
    .stat:nth-child(4) {
        animation-delay: 1.35s;
    }
    .stat + .stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background: rgba(255, 255, 255, 0.22);
        transition: opacity 0.3s;
    }

    /* Hover en cifras */
    @keyframes numPop {
        0% {
            transform: scale(1);
        }
        40% {
            transform: scale(1.14) translateY(-4px);
        }
        70% {
            transform: scale(1.07) translateY(-2px);
        }
        100% {
            transform: scale(1) translateY(0);
        }
    }
    .stat {
        cursor: default;
        transition: background 0.25s;
    }
    .stat:hover {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
    }
    .stat:hover + .stat::before {
        opacity: 0;
    }
    .stat:hover .stat__num {
        animation: numPop 0.45s ease forwards;
    }
    .stat:hover .stat__label {
        opacity: 1;
        transition: opacity 0.2s;
    }

    .stat__num {
        display: block;
        font-family: var(--hero);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 900;
        line-height: 1;
        margin-bottom: 10px;
    }
    .stat__label {
        font-family: var(--ui);
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        opacity: 0.85;
        line-height: 1.4;
        transition: opacity 0.2s;
    }

    @media (max-width: 900px) {
        .stats-band {
            grid-template-columns: repeat(2, 1fr);
            gap: 28px 0;
        }
        .stat:nth-child(3)::before {
            display: none;
        }
    }
    @media (max-width: 520px) {
        .stats-wrap {
            margin-top: 0;
            padding: 0;
        }
        .stats-band {
            border-radius: 0;
            padding: 28px 16px;
            gap: 20px 0;
        }
    }

    /* ─── ARTÍCULO ────────────────────────────────────────────────────────────── */
    .article {
        max-width: var(--body-w);
        width: 100%;
        padding: 0 24px;
    }
    .byline {
        font-family: var(--ui);
        font-size: 0.82rem;
        padding-bottom: 22px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--rule);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
    }
    .byline__author {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }
    .byline__role {
        color: var(--muted);
        flex-basis: 100%;
    }
    .byline__date {
        color: var(--muted);
    }
    @media (max-width: 600px) {
        .byline__date {
            margin-left: 0;
            flex-basis: 100%;
        }
    }
    .article p {
        font-size: 1.15rem;
        margin-bottom: 26px;
        hyphens: auto;
    }
    .drop-cap::first-letter {
        font-family: var(--hero);
        font-size: 5.5rem;
        font-weight: 900;
        float: left;
        line-height: 0.78;
        margin: 8px 14px 0 -4px;
        color: var(--black);
    }

    /* ─── MAPA ANIMADO ────────────────────────────────────────────────────────── */
    .route-map-fig {
        margin: 52px -80px;
        position: relative;
    }
    .route-map-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 800/440;
        overflow: hidden;
        background: #101012;
    }
    .route-map-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.95) saturate(0.9);
    }
    .route-map-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .route-map-fig figcaption {
        font-family: var(--ui);
        font-size: 0.78rem;
        color: var(--muted);
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    .route-map-fig figcaption em {
        font-style: italic;
    }

    /* Botón expandir/cerrar mapa */
    .map-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        line-height: 1;
        backdrop-filter: blur(4px);
        transition: background 0.2s;
    }
    .map-btn:hover {
        background: rgba(0, 0, 0, 0.82);
    }
    .map-btn--close {
        display: none;
    }

    /* Estado fullscreen vía :target */
    .route-map-fig:target {
        position: fixed;
        inset: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9000;
        background: #000;
        display: flex;
        flex-direction: column;
    }
    .route-map-fig:target .route-map-wrap {
        flex: 1;
        aspect-ratio: unset;
        width: 100%;
        height: 100%;
    }
    @media (max-width: 600px) {
        .route-map-fig:target {
            justify-content: center;
        }
        .route-map-fig:target .route-map-wrap {
            flex: none;
            aspect-ratio: 800/440;
            width: 100%;
            height: auto;
        }
    }
    .route-map-fig:target figcaption {
        padding: 8px 16px;
        margin: 0;
        border: none;
        background: rgba(0, 0, 0, 0.8);
        color: rgba(255, 255, 255, 0.55);
        flex-shrink: 0;
    }
    .route-map-fig:target .map-btn--expand {
        display: none;
    }
    .route-map-fig:target .map-btn--close {
        display: flex;
    }

    /* Lightbox CSS-only para figuras */
    .zoomable .fig-zoom {
        display: block;
        cursor: zoom-in;
        position: relative;
    }
    .zoomable .fig-close {
        display: none;
    }
    .zoomable.is-open {
        position: fixed;
        inset: 0;
        margin: 0;
        z-index: 8000;
        background: rgba(0, 0, 0, 0.92);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        cursor: zoom-out;
    }
    .zoomable.is-open .fig-zoom {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 92vw;
        max-height: 82vh;
        cursor: default;
    }
    .zoomable.is-open .fig-zoom img {
        max-width: 100%;
        max-height: 82vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    @media (max-width: 600px) {
        .zoomable.is-open .fig-zoom {
            max-width: 100vw;
            max-height: 75vh;
        }
        .zoomable.is-open .fig-zoom img {
            max-width: 100vw;
            max-height: 75vh;
        }
    }
    .zoomable.is-open figcaption {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.8rem;
        text-align: center;
        padding: 10px 20px;
        border: none;
        margin: 0;
    }
    .zoomable.is-open figcaption a {
        color: rgba(255, 255, 255, 0.5);
    }
    .zoomable.is-open .fig-close {
        display: flex;
        position: fixed;
        top: 18px;
        right: 22px;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: #fff;
        font-size: 1rem;
        text-decoration: none;
        z-index: 8001;
        transition: background 0.2s;
    }
    .zoomable.is-open .fig-close:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    /* Cursor zoom en imágenes normales */
    .article figure img {
        cursor: zoom-in;
    }
    /* Figura con polaroids */
    .fig-img-wrap {
        position: relative;
        overflow: visible;
        line-height: 0;
    }
    @media (max-width: 600px) {
        .fig-img-wrap {
            overflow: clip;
        }
    }
    .zoomable.is-open .fig-img-wrap {
        overflow: visible;
        display: contents;
    }
    #fig-2.is-open .polaroid-stack {
        display: none;
    }
    /* Polaroid como link */
    a.polaroid {
        display: block;
        text-decoration: none;
        cursor: zoom-in;
    }
    /* Lightboxes de polaroids: ocultos hasta que tengan .is-open */
    #fig-billar1,
    #fig-billar2,
    #fig-billar3 {
        display: none;
    }
    #fig-billar1.is-open,
    #fig-billar2.is-open,
    #fig-billar3.is-open {
        display: flex;
    }

    /* Outbound path: 901 px, draws in 5.6 s within a 13 s loop */
    @keyframes drawOut {
        0% {
            stroke-dashoffset: 901;
            opacity: 0;
        }
        4% {
            opacity: 1;
        }
        47% {
            stroke-dashoffset: 0;
            opacity: 1;
        }
        88% {
            stroke-dashoffset: 0;
            opacity: 1;
        }
        100% {
            stroke-dashoffset: 0;
            opacity: 0;
        }
    }
    /* Return path: dashed, fades in when outbound reaches Cologne (~47%) */
    @keyframes showRet {
        0%,
        46% {
            opacity: 0;
        }
        50%,
        88% {
            opacity: 0.65;
        }
        100% {
            opacity: 0;
        }
    }
    /* City dots — each encodes its own appearance window in the 13 s cycle */
    /* Vienna: 0–3% → appear (line start) */
    @keyframes dotVienna {
        0%,
        2% {
            opacity: 0;
            transform: scale(0.2);
        }
        5% {
            opacity: 1;
            transform: scale(1.4);
        }
        8% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Budapest: arrives at ~10% */
    @keyframes dotBudapest {
        0%,
        9% {
            opacity: 0;
            transform: scale(0.2);
        }
        12% {
            opacity: 1;
            transform: scale(1.4);
        }
        15% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Bratislava: arrives at ~16% */
    @keyframes dotBratislava {
        0%,
        15% {
            opacity: 0;
            transform: scale(0.2);
        }
        18% {
            opacity: 1;
            transform: scale(1.4);
        }
        21% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Berlin: arrives at ~31% */
    @keyframes dotBerlin {
        0%,
        30% {
            opacity: 0;
            transform: scale(0.2);
        }
        33% {
            opacity: 1;
            transform: scale(1.4);
        }
        36% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Cologne: arrives at ~47% */
    @keyframes dotCologne {
        0%,
        46% {
            opacity: 0;
            transform: scale(0.2);
        }
        49% {
            opacity: 1;
            transform: scale(1.4);
        }
        52% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .map-route-out {
        animation: drawOut 13s ease-in-out infinite;
    }
    .map-route-ret {
        animation: showRet 13s ease-in-out infinite;
    }
    .city-dot {
        transform-box: fill-box;
        transform-origin: center;
    }
    .city-vienna {
        animation: dotVienna 13s ease-in-out infinite;
    }
    .city-budapest {
        animation: dotBudapest 13s ease-in-out infinite;
    }
    .city-bratislava {
        animation: dotBratislava 13s ease-in-out infinite;
    }
    .city-berlin {
        animation: dotBerlin 13s ease-in-out infinite;
    }
    .city-cologne {
        animation: dotCologne 13s ease-in-out infinite;
    }

    @media (max-width: 860px) {
        .route-map-fig {
            margin: 40px -24px;
        }
    }
    @media (max-width: 600px) {
        .route-map-fig {
            margin: 32px -18px;
        }
    }

    /* SHARE BAR */
    .share-bar {
        display: none;
    } /* oculto en móvil — usuarios usan share nativo del browser */
    .share-bar__label {
        font-family: var(--ui);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--muted);
        margin-bottom: 6px;
    }
    .share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--rule);
        color: var(--muted);
        transition:
            background 0.2s,
            border-color 0.2s,
            color 0.2s,
            transform 0.18s;
    }
    .share-btn svg {
        width: 15px;
        height: 15px;
        fill: currentColor;
    }
    .share-btn:hover {
        transform: translateX(2px);
    }
    .share-btn--x:hover {
        background: #000;
        border-color: #000;
        color: #fff;
    }
    .share-btn--fb:hover {
        background: #1877f2;
        border-color: #1877f2;
        color: #fff;
    }
    .share-btn--wa:hover {
        background: #25d366;
        border-color: #25d366;
        color: #fff;
    }
    .share-btn--li:hover {
        background: #0a66c2;
        border-color: #0a66c2;
        color: #fff;
    }

    /* Wrapper artículo + sidebar */
    .article-wrap {
        display: block;
        max-width: calc(var(--body-w) + 48px);
        margin: 50px auto 0;
    }
    .share-sidebar {
        display: none;
    }
    .share-mobile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
        margin-bottom: 32px;
        border-bottom: 1px solid var(--rule);
    }
    .share-mobile__label {
        font-family: var(--ui);
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--muted);
        margin-right: 4px;
    }

    @media (min-width: 900px) {
        .article-wrap {
            display: grid;
            grid-template-columns: 1fr var(--body-w) 1fr;
            max-width: none;
            margin-left: 0;
            margin-right: 0;
        }
        .article {
            grid-column: 2;
            max-width: none;
            width: auto;
            margin: 0;
        }
        .share-mobile {
            display: none;
        }
        .byline {
            margin-bottom: 42px;
        }
        .share-sidebar {
            display: block;
            grid-column: 3;
            justify-self: start;
            padding-left: 64px;
            position: sticky;
            top: calc(var(--topbar-h) + 24px);
            align-self: start;
        }
        .share-bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 14px 9px;
            background: var(--bg);
            border: 1px solid var(--rule);
            border-radius: 32px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
        }
        .share-bar__label {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            margin: 0 0 4px;
            font-size: 0.58rem;
        }
    }

    /* SUBTÍTULOS */
    .s-break {
        margin: 64px 0 0;
    }
    .s-break__line,
    .s-break__tag {
        display: none;
    }
    .article h2 {
        font-family: var(--hero);
        font-size: clamp(1.7rem, 3.5vw, 2.6rem);
        font-weight: 700;
        font-style: normal;
        line-height: 1.15;
        display: block;
        color: var(--black);
        padding-bottom: 12px;
        margin-bottom: 32px;
        position: relative;
    }
    .article h2::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 44px;
        height: 3px;
        background: var(--accent);
    }

    /* PULL QUOTES */
    blockquote {
        font-family: var(--body);
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
        color: var(--text);
        margin: 0 0 1em;
        padding: 0;
        border: none;
    }
    blockquote cite {
        display: block;
        font-style: normal;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
        margin-top: 8px;
    }

    /* FIGURAS */
    figure {
        margin: 52px -80px;
    }
    figure img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    figcaption {
        font-family: var(--ui);
        font-size: 0.78rem;
        color: var(--muted);
        margin-top: 10px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    figcaption em {
        font-style: italic;
    }
    figcaption small {
        opacity: 0.7;
    }
    @media (max-width: 600px) {
        figcaption {
            padding: 8px 18px 10px;
        }
    }

    @media (max-width: 860px) {
        figure {
            margin: 40px -24px;
        }
        blockquote {
            margin: 40px 0;
            padding: 24px 28px;
        }
    }
    @media (max-width: 600px) {
        figure {
            margin: 32px -18px;
        }
        .article {
            padding: 0 18px;
        }
    }

    /* ─── BLOQUES DE CIFRAS EN ARTÍCULO ──────────────────────────────────────── */
    .inline-stats {
        display: grid;
        gap: 0;
        border-top: 2px solid var(--accent);
        border-bottom: 2px solid var(--rule);
        margin: 36px 0;
    }
    .inline-stats--2col {
        grid-template-columns: 1fr 1fr;
    }
    .inline-stat {
        padding: 24px 20px 20px;
        border-right: 1px solid var(--rule);
    }
    .inline-stat:last-child {
        border-right: none;
    }
    .inline-stat__num {
        font-family: var(--hero);
        font-size: clamp(2.4rem, 6vw, 3.6rem);
        font-weight: 900;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 8px;
    }
    .inline-stat__unit {
        font-family: var(--ui);
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin-bottom: 6px;
    }
    .inline-stat__label {
        font-family: var(--ui);
        font-size: 0.78rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text);
        line-height: 1.4;
    }

    /* ─── POLAROIDS ───────────────────────────────────────────────────────────── */
    .polaroid-stack {
        position: absolute;
        right: -60px;
        bottom: -44px;
        width: 580px;
        height: 500px;
        z-index: 4;
        pointer-events: none;
    }
    .polaroid {
        position: absolute;
        width: 285px;
        background: #fff;
        padding: 11px 11px 38px;
        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.5),
            0 2px 6px rgba(0, 0, 0, 0.2);
        pointer-events: auto;
    }
    .polaroid img {
        display: block;
        width: 100%;
        height: 192px;
        object-fit: cover;
        object-position: center;
    }
    .polaroid:nth-child(1) {
        top: 0;
        right: 0;
        transform: rotate(-6deg);
        z-index: 3;
    }
    .polaroid:nth-child(2) {
        top: 80px;
        right: 260px;
        transform: rotate(5deg);
        z-index: 2;
    }
    .polaroid:nth-child(3) {
        top: 210px;
        right: 40px;
        transform: rotate(-3deg);
        z-index: 1;
    }

    @media (max-width: 600px) {
        .polaroid-stack {
            right: 0;
            top: 20px;
            bottom: auto;
            width: 200px;
            height: 160px;
        }
        .polaroid {
            width: 90px;
            padding: 4px 4px 14px;
        }
        .polaroid img {
            height: 60px;
        }
        .polaroid:nth-child(1) {
            top: 0;
            right: 0;
            transform: rotate(-6deg);
        }
        .polaroid:nth-child(2) {
            top: 28px;
            right: 88px;
            transform: rotate(5deg);
        }
        .polaroid:nth-child(3) {
            top: 72px;
            right: 12px;
            transform: rotate(-3deg);
        }
    }

    /* ─── CTA PRÓXIMA ENTREGA ─────────────────────────────────────────────────── */
    .next-cta {
        width: 100%;
        margin-top: 80px;
        padding: 52px 8%;
        background: var(--military);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        flex-wrap: wrap;
    }
    .next-cta__tag {
        font-family: var(--ui);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 10px;
        display: block;
    }
    .next-cta__title {
        font-family: var(--hero);
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        font-style: italic;
        color: var(--white);
        line-height: 1.3;
        margin-bottom: 0;
    }
    .next-cta__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: var(--white);
        font-family: var(--ui);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        padding: 14px 28px;
        border-radius: 3px;
        white-space: nowrap;
        transition:
            background 0.2s,
            border-color 0.2s;
        flex-shrink: 0;
    }
    .next-cta__btn:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.6);
    }
    .next-cta__btn svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

    @media (max-width: 860px) {
        .next-cta {
            padding: 40px 6%;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }
    }
    @media (max-width: 600px) {
        .next-cta {
            padding: 36px 5%;
        }
    }

    /* ─── CRÉDITOS ────────────────────────────────────────────────────────────── */
    .credits {
        background: #111;
        color: rgba(255, 255, 255, 0.55);
        font-family: var(--ui);
        font-size: 0.78rem;
        padding: 48px 5%;
        margin-top: 0;
    }
    .credits__inner {
        max-width: 960px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .credits__title {
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: rgba(255, 255, 255, 0.3);
        margin-bottom: 12px;
    }
    .credits ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .credits li {
        line-height: 1.5;
    }
    .credits li strong {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 600;
    }
    .credits__copy {
        grid-column: 1/-1;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 20px;
        margin-top: 8px;
        font-size: 0.72rem;
        opacity: 0.5;
        text-align: center;
    }

    @media (max-width: 600px) {
        .credits__inner {
            grid-template-columns: 1fr;
        }

        .hero::before {
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.92) 0%,
                rgba(0, 0, 0, 0.6) 40%,
                rgba(0, 0, 0, 0.1) 75%,
                rgba(0, 0, 0, 0) 100%
            );
        }
    }
</style>

<!-- TOP BAR -->
<header class="topbar">
    <a class="topbar__back" href="https://www.prensa.com">
        <svg viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
        </svg>
        <span class="back-label">prensa.com</span>
    </a>
    <div class="topbar__logo">
        <a href="https://www.prensa.com">
            <img
                src="https://multimedia.corprensa.com/la-prensa/assets/logo_laprensa_panama.svg"
                alt="La Prensa Panamá"
            />
        </a>
    </div>
    <!--nav class="topbar__nav" aria-label="Entregas del especial">
    <span class="topbar__nav-label">Entregas</span>
    <a class="pill active" href="#" title="Entrega 1 — disponible">1</a>
    <a class="pill soon" href="#" title="Próximamente">2</a>
    <a class="pill soon" href="#" title="Próximamente">3</a>
    <a class="pill soon" href="#" title="Próximamente">4</a>
    <a class="pill soon" href="#" title="Próximamente">5</a>
  </nav-->
</header>

<!-- HERO + CIFRAS -->
<div class="above-fold">
    <section class="hero">
        <img
            class="hero__img-mobile"
            src="https://sandbox.prensa.com/resizer/v2/W62XJSN2UFD3NCNDK32I7NYVQI.png?auth=e35bf9720e0666dc35ef444402a964364c3d90950bf5515fe8b19e82b95d43a7"
            alt=""
            aria-hidden="true"
        />
        <div class="hero__inner">
            <div class="hero__text">
                <p class="hero__serie">Dante en Ucrania</p>
                <h1 class="hero__title">
                    Reclutadores<br />rusos en Berlín:<br /><em
                        >la historia de<br />un panameño</em
                    >
                </h1>
                <p class="hero__eyebrow">Primera Entrega</p>
                <p class="hero__summary">
                    Sin dinero, herido y atrapado en Europa, el joven recibe una
                    oferta para enrolarse en la guerra de Ucrania. Esta es la
                    historia de cómo un encuentro casual en un bar lo llevó a
                    las entrañas de uno de los conflictos más sangrientos del
                    siglo XXI
                </p>
            </div>
            <div class="hero__soldiers" aria-hidden="true">
                <img
                    class="soldier"
                    src="https://sandbox.prensa.com/resizer/v2/W62XJSN2UFD3NCNDK32I7NYVQI.png?auth=e35bf9720e0666dc35ef444402a964364c3d90950bf5515fe8b19e82b95d43a7"
                    alt=""
                />
            </div>
        </div>
        <div class="scroll-hint" aria-hidden="true">
            <div class="scroll-hint__arrow"></div>
        </div>
    </section>
</div>
<!-- /above-fold -->

<!-- ARTÍCULO -->
<div class="article-wrap">
    <article class="article">
        <div class="byline">
            <span class="byline__author">Fernando Berguido</span>
            <span class="byline__role">Especial para La Prensa</span>
            <span class="byline__date">Junio 2026</span>
        </div>

        <div class="share-mobile" aria-label="Compartir artículo">
            <span class="share-mobile__label">Compartir</span>
            <a
                class="share-btn share-btn--x"
                href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra"
                target="_blank"
                rel="noopener"
                title="Compartir en X"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.845L1.254 2.25H8.08l4.259 5.623zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                    />
                </svg>
            </a>
            <a
                class="share-btn share-btn--fb"
                href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en Facebook"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073c0 6.026 4.388 11.02 10.125 11.927v-8.434H7.078v-3.493h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953h-1.514c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.493h-2.796v8.434C19.612 23.093 24 18.099 24 12.073z"
                    />
                </svg>
            </a>
            <a
                class="share-btn share-btn--wa"
                href="https://api.whatsapp.com/send?text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra%20%E2%80%94%20https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en WhatsApp"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"
                    />
                </svg>
            </a>
            <a
                class="share-btn share-btn--li"
                href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&title=Dante%20en%20Ucrania"
                target="_blank"
                rel="noopener"
                title="Compartir en LinkedIn"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
                    />
                </svg>
            </a>
        </div>

        <p class="drop-cap">
            Viktor tardó un rato en darse cuenta de que su próxima presa había
            llegado. Al principio lo despistó verlo con un par de ingleses que
            jugaban al billar, entre el medio centenar de muchachos que esa
            madrugada deambulaban por el bar. Pero, cuando el chico se quedó
            solo y, buscando un rincón en la barra terminó sentado a su lado, le
            bastaron tres minutos para saber que el sello en su frente era el de
            la desesperación.
        </p>

        <p>
            Conocía bien el Bata Bar de <i>Alexanderplatz</i>, con sus ocho
            mesas de billar, pistas de <i>shuffleboard</i> y juegos de dardos en
            las paredes.
        </p>

        <p>
            En el día, el sitio es muy popular entre grupos de amigos y para los
            <i> happy hours</i> de los ejecutivos al cerrar las oficinas del
            centro de Berlín. Los fines de semana abre hasta las 5:00 am y es
            una de las pistas donde aterrizan decenas de jóvenes a comer
            salchichas o hamburguesas luego de la juerga.
        </p>

        <figure id="fig-2" class="zoomable fig-has-polaroids">
            <div class="fig-img-wrap">
                <a
                    href="#fig-2"
                    class="fig-zoom"
                    aria-label="Ver imagen ampliada"
                >
                    <img
                        src="https://sandbox.prensa.com/resizer/v2/KWDVZPN7BVCWZGPY3VT5WTNOVU.jpg?auth=ee1502868e9a61ce80332de40d768ca1589c3bbfcd9aae451b0acbc9ca6026ca"
                        alt="El Bata Bar & Billiards de Alexanderplatz, Berlín"
                    />
                </a>
                <div class="polaroid-stack">
                    <a href="#fig-billar1" class="polaroid"
                        ><img
                            src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                            alt="Bata Bar Berlín"
                    /></a>
                    <a href="#fig-billar2" class="polaroid"
                        ><img
                            src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                            alt="Bata Bar Berlín"
                    /></a>
                    <a href="#fig-billar3" class="polaroid"
                        ><img
                            src="https://sandbox.prensa.com/resizer/v2/VJB2RV5XAFE3ZGKXVD5TVKXT5I.jpg?auth=7df0b416e33db76cbdcd7ad7cb87ad0c1f6d304c7564724739c98f90056e8de1"
                            alt="Bata Bar Berlín"
                    /></a>
                </div>
            </div>
            <figcaption>
                <em
                    >El Bata Bar &amp; Billiards de <i>Alexanderplatz</i>, en el
                    corazón de Berlín, lugar donde Viktor y Dante se
                    conocieron.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <figure id="fig-billar1" class="zoomable">
            <a
                href="#fig-billar1"
                class="fig-zoom"
                aria-label="Ver imagen ampliada"
            >
                <img
                    src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                    alt="Bata Bar Berlín — Instagram"
                />
            </a>
            <figcaption>
                <em
                    >Tomada del Instagram del Bata Bar &amp; Billiards,
                    Berlín.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <figure id="fig-billar2" class="zoomable">
            <a
                href="#fig-billar2"
                class="fig-zoom"
                aria-label="Ver imagen ampliada"
            >
                <img
                    src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                    alt="Bata Bar Berlín — Instagram"
                />
            </a>
            <figcaption>
                <em
                    >Tomada del Instagram del Bata Bar &amp; Billiards,
                    Berlín.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <figure id="fig-billar3" class="zoomable">
            <a
                href="#fig-billar3"
                class="fig-zoom"
                aria-label="Ver imagen ampliada"
            >
                <img
                    src="https://sandbox.prensa.com/resizer/v2/VJB2RV5XAFE3ZGKXVD5TVKXT5I.jpg?auth=7df0b416e33db76cbdcd7ad7cb87ad0c1f6d304c7564724739c98f90056e8de1"
                    alt="Bata Bar Berlín — Instagram"
                />
            </a>
            <figcaption>
                <em
                    >Tomada del Instagram del Bata Bar &amp; Billiards,
                    Berlín.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <p>Ambos evitaron hablar en alemán.</p>
        <p>
            En inglés, Viktor supo que era panameño. No se lo hubiera imaginado,
            jamás había conocido uno.
        </p>
        <p>
            Dante, como lo llaman sus amigos desde la escuela en Penonomé (y así
            le nombraremos en esta historia por razones de seguridad) se enteró
            que quien ahora le invitaba una cerveza era ruso.
        </p>

        <p>
            Hablando de los diferentes tipos de cervezas que había en Alemania,
            de mujeres y de cómo habían llegado cada uno a Berlín, Viktor se
            enteró que el panameño había pasado, primero, por Viena donde estuvo
            un mes, luego unos días en Budapest y Bratislava, hasta terminar en
            Berlín, donde el alquiler de un Airbnb lo terminó ahorcando.
        </p>
        <p>
            Se había ido a probar suerte en Colonia unos días y, sin mayor
            éxito, había regresado a Berlín.
        </p>

        <span id="map-close"></span>
        <figure class="route-map-fig" id="map-full">
            <div class="route-map-wrap">
                <a
                    href="#map-full"
                    class="map-btn map-btn--expand"
                    title="Ver pantalla completa"
                    >⤢</a
                >
                <a
                    href="#map-close"
                    class="map-btn map-btn--close"
                    title="Cerrar"
                    >✕</a
                >
                <!-- Real map: CartoDB Dark tiles stitched at zoom 6, covering ~47–53°N, 4–22°E -->
                <img
                    class="route-map-bg"
                    src="https://sandbox.prensa.com/resizer/v2/3LNB5YMPZ5D7DLTQRYX32EJ5O4.jpg?auth=c4d5bb18f5d134bc7ba9f756d999df8b1c546232be75a412d872d3200f67644a"
                    alt=""
                    aria-hidden="true"
                    loading="lazy"
                    decoding="async"
                />

                <!-- SVG overlay: route animation on top of real map -->
                <svg
                    class="route-map-svg"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 800 440"
                    role="img"
                    aria-label="Mapa del recorrido de Dante por Europa Central"
                >
                    <defs>
                        <marker
                            id="arrowhead"
                            markerWidth="7"
                            markerHeight="7"
                            refX="6"
                            refY="3.5"
                            orient="auto"
                        >
                            <polygon points="0 0, 7 3.5, 0 7" fill="#c8102e" />
                        </marker>
                    </defs>

                    <!-- ── ROUTE ─────────────────────────────────────────────────── -->
                    <!-- Positions recalculated via Web Mercator for this tile view:  -->
                    <!-- Positions from CartoDB tiles (zoom 6, Web Mercator projection) -->
                    <!-- Viena(553,341)→Budapest(675,390)→Bratislava(587,345)→Berlín(419,33)→Colonia(125,149) -->
                    <!-- Outbound length ≈ 901 px -->
                    <path
                        class="map-route-out"
                        d="M553,341 L675,390 L587,345 L419,33 L125,149"
                        stroke="#c8102e"
                        stroke-width="2.5"
                        fill="none"
                        stroke-dasharray="901"
                        stroke-dashoffset="901"
                        marker-end="url(#arrowhead)"
                        opacity="0"
                    />

                    <!-- Return dashed: Colonia→Berlín (≈ 316 px) -->
                    <path
                        class="map-route-ret"
                        d="M125,149 L419,33"
                        stroke="#c8102e"
                        stroke-width="1.8"
                        fill="none"
                        stroke-dasharray="9,13"
                        opacity="0"
                    />

                    <!-- ── CITIES ─────────────────────────────────────────────────── -->
                    <!-- Viena -->
                    <g class="city-dot city-vienna" opacity="0">
                        <circle
                            cx="553"
                            cy="341"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="553" cy="341" r="5" fill="#c8102e" />
                        <text
                            x="537"
                            y="361"
                            text-anchor="end"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            VIENA
                        </text>
                        <text
                            x="537"
                            y="373"
                            text-anchor="end"
                            fill="rgba(0,0,0,.5)"
                            font-family="Inter,sans-serif"
                            font-size="8.5"
                        >
                            inicio del viaje
                        </text>
                    </g>

                    <!-- Budapest -->
                    <g class="city-dot city-budapest" opacity="0">
                        <circle
                            cx="675"
                            cy="390"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="675" cy="390" r="5" fill="#c8102e" />
                        <text
                            x="658"
                            y="380"
                            text-anchor="end"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            BUDAPEST
                        </text>
                    </g>

                    <!-- Bratislava -->
                    <g class="city-dot city-bratislava" opacity="0">
                        <circle
                            cx="587"
                            cy="345"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="587" cy="345" r="5" fill="#c8102e" />
                        <text
                            x="601"
                            y="334"
                            text-anchor="start"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            BRATISLAVA
                        </text>
                    </g>

                    <!-- Berlín -->
                    <g class="city-dot city-berlin" opacity="0">
                        <circle
                            cx="419"
                            cy="33"
                            r="16"
                            fill="rgba(200,16,46,.22)"
                        />
                        <circle cx="419" cy="33" r="6" fill="#c8102e" />
                        <text
                            x="441"
                            y="29"
                            text-anchor="start"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="12"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            BERLÍN
                        </text>
                        <text
                            x="441"
                            y="43"
                            text-anchor="start"
                            fill="rgba(200,16,46,.9)"
                            font-family="Inter,sans-serif"
                            font-size="8.5"
                            font-weight="600"
                            letter-spacing=".5"
                        >
                            DESTINO
                        </text>
                    </g>

                    <!-- Colonia -->
                    <g class="city-dot city-cologne" opacity="0">
                        <circle
                            cx="125"
                            cy="149"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="125" cy="149" r="5" fill="#c8102e" />
                        <text
                            x="108"
                            y="144"
                            text-anchor="end"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            COLONIA
                        </text>
                        <text
                            x="108"
                            y="157"
                            text-anchor="end"
                            fill="rgba(0,0,0,.5)"
                            font-family="Inter,sans-serif"
                            font-size="8.5"
                        >
                            sin trabajo
                        </text>
                    </g>

                    <!-- Legend -->
                    <rect
                        x="12"
                        y="408"
                        width="148"
                        height="28"
                        rx="3"
                        fill="rgba(255,255,255,.75)"
                    />
                    <text
                        x="20"
                        y="419"
                        fill="rgba(0,0,0,.45)"
                        font-family="Inter,sans-serif"
                        font-size="8"
                        letter-spacing="2"
                    >
                        RECORRIDO DE DANTE
                    </text>
                    <line
                        x1="20"
                        y1="430"
                        x2="52"
                        y2="430"
                        stroke="#c8102e"
                        stroke-width="2"
                    />
                    <text
                        x="57"
                        y="433"
                        fill="rgba(0,0,0,.55)"
                        font-family="Inter,sans-serif"
                        font-size="8"
                    >
                        Ida
                    </text>
                    <line
                        x1="76"
                        y1="430"
                        x2="108"
                        y2="430"
                        stroke="#c8102e"
                        stroke-width="1.5"
                        stroke-dasharray="5,7"
                    />
                    <text
                        x="113"
                        y="433"
                        fill="rgba(0,0,0,.55)"
                        font-family="Inter,sans-serif"
                        font-size="8"
                    >
                        Regreso
                    </text>
                </svg>
            </div>
            <figcaption>
                <em
                    >El recorrido de Dante por Europa Central antes del fatídico
                    encuentro en Berlín.</em
                >
                <small>© OpenStreetMap contributors</small>
            </figcaption>
        </figure>

        <p>
            "Encontré en Berlín un <i>kapselhostel</i>. Son unos hoteles
            cápsula, pagaba solo seis euros al día. Son cabinas de dos metros de
            largo, uno y medio de alto y uno de ancho. Están bien, son limpios y
            seguros. Afuera hay donde cocinar - recordó Dante -. En ese momento,
            mientras el ruso me hablaba, yo tenía cinco euros en el bolsillo,
            era todo lo que me quedaba."
        </p>

        <!-- SUBTÍTULO -->
        <h2>Soledad</h2>

        <p>
            "Mi aventura en Europa no resultó ser lo que yo esperaba. Antes de
            tomar el tren a Colonia me pregunté: ¿compro el pasaje de vuelta a
            Panamá o veo si consigo algo en Colonia? Un colombiano que había
            conocido acá me había dicho que podría conseguir trabajo, pero eso
            no ocurrió y quedé más limpio que antes. Por eso regresé a Berlín."
        </p>

        <p>
            Viktor le dijo que si quería trabajar y ganar buena paga, él se la
            podía conseguir.
        </p>
        <p>
            Le contó que su país estaba en guerra y buscaban gente para pelear.
            Que ellos se encargarían de llevarlo a Rusia, de entrenarlo y darle
            armas. Que mucha gente iba. Que podían contratarlo por tres meses, o
            por seis, que dependía de él.
        </p>

        <span id="fig-close"></span>
        <figure id="fig-1" class="zoomable">
            <a href="#fig-1" class="fig-zoom" aria-label="Ver imagen ampliada">
                <img
                    src="https://sandbox.prensa.com/resizer/v2/5TW325SYBBAKTDWCTKPDJXV3OI.jpg?auth=82691695799ba202a27c4dcb5ab01fe4e0c487b0a19696fccd2e5277307a1640"
                    alt="El Tiergarten de Berlín cubierto de nieve en invierno"
                />
            </a>
            <figcaption>
                <em
                    >El Tiergarten, el gran parque de Berlín, cubierto de nieve
                    durante el invierno.</em
                >
                <small>Unsplash</small>
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <p>
            Esa mañana Dante, en su hostal, había sufrido un bajón. La noche que
            de Colonia volvió a Berlín, cuatro días atrás, lo habían asaltado. A
            la zozobra sobre su situación económica se sumaba que, durante el
            forcejeo, le habían herido el abdomen de un cuchillazo.
        </p>
        <p>
            "No se llevaron nada porque no tenía nada de valor, salvo mi
            celular, que no dejé que me lo arrebataran."
        </p>

        <!-- SUBTÍTULO -->
        <div class="s-break">
            <div class="s-break__line"></div>
            <span class="s-break__tag">III</span>
            <div class="s-break__line"></div>
        </div>
        <h2>Crudo invierno</h2>

        <p>
            Era 12 de diciembre de 2025. Hacía mucho frío, había nevado todo el
            día. Nunca había visto nevar. Ya estaba mejor de la herida.
        </p>
        <p>Dante tenía 19 años.</p>

        <p>
            "Salía a caminar por la ciudad, todo estaba nevado. Me fumé un bate,
            no suelo fumar, y este me pegó durísimo. Iba por un área grande del
            parque, blanca, despejada, pensando en mi situación y me di cuenta
            de que estaba caminando sobre hielo. Escuché un crack y miré al
            suelo, se estaba partiendo."
        </p>

        <p>Tuvo suerte de no caer en el agua gélida del lago.</p>

        <p>
            Caminó muchísimo, durante horas, apocado, buscando ahuyentar esa
            angustia que le perseguía implacable.
        </p>

        <div class="inline-stats inline-stats--2col inline-stats--zoom">
            <div class="inline-stat">
                <div class="inline-stat__num">2014</div>
                <div class="inline-stat__label">
                    Rusia decide anexarse Crimea
                </div>
            </div>
            <div class="inline-stat">
                <div class="inline-stat__num">2022</div>
                <div class="inline-stat__label">Rusia ataca a toda Ucrania</div>
            </div>
        </div>

        <p>Deambulando terminó en el Bata Bar.</p>

        <p>"Me puse a jugar billar, no me provocaba volver a la cápsula."</p>

        <p>
            Viktor tomó una hoja de papel y escribió una cifra. Era lo que le
            iban a pagar. Puso una dirección.
        </p>
        <p>
            "El jueves salimos, este será el punto de encuentro —le dijo el
            mercenario—. Aquí los recogerán a ti y a los otros para llevarlos a
            Rusia. Trae tus cosas."
        </p>

        <!-- SUBTÍTULO -->
        <div class="s-break">
            <div class="s-break__line"></div>
            <span class="s-break__tag">IV</span>
            <div class="s-break__line"></div>
        </div>
        <h2>El conflicto</h2>

        <p>
            La actual guerra de Ucrania lleva más de cuatro años. El conflicto
            iniciado por Rusia realmente empezó antes, hace 12 años, en el 2014,
            cuando Vladimir Putin se anexó Crimea, al sur de Ucrania. Desde
            entonces fue infiltrada gente afín en una región fronteriza conocida
            como Donbás e incentivando movimientos separatistas entre la
            población rusohablante de esos territorios.
        </p>
        <p>
            En febrero de 2022 inició la guerra en curso, después que el
            presidente ruso ordenó la invasión completa del país vecino.
        </p>

        <p>Él estaba seguro que sería cuestión de meses.</p>

        <p>
            No hay cifras fiables sobre cuántos muertos rusos ha costado la
            aventura de Putin.
        </p>

        <div class="inline-stats inline-stats--2col inline-stats--count">
            <div class="inline-stat">
                <div class="inline-stat__num" data-target="147">147</div>
                <div class="inline-stat__unit">millones</div>
                <div class="inline-stat__label">
                    Población de Rusia antes de la guerra
                </div>
            </div>
            <div class="inline-stat">
                <div class="inline-stat__num" data-target="44">44</div>
                <div class="inline-stat__unit">millones</div>
                <div class="inline-stat__label">
                    Población de Ucrania antes de la guerra
                </div>
            </div>
        </div>
        <p>
            Investigaciones independientes publicadas por la BBC indican que las
            bajas de los militares que se han podido identificar por nombre
            suman unos 200,000. Se estima que la cifra, incluyendo a los
            militares caídos que aún no han sido identificados, o cuyos
            familiares creen que siguen en combate, podría alcanzar los 500,000.
        </p>
        <p>
            Del lado ucraniano, se cuentan entre 100,000 y 120,000 militares
            muertos, más unos 15,000 civiles.
        </p>
        <p>
            En otras palabras, por cada ucraniano muerto, han caído cuatro
            rusos.
        </p>

        <!-- SUBTÍTULO -->
        <div class="s-break">
            <div class="s-break__line"></div>
            <span class="s-break__tag">V</span>
            <div class="s-break__line"></div>
        </div>
        <h2>Mercenarios</h2>

        <p>
            No es secreto que Rusia lleva años reclutando extranjeros alrededor
            del mundo.
        </p>
        <p>
            ¿Por qué recurre a ellos? Para compensar las enormes bajas en el
            frente y disminuir reclutamientos adicionales de jóvenes rusos.
        </p>
        <p>
            Hay una razón más diabólica: los reclutados, que normalmente vienen
            de poblaciones pobres de las ex repúblicas soviéticas y del Asia
            Menor, de Medio Oriente, de África y hasta de países
            latinoamericanos, son utilizados durante las operaciones de asalto,
            las más riesgosas, porque los consideran desechables.
        </p>

        <p>
            Según el medio ucraniano <b>liga.net</b>, se estima que Rusia ha
            logrado reclutar durante los últimos años unos 28,000 mercenarios.
        </p>
        <figure id="fig-3" class="zoomable">
            <a href="#fig-3" class="fig-zoom" aria-label="Ver imagen ampliada">
                <img
                    src="https://sandbox.prensa.com/resizer/v2/ERODUJR73FFUDKSKDVZGTMCY6I.jpg?auth=b0b4e64dab4997977ca6e54330e8f9b2b969ab2f04a0098ddc107b974e7cc68e"
                    alt="Soldados norcoreanos en entrenamiento militar con fusiles AK"
                />
            </a>
            <figcaption>
                <em
                    >Soldados norcoreanos durante un ejercicio de tiro. Rusia
                    reclutó miles de efectivos de Corea del Norte para combatir
                    en Ucrania.</em
                >
                <small>EFE</small>
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>
        <p>
            Este número no incluye las más de 12,000 unidades enviadas por Corea
            del Norte a combatir del lado de su aliado Putin, ni los miles que
            integran la fuerza paramilitar rusa conocida como Grupo Wagner.
        </p>

        <p>
            La cifra que Viktor colocó en el papel que le dio a Dante era
            2,000,000 de rublos. Eso equivale a unos $25,000 dólares.
        </p>
        <p>Le contó que primero los iban a transportar a una base en Rusia.</p>

        <p>
            "Se supone que allá íbamos a hacer todo el proceso, firmar un
            contrato, nos iban a dar ropa, los uniformes, nos iban a entrenar,
            un entrenamiento que me dijo era de dos semanas, y nos darían las
            armas luego de enseñarnos a usarlas. Sobre la paga, supuestamente la
            iban a dividir. En la base nos iban a preguntar si teníamos
            familiares, porque 'en caso de que te mueras deben saber dónde
            mandar los pagos', me aseguró Viktor."
        </p>

        <p>
            El ruso sacó 150 euros y se los entregó a Dante. "Es un adelanto —le
            dijo—. Nos vemos el jueves."
        </p>
    </article>

    <aside class="share-sidebar" aria-label="Compartir artículo">
        <div class="share-bar">
            <span class="share-bar__label">Compartir</span>
            <!-- X / Twitter -->
            <a
                class="share-btn share-btn--x"
                href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra"
                target="_blank"
                rel="noopener"
                title="Compartir en X"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.845L1.254 2.25H8.08l4.259 5.623zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                    />
                </svg>
            </a>
            <!-- Facebook -->
            <a
                class="share-btn share-btn--fb"
                href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en Facebook"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073c0 6.026 4.388 11.02 10.125 11.927v-8.434H7.078v-3.493h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953h-1.514c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.493h-2.796v8.434C19.612 23.093 24 18.099 24 12.073z"
                    />
                </svg>
            </a>
            <!-- WhatsApp -->
            <a
                class="share-btn share-btn--wa"
                href="https://api.whatsapp.com/send?text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra%20%E2%80%94%20https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en WhatsApp"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"
                    />
                </svg>
            </a>
            <!-- LinkedIn -->
            <a
                class="share-btn share-btn--li"
                href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&title=Dante%20en%20Ucrania"
                target="_blank"
                rel="noopener"
                title="Compartir en LinkedIn"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
                    />
                </svg>
            </a>
        </div>
    </aside>
</div>
<!-- /article-wrap -->

<!-- CTA PRÓXIMA ENTREGA -->
<div class="next-cta">
    <div class="next-cta__left">
        <span class="next-cta__tag">Continúa leyendo · Segunda entrega</span>
        <p class="next-cta__title">
            ¿Llegó a Rusia? ¿Cómo fue transportado? ¿Dónde fue el entrenamiento?
        </p>
    </div>
    <!--a
        class="next-cta__btn"
        href="#"
    >
        Próxima entrega
        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z" />
        </svg>
    </a-->
</div>

<!-- CRÉDITOS -->
<footer class="credits">
    <div class="credits__inner">
        <div>
            <p class="credits__title">Equipo periodístico</p>
            <ul>
                <li><strong>Fernando Berguido</strong> — Texto y reportería</li>
                <li>
                    <strong>Yolanda Sandoval</strong> — Coordinación editorial
                </li>
                <li><strong>La Prensa Panamá</strong> — Edición</li>
                <li>
                    <strong>Víctor Tisnado</strong> — Maquetación y desarrollo
                    web
                </li>
            </ul>
        </div>
        <div>
            <p class="credits__title">Créditos fotográficos</p>
            <ul>
                <li>
                    <strong>Portada</strong> — Imagen generada con inteligencia
                    artificial
                </li>
                <li>
                    <strong>Bata Bar &amp; Billiards</strong> — batabar.com /
                    Instagram
                </li>
                <li>
                    <strong>Tiergarten nevado</strong> — Unsplash, uso editorial
                </li>
                <li><strong>Soldados norcoreanos</strong> — EFE</li>
            </ul>
        </div>
        <p
            class="credits__copy"
            style="margin-bottom: 12px; font-style: italic; opacity: 1"
        >
            Las imágenes utilizadas en este reportaje tienen fines
            exclusivamente editoriales e ilustrativos. Algunas corresponden a
            fotografías de archivo o de bancos de imágenes. Otras son
            ilustraciones elaboradas a partir de testimonios, documentos y
            relatos recopilados durante la investigación, con el propósito de
            representar visualmente escenas para las que no existen registros
            fotográficos.
        </p>
        <p class="credits__copy">
            © 2026 La Prensa Panamá. Todos los derechos reservados. Prohibida su
            reproducción total o parcial sin autorización expresa.
        </p>
    </div>
</footer>

<script>
    document.querySelectorAll(".fig-zoom").forEach((link) => {
        link.addEventListener("click", (e) => {
            e.preventDefault();
            link.closest(".zoomable").classList.add("is-open");
        });
    });
    document.querySelectorAll("a.polaroid").forEach((link) => {
        link.addEventListener("click", (e) => {
            e.preventDefault();
            document
                .getElementById(link.getAttribute("href").slice(1))
                .classList.add("is-open");
        });
    });
    document.querySelectorAll(".fig-close").forEach((btn) => {
        btn.addEventListener("click", (e) => {
            e.preventDefault();
            btn.closest(".zoomable").classList.remove("is-open");
        });
    });
</script>
</p>]]></content:encoded></item><item><title><![CDATA[test deportes html nota-especial]]></title><link>https://www.prensa.com/deportes/test-deportes-html-nota-especial/</link><guid isPermaLink="true">https://www.prensa.com/deportes/test-deportes-html-nota-especial/</guid><dc:creator><![CDATA[Eric Conte]]></dc:creator><description></description><pubDate>Fri, 03 Jul 2026 16:48:20 +0000</pubDate><content:encoded><![CDATA[<p><!-- JSON-LD Structured Data -->
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": "Dante en Ucrania: la historia de un panameño reclutado para la guerra",
        "description": "Sin dinero, herido y atrapado en Europa, el joven recibe una oferta para enrolarse en la guerra de Ucrania.",
        "image": "https://sandbox.prensa.com/resizer/v2/C4LNG7Z55BHBJAT6KOHQ33RSJY.jpg?auth=9b35e4941a113e5c4b7b9d8018ed97dc9dd3304fcd24537dfb174ebabfeb28f8",
        "datePublished": "2026-06-01T00:00:00-05:00",
        "dateModified": "2026-06-01T00:00:00-05:00",
        "author": {
            "@type": "Person",
            "name": "Fernando Berguido"
        },
        "publisher": {
            "@type": "Organization",
            "name": "La Prensa Panamá",
            "logo": {
                "@type": "ImageObject",
                "url": "https://www.prensa.com/favicon.ico"
            }
        },
        "mainEntityOfPage": "https://www.prensa.com/especial/dante-en-ucrania/",
        "articleSection": "Especiales",
        "inLanguage": "es-PA",
        "keywords": "Ucrania, guerra, Panamá, mercenarios, Rusia, Fernando Berguido"
    }
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Roboto:wght@400;700;900&display=swap"
    rel="stylesheet"
/>
<style>
    :root {
        --black: #0a0a0a;
        --white: #ffffff;
        --bg: #faf9f7;
        --text: #111;
        --muted: #6b6b6b;
        --rule: #d4d0c8;
        --accent: #c8102e;
        --military: #2e2e2e;
        --topbar-h: 52px;
        --body-w: 680px;
        --ui: "Inter", sans-serif;
        --body: "PT Serif", serif;
        --hero: "Playfair Display", serif;
    }
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: var(--body);
        background: var(--bg);
        color: var(--text);
        line-height: 1.7;
        overflow-x: clip;
    }
    img {
        display: block;
        max-width: 100%;
    }
    a {
        color: inherit;
        text-decoration: none;
    }

    /* ─── TOP BAR ─────────────────────────────────────────────────────────────── */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 200;
        background: var(--black);
        height: var(--topbar-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    .topbar__back {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ui);
        font-size: 0.72rem;
        font-weight: 500;
        color: #888;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: color 0.2s;
        flex-shrink: 0;
    }
    .topbar__back:hover {
        color: var(--white);
    }
    .topbar__back svg {
        width: 13px;
        height: 13px;
        fill: currentColor;
    }
    .topbar__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .topbar__logo img {
        height: 24px;
        width: auto;
    }
    .topbar__nav {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
    }
    .topbar__nav-label {
        font-family: var(--ui);
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #555;
        margin-right: 4px;
    }
    .pill {
        font-family: var(--ui);
        font-size: 0.68rem;
        font-weight: 700;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #3a3a3a;
        color: #666;
        transition:
            background 0.2s,
            color 0.2s,
            border-color 0.2s;
        cursor: pointer;
    }
    .pill.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--white);
    }
    .pill.soon {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }
    .pill:not(.active):not(.soon):hover {
        border-color: #888;
        color: #ccc;
    }

    @media (max-width: 600px) {
        .topbar {
            height: auto;
            flex-wrap: wrap;
            padding: 0 16px;
        }
        .topbar__back {
            order: 1;
            flex-shrink: 0;
            height: var(--topbar-h);
            align-self: center;
        }
        .topbar__logo {
            order: 2;
            position: static;
            transform: none;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: var(--topbar-h);
        }
        .topbar__nav {
            order: 3;
            flex-basis: 100%;
            justify-content: center;
            padding: 8px 0;
            gap: 8px;
            border-top: 1px solid #1e1e1e;
        }
        .topbar__nav-label {
            display: none;
        }
        .pill {
            width: 24px;
            height: 24px;
            font-size: 0.62rem;
        }
        .back-label {
            display: none;
        }
    }

    /* ─── ABOVE-FOLD ──────────────────────────────────────────────────────────── */
    .above-fold {
        display: contents;
    }
    @media (max-width: 600px) {
        .above-fold {
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - var(--topbar-h) - 40px);
        }
        .above-fold .hero {
            flex: 1;
            min-height: 0;
            height: auto;
        }
        .above-fold .stats-wrap {
            margin-top: 0;
            padding: 0;
            flex-shrink: 0;
        }
        .above-fold .stats-band {
            border-radius: 0;
        }
    }

    /* ─── HERO ────────────────────────────────────────────────────────────────── */
    .hero {
        position: relative;
        height: calc(92vh - var(--topbar-h));
        min-height: 580px;
        background: url("https://sandbox.prensa.com/resizer/v2/C4LNG7Z55BHBJAT6KOHQ33RSJY.jpg?auth=9b35e4941a113e5c4b7b9d8018ed97dc9dd3304fcd24537dfb174ebabfeb28f8")
            center/cover no-repeat;
        overflow: hidden;
    }
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.88) 0%,
                rgba(0, 0, 0, 0.75) 38%,
                rgba(0, 0, 0, 0.2) 65%,
                rgba(0, 0, 0, 0) 100%
            ),
            linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 35%);
    }
    .hero__inner {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 0 5% 80px;
        color: var(--white);
    }
    .hero__text {
        max-width: 500px;
        flex-shrink: 0;
    }
    .hero__img-mobile {
        display: none;
    }

    /* — Animaciones de entrada: título e intro — */
    @keyframes heroFadeUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .hero__serie {
        display: inline-flex;
        align-items: center;
        font-family: var(--ui);
        font-size: 0.75rem;
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--white);
        background: var(--accent);
        padding: 5px 11px 4px;
        margin-bottom: 10px;
        animation: heroFadeUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: 0.1s;
    }
    .hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--ui);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #f5c800;
        margin-bottom: 0;
        margin-top: 20px;
        margin-bottom: 10px;
        background: none;
        padding: 0;
        animation: heroFadeUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: 0.55s;
    }
    .hero__eyebrow::before,
    .hero__eyebrow::after {
        content: "";
        display: block;
        height: 1px;
        width: 18px;
        background: #f5c800;
        opacity: 0.7;
    }
    .hero__title {
        font-family: var(--hero);
        font-size: clamp(1.9rem, 3.6vw, 3.4rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin-bottom: 0;
        position: relative;
        text-shadow:
            0 2px 24px rgba(0, 0, 0, 0.6),
            0 1px 4px rgba(0, 0, 0, 0.5);
        animation: heroFadeUp 0.75s 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .hero__title em {
        font-style: italic;
        font-weight: 700;
    }

    /* — Glitch loop en el título — */
    @keyframes glitch {
        0%,
        85%,
        100% {
            text-shadow: none;
            transform: translateY(0) skewX(0deg);
            clip-path: none;
        }
        86% {
            text-shadow:
                -4px 0 #ff003c,
                4px 0 #0ff;
            transform: translate(-3px, 0) skewX(-0.5deg);
            clip-path: inset(22% 0 56% 0);
        }
        86.5% {
            text-shadow:
                4px 0 #ff003c,
                -5px 0 #0ff;
            transform: translate(3px, 1px) skewX(0.5deg);
            clip-path: none;
        }
        87% {
            text-shadow:
                -3px 0 #0ff,
                4px 0 #ff003c;
            transform: translate(-2px, 0);
            clip-path: inset(60% 0 16% 0);
        }
        87.5% {
            text-shadow:
                5px 0 #0ff,
                -3px 0 #ff003c;
            transform: translate(2px, -1px);
            clip-path: none;
        }
        88% {
            text-shadow: -2px 0 rgba(255, 0, 60, 0.5);
            transform: translate(-1px, 0);
            clip-path: inset(38% 0 40% 0);
        }
        88.5% {
            text-shadow: none;
            transform: translateY(0);
            clip-path: none;
        }
    }
    .hero__summary {
        font-family: var(--ui);
        font-size: clamp(1.15rem, 1.5vw, 1.05rem);
        font-weight: 300;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 0;
        animation: heroFadeUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: 0.6s;
    }
    .hero__meta {
        font-family: var(--ui);
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.5);
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .hero__meta strong {
        color: rgba(255, 255, 255, 0.9);
    }

    /* ─── SERIGRAFIA ──────────────────────────────────────────────────────────── */
    @keyframes slideFromRight {
        from {
            opacity: 0;
            transform: translateX(60px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    .hero__soldiers {
        position: absolute;
        bottom: 0;
        right: 4%;
        width: 28%;
        max-width: 380px;
        display: flex;
        align-items: flex-end;
    }
    .hero__soldiers .soldier {
        display: block;
        width: 100%;
        height: auto;
        max-height: 88vh;
        object-fit: contain;
        object-position: bottom right;
        animation: slideFromRight 0.9s 0.5s cubic-bezier(0.22, 0.61, 0.36, 1)
            both;
    }

    /* Scroll indicator — solo móvil */
    .scroll-hint {
        display: none;
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-family: var(--ui);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }
    .scroll-hint__arrow {
        width: 20px;
        height: 20px;
        border-right: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        transform: rotate(45deg);
        animation: bounceDown 1.4s ease-in-out infinite;
    }
    @keyframes bounceDown {
        0%,
        100% {
            transform: rotate(45deg) translateY(0);
        }
        50% {
            transform: rotate(45deg) translateY(5px);
        }
    }

    /* Ajustes hero en móvil */
    @media (max-width: 600px) {
        .hero {
            height: 100svh;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        .hero__img-mobile {
            display: block;
            width: 64%;
            margin: 20px auto 0;
            object-fit: contain;
            object-position: bottom center;
            position: relative;
            z-index: 3;
            flex-shrink: 0;
            -webkit-mask-image: linear-gradient(
                to bottom,
                black 45%,
                transparent 88%
            );
            mask-image: linear-gradient(to bottom, black 45%, transparent 88%);
            margin-bottom: -100px;
            animation: slideFromRight 0.9s 0.3s
                cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }
        .hero__inner {
            flex: 1;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 0 5% 36px;
            gap: 0;
            position: relative;
            z-index: 4;
        }
        .hero__title {
            font-size: clamp(2.4rem, 8.5vw, 3.2rem);
        }
        .hero__text {
            max-width: 100%;
        }
        .hero__soldiers {
            display: none;
        }
        .scroll-hint {
            display: none;
        }
    }

    /* ─── CIFRAS ──────────────────────────────────────────────────────────────── */
    .stats-wrap {
        position: relative;
        z-index: 10;
        margin-top: -64px;
        padding: 0 5%;
    }
    .stats-band {
        background: var(--accent);
        border-radius: 6px;
        padding: 32px 36px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
    }

    /* Animación de entrada de las cifras */
    @keyframes statReveal {
        from {
            opacity: 0;
            transform: translateY(22px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .stat {
        text-align: center;
        color: var(--white);
        padding: 0 20px;
        position: relative;
        animation: statReveal 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .stat:nth-child(1) {
        animation-delay: 0.9s;
    }
    .stat:nth-child(2) {
        animation-delay: 1.05s;
    }
    .stat:nth-child(3) {
        animation-delay: 1.2s;
    }
    .stat:nth-child(4) {
        animation-delay: 1.35s;
    }
    .stat + .stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background: rgba(255, 255, 255, 0.22);
        transition: opacity 0.3s;
    }

    /* Hover en cifras */
    @keyframes numPop {
        0% {
            transform: scale(1);
        }
        40% {
            transform: scale(1.14) translateY(-4px);
        }
        70% {
            transform: scale(1.07) translateY(-2px);
        }
        100% {
            transform: scale(1) translateY(0);
        }
    }
    .stat {
        cursor: default;
        transition: background 0.25s;
    }
    .stat:hover {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
    }
    .stat:hover + .stat::before {
        opacity: 0;
    }
    .stat:hover .stat__num {
        animation: numPop 0.45s ease forwards;
    }
    .stat:hover .stat__label {
        opacity: 1;
        transition: opacity 0.2s;
    }

    .stat__num {
        display: block;
        font-family: var(--hero);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 900;
        line-height: 1;
        margin-bottom: 10px;
    }
    .stat__label {
        font-family: var(--ui);
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        opacity: 0.85;
        line-height: 1.4;
        transition: opacity 0.2s;
    }

    @media (max-width: 900px) {
        .stats-band {
            grid-template-columns: repeat(2, 1fr);
            gap: 28px 0;
        }
        .stat:nth-child(3)::before {
            display: none;
        }
    }
    @media (max-width: 520px) {
        .stats-wrap {
            margin-top: 0;
            padding: 0;
        }
        .stats-band {
            border-radius: 0;
            padding: 28px 16px;
            gap: 20px 0;
        }
    }

    /* ─── ARTÍCULO ────────────────────────────────────────────────────────────── */
    .article {
        max-width: var(--body-w);
        width: 100%;
        padding: 0 24px;
    }
    .byline {
        font-family: var(--ui);
        font-size: 0.82rem;
        padding-bottom: 22px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--rule);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
    }
    .byline__author {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }
    .byline__role {
        color: var(--muted);
        flex-basis: 100%;
    }
    .byline__date {
        color: var(--muted);
    }
    @media (max-width: 600px) {
        .byline__date {
            margin-left: 0;
            flex-basis: 100%;
        }
    }
    .article p {
        font-size: 1.15rem;
        margin-bottom: 26px;
        hyphens: auto;
    }
    .drop-cap::first-letter {
        font-family: var(--hero);
        font-size: 5.5rem;
        font-weight: 900;
        float: left;
        line-height: 0.78;
        margin: 8px 14px 0 -4px;
        color: var(--black);
    }

    /* ─── MAPA ANIMADO ────────────────────────────────────────────────────────── */
    .route-map-fig {
        margin: 52px -80px;
        position: relative;
    }
    .route-map-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 800/440;
        overflow: hidden;
        background: #101012;
    }
    .route-map-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.95) saturate(0.9);
    }
    .route-map-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .route-map-fig figcaption {
        font-family: var(--ui);
        font-size: 0.78rem;
        color: var(--muted);
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    .route-map-fig figcaption em {
        font-style: italic;
    }

    /* Botón expandir/cerrar mapa */
    .map-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        line-height: 1;
        backdrop-filter: blur(4px);
        transition: background 0.2s;
    }
    .map-btn:hover {
        background: rgba(0, 0, 0, 0.82);
    }
    .map-btn--close {
        display: none;
    }

    /* Estado fullscreen vía :target */
    .route-map-fig:target {
        position: fixed;
        inset: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9000;
        background: #000;
        display: flex;
        flex-direction: column;
    }
    .route-map-fig:target .route-map-wrap {
        flex: 1;
        aspect-ratio: unset;
        width: 100%;
        height: 100%;
    }
    @media (max-width: 600px) {
        .route-map-fig:target {
            justify-content: center;
        }
        .route-map-fig:target .route-map-wrap {
            flex: none;
            aspect-ratio: 800/440;
            width: 100%;
            height: auto;
        }
    }
    .route-map-fig:target figcaption {
        padding: 8px 16px;
        margin: 0;
        border: none;
        background: rgba(0, 0, 0, 0.8);
        color: rgba(255, 255, 255, 0.55);
        flex-shrink: 0;
    }
    .route-map-fig:target .map-btn--expand {
        display: none;
    }
    .route-map-fig:target .map-btn--close {
        display: flex;
    }

    /* Lightbox CSS-only para figuras */
    .zoomable .fig-zoom {
        display: block;
        cursor: zoom-in;
        position: relative;
    }
    .zoomable .fig-close {
        display: none;
    }
    .zoomable.is-open {
        position: fixed;
        inset: 0;
        margin: 0;
        z-index: 8000;
        background: rgba(0, 0, 0, 0.92);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        cursor: zoom-out;
    }
    .zoomable.is-open .fig-zoom {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 92vw;
        max-height: 82vh;
        cursor: default;
    }
    .zoomable.is-open .fig-zoom img {
        max-width: 100%;
        max-height: 82vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    @media (max-width: 600px) {
        .zoomable.is-open .fig-zoom {
            max-width: 100vw;
            max-height: 75vh;
        }
        .zoomable.is-open .fig-zoom img {
            max-width: 100vw;
            max-height: 75vh;
        }
    }
    .zoomable.is-open figcaption {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.8rem;
        text-align: center;
        padding: 10px 20px;
        border: none;
        margin: 0;
    }
    .zoomable.is-open figcaption a {
        color: rgba(255, 255, 255, 0.5);
    }
    .zoomable.is-open .fig-close {
        display: flex;
        position: fixed;
        top: 18px;
        right: 22px;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: #fff;
        font-size: 1rem;
        text-decoration: none;
        z-index: 8001;
        transition: background 0.2s;
    }
    .zoomable.is-open .fig-close:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    /* Cursor zoom en imágenes normales */
    .article figure img {
        cursor: zoom-in;
    }
    /* Figura con polaroids */
    .fig-img-wrap {
        position: relative;
        overflow: visible;
        line-height: 0;
    }
    @media (max-width: 600px) {
        .fig-img-wrap {
            overflow: clip;
        }
    }
    .zoomable.is-open .fig-img-wrap {
        overflow: visible;
        display: contents;
    }
    #fig-2.is-open .polaroid-stack {
        display: none;
    }
    /* Polaroid como link */
    a.polaroid {
        display: block;
        text-decoration: none;
        cursor: zoom-in;
    }
    /* Lightboxes de polaroids: ocultos hasta que tengan .is-open */
    #fig-billar1,
    #fig-billar2,
    #fig-billar3 {
        display: none;
    }
    #fig-billar1.is-open,
    #fig-billar2.is-open,
    #fig-billar3.is-open {
        display: flex;
    }

    /* Outbound path: 901 px, draws in 5.6 s within a 13 s loop */
    @keyframes drawOut {
        0% {
            stroke-dashoffset: 901;
            opacity: 0;
        }
        4% {
            opacity: 1;
        }
        47% {
            stroke-dashoffset: 0;
            opacity: 1;
        }
        88% {
            stroke-dashoffset: 0;
            opacity: 1;
        }
        100% {
            stroke-dashoffset: 0;
            opacity: 0;
        }
    }
    /* Return path: dashed, fades in when outbound reaches Cologne (~47%) */
    @keyframes showRet {
        0%,
        46% {
            opacity: 0;
        }
        50%,
        88% {
            opacity: 0.65;
        }
        100% {
            opacity: 0;
        }
    }
    /* City dots — each encodes its own appearance window in the 13 s cycle */
    /* Vienna: 0–3% → appear (line start) */
    @keyframes dotVienna {
        0%,
        2% {
            opacity: 0;
            transform: scale(0.2);
        }
        5% {
            opacity: 1;
            transform: scale(1.4);
        }
        8% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Budapest: arrives at ~10% */
    @keyframes dotBudapest {
        0%,
        9% {
            opacity: 0;
            transform: scale(0.2);
        }
        12% {
            opacity: 1;
            transform: scale(1.4);
        }
        15% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Bratislava: arrives at ~16% */
    @keyframes dotBratislava {
        0%,
        15% {
            opacity: 0;
            transform: scale(0.2);
        }
        18% {
            opacity: 1;
            transform: scale(1.4);
        }
        21% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Berlin: arrives at ~31% */
    @keyframes dotBerlin {
        0%,
        30% {
            opacity: 0;
            transform: scale(0.2);
        }
        33% {
            opacity: 1;
            transform: scale(1.4);
        }
        36% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /* Cologne: arrives at ~47% */
    @keyframes dotCologne {
        0%,
        46% {
            opacity: 0;
            transform: scale(0.2);
        }
        49% {
            opacity: 1;
            transform: scale(1.4);
        }
        52% {
            transform: scale(1);
        }
        88% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .map-route-out {
        animation: drawOut 13s ease-in-out infinite;
    }
    .map-route-ret {
        animation: showRet 13s ease-in-out infinite;
    }
    .city-dot {
        transform-box: fill-box;
        transform-origin: center;
    }
    .city-vienna {
        animation: dotVienna 13s ease-in-out infinite;
    }
    .city-budapest {
        animation: dotBudapest 13s ease-in-out infinite;
    }
    .city-bratislava {
        animation: dotBratislava 13s ease-in-out infinite;
    }
    .city-berlin {
        animation: dotBerlin 13s ease-in-out infinite;
    }
    .city-cologne {
        animation: dotCologne 13s ease-in-out infinite;
    }

    @media (max-width: 860px) {
        .route-map-fig {
            margin: 40px -24px;
        }
    }
    @media (max-width: 600px) {
        .route-map-fig {
            margin: 32px -18px;
        }
    }

    /* SHARE BAR */
    .share-bar {
        display: none;
    } /* oculto en móvil — usuarios usan share nativo del browser */
    .share-bar__label {
        font-family: var(--ui);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--muted);
        margin-bottom: 6px;
    }
    .share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--rule);
        color: var(--muted);
        transition:
            background 0.2s,
            border-color 0.2s,
            color 0.2s,
            transform 0.18s;
    }
    .share-btn svg {
        width: 15px;
        height: 15px;
        fill: currentColor;
    }
    .share-btn:hover {
        transform: translateX(2px);
    }
    .share-btn--x:hover {
        background: #000;
        border-color: #000;
        color: #fff;
    }
    .share-btn--fb:hover {
        background: #1877f2;
        border-color: #1877f2;
        color: #fff;
    }
    .share-btn--wa:hover {
        background: #25d366;
        border-color: #25d366;
        color: #fff;
    }
    .share-btn--li:hover {
        background: #0a66c2;
        border-color: #0a66c2;
        color: #fff;
    }

    /* Wrapper artículo + sidebar */
    .article-wrap {
        display: block;
        max-width: calc(var(--body-w) + 48px);
        margin: 50px auto 0;
    }
    .share-sidebar {
        display: none;
    }
    .share-mobile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
        margin-bottom: 32px;
        border-bottom: 1px solid var(--rule);
    }
    .share-mobile__label {
        font-family: var(--ui);
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--muted);
        margin-right: 4px;
    }

    @media (min-width: 900px) {
        .article-wrap {
            display: grid;
            grid-template-columns: 1fr var(--body-w) 1fr;
            max-width: none;
            margin-left: 0;
            margin-right: 0;
        }
        .article {
            grid-column: 2;
            max-width: none;
            width: auto;
            margin: 0;
        }
        .share-mobile {
            display: none;
        }
        .byline {
            margin-bottom: 42px;
        }
        .share-sidebar {
            display: block;
            grid-column: 3;
            justify-self: start;
            padding-left: 64px;
            position: sticky;
            top: calc(var(--topbar-h) + 24px);
            align-self: start;
        }
        .share-bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 14px 9px;
            background: var(--bg);
            border: 1px solid var(--rule);
            border-radius: 32px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
        }
        .share-bar__label {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            margin: 0 0 4px;
            font-size: 0.58rem;
        }
    }

    /* SUBTÍTULOS */
    .s-break {
        margin: 64px 0 0;
    }
    .s-break__line,
    .s-break__tag {
        display: none;
    }
    .article h2 {
        font-family: var(--hero);
        font-size: clamp(1.7rem, 3.5vw, 2.6rem);
        font-weight: 700;
        font-style: normal;
        line-height: 1.15;
        display: block;
        color: var(--black);
        padding-bottom: 12px;
        margin-bottom: 32px;
        position: relative;
    }
    .article h2::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 44px;
        height: 3px;
        background: var(--accent);
    }

    /* PULL QUOTES */
    blockquote {
        font-family: var(--body);
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
        color: var(--text);
        margin: 0 0 1em;
        padding: 0;
        border: none;
    }
    blockquote cite {
        display: block;
        font-style: normal;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
        margin-top: 8px;
    }

    /* FIGURAS */
    figure {
        margin: 52px -80px;
    }
    figure img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    figcaption {
        font-family: var(--ui);
        font-size: 0.78rem;
        color: var(--muted);
        margin-top: 10px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    figcaption em {
        font-style: italic;
    }
    figcaption small {
        opacity: 0.7;
    }
    @media (max-width: 600px) {
        figcaption {
            padding: 8px 18px 10px;
        }
    }

    @media (max-width: 860px) {
        figure {
            margin: 40px -24px;
        }
        blockquote {
            margin: 40px 0;
            padding: 24px 28px;
        }
    }
    @media (max-width: 600px) {
        figure {
            margin: 32px -18px;
        }
        .article {
            padding: 0 18px;
        }
    }

    /* ─── BLOQUES DE CIFRAS EN ARTÍCULO ──────────────────────────────────────── */
    .inline-stats {
        display: grid;
        gap: 0;
        border-top: 2px solid var(--accent);
        border-bottom: 2px solid var(--rule);
        margin: 36px 0;
    }
    .inline-stats--2col {
        grid-template-columns: 1fr 1fr;
    }
    .inline-stat {
        padding: 24px 20px 20px;
        border-right: 1px solid var(--rule);
    }
    .inline-stat:last-child {
        border-right: none;
    }
    .inline-stat__num {
        font-family: var(--hero);
        font-size: clamp(2.4rem, 6vw, 3.6rem);
        font-weight: 900;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 8px;
    }
    .inline-stat__unit {
        font-family: var(--ui);
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin-bottom: 6px;
    }
    .inline-stat__label {
        font-family: var(--ui);
        font-size: 0.78rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text);
        line-height: 1.4;
    }

    /* ─── POLAROIDS ───────────────────────────────────────────────────────────── */
    .polaroid-stack {
        position: absolute;
        right: -60px;
        bottom: -44px;
        width: 580px;
        height: 500px;
        z-index: 4;
        pointer-events: none;
    }
    .polaroid {
        position: absolute;
        width: 285px;
        background: #fff;
        padding: 11px 11px 38px;
        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.5),
            0 2px 6px rgba(0, 0, 0, 0.2);
        pointer-events: auto;
    }
    .polaroid img {
        display: block;
        width: 100%;
        height: 192px;
        object-fit: cover;
        object-position: center;
    }
    .polaroid:nth-child(1) {
        top: 0;
        right: 0;
        transform: rotate(-6deg);
        z-index: 3;
    }
    .polaroid:nth-child(2) {
        top: 80px;
        right: 260px;
        transform: rotate(5deg);
        z-index: 2;
    }
    .polaroid:nth-child(3) {
        top: 210px;
        right: 40px;
        transform: rotate(-3deg);
        z-index: 1;
    }

    @media (max-width: 600px) {
        .polaroid-stack {
            right: 0;
            top: 20px;
            bottom: auto;
            width: 200px;
            height: 160px;
        }
        .polaroid {
            width: 90px;
            padding: 4px 4px 14px;
        }
        .polaroid img {
            height: 60px;
        }
        .polaroid:nth-child(1) {
            top: 0;
            right: 0;
            transform: rotate(-6deg);
        }
        .polaroid:nth-child(2) {
            top: 28px;
            right: 88px;
            transform: rotate(5deg);
        }
        .polaroid:nth-child(3) {
            top: 72px;
            right: 12px;
            transform: rotate(-3deg);
        }
    }

    /* ─── CTA PRÓXIMA ENTREGA ─────────────────────────────────────────────────── */
    .next-cta {
        width: 100%;
        margin-top: 80px;
        padding: 52px 8%;
        background: var(--military);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        flex-wrap: wrap;
    }
    .next-cta__tag {
        font-family: var(--ui);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 10px;
        display: block;
    }
    .next-cta__title {
        font-family: var(--hero);
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        font-style: italic;
        color: var(--white);
        line-height: 1.3;
        margin-bottom: 0;
    }
    .next-cta__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: var(--white);
        font-family: var(--ui);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        padding: 14px 28px;
        border-radius: 3px;
        white-space: nowrap;
        transition:
            background 0.2s,
            border-color 0.2s;
        flex-shrink: 0;
    }
    .next-cta__btn:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.6);
    }
    .next-cta__btn svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

    @media (max-width: 860px) {
        .next-cta {
            padding: 40px 6%;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }
    }
    @media (max-width: 600px) {
        .next-cta {
            padding: 36px 5%;
        }
    }

    /* ─── CRÉDITOS ────────────────────────────────────────────────────────────── */
    .credits {
        background: #111;
        color: rgba(255, 255, 255, 0.55);
        font-family: var(--ui);
        font-size: 0.78rem;
        padding: 48px 5%;
        margin-top: 0;
    }
    .credits__inner {
        max-width: 960px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .credits__title {
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: rgba(255, 255, 255, 0.3);
        margin-bottom: 12px;
    }
    .credits ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .credits li {
        line-height: 1.5;
    }
    .credits li strong {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 600;
    }
    .credits__copy {
        grid-column: 1/-1;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 20px;
        margin-top: 8px;
        font-size: 0.72rem;
        opacity: 0.5;
        text-align: center;
    }

    @media (max-width: 600px) {
        .credits__inner {
            grid-template-columns: 1fr;
        }

        .hero::before {
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.92) 0%,
                rgba(0, 0, 0, 0.6) 40%,
                rgba(0, 0, 0, 0.1) 75%,
                rgba(0, 0, 0, 0) 100%
            );
        }
    }
</style>

<!-- TOP BAR -->
<header class="topbar">
    <a class="topbar__back" href="https://www.prensa.com">
        <svg viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
        </svg>
        <span class="back-label">prensa.com</span>
    </a>
    <div class="topbar__logo">
        <a href="https://www.prensa.com">
            <img
                src="https://multimedia.corprensa.com/la-prensa/assets/logo_laprensa_panama.svg"
                alt="La Prensa Panamá"
            />
        </a>
    </div>
    <!--nav class="topbar__nav" aria-label="Entregas del especial">
    <span class="topbar__nav-label">Entregas</span>
    <a class="pill active" href="#" title="Entrega 1 — disponible">1</a>
    <a class="pill soon" href="#" title="Próximamente">2</a>
    <a class="pill soon" href="#" title="Próximamente">3</a>
    <a class="pill soon" href="#" title="Próximamente">4</a>
    <a class="pill soon" href="#" title="Próximamente">5</a>
  </nav-->
</header>

<!-- HERO + CIFRAS -->
<div class="above-fold">
    <section class="hero">
        <img
            class="hero__img-mobile"
            src="https://sandbox.prensa.com/resizer/v2/W62XJSN2UFD3NCNDK32I7NYVQI.png?auth=e35bf9720e0666dc35ef444402a964364c3d90950bf5515fe8b19e82b95d43a7"
            alt=""
            aria-hidden="true"
        />
        <div class="hero__inner">
            <div class="hero__text">
                <p class="hero__serie">Dante en Ucrania</p>
                <h1 class="hero__title">
                    Reclutadores<br />rusos en Berlín:<br /><em
                        >la historia de<br />un panameño</em
                    >
                </h1>
                <p class="hero__eyebrow">Primera Entrega</p>
                <p class="hero__summary">
                    Sin dinero, herido y atrapado en Europa, el joven recibe una
                    oferta para enrolarse en la guerra de Ucrania. Esta es la
                    historia de cómo un encuentro casual en un bar lo llevó a
                    las entrañas de uno de los conflictos más sangrientos del
                    siglo XXI
                </p>
            </div>
            <div class="hero__soldiers" aria-hidden="true">
                <img
                    class="soldier"
                    src="https://sandbox.prensa.com/resizer/v2/W62XJSN2UFD3NCNDK32I7NYVQI.png?auth=e35bf9720e0666dc35ef444402a964364c3d90950bf5515fe8b19e82b95d43a7"
                    alt=""
                />
            </div>
        </div>
        <div class="scroll-hint" aria-hidden="true">
            <div class="scroll-hint__arrow"></div>
        </div>
    </section>
</div>
<!-- /above-fold -->

<!-- ARTÍCULO -->
<div class="article-wrap">
    <article class="article">
        <div class="byline">
            <span class="byline__author">Fernando Berguido</span>
            <span class="byline__role">Especial para La Prensa</span>
            <span class="byline__date">Junio 2026</span>
        </div>

        <div class="share-mobile" aria-label="Compartir artículo">
            <span class="share-mobile__label">Compartir</span>
            <a
                class="share-btn share-btn--x"
                href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra"
                target="_blank"
                rel="noopener"
                title="Compartir en X"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.845L1.254 2.25H8.08l4.259 5.623zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                    />
                </svg>
            </a>
            <a
                class="share-btn share-btn--fb"
                href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en Facebook"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073c0 6.026 4.388 11.02 10.125 11.927v-8.434H7.078v-3.493h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953h-1.514c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.493h-2.796v8.434C19.612 23.093 24 18.099 24 12.073z"
                    />
                </svg>
            </a>
            <a
                class="share-btn share-btn--wa"
                href="https://api.whatsapp.com/send?text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra%20%E2%80%94%20https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en WhatsApp"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"
                    />
                </svg>
            </a>
            <a
                class="share-btn share-btn--li"
                href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&title=Dante%20en%20Ucrania"
                target="_blank"
                rel="noopener"
                title="Compartir en LinkedIn"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
                    />
                </svg>
            </a>
        </div>

        <p class="drop-cap">
            Viktor tardó un rato en darse cuenta de que su próxima presa había
            llegado. Al principio lo despistó verlo con un par de ingleses que
            jugaban al billar, entre el medio centenar de muchachos que esa
            madrugada deambulaban por el bar. Pero, cuando el chico se quedó
            solo y, buscando un rincón en la barra terminó sentado a su lado, le
            bastaron tres minutos para saber que el sello en su frente era el de
            la desesperación.
        </p>

        <p>
            Conocía bien el Bata Bar de <i>Alexanderplatz</i>, con sus ocho
            mesas de billar, pistas de <i>shuffleboard</i> y juegos de dardos en
            las paredes.
        </p>

        <p>
            En el día, el sitio es muy popular entre grupos de amigos y para los
            <i> happy hours</i> de los ejecutivos al cerrar las oficinas del
            centro de Berlín. Los fines de semana abre hasta las 5:00 am y es
            una de las pistas donde aterrizan decenas de jóvenes a comer
            salchichas o hamburguesas luego de la juerga.
        </p>

        <figure id="fig-2" class="zoomable fig-has-polaroids">
            <div class="fig-img-wrap">
                <a
                    href="#fig-2"
                    class="fig-zoom"
                    aria-label="Ver imagen ampliada"
                >
                    <img
                        src="https://sandbox.prensa.com/resizer/v2/KWDVZPN7BVCWZGPY3VT5WTNOVU.jpg?auth=ee1502868e9a61ce80332de40d768ca1589c3bbfcd9aae451b0acbc9ca6026ca"
                        alt="El Bata Bar & Billiards de Alexanderplatz, Berlín"
                    />
                </a>
                <div class="polaroid-stack">
                    <a href="#fig-billar1" class="polaroid"
                        ><img
                            src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                            alt="Bata Bar Berlín"
                    /></a>
                    <a href="#fig-billar2" class="polaroid"
                        ><img
                            src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                            alt="Bata Bar Berlín"
                    /></a>
                    <a href="#fig-billar3" class="polaroid"
                        ><img
                            src="https://sandbox.prensa.com/resizer/v2/VJB2RV5XAFE3ZGKXVD5TVKXT5I.jpg?auth=7df0b416e33db76cbdcd7ad7cb87ad0c1f6d304c7564724739c98f90056e8de1"
                            alt="Bata Bar Berlín"
                    /></a>
                </div>
            </div>
            <figcaption>
                <em
                    >El Bata Bar &amp; Billiards de <i>Alexanderplatz</i>, en el
                    corazón de Berlín, lugar donde Viktor y Dante se
                    conocieron.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <figure id="fig-billar1" class="zoomable">
            <a
                href="#fig-billar1"
                class="fig-zoom"
                aria-label="Ver imagen ampliada"
            >
                <img
                    src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                    alt="Bata Bar Berlín — Instagram"
                />
            </a>
            <figcaption>
                <em
                    >Tomada del Instagram del Bata Bar &amp; Billiards,
                    Berlín.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <figure id="fig-billar2" class="zoomable">
            <a
                href="#fig-billar2"
                class="fig-zoom"
                aria-label="Ver imagen ampliada"
            >
                <img
                    src="https://sandbox.prensa.com/resizer/v2/7W2ONI6IXFBURD2DUKT45ZFO7Y.jpg?auth=67082540f4d2a1933e96a9b87d4b2e41a231cef51482a4dd3904633936269dec"
                    alt="Bata Bar Berlín — Instagram"
                />
            </a>
            <figcaption>
                <em
                    >Tomada del Instagram del Bata Bar &amp; Billiards,
                    Berlín.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <figure id="fig-billar3" class="zoomable">
            <a
                href="#fig-billar3"
                class="fig-zoom"
                aria-label="Ver imagen ampliada"
            >
                <img
                    src="https://sandbox.prensa.com/resizer/v2/VJB2RV5XAFE3ZGKXVD5TVKXT5I.jpg?auth=7df0b416e33db76cbdcd7ad7cb87ad0c1f6d304c7564724739c98f90056e8de1"
                    alt="Bata Bar Berlín — Instagram"
                />
            </a>
            <figcaption>
                <em
                    >Tomada del Instagram del Bata Bar &amp; Billiards,
                    Berlín.</em
                >
                <small
                    ><a
                        href="https://www.batabar.com"
                        target="_blank"
                        rel="noopener"
                        >batabar.com</a
                    ></small
                >
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <p>Ambos evitaron hablar en alemán.</p>
        <p>
            En inglés, Viktor supo que era panameño. No se lo hubiera imaginado,
            jamás había conocido uno.
        </p>
        <p>
            Dante, como lo llaman sus amigos desde la escuela en Penonomé (y así
            le nombraremos en esta historia por razones de seguridad) se enteró
            que quien ahora le invitaba una cerveza era ruso.
        </p>

        <p>
            Hablando de los diferentes tipos de cervezas que había en Alemania,
            de mujeres y de cómo habían llegado cada uno a Berlín, Viktor se
            enteró que el panameño había pasado, primero, por Viena donde estuvo
            un mes, luego unos días en Budapest y Bratislava, hasta terminar en
            Berlín, donde el alquiler de un Airbnb lo terminó ahorcando.
        </p>
        <p>
            Se había ido a probar suerte en Colonia unos días y, sin mayor
            éxito, había regresado a Berlín.
        </p>

        <span id="map-close"></span>
        <figure class="route-map-fig" id="map-full">
            <div class="route-map-wrap">
                <a
                    href="#map-full"
                    class="map-btn map-btn--expand"
                    title="Ver pantalla completa"
                    >⤢</a
                >
                <a
                    href="#map-close"
                    class="map-btn map-btn--close"
                    title="Cerrar"
                    >✕</a
                >
                <!-- Real map: CartoDB Dark tiles stitched at zoom 6, covering ~47–53°N, 4–22°E -->
                <img
                    class="route-map-bg"
                    src="https://sandbox.prensa.com/resizer/v2/3LNB5YMPZ5D7DLTQRYX32EJ5O4.jpg?auth=c4d5bb18f5d134bc7ba9f756d999df8b1c546232be75a412d872d3200f67644a"
                    alt=""
                    aria-hidden="true"
                    loading="lazy"
                    decoding="async"
                />

                <!-- SVG overlay: route animation on top of real map -->
                <svg
                    class="route-map-svg"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 800 440"
                    role="img"
                    aria-label="Mapa del recorrido de Dante por Europa Central"
                >
                    <defs>
                        <marker
                            id="arrowhead"
                            markerWidth="7"
                            markerHeight="7"
                            refX="6"
                            refY="3.5"
                            orient="auto"
                        >
                            <polygon points="0 0, 7 3.5, 0 7" fill="#c8102e" />
                        </marker>
                    </defs>

                    <!-- ── ROUTE ─────────────────────────────────────────────────── -->
                    <!-- Positions recalculated via Web Mercator for this tile view:  -->
                    <!-- Positions from CartoDB tiles (zoom 6, Web Mercator projection) -->
                    <!-- Viena(553,341)→Budapest(675,390)→Bratislava(587,345)→Berlín(419,33)→Colonia(125,149) -->
                    <!-- Outbound length ≈ 901 px -->
                    <path
                        class="map-route-out"
                        d="M553,341 L675,390 L587,345 L419,33 L125,149"
                        stroke="#c8102e"
                        stroke-width="2.5"
                        fill="none"
                        stroke-dasharray="901"
                        stroke-dashoffset="901"
                        marker-end="url(#arrowhead)"
                        opacity="0"
                    />

                    <!-- Return dashed: Colonia→Berlín (≈ 316 px) -->
                    <path
                        class="map-route-ret"
                        d="M125,149 L419,33"
                        stroke="#c8102e"
                        stroke-width="1.8"
                        fill="none"
                        stroke-dasharray="9,13"
                        opacity="0"
                    />

                    <!-- ── CITIES ─────────────────────────────────────────────────── -->
                    <!-- Viena -->
                    <g class="city-dot city-vienna" opacity="0">
                        <circle
                            cx="553"
                            cy="341"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="553" cy="341" r="5" fill="#c8102e" />
                        <text
                            x="537"
                            y="361"
                            text-anchor="end"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            VIENA
                        </text>
                        <text
                            x="537"
                            y="373"
                            text-anchor="end"
                            fill="rgba(0,0,0,.5)"
                            font-family="Inter,sans-serif"
                            font-size="8.5"
                        >
                            inicio del viaje
                        </text>
                    </g>

                    <!-- Budapest -->
                    <g class="city-dot city-budapest" opacity="0">
                        <circle
                            cx="675"
                            cy="390"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="675" cy="390" r="5" fill="#c8102e" />
                        <text
                            x="658"
                            y="380"
                            text-anchor="end"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            BUDAPEST
                        </text>
                    </g>

                    <!-- Bratislava -->
                    <g class="city-dot city-bratislava" opacity="0">
                        <circle
                            cx="587"
                            cy="345"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="587" cy="345" r="5" fill="#c8102e" />
                        <text
                            x="601"
                            y="334"
                            text-anchor="start"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            BRATISLAVA
                        </text>
                    </g>

                    <!-- Berlín -->
                    <g class="city-dot city-berlin" opacity="0">
                        <circle
                            cx="419"
                            cy="33"
                            r="16"
                            fill="rgba(200,16,46,.22)"
                        />
                        <circle cx="419" cy="33" r="6" fill="#c8102e" />
                        <text
                            x="441"
                            y="29"
                            text-anchor="start"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="12"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            BERLÍN
                        </text>
                        <text
                            x="441"
                            y="43"
                            text-anchor="start"
                            fill="rgba(200,16,46,.9)"
                            font-family="Inter,sans-serif"
                            font-size="8.5"
                            font-weight="600"
                            letter-spacing=".5"
                        >
                            DESTINO
                        </text>
                    </g>

                    <!-- Colonia -->
                    <g class="city-dot city-cologne" opacity="0">
                        <circle
                            cx="125"
                            cy="149"
                            r="13"
                            fill="rgba(200,16,46,.18)"
                        />
                        <circle cx="125" cy="149" r="5" fill="#c8102e" />
                        <text
                            x="108"
                            y="144"
                            text-anchor="end"
                            fill="#111"
                            font-family="Inter,sans-serif"
                            font-size="11"
                            font-weight="700"
                            letter-spacing=".5"
                        >
                            COLONIA
                        </text>
                        <text
                            x="108"
                            y="157"
                            text-anchor="end"
                            fill="rgba(0,0,0,.5)"
                            font-family="Inter,sans-serif"
                            font-size="8.5"
                        >
                            sin trabajo
                        </text>
                    </g>

                    <!-- Legend -->
                    <rect
                        x="12"
                        y="408"
                        width="148"
                        height="28"
                        rx="3"
                        fill="rgba(255,255,255,.75)"
                    />
                    <text
                        x="20"
                        y="419"
                        fill="rgba(0,0,0,.45)"
                        font-family="Inter,sans-serif"
                        font-size="8"
                        letter-spacing="2"
                    >
                        RECORRIDO DE DANTE
                    </text>
                    <line
                        x1="20"
                        y1="430"
                        x2="52"
                        y2="430"
                        stroke="#c8102e"
                        stroke-width="2"
                    />
                    <text
                        x="57"
                        y="433"
                        fill="rgba(0,0,0,.55)"
                        font-family="Inter,sans-serif"
                        font-size="8"
                    >
                        Ida
                    </text>
                    <line
                        x1="76"
                        y1="430"
                        x2="108"
                        y2="430"
                        stroke="#c8102e"
                        stroke-width="1.5"
                        stroke-dasharray="5,7"
                    />
                    <text
                        x="113"
                        y="433"
                        fill="rgba(0,0,0,.55)"
                        font-family="Inter,sans-serif"
                        font-size="8"
                    >
                        Regreso
                    </text>
                </svg>
            </div>
            <figcaption>
                <em
                    >El recorrido de Dante por Europa Central antes del fatídico
                    encuentro en Berlín.</em
                >
                <small>© OpenStreetMap contributors</small>
            </figcaption>
        </figure>

        <p>
            "Encontré en Berlín un <i>kapselhostel</i>. Son unos hoteles
            cápsula, pagaba solo seis euros al día. Son cabinas de dos metros de
            largo, uno y medio de alto y uno de ancho. Están bien, son limpios y
            seguros. Afuera hay donde cocinar - recordó Dante -. En ese momento,
            mientras el ruso me hablaba, yo tenía cinco euros en el bolsillo,
            era todo lo que me quedaba."
        </p>

        <!-- SUBTÍTULO -->
        <h2>Soledad</h2>

        <p>
            "Mi aventura en Europa no resultó ser lo que yo esperaba. Antes de
            tomar el tren a Colonia me pregunté: ¿compro el pasaje de vuelta a
            Panamá o veo si consigo algo en Colonia? Un colombiano que había
            conocido acá me había dicho que podría conseguir trabajo, pero eso
            no ocurrió y quedé más limpio que antes. Por eso regresé a Berlín."
        </p>

        <p>
            Viktor le dijo que si quería trabajar y ganar buena paga, él se la
            podía conseguir.
        </p>
        <p>
            Le contó que su país estaba en guerra y buscaban gente para pelear.
            Que ellos se encargarían de llevarlo a Rusia, de entrenarlo y darle
            armas. Que mucha gente iba. Que podían contratarlo por tres meses, o
            por seis, que dependía de él.
        </p>

        <span id="fig-close"></span>
        <figure id="fig-1" class="zoomable">
            <a href="#fig-1" class="fig-zoom" aria-label="Ver imagen ampliada">
                <img
                    src="https://sandbox.prensa.com/resizer/v2/5TW325SYBBAKTDWCTKPDJXV3OI.jpg?auth=82691695799ba202a27c4dcb5ab01fe4e0c487b0a19696fccd2e5277307a1640"
                    alt="El Tiergarten de Berlín cubierto de nieve en invierno"
                />
            </a>
            <figcaption>
                <em
                    >El Tiergarten, el gran parque de Berlín, cubierto de nieve
                    durante el invierno.</em
                >
                <small>Unsplash</small>
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>

        <p>
            Esa mañana Dante, en su hostal, había sufrido un bajón. La noche que
            de Colonia volvió a Berlín, cuatro días atrás, lo habían asaltado. A
            la zozobra sobre su situación económica se sumaba que, durante el
            forcejeo, le habían herido el abdomen de un cuchillazo.
        </p>
        <p>
            "No se llevaron nada porque no tenía nada de valor, salvo mi
            celular, que no dejé que me lo arrebataran."
        </p>

        <!-- SUBTÍTULO -->
        <div class="s-break">
            <div class="s-break__line"></div>
            <span class="s-break__tag">III</span>
            <div class="s-break__line"></div>
        </div>
        <h2>Crudo invierno</h2>

        <p>
            Era 12 de diciembre de 2025. Hacía mucho frío, había nevado todo el
            día. Nunca había visto nevar. Ya estaba mejor de la herida.
        </p>
        <p>Dante tenía 19 años.</p>

        <p>
            "Salía a caminar por la ciudad, todo estaba nevado. Me fumé un bate,
            no suelo fumar, y este me pegó durísimo. Iba por un área grande del
            parque, blanca, despejada, pensando en mi situación y me di cuenta
            de que estaba caminando sobre hielo. Escuché un crack y miré al
            suelo, se estaba partiendo."
        </p>

        <p>Tuvo suerte de no caer en el agua gélida del lago.</p>

        <p>
            Caminó muchísimo, durante horas, apocado, buscando ahuyentar esa
            angustia que le perseguía implacable.
        </p>

        <div class="inline-stats inline-stats--2col inline-stats--zoom">
            <div class="inline-stat">
                <div class="inline-stat__num">2014</div>
                <div class="inline-stat__label">
                    Rusia decide anexarse Crimea
                </div>
            </div>
            <div class="inline-stat">
                <div class="inline-stat__num">2022</div>
                <div class="inline-stat__label">Rusia ataca a toda Ucrania</div>
            </div>
        </div>

        <p>Deambulando terminó en el Bata Bar.</p>

        <p>"Me puse a jugar billar, no me provocaba volver a la cápsula."</p>

        <p>
            Viktor tomó una hoja de papel y escribió una cifra. Era lo que le
            iban a pagar. Puso una dirección.
        </p>
        <p>
            "El jueves salimos, este será el punto de encuentro —le dijo el
            mercenario—. Aquí los recogerán a ti y a los otros para llevarlos a
            Rusia. Trae tus cosas."
        </p>

        <!-- SUBTÍTULO -->
        <div class="s-break">
            <div class="s-break__line"></div>
            <span class="s-break__tag">IV</span>
            <div class="s-break__line"></div>
        </div>
        <h2>El conflicto</h2>

        <p>
            La actual guerra de Ucrania lleva más de cuatro años. El conflicto
            iniciado por Rusia realmente empezó antes, hace 12 años, en el 2014,
            cuando Vladimir Putin se anexó Crimea, al sur de Ucrania. Desde
            entonces fue infiltrada gente afín en una región fronteriza conocida
            como Donbás e incentivando movimientos separatistas entre la
            población rusohablante de esos territorios.
        </p>
        <p>
            En febrero de 2022 inició la guerra en curso, después que el
            presidente ruso ordenó la invasión completa del país vecino.
        </p>

        <p>Él estaba seguro que sería cuestión de meses.</p>

        <p>
            No hay cifras fiables sobre cuántos muertos rusos ha costado la
            aventura de Putin.
        </p>

        <div class="inline-stats inline-stats--2col inline-stats--count">
            <div class="inline-stat">
                <div class="inline-stat__num" data-target="147">147</div>
                <div class="inline-stat__unit">millones</div>
                <div class="inline-stat__label">
                    Población de Rusia antes de la guerra
                </div>
            </div>
            <div class="inline-stat">
                <div class="inline-stat__num" data-target="44">44</div>
                <div class="inline-stat__unit">millones</div>
                <div class="inline-stat__label">
                    Población de Ucrania antes de la guerra
                </div>
            </div>
        </div>
        <p>
            Investigaciones independientes publicadas por la BBC indican que las
            bajas de los militares que se han podido identificar por nombre
            suman unos 200,000. Se estima que la cifra, incluyendo a los
            militares caídos que aún no han sido identificados, o cuyos
            familiares creen que siguen en combate, podría alcanzar los 500,000.
        </p>
        <p>
            Del lado ucraniano, se cuentan entre 100,000 y 120,000 militares
            muertos, más unos 15,000 civiles.
        </p>
        <p>
            En otras palabras, por cada ucraniano muerto, han caído cuatro
            rusos.
        </p>

        <!-- SUBTÍTULO -->
        <div class="s-break">
            <div class="s-break__line"></div>
            <span class="s-break__tag">V</span>
            <div class="s-break__line"></div>
        </div>
        <h2>Mercenarios</h2>

        <p>
            No es secreto que Rusia lleva años reclutando extranjeros alrededor
            del mundo.
        </p>
        <p>
            ¿Por qué recurre a ellos? Para compensar las enormes bajas en el
            frente y disminuir reclutamientos adicionales de jóvenes rusos.
        </p>
        <p>
            Hay una razón más diabólica: los reclutados, que normalmente vienen
            de poblaciones pobres de las ex repúblicas soviéticas y del Asia
            Menor, de Medio Oriente, de África y hasta de países
            latinoamericanos, son utilizados durante las operaciones de asalto,
            las más riesgosas, porque los consideran desechables.
        </p>

        <p>
            Según el medio ucraniano <b>liga.net</b>, se estima que Rusia ha
            logrado reclutar durante los últimos años unos 28,000 mercenarios.
        </p>
        <figure id="fig-3" class="zoomable">
            <a href="#fig-3" class="fig-zoom" aria-label="Ver imagen ampliada">
                <img
                    src="https://sandbox.prensa.com/resizer/v2/ERODUJR73FFUDKSKDVZGTMCY6I.jpg?auth=b0b4e64dab4997977ca6e54330e8f9b2b969ab2f04a0098ddc107b974e7cc68e"
                    alt="Soldados norcoreanos en entrenamiento militar con fusiles AK"
                />
            </a>
            <figcaption>
                <em
                    >Soldados norcoreanos durante un ejercicio de tiro. Rusia
                    reclutó miles de efectivos de Corea del Norte para combatir
                    en Ucrania.</em
                >
                <small>EFE</small>
            </figcaption>
            <a href="#fig-close" class="fig-close" aria-label="Cerrar">✕</a>
        </figure>
        <p>
            Este número no incluye las más de 12,000 unidades enviadas por Corea
            del Norte a combatir del lado de su aliado Putin, ni los miles que
            integran la fuerza paramilitar rusa conocida como Grupo Wagner.
        </p>

        <p>
            La cifra que Viktor colocó en el papel que le dio a Dante era
            2,000,000 de rublos. Eso equivale a unos $25,000 dólares.
        </p>
        <p>Le contó que primero los iban a transportar a una base en Rusia.</p>

        <p>
            "Se supone que allá íbamos a hacer todo el proceso, firmar un
            contrato, nos iban a dar ropa, los uniformes, nos iban a entrenar,
            un entrenamiento que me dijo era de dos semanas, y nos darían las
            armas luego de enseñarnos a usarlas. Sobre la paga, supuestamente la
            iban a dividir. En la base nos iban a preguntar si teníamos
            familiares, porque 'en caso de que te mueras deben saber dónde
            mandar los pagos', me aseguró Viktor."
        </p>

        <p>
            El ruso sacó 150 euros y se los entregó a Dante. "Es un adelanto —le
            dijo—. Nos vemos el jueves."
        </p>
    </article>

    <aside class="share-sidebar" aria-label="Compartir artículo">
        <div class="share-bar">
            <span class="share-bar__label">Compartir</span>
            <!-- X / Twitter -->
            <a
                class="share-btn share-btn--x"
                href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra"
                target="_blank"
                rel="noopener"
                title="Compartir en X"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.845L1.254 2.25H8.08l4.259 5.623zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                    />
                </svg>
            </a>
            <!-- Facebook -->
            <a
                class="share-btn share-btn--fb"
                href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en Facebook"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073c0 6.026 4.388 11.02 10.125 11.927v-8.434H7.078v-3.493h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953h-1.514c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.493h-2.796v8.434C19.612 23.093 24 18.099 24 12.073z"
                    />
                </svg>
            </a>
            <!-- WhatsApp -->
            <a
                class="share-btn share-btn--wa"
                href="https://api.whatsapp.com/send?text=Dante%20en%20Ucrania%3A%20la%20historia%20de%20un%20paname%C3%B1o%20reclutado%20para%20la%20guerra%20%E2%80%94%20https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F"
                target="_blank"
                rel="noopener"
                title="Compartir en WhatsApp"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"
                    />
                </svg>
            </a>
            <!-- LinkedIn -->
            <a
                class="share-btn share-btn--li"
                href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.prensa.com%2Fespecial%2Fdante-en-ucrania%2F&title=Dante%20en%20Ucrania"
                target="_blank"
                rel="noopener"
                title="Compartir en LinkedIn"
            >
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
                    />
                </svg>
            </a>
        </div>
    </aside>
</div>
<!-- /article-wrap -->

<!-- CTA PRÓXIMA ENTREGA -->
<div class="next-cta">
    <div class="next-cta__left">
        <span class="next-cta__tag">Continúa leyendo · Segunda entrega</span>
        <p class="next-cta__title">
            ¿Llegó a Rusia? ¿Cómo fue transportado? ¿Dónde fue el entrenamiento?
        </p>
    </div>
    <!--a
        class="next-cta__btn"
        href="#"
    >
        Próxima entrega
        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z" />
        </svg>
    </a-->
</div>

<!-- CRÉDITOS -->
<footer class="credits">
    <div class="credits__inner">
        <div>
            <p class="credits__title">Equipo periodístico</p>
            <ul>
                <li><strong>Fernando Berguido</strong> — Texto y reportería</li>
                <li>
                    <strong>Yolanda Sandoval</strong> — Coordinación editorial
                </li>
                <li><strong>La Prensa Panamá</strong> — Edición</li>
                <li>
                    <strong>Víctor Tisnado</strong> — Maquetación y desarrollo
                    web
                </li>
            </ul>
        </div>
        <div>
            <p class="credits__title">Créditos fotográficos</p>
            <ul>
                <li>
                    <strong>Portada</strong> — Imagen generada con inteligencia
                    artificial
                </li>
                <li>
                    <strong>Bata Bar &amp; Billiards</strong> — batabar.com /
                    Instagram
                </li>
                <li>
                    <strong>Tiergarten nevado</strong> — Unsplash, uso editorial
                </li>
                <li><strong>Soldados norcoreanos</strong> — EFE</li>
            </ul>
        </div>
        <p
            class="credits__copy"
            style="margin-bottom: 12px; font-style: italic; opacity: 1"
        >
            Las imágenes utilizadas en este reportaje tienen fines
            exclusivamente editoriales e ilustrativos. Algunas corresponden a
            fotografías de archivo o de bancos de imágenes. Otras son
            ilustraciones elaboradas a partir de testimonios, documentos y
            relatos recopilados durante la investigación, con el propósito de
            representar visualmente escenas para las que no existen registros
            fotográficos.
        </p>
        <p class="credits__copy">
            © 2026 La Prensa Panamá. Todos los derechos reservados. Prohibida su
            reproducción total o parcial sin autorización expresa.
        </p>
    </div>
</footer>

<script>
    document.querySelectorAll(".fig-zoom").forEach((link) => {
        link.addEventListener("click", (e) => {
            e.preventDefault();
            link.closest(".zoomable").classList.add("is-open");
        });
    });
    document.querySelectorAll("a.polaroid").forEach((link) => {
        link.addEventListener("click", (e) => {
            e.preventDefault();
            document
                .getElementById(link.getAttribute("href").slice(1))
                .classList.add("is-open");
        });
    });
    document.querySelectorAll(".fig-close").forEach((btn) => {
        btn.addEventListener("click", (e) => {
            e.preventDefault();
            btn.closest(".zoomable").classList.remove("is-open");
        });
    });
</script>
</p>]]></content:encoded></item></channel></rss>