{"id":22,"date":"2026-06-29T04:04:26","date_gmt":"2026-06-29T04:04:26","guid":{"rendered":"https:\/\/programatrinacional.com\/wp\/?page_id=22"},"modified":"2026-09-07T03:34:41","modified_gmt":"2026-09-07T03:34:41","slug":"multimedia","status":"publish","type":"page","link":"https:\/\/programatrinacional.com\/en\/multimedia\/","title":{"rendered":"MULTIMEDIA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22\" class=\"elementor elementor-22\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9b228a e-grid e-con-boxed e-con e-parent\" data-id=\"d9b228a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b8e00f elementor-widget elementor-widget-heading\" data-id=\"8b8e00f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">multimedia<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f150281 e-con e-atomic-element e-flexbox-base e-default-div e-f150281-eba72af \" data-id=\"f150281\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f150281\">\n    \t\t<div class=\"elementor-element elementor-element-5d7ccb0 elementor-widget elementor-widget-spacer\" data-id=\"5d7ccb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b2a539 elementor-widget elementor-widget-html\" data-id=\"2b2a539\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<!-- Poppins -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   CONFIGURACI\u00d3N GENERAL\r\n===================================================== *\/\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENEDOR\r\n===================================================== *\/\r\n\r\n.galeria-container {\r\n\r\n    width: 100%;\r\n    max-width: 1100px;\r\n\r\n    margin: 40px auto;\r\n\r\n    padding: 0 15px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TARJETA PRINCIPAL\r\n===================================================== *\/\r\n\r\n.galeria-card {\r\n\r\n    width: 100%;\r\n\r\n    background: #F5F2EA;\r\n\r\n    border-radius: 14px;\r\n\r\n    padding: 30px 35px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 30px;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-card:hover {\r\n\r\n    transform: translateY(-2px);\r\n\r\n    box-shadow: 0 8px 25px rgba(0,0,0,0.08);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   INFORMACI\u00d3N\r\n===================================================== *\/\r\n\r\n.galeria-info {\r\n\r\n    flex: 1;\r\n\r\n}\r\n\r\n\r\n.galeria-info h2 {\r\n\r\n    margin: 0 0 8px 0;\r\n\r\n    color: #C47724;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 26px;\r\n\r\n    line-height: 1.25;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.galeria-info p {\r\n\r\n    margin: 0;\r\n\r\n    color: #555555;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 16px;\r\n\r\n    line-height: 1.5;\r\n\r\n    font-weight: 400;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOT\u00d3N\r\n===================================================== *\/\r\n\r\n.galeria-btn {\r\n\r\n    background: #C47724;\r\n\r\n    color: #FFFFFF;\r\n\r\n    border: none;\r\n\r\n    padding: 13px 25px;\r\n\r\n    border-radius: 30px;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 600;\r\n\r\n    cursor: pointer;\r\n\r\n    white-space: nowrap;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-btn:hover {\r\n\r\n    background: #A9601B;\r\n\r\n    transform: translateY(-2px);\r\n\r\n}\r\n\r\n\r\n.galeria-btn:active {\r\n\r\n    transform: translateY(0);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MODAL\r\n===================================================== *\/\r\n\r\n.galeria-modal {\r\n\r\n    display: none;\r\n\r\n    position: fixed;\r\n\r\n    z-index: 99999;\r\n\r\n    left: 0;\r\n\r\n    top: 0;\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    background: rgba(0,0,0,0.90);\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    padding: 30px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENIDO DEL MODAL\r\n===================================================== *\/\r\n\r\n.galeria-modal-content {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    max-width: 1100px;\r\n\r\n    height: 90vh;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   IMAGEN\r\n===================================================== *\/\r\n\r\n.galeria-modal img {\r\n\r\n    display: block;\r\n\r\n    max-width: 82%;\r\n\r\n    max-height: 78vh;\r\n\r\n    width: auto;\r\n\r\n    height: auto;\r\n\r\n    object-fit: contain;\r\n\r\n    border-radius: 8px;\r\n\r\n    box-shadow: 0 5px 30px rgba(0,0,0,0.30);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOT\u00d3N CERRAR\r\n===================================================== *\/\r\n\r\n.galeria-close {\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n\r\n    right: 0;\r\n\r\n    width: 45px;\r\n\r\n    height: 45px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    color: #FFFFFF;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 32px;\r\n\r\n    font-weight: 400;\r\n\r\n    cursor: pointer;\r\n\r\n    border-radius: 50%;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-close:hover {\r\n\r\n    background: rgba(255,255,255,0.15);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FLECHAS\r\n===================================================== *\/\r\n\r\n.galeria-prev,\r\n.galeria-next {\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n\r\n    transform: translateY(-50%);\r\n\r\n    width: 55px;\r\n\r\n    height: 55px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    color: #FFFFFF;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    font-size: 45px;\r\n\r\n    font-weight: 300;\r\n\r\n    cursor: pointer;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: rgba(0,0,0,0.25);\r\n\r\n    user-select: none;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-prev:hover,\r\n.galeria-next:hover {\r\n\r\n    background: rgba(0,0,0,0.55);\r\n\r\n}\r\n\r\n\r\n.galeria-prev {\r\n\r\n    left: 10px;\r\n\r\n}\r\n\r\n\r\n.galeria-next {\r\n\r\n    right: 10px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTADOR\r\n===================================================== *\/\r\n\r\n.galeria-counter {\r\n\r\n    position: absolute;\r\n\r\n    bottom: 0;\r\n\r\n    left: 50%;\r\n\r\n    transform: translateX(-50%);\r\n\r\n    color: #FFFFFF;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 500;\r\n\r\n    background: rgba(0,0,0,0.45);\r\n\r\n    padding: 6px 14px;\r\n\r\n    border-radius: 20px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MENSAJE DE CARGA\r\n===================================================== *\/\r\n\r\n.galeria-loading {\r\n\r\n    position: absolute;\r\n\r\n    color: white;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    display: none;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 800px) {\r\n\r\n    .galeria-card {\r\n\r\n        padding: 25px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info h2 {\r\n\r\n        font-size: 22px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info p {\r\n\r\n        font-size: 14px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal img {\r\n\r\n        max-width: 80%;\r\n\r\n        max-height: 75vh;\r\n\r\n    }\r\n\r\n\r\n    .galeria-prev,\r\n    .galeria-next {\r\n\r\n        width: 45px;\r\n\r\n        height: 45px;\r\n\r\n        font-size: 35px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CELULAR\r\n===================================================== *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .galeria-container {\r\n\r\n        margin: 25px auto;\r\n\r\n        padding: 0 10px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-card {\r\n\r\n        flex-direction: column;\r\n\r\n        align-items: flex-start;\r\n\r\n        padding: 25px;\r\n\r\n        gap: 20px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info {\r\n\r\n        width: 100%;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info h2 {\r\n\r\n        font-size: 20px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info p {\r\n\r\n        font-size: 14px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-btn {\r\n\r\n        width: 100%;\r\n\r\n        text-align: center;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal {\r\n\r\n        padding: 15px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal-content {\r\n\r\n        height: 85vh;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal img {\r\n\r\n        max-width: 90%;\r\n\r\n        max-height: 70vh;\r\n\r\n    }\r\n\r\n\r\n    .galeria-close {\r\n\r\n        top: -5px;\r\n\r\n        right: -5px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-prev {\r\n\r\n        left: -5px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-next {\r\n\r\n        right: -5px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<!-- =====================================================\r\n     TARJETA\r\n===================================================== -->\r\n\r\n<div class=\"galeria-container\">\r\n\r\n    <div class=\"galeria-card\">\r\n\r\n\r\n        <div class=\"galeria-info\">\r\n\r\n            <h2>\r\n                Encuentro con actores del programa\r\n            <\/h2>\r\n\r\n            <p>\r\n                Marzo 2026 \u00b7 Puerto Legu\u00edzamo\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n            class=\"galeria-btn\"\r\n            onclick=\"abrirGaleria()\">\r\n\r\n            Ver galer\u00eda \u2192\r\n\r\n        <\/button>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     MODAL\r\n===================================================== -->\r\n\r\n<div\r\n    id=\"galeriaModal\"\r\n    class=\"galeria-modal\">\r\n\r\n\r\n    <div class=\"galeria-modal-content\">\r\n\r\n\r\n        <!-- CERRAR -->\r\n\r\n        <span\r\n            class=\"galeria-close\"\r\n            onclick=\"cerrarGaleria()\">\r\n\r\n            \u00d7\r\n\r\n        <\/span>\r\n\r\n\r\n        <!-- ANTERIOR -->\r\n\r\n        <span\r\n            class=\"galeria-prev\"\r\n            onclick=\"cambiarFoto(-1)\">\r\n\r\n            \u2039\r\n\r\n        <\/span>\r\n\r\n\r\n        <!-- MENSAJE DE CARGA -->\r\n\r\n        <div\r\n            id=\"galeriaLoading\"\r\n            class=\"galeria-loading\">\r\n\r\n            Cargando...\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- IMAGEN -->\r\n\r\n        <img decoding=\"async\"\r\n            id=\"galeriaImagen\"\r\n            src=\"\"\r\n            alt=\"Encuentro con actores del programa\">\r\n\r\n\r\n        <!-- SIGUIENTE -->\r\n\r\n        <span\r\n            class=\"galeria-next\"\r\n            onclick=\"cambiarFoto(1)\">\r\n\r\n            \u203a\r\n\r\n        <\/span>\r\n\r\n\r\n        <!-- CONTADOR -->\r\n\r\n        <div\r\n            id=\"galeriaCounter\"\r\n            class=\"galeria-counter\">\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =====================================================\r\n   FOTOS\r\n===================================================== *\/\r\n\r\nconst fotos = [\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/06\/9ddf6a30-f3ce-42f2-b45d-0e286320d080.jpg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/06\/9ddf6a30-f3ce-42f2-b45d-0e286320d080.jpg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/06\/9ddf6a30-f3ce-42f2-b45d-0e286320d080.jpg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/06\/9ddf6a30-f3ce-42f2-b45d-0e286320d080.jpg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/06\/9ddf6a30-f3ce-42f2-b45d-0e286320d080.jpg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/06\/9ddf6a30-f3ce-42f2-b45d-0e286320d080.jpg\"\r\n\r\n];\r\n\r\n\r\n\/* =====================================================\r\n   VARIABLE DE FOTO ACTUAL\r\n===================================================== *\/\r\n\r\nlet fotoActual = 0;\r\n\r\n\r\n\/* =====================================================\r\n   ABRIR GALER\u00cdA\r\n===================================================== *\/\r\n\r\nfunction abrirGaleria() {\r\n\r\n    fotoActual = 0;\r\n\r\n    const modal =\r\n        document.getElementById(\"galeriaModal\");\r\n\r\n    modal.style.display = \"flex\";\r\n\r\n    document.body.style.overflow = \"hidden\";\r\n\r\n    mostrarFoto();\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CERRAR GALER\u00cdA\r\n===================================================== *\/\r\n\r\nfunction cerrarGaleria() {\r\n\r\n    const modal =\r\n        document.getElementById(\"galeriaModal\");\r\n\r\n    modal.style.display = \"none\";\r\n\r\n    document.body.style.overflow = \"\";\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CAMBIAR FOTO\r\n===================================================== *\/\r\n\r\nfunction cambiarFoto(direccion) {\r\n\r\n    fotoActual += direccion;\r\n\r\n\r\n    \/* VOLVER AL PRINCIPIO *\/\r\n\r\n    if (fotoActual >= fotos.length) {\r\n\r\n        fotoActual = 0;\r\n\r\n    }\r\n\r\n\r\n    \/* IR A LA \u00daLTIMA *\/\r\n\r\n    if (fotoActual < 0) {\r\n\r\n        fotoActual = fotos.length - 1;\r\n\r\n    }\r\n\r\n\r\n    mostrarFoto();\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOSTRAR FOTO\r\n===================================================== *\/\r\n\r\nfunction mostrarFoto() {\r\n\r\n    const imagen =\r\n        document.getElementById(\"galeriaImagen\");\r\n\r\n    const contador =\r\n        document.getElementById(\"galeriaCounter\");\r\n\r\n    const loading =\r\n        document.getElementById(\"galeriaLoading\");\r\n\r\n\r\n    \/* Mostrar loading *\/\r\n\r\n    loading.style.display = \"block\";\r\n\r\n    imagen.style.opacity = \"0\";\r\n\r\n\r\n    \/* Crear nueva imagen *\/\r\n\r\n    const nuevaImagen = new Image();\r\n\r\n\r\n    nuevaImagen.onload = function() {\r\n\r\n        imagen.src = fotos[fotoActual];\r\n\r\n        imagen.style.opacity = \"1\";\r\n\r\n        loading.style.display = \"none\";\r\n\r\n    };\r\n\r\n\r\n    nuevaImagen.onerror = function() {\r\n\r\n        loading.innerHTML = \"No se pudo cargar la imagen\";\r\n\r\n    };\r\n\r\n\r\n    \/*\r\n       Carga la imagen con un par\u00e1metro\r\n       para evitar cach\u00e9\r\n    *\/\r\n\r\n    nuevaImagen.src =\r\n        fotos[fotoActual] +\r\n        (fotos[fotoActual].includes(\"?\") ? \"&\" : \"?\") +\r\n        \"v=\" +\r\n        Date.now();\r\n\r\n\r\n    \/* Contador *\/\r\n\r\n    contador.innerHTML =\r\n        (fotoActual + 1) +\r\n        \" \/ \" +\r\n        fotos.length;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CERRAR AL HACER CLIC FUERA\r\n===================================================== *\/\r\n\r\ndocument\r\n    .getElementById(\"galeriaModal\")\r\n    .addEventListener(\r\n        \"click\",\r\n        function(event) {\r\n\r\n            if (event.target === this) {\r\n\r\n                cerrarGaleria();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n\/* =====================================================\r\n   TECLADO\r\n===================================================== *\/\r\n\r\ndocument.addEventListener(\r\n    \"keydown\",\r\n    function(event) {\r\n\r\n        const modal =\r\n            document.getElementById(\"galeriaModal\");\r\n\r\n\r\n        if (modal.style.display === \"flex\") {\r\n\r\n\r\n            \/* DERECHA *\/\r\n\r\n            if (event.key === \"ArrowRight\") {\r\n\r\n                cambiarFoto(1);\r\n\r\n            }\r\n\r\n\r\n            \/* IZQUIERDA *\/\r\n\r\n            if (event.key === \"ArrowLeft\") {\r\n\r\n                cambiarFoto(-1);\r\n\r\n            }\r\n\r\n\r\n            \/* ESC *\/\r\n\r\n            if (event.key === \"Escape\") {\r\n\r\n                cerrarGaleria();\r\n\r\n            }\r\n\r\n        }\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* =====================================================\r\n   PRECARGAR FOTOS\r\n===================================================== *\/\r\n\r\nfunction precargarFotos() {\r\n\r\n    fotos.forEach(function(url) {\r\n\r\n        const img = new Image();\r\n\r\n        img.src = url;\r\n\r\n    });\r\n\r\n}\r\n\r\n\r\n\/* Ejecutar precarga *\/\r\n\r\nprecargarFotos();\r\n\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3116bf9 elementor-widget elementor-widget-html\" data-id=\"3116bf9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<!-- Poppins -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   CONFIGURACI\u00d3N GENERAL\r\n===================================================== *\/\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENEDOR\r\n===================================================== *\/\r\n\r\n.galeria-container {\r\n\r\n    width: 100%;\r\n    max-width: 1100px;\r\n\r\n    margin: 40px auto;\r\n\r\n    padding: 0 15px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TARJETA PRINCIPAL\r\n===================================================== *\/\r\n\r\n.galeria-card {\r\n\r\n    width: 100%;\r\n\r\n    background: #F5F2EA;\r\n\r\n    border-radius: 14px;\r\n\r\n    padding: 30px 35px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 30px;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-card:hover {\r\n\r\n    transform: translateY(-2px);\r\n\r\n    box-shadow: 0 8px 25px rgba(0,0,0,0.08);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   INFORMACI\u00d3N\r\n===================================================== *\/\r\n\r\n.galeria-info {\r\n\r\n    flex: 1;\r\n\r\n}\r\n\r\n\r\n.galeria-info h2 {\r\n\r\n    margin: 0 0 8px 0;\r\n\r\n    color: #C47724;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 26px;\r\n\r\n    line-height: 1.25;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.galeria-info p {\r\n\r\n    margin: 0;\r\n\r\n    color: #555555;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 16px;\r\n\r\n    line-height: 1.5;\r\n\r\n    font-weight: 400;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOT\u00d3N\r\n===================================================== *\/\r\n\r\n.galeria-btn {\r\n\r\n    background: #C47724;\r\n\r\n    color: #FFFFFF;\r\n\r\n    border: none;\r\n\r\n    padding: 13px 25px;\r\n\r\n    border-radius: 30px;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 600;\r\n\r\n    cursor: pointer;\r\n\r\n    white-space: nowrap;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-btn:hover {\r\n\r\n    background: #A9601B;\r\n\r\n    transform: translateY(-2px);\r\n\r\n}\r\n\r\n\r\n.galeria-btn:active {\r\n\r\n    transform: translateY(0);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MODAL\r\n===================================================== *\/\r\n\r\n.galeria-modal {\r\n\r\n    display: none;\r\n\r\n    position: fixed;\r\n\r\n    z-index: 99999;\r\n\r\n    left: 0;\r\n\r\n    top: 0;\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    background: rgba(0,0,0,0.90);\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    padding: 30px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENIDO DEL MODAL\r\n===================================================== *\/\r\n\r\n.galeria-modal-content {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    max-width: 1100px;\r\n\r\n    height: 90vh;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   IMAGEN\r\n===================================================== *\/\r\n\r\n.galeria-modal img {\r\n\r\n    display: block;\r\n\r\n    max-width: 82%;\r\n\r\n    max-height: 78vh;\r\n\r\n    width: auto;\r\n\r\n    height: auto;\r\n\r\n    object-fit: contain;\r\n\r\n    border-radius: 8px;\r\n\r\n    box-shadow: 0 5px 30px rgba(0,0,0,0.30);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOT\u00d3N CERRAR\r\n===================================================== *\/\r\n\r\n.galeria-close {\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n\r\n    right: 0;\r\n\r\n    width: 45px;\r\n\r\n    height: 45px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    color: #FFFFFF;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 32px;\r\n\r\n    font-weight: 400;\r\n\r\n    cursor: pointer;\r\n\r\n    border-radius: 50%;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-close:hover {\r\n\r\n    background: rgba(255,255,255,0.15);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FLECHAS\r\n===================================================== *\/\r\n\r\n.galeria-prev,\r\n.galeria-next {\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n\r\n    transform: translateY(-50%);\r\n\r\n    width: 55px;\r\n\r\n    height: 55px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    color: #FFFFFF;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    font-size: 45px;\r\n\r\n    font-weight: 300;\r\n\r\n    cursor: pointer;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: rgba(0,0,0,0.25);\r\n\r\n    user-select: none;\r\n\r\n    transition: all 0.3s ease;\r\n\r\n}\r\n\r\n\r\n.galeria-prev:hover,\r\n.galeria-next:hover {\r\n\r\n    background: rgba(0,0,0,0.55);\r\n\r\n}\r\n\r\n\r\n.galeria-prev {\r\n\r\n    left: 10px;\r\n\r\n}\r\n\r\n\r\n.galeria-next {\r\n\r\n    right: 10px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTADOR\r\n===================================================== *\/\r\n\r\n.galeria-counter {\r\n\r\n    position: absolute;\r\n\r\n    bottom: 0;\r\n\r\n    left: 50%;\r\n\r\n    transform: translateX(-50%);\r\n\r\n    color: #FFFFFF;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 500;\r\n\r\n    background: rgba(0,0,0,0.45);\r\n\r\n    padding: 6px 14px;\r\n\r\n    border-radius: 20px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MENSAJE DE CARGA\r\n===================================================== *\/\r\n\r\n.galeria-loading {\r\n\r\n    position: absolute;\r\n\r\n    color: white;\r\n\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    display: none;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 800px) {\r\n\r\n    .galeria-card {\r\n\r\n        padding: 25px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info h2 {\r\n\r\n        font-size: 22px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info p {\r\n\r\n        font-size: 14px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal img {\r\n\r\n        max-width: 80%;\r\n\r\n        max-height: 75vh;\r\n\r\n    }\r\n\r\n\r\n    .galeria-prev,\r\n    .galeria-next {\r\n\r\n        width: 45px;\r\n\r\n        height: 45px;\r\n\r\n        font-size: 35px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CELULAR\r\n===================================================== *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .galeria-container {\r\n\r\n        margin: 25px auto;\r\n\r\n        padding: 0 10px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-card {\r\n\r\n        flex-direction: column;\r\n\r\n        align-items: flex-start;\r\n\r\n        padding: 25px;\r\n\r\n        gap: 20px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info {\r\n\r\n        width: 100%;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info h2 {\r\n\r\n        font-size: 20px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-info p {\r\n\r\n        font-size: 14px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-btn {\r\n\r\n        width: 100%;\r\n\r\n        text-align: center;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal {\r\n\r\n        padding: 15px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal-content {\r\n\r\n        height: 85vh;\r\n\r\n    }\r\n\r\n\r\n    .galeria-modal img {\r\n\r\n        max-width: 90%;\r\n\r\n        max-height: 70vh;\r\n\r\n    }\r\n\r\n\r\n    .galeria-close {\r\n\r\n        top: -5px;\r\n\r\n        right: -5px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-prev {\r\n\r\n        left: -5px;\r\n\r\n    }\r\n\r\n\r\n    .galeria-next {\r\n\r\n        right: -5px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<!-- =====================================================\r\n     TARJETA\r\n===================================================== -->\r\n\r\n<div class=\"galeria-container\">\r\n\r\n    <div class=\"galeria-card\">\r\n\r\n\r\n        <div class=\"galeria-info\">\r\n\r\n            <h2>\r\n                Encuentro con actores del programa\r\n            <\/h2>\r\n\r\n            <p>\r\n                Marzo 2026 \u00b7 Puerto Legu\u00edzamo\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n            class=\"galeria-btn\"\r\n            onclick=\"abrirGaleria()\">\r\n\r\n            Ver galer\u00eda \u2192\r\n\r\n        <\/button>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     MODAL\r\n===================================================== -->\r\n\r\n<div\r\n    id=\"galeriaModal\"\r\n    class=\"galeria-modal\">\r\n\r\n\r\n    <div class=\"galeria-modal-content\">\r\n\r\n\r\n        <!-- CERRAR -->\r\n\r\n        <span\r\n            class=\"galeria-close\"\r\n            onclick=\"cerrarGaleria()\">\r\n\r\n            \u00d7\r\n\r\n        <\/span>\r\n\r\n\r\n        <!-- ANTERIOR -->\r\n\r\n        <span\r\n            class=\"galeria-prev\"\r\n            onclick=\"cambiarFoto(-1)\">\r\n\r\n            \u2039\r\n\r\n        <\/span>\r\n\r\n\r\n        <!-- MENSAJE DE CARGA -->\r\n\r\n        <div\r\n            id=\"galeriaLoading\"\r\n            class=\"galeria-loading\">\r\n\r\n            Cargando...\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- IMAGEN -->\r\n\r\n        <img decoding=\"async\"\r\n            id=\"galeriaImagen\"\r\n            src=\"\"\r\n            alt=\"Encuentro con actores del programa\">\r\n\r\n\r\n        <!-- SIGUIENTE -->\r\n\r\n        <span\r\n            class=\"galeria-next\"\r\n            onclick=\"cambiarFoto(1)\">\r\n\r\n            \u203a\r\n\r\n        <\/span>\r\n\r\n\r\n        <!-- CONTADOR -->\r\n\r\n        <div\r\n            id=\"galeriaCounter\"\r\n            class=\"galeria-counter\">\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =====================================================\r\n   FOTOS\r\n===================================================== *\/\r\n\r\nconst fotos = [\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-07-at-12.55.12-AM.jpeg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-07-at-12.55.11-AM-2.jpeg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-07-at-12.55.10-AM-1.jpeg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-07-at-12.55.09-AM-1.jpeg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-07-at-12.55.08-AM-1.jpeg\",\r\n\r\n    \"https:\/\/programatrinacional.com\/wp\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-06-at-11.48.10-PM-1.jpeg\r\n\r\n];\r\n\r\n\r\n\/* =====================================================\r\n   VARIABLE DE FOTO ACTUAL\r\n===================================================== *\/\r\n\r\nlet fotoActual = 0;\r\n\r\n\r\n\/* =====================================================\r\n   ABRIR GALER\u00cdA\r\n===================================================== *\/\r\n\r\nfunction abrirGaleria() {\r\n\r\n    fotoActual = 0;\r\n\r\n    const modal =\r\n        document.getElementById(\"galeriaModal\");\r\n\r\n    modal.style.display = \"flex\";\r\n\r\n    document.body.style.overflow = \"hidden\";\r\n\r\n    mostrarFoto();\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CERRAR GALER\u00cdA\r\n===================================================== *\/\r\n\r\nfunction cerrarGaleria() {\r\n\r\n    const modal =\r\n        document.getElementById(\"galeriaModal\");\r\n\r\n    modal.style.display = \"none\";\r\n\r\n    document.body.style.overflow = \"\";\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CAMBIAR FOTO\r\n===================================================== *\/\r\n\r\nfunction cambiarFoto(direccion) {\r\n\r\n    fotoActual += direccion;\r\n\r\n\r\n    \/* VOLVER AL PRINCIPIO *\/\r\n\r\n    if (fotoActual >= fotos.length) {\r\n\r\n        fotoActual = 0;\r\n\r\n    }\r\n\r\n\r\n    \/* IR A LA \u00daLTIMA *\/\r\n\r\n    if (fotoActual < 0) {\r\n\r\n        fotoActual = fotos.length - 1;\r\n\r\n    }\r\n\r\n\r\n    mostrarFoto();\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOSTRAR FOTO\r\n===================================================== *\/\r\n\r\nfunction mostrarFoto() {\r\n\r\n    const imagen =\r\n        document.getElementById(\"galeriaImagen\");\r\n\r\n    const contador =\r\n        document.getElementById(\"galeriaCounter\");\r\n\r\n    const loading =\r\n        document.getElementById(\"galeriaLoading\");\r\n\r\n\r\n    \/* Mostrar loading *\/\r\n\r\n    loading.style.display = \"block\";\r\n\r\n    imagen.style.opacity = \"0\";\r\n\r\n\r\n    \/* Crear nueva imagen *\/\r\n\r\n    const nuevaImagen = new Image();\r\n\r\n\r\n    nuevaImagen.onload = function() {\r\n\r\n        imagen.src = fotos[fotoActual];\r\n\r\n        imagen.style.opacity = \"1\";\r\n\r\n        loading.style.display = \"none\";\r\n\r\n    };\r\n\r\n\r\n    nuevaImagen.onerror = function() {\r\n\r\n        loading.innerHTML = \"No se pudo cargar la imagen\";\r\n\r\n    };\r\n\r\n\r\n    \/*\r\n       Carga la imagen con un par\u00e1metro\r\n       para evitar cach\u00e9\r\n    *\/\r\n\r\n    nuevaImagen.src =\r\n        fotos[fotoActual] +\r\n        (fotos[fotoActual].includes(\"?\") ? \"&\" : \"?\") +\r\n        \"v=\" +\r\n        Date.now();\r\n\r\n\r\n    \/* Contador *\/\r\n\r\n    contador.innerHTML =\r\n        (fotoActual + 1) +\r\n        \" \/ \" +\r\n        fotos.length;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CERRAR AL HACER CLIC FUERA\r\n===================================================== *\/\r\n\r\ndocument\r\n    .getElementById(\"galeriaModal\")\r\n    .addEventListener(\r\n        \"click\",\r\n        function(event) {\r\n\r\n            if (event.target === this) {\r\n\r\n                cerrarGaleria();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n\/* =====================================================\r\n   TECLADO\r\n===================================================== *\/\r\n\r\ndocument.addEventListener(\r\n    \"keydown\",\r\n    function(event) {\r\n\r\n        const modal =\r\n            document.getElementById(\"galeriaModal\");\r\n\r\n\r\n        if (modal.style.display === \"flex\") {\r\n\r\n\r\n            \/* DERECHA *\/\r\n\r\n            if (event.key === \"ArrowRight\") {\r\n\r\n                cambiarFoto(1);\r\n\r\n            }\r\n\r\n\r\n            \/* IZQUIERDA *\/\r\n\r\n            if (event.key === \"ArrowLeft\") {\r\n\r\n                cambiarFoto(-1);\r\n\r\n            }\r\n\r\n\r\n            \/* ESC *\/\r\n\r\n            if (event.key === \"Escape\") {\r\n\r\n                cerrarGaleria();\r\n\r\n            }\r\n\r\n        }\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* =====================================================\r\n   PRECARGAR FOTOS\r\n===================================================== *\/\r\n\r\nfunction precargarFotos() {\r\n\r\n    fotos.forEach(function(url) {\r\n\r\n        const img = new Image();\r\n\r\n        img.src = url;\r\n\r\n    });\r\n\r\n}\r\n\r\n\r\n\/* Ejecutar precarga *\/\r\n\r\nprecargarFotos();\r\n\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-eac0d33 e-con e-atomic-element e-flexbox-base e-default-div e-5740edd \" data-id=\"eac0d33\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"eac0d33\">\n    \t\t<div class=\"elementor-element elementor-element-1ea7ebd elementor-widget elementor-widget-spacer\" data-id=\"1ea7ebd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>multimedia Encuentro con actores del programa Marzo 2026 \u00b7 Puerto Legu\u00edzamo Ver galer\u00eda \u2192 \u00d7 \u2039 Cargando&#8230; \u203a Encuentro con actores del programa Marzo 2026 \u00b7 Puerto Legu\u00edzamo Ver galer\u00eda \u2192 \u00d7 \u2039 Cargando&#8230; \u203a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":73,"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":1796,"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/pages\/22\/revisions\/1796"}],"wp:attachment":[{"href":"https:\/\/programatrinacional.com\/en\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}