{"id":3342,"date":"2025-11-10T19:00:49","date_gmt":"2025-11-10T19:00:49","guid":{"rendered":"http:\/\/72.60.115.237\/?page_id=3342"},"modified":"2026-04-08T13:25:03","modified_gmt":"2026-04-08T13:25:03","slug":"message-from-the-vice-principal-office","status":"publish","type":"page","link":"https:\/\/cbcuscatlan.edu.sv\/index.php\/message-from-the-vice-principal-office\/","title":{"rendered":"Message from the Vice-Principal Office"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3342\" class=\"elementor elementor-3342\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58566b6 e-con-full e-flex e-con e-parent\" data-id=\"58566b6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f44d375 elementor-widget elementor-widget-html\" data-id=\"f44d375\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* --- CONTENEDOR PRINCIPAL --- *\/\r\n  .cbc-vp-container {\r\n    --cbc-vertical-gap: 50px; \r\n    --cbc-blue: #0c306d;\r\n    --cbc-red: #b8141a;\r\n    --cbc-text: #0c306d;\r\n    \r\n    --cbc-title-size: 48px;\r\n    --cbc-body-size: 23px;\r\n    --cbc-img-size: 250px;\r\n    \r\n    font-family: 'Avenir' sans-serif;\r\n    \r\n    \/* CAMBIO AQU\u00cd: Aumentamos el ancho m\u00e1ximo para reducir espacios laterales *\/\r\n    max-width: 1350px; \r\n    \r\n    margin: 0 auto;\r\n    color: var(--cbc-text);\r\n    line-height: 1.6;\r\n    width: 100%;\r\n  }\r\n\r\n  .cbc-header {\r\n    margin-bottom: 40px;\r\n    text-transform: uppercase;\r\n    line-height: 1.2;\r\n  }\r\n  .cbc-header h2 {\r\n    font-size: var(--cbc-title-size);\r\n    margin: 0;\r\n    font-weight: 800;\r\n  }\r\n  .cbc-blue { color: var(--cbc-blue); display: block; }\r\n  .cbc-red { color: var(--cbc-red); display: block; }\r\n\r\n  \/* --- ESTRUCTURA --- *\/\r\n  .cbc-profile-section {\r\n    display: block; \r\n    position: relative; \r\n    width: 100%;\r\n    min-height: var(--cbc-img-size); \r\n    clear: both; \r\n    margin-bottom: var(--cbc-vertical-gap);\r\n  }\r\n\r\n  \/* --- IM\u00c1GENES --- *\/\r\n  .cbc-img {\r\n    width: var(--cbc-img-size);\r\n    height: var(--cbc-img-size);\r\n    object-fit: cover;\r\n    border-radius: 50%;\r\n    shape-outside: circle(50%);\r\n    -webkit-shape-outside: circle(50%);\r\n  }\r\n\r\n  .float-left {\r\n    float: left;\r\n    margin-right: 30px;\r\n    margin-bottom: 10px;\r\n  }\r\n  .float-right {\r\n    float: right;\r\n    margin-left: 30px;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  \/* --- TEXTO --- *\/\r\n  .cbc-text p {\r\n    font-size: var(--cbc-body-size);\r\n    text-align: justify;\r\n    margin: 0;\r\n    padding-bottom: 20px; \r\n  }\r\n\r\n  \/* --- FIRMAS (ALINEACI\u00d3N EXACTA A LA BASE DE LA FOTO) --- *\/\r\n  .cbc-sign-box {\r\n    position: absolute; \r\n    \/* Se posiciona en el pixel 250 (fin de la foto) y sube su propia altura *\/\r\n    top: var(--cbc-img-size); \r\n    transform: translateY(-100%);\r\n    \r\n    z-index: 10;\r\n    max-width: 60%; \r\n    line-height: 1.2;\r\n  }\r\n  \r\n  \/* ROC\u00cdO *\/\r\n  .pos-left {\r\n    left: 280px; \r\n    text-align: left;\r\n  }\r\n  \r\n  \/* MAURICIO *\/\r\n  .pos-right {\r\n    right: 270px; \r\n    text-align: right;\r\n  }\r\n\r\n  .cbc-sign-name {\r\n    color: var(--cbc-blue);\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    display: block;\r\n    font-size: 24px;\r\n    margin-bottom: 5px;\r\n  }\r\n  .cbc-sign-role {\r\n    font-size: 18px;\r\n    display: block;\r\n  }\r\n\r\n  \/* --- M\u00d3VIL --- *\/\r\n  @media (max-width: 768px) {\r\n    .cbc-vp-container { padding: 0 15px; }\r\n    .cbc-profile-section {\r\n        display: flex; \r\n        flex-direction: column; \r\n        align-items: center;\r\n        text-align: center;\r\n        height: auto !important;\r\n        min-height: auto !important;\r\n        margin-bottom: 40px;\r\n    }\r\n    .cbc-img {\r\n      float: none !important;\r\n      display: block;\r\n      margin: 0 auto 20px auto;\r\n      width: 200px; height: 200px;\r\n      shape-outside: none !important;\r\n    }\r\n    .cbc-sign-box {\r\n        position: relative !important;\r\n        top: auto !important;\r\n        transform: none !important;\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        left: auto !important;\r\n        right: auto !important;\r\n        text-align: center !important;\r\n        margin-top: 20px;\r\n    }\r\n    .cbc-text p { padding-bottom: 0; text-align: center; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"cbc-vp-container\">\r\n\r\n  <div class=\"cbc-header\">\r\n    <h2>\r\n      <span class=\"cbc-blue\">MESSAGE FROM THE<\/span>\r\n      <span class=\"cbc-red\">VICE-PRINCIPAL OFFICE<\/span>\r\n    <\/h2>\r\n  <\/div>\r\n\r\n  <div class=\"cbc-profile-section cbc-section-top\">\r\n    <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Rocio-de-Panameno.png\" class=\"cbc-img float-left\">\r\n    \r\n    <div class=\"cbc-text\">\r\n      <p>\r\n        \u00a1Hello We are Colegio Biling\u00fce Cuscatl\u00e1n! We invite you to learn more about our institution, sports, the educational community, our achievements, our programs, our pedagogical approach, healthy coexistence and all the activities we do during the school year.\r\n      <\/p>\r\n    <\/div>\r\n      \r\n    <div class=\"cbc-sign-box pos-left\">\r\n        <span class=\"cbc-sign-name\">ROC\u00cdO DE PANAME\u00d1O<\/span>\r\n        <span class=\"cbc-sign-role\">School Management Vice Principal<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"cbc-profile-section cbc-section-bottom\">\r\n    <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Mauricio-Aragon.png\" class=\"cbc-img float-right\">\r\n    \r\n    <div class=\"cbc-text\">\r\n      <p>\r\n        To our students: \u201cGo forth and set the world on fire\u201d. Strive as if everything depended on you; with responsibility, with commitment, resilience and above all, with love. Let us, the educational community, be the architects and the means by which our students build, achieve excellence and share it. In all things love and serve.\r\n      <\/p>\r\n    <\/div>\r\n      \r\n    <div class=\"cbc-sign-box pos-right\">\r\n        <span class=\"cbc-sign-name\">MAURICIO ARAG\u00d3N<\/span>\r\n        <span class=\"cbc-sign-role\">Academic Innovation Vice Principal<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acf98a2 e-con-full e-flex e-con e-parent\" data-id=\"acf98a2\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b7896e elementor-widget elementor-widget-html\" data-id=\"1b7896e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* =========================================\r\n       CONFIGURACI\u00d3N GENERAL\r\n       ========================================= *\/\r\n    .values-widget-container {\r\n        \/* --- COLORES --- *\/\r\n        --vw-bg-blue: #0c306d;      \/* Fondo Azul Principal *\/\r\n        --vw-bg-red: #b8141a;       \/* Fondo Rojo C\u00e1psula *\/\r\n        --vw-text-white: #ffffff;   \/* Textos *\/\r\n        --vw-tooltip-bg: #ffffff;   \/* Fondo del tooltip (blanco) *\/\r\n        --vw-tooltip-text: #0c306d; \/* Texto del tooltip (azul) *\/\r\n        \r\n        \/* --- TIPOGRAF\u00cdA --- *\/\r\n        --vw-font: 'Avenir', 'Helvetica Neue', Arial, sans-serif\r\n        \r\n        \/* --- TAMA\u00d1OS --- *\/\r\n        --vw-title-size: 42px;      \/* T\u00edtulo OUR VALUES *\/\r\n        --vw-icon-size: 110px;      \/* Tama\u00f1o de Iconos (Grandes) *\/\r\n        --vw-label-size: 20px;      \/* Tama\u00f1o nombres *\/\r\n        \r\n        \/* --- C\u00c1PSULA (T\u00edtulo) --- *\/\r\n        --vw-capsule-width: 50%;    \/* Ancho de la barra roja *\/\r\n    }\r\n\r\n    \/* =========================================\r\n       ESTRUCTURA VISUAL\r\n       ========================================= *\/\r\n    \r\n    .values-widget-container {\r\n        font-family: var(--vw-font);\r\n        width: 100%;\r\n        margin: 0;\r\n        position: relative;\r\n    }\r\n\r\n    \/* --- 1. C\u00c1PSULA ROJA FLOTANTE (T\u00cdTULO) --- *\/\r\n    .vw-title-banner {\r\n        background-color: var(--vw-bg-red);\r\n        width: var(--vw-capsule-width);\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        padding: 15px 20px;\r\n        text-align: center;\r\n        border-radius: 50px;\r\n        position: relative;\r\n        z-index: 10; \r\n        transform: translateY(50%);\r\n        box-shadow: 0 10px 20px rgba(0,0,0,0.2);\r\n    }\r\n\r\n    .vw-title-text {\r\n        color: var(--vw-text-white);\r\n        font-size: 38px;\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        margin: 0;\r\n        line-height: 1;\r\n    }\r\n\r\n    \/* --- 2. FONDO AZUL (CONTENIDO) --- *\/\r\n    .vw-blue-content {\r\n        background-color: var(--vw-bg-blue);\r\n        width: 100%;\r\n        padding: 100px 20px 80px 20px;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* --- 3. GRID DE ICONOS --- *\/\r\n    .vw-icons-grid {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 50px; \r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* --- ITEM INDIVIDUAL --- *\/\r\n    .vw-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        text-align: center;\r\n        width: 160px; \r\n        cursor: pointer; \r\n        position: relative; \/* Clave para el tooltip *\/\r\n        -webkit-tap-highlight-color: transparent; \/* Quita el destello azul en m\u00f3viles *\/\r\n    }\r\n\r\n    \/* IMAGEN DEL ICONO *\/\r\n    .vw-icon-img {\r\n        width: var(--vw-icon-size);\r\n        height: auto;\r\n        display: block;\r\n        margin-bottom: 15px;\r\n        filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    \/* TEXTO DEL VALOR *\/\r\n    .vw-label {\r\n        color: var(--vw-text-white);\r\n        font-size: var(--vw-label-size);\r\n        font-weight: 600;\r\n        margin: 0;\r\n        line-height: 1.2;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    \/* =========================================\r\n       4. TOOLTIP (Caja de descripci\u00f3n)\r\n       ========================================= *\/\r\n    .vw-tooltip {\r\n        position: absolute;\r\n        top: 100%; \r\n        left: 50%;\r\n        transform: translateX(-50%) translateY(15px);\r\n        width: 250px; \r\n        background-color: var(--vw-tooltip-bg);\r\n        color: var(--vw-tooltip-text);\r\n        font-size: 14px;\r\n        line-height: 1.5;\r\n        padding: 15px;\r\n        border-radius: 8px;\r\n        text-align: center;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        z-index: 100;\r\n        pointer-events: none;\r\n        box-shadow: 0 10px 25px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    \/* Triangulito superior de la caja de descripci\u00f3n *\/\r\n    .vw-tooltip::before {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 100%; \r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        border-width: 10px;\r\n        border-style: solid;\r\n        border-color: transparent transparent var(--vw-tooltip-bg) transparent;\r\n    }\r\n\r\n    \/* --- EFECTOS DE HOVER (ESCRITORIO) --- *\/\r\n    @media (hover: hover) {\r\n        .vw-item:hover .vw-icon-img {\r\n            transform: translateY(-15px) scale(1.1);\r\n            filter: drop-shadow(0 15px 15px rgba(0,0,0,0.5));\r\n        }\r\n        .vw-item:hover .vw-label {\r\n            color: #ffcccc;\r\n        }\r\n        .vw-item:hover .vw-tooltip {\r\n            opacity: 1;\r\n            visibility: visible;\r\n            transform: translateX(-50%) translateY(5px);\r\n        }\r\n    }\r\n\r\n    \/* --- ESTADO ACTIVO (M\u00d3VIL) --- *\/\r\n    .vw-item.active-tooltip .vw-icon-img {\r\n        transform: translateY(-10px) scale(1.05);\r\n    }\r\n    .vw-item.active-tooltip .vw-label {\r\n        color: #ffcccc;\r\n    }\r\n    .vw-item.active-tooltip .vw-tooltip {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        transform: translateX(-50%) translateY(5px);\r\n    }\r\n\r\n    \/* =========================================\r\n       RESPONSIVE (M\u00d3VIL)\r\n       ========================================= *\/\r\n    @media (max-width: 768px) {\r\n        .vw-title-banner { width: 90%; padding: 12px; }\r\n        .vw-title-text { font-size: 28px; }\r\n        .vw-blue-content { padding-top: 80px; }\r\n        .vw-icons-grid { gap: 30px 10px; }\r\n        .vw-item { width: 45%; }\r\n        .vw-icon-img { width: 90px; }\r\n        .vw-label { font-size: 16px; }\r\n        \r\n        \/* Ajuste del tooltip para m\u00f3viles *\/\r\n        .vw-tooltip { \r\n            width: 200px; \r\n            font-size: 13px; \r\n            padding: 12px;\r\n            \/* Evitamos que se salga de la pantalla al hacer z-index alto *\/\r\n            z-index: 999;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"values-widget-container\">\r\n\r\n    <div class=\"vw-title-banner\">\r\n        <h2 class=\"vw-title-text\">OUR VALUES<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"vw-blue-content\">\r\n        <div class=\"vw-icons-grid\">\r\n            \r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-08-scaled.png\" alt=\"Responsibility\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Responsibility<\/p>\r\n                <div class=\"vw-tooltip\">We encourage students to take ownership of their actions and learning process, fostering a strong sense of duty towards themselves and the community.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-09-scaled.png\" alt=\"Respect\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Respect<\/p>\r\n                <div class=\"vw-tooltip\">Mutual respect is the foundation of our community. We teach students to value themselves, others, and the environment.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-10-scaled.png\" alt=\"Integrity\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Integrity<\/p>\r\n                <div class=\"vw-tooltip\">Doing the right thing, even when no one is watching. Honesty, transparency, and moral courage are core pillars of our education.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-11-scaled.png\" alt=\"Tolerance\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Tolerance<\/p>\r\n                <div class=\"vw-tooltip\">We embrace diversity and teach students to appreciate different perspectives, cultures, and ideas with an open and empathetic mind.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-12-scaled.png\" alt=\"Solidarity\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Solidarity<\/p>\r\n                <div class=\"vw-tooltip\">Empathy in action. We prepare students to support those in need and work collaboratively for the common good of our society.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-13-scaled.png\" alt=\"Equity\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Equity<\/p>\r\n                <div class=\"vw-tooltip\">Ensuring fairness and opportunity for everyone. We strive to create an inclusive environment where every student has the support they need to thrive.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vw-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cbcuscatlan.edu.sv\/wp-content\/uploads\/2026\/01\/Valores-14-scaled.png\" alt=\"Innovation\" class=\"vw-icon-img\">\r\n                <p class=\"vw-label\">Innovation<\/p>\r\n                <div class=\"vw-tooltip\">Encouraging creativity and critical thinking to solve modern problems. We prepare students to be the changemakers of tomorrow.<\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ L\u00f3gica para que los tooltips funcionen en dispositivos m\u00f3viles (tocar para abrir\/cerrar)\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const vwItems = document.querySelectorAll('.vw-item');\r\n\r\n        \/\/ Cerrar al tocar en cualquier parte de la pantalla (fuera de los iconos)\r\n        document.addEventListener('click', function(event) {\r\n            let clickedInside = event.target.closest('.vw-item');\r\n            if (!clickedInside) {\r\n                vwItems.forEach(item => item.classList.remove('active-tooltip'));\r\n            }\r\n        });\r\n\r\n        \/\/ Comportamiento al tocar un icono\r\n        vwItems.forEach(item => {\r\n            item.addEventListener('click', function(event) {\r\n                \/\/ Evita que el evento anterior (clic fuera) se dispare inmediatamente\r\n                event.stopPropagation();\r\n                \r\n                \/\/ Revisamos si el que tocamos ya est\u00e1 abierto\r\n                const isActive = this.classList.contains('active-tooltip');\r\n\r\n                \/\/ Primero cerramos TODOS los iconos para que no se amontonen\r\n                vwItems.forEach(i => i.classList.remove('active-tooltip'));\r\n\r\n                \/\/ Si el que tocamos NO estaba abierto, lo abrimos\r\n                if (!isActive) {\r\n                    this.classList.add('active-tooltip');\r\n                }\r\n            });\r\n        });\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f424316 e-flex e-con-boxed e-con e-parent\" data-id=\"f424316\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc94635 elementor-widget elementor-widget-html\" data-id=\"bc94635\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* =========================================\r\n       SECCI\u00d3N DE CONFIGURACI\u00d3N F\u00c1CIL\r\n       Modifica los valores aqu\u00ed abajo\r\n       ========================================= *\/\r\n    .contact-us-widget {\r\n        \/* --- 1. TIPOGRAF\u00cdA Y TEXTOS --- *\/\r\n        --cu-font-family: 'Avenir', \/* Correg\u00ed una coma que faltaba aqu\u00ed *\/\r\n        --cu-title-size: 42px;    \/* Tama\u00f1o t\u00edtulos (OUR LOCATION...) *\/\r\n        --cu-text-size: 18px;     \/* Tama\u00f1o texto de direcci\u00f3n y p\u00e1rrafo *\/\r\n\r\n        \/* --- 2. COLORES --- *\/\r\n        --cu-color-blue: #0c306d; \/* Azul (Borde del mapa y t\u00edtulo OUR) *\/\r\n        --cu-color-red: #b8141a;  \/* Rojo (T\u00edtulos LOCATION y REQUEST) *\/\r\n        --cu-color-text: #0c306d; \/* Gris del texto *\/\r\n\r\n        \/* --- 3. CONFIGURACI\u00d3N DEL MAPA --- *\/\r\n        --cu-map-height: 400px;        \/* Altura del mapa en PC *\/\r\n        --cu-map-border-width: 8px;    \/* Grosor del borde azul *\/\r\n        --cu-map-border-radius: 25px;  \/* Qu\u00e9 tan redondas son las esquinas *\/\r\n    }\r\n\r\n    \/* =========================================\r\n       ESTILOS CSS (NO TOCAR ABAJO)\r\n       ========================================= *\/\r\n       \r\n    \/* IMPORTANTE: Evita que el borde sume ancho extra y deforme el mapa *\/\r\n    .contact-us-widget, .contact-us-widget * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .contact-us-widget {\r\n        font-family: var(--cu-font-family);\r\n        color: var(--cu-color-text);\r\n        line-height: 1.5;\r\n        max-width: 100%;\r\n        margin: 0 auto;\r\n        padding: 40px 0px; \r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: space-between;\r\n        gap: 50px; \/* Espacio entre texto y mapa *\/\r\n        align-items: center; \r\n    }\r\n\r\n    \/* Columna Texto *\/\r\n    .contact-info-col {\r\n        flex: 1 1 400px;\r\n        max-width: 450px;\r\n    }\r\n\r\n    .contact-title {\r\n        font-size: var(--cu-title-size);\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        line-height: 0.95; \r\n        margin-bottom: 25px;\r\n        margin-top: 0;\r\n    }\r\n\r\n    .text-blue { color: var(--cu-color-blue); }\r\n    .text-red { color: var(--cu-color-red); }\r\n    \r\n    .contact-p {\r\n        font-size: var(--cu-text-size);\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .mt-large { margin-top: 50px; }\r\n\r\n    \/* Columna Mapa *\/\r\n    .contact-map-col {\r\n        flex: 1 1 500px;\r\n        width: 100%; \/* Asegura que tome todo el espacio en su contenedor *\/\r\n    }\r\n\r\n    .map-frame-style {\r\n        width: 100%;\r\n        height: var(--cu-map-height);\r\n        border: var(--cu-map-border-width) solid var(--cu-color-blue); \r\n        border-radius: var(--cu-map-border-radius); \r\n        overflow: hidden; \r\n        box-shadow: 0 10px 25px rgba(0,0,0,0.1); \r\n        display: block;\r\n    }\r\n\r\n    \/* =========================================\r\n       RESPONSIVE (AJUSTES PARA CELULARES)\r\n       ========================================= *\/\r\n    @media (max-width: 900px) {\r\n        .contact-us-widget {\r\n            flex-direction: column;\r\n            text-align: center;\r\n            padding: 40px 15px; \/* Da un poco de aire a los lados para que el texto no pegue en el borde del celular *\/\r\n            gap: 30px;\r\n        }\r\n        \r\n        .contact-info-col {\r\n            max-width: 100%;\r\n            width: 100%;\r\n            flex-basis: auto; \/* Resetea el ancho fijo *\/\r\n        }\r\n\r\n        .contact-map-col {\r\n            max-width: 100%;\r\n            width: 100%; \/* OBLIGA al mapa a estirarse a los lados *\/\r\n            flex-basis: auto; \/* Resetea el ancho fijo *\/\r\n        }\r\n\r\n        .contact-title { \r\n            font-size: 36px; \r\n        }\r\n\r\n        .map-frame-style {\r\n            height: 350px; \/* Un poco m\u00e1s corto en m\u00f3viles para mejorar la navegaci\u00f3n *\/\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"contact-us-widget\">\r\n\r\n    <div class=\"contact-info-col\">\r\n        \r\n        <h2 class=\"contact-title\">\r\n            <span class=\"text-blue\">OUR<\/span><br>\r\n            <span class=\"text-red\">LOCATION<\/span>\r\n        <\/h2>\r\n        <p class=\"contact-p\">\r\n            Lote 11 porci\u00f3n #3 Finca Florida, Nuevo Cuscatl\u00e1n,<br>La Libertad Este.\r\n        <\/p>\r\n\r\n        <h2 class=\"contact-title text-red mt-large\">\r\n            REQUEST\r\n        <\/h2>\r\n        <p class=\"contact-p\">\r\n            If you wish to know more of our institution and methodology which develops individuals who spread a positive change in our society, you can fill the form or call the 2560-2700.\r\n        <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"contact-map-col\">\r\n        <iframe \r\n            class=\"map-frame-style\"\r\n            src=\"https:\/\/maps.google.com\/maps?q=Cuscatl%C3%A1n%20Bilingual%20School%2C%20Nuevo%20Cuscatl%C3%A1n&t=&z=15&ie=UTF8&iwloc=&output=embed\" \r\n            frameborder=\"0\" \r\n            scrolling=\"no\" \r\n            marginheight=\"0\" \r\n            marginwidth=\"0\">\r\n        <\/iframe>\r\n    <\/div>\r\n\r\n<\/div>\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-d459986 e-flex e-con-boxed e-con e-parent\" data-id=\"d459986\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aee283f elementor-widget elementor-widget-html\" data-id=\"aee283f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- CONFIGURACI\u00d3N F\u00c1CIL --- *\/\r\n    :root {\r\n        \/* Colores Generales *\/\r\n        --cbc-bg-color: #1F3A6E;       \/* Azul oscuro de fondo *\/\r\n        --cbc-text-color: #FFFFFF;     \/* Color del texto *\/\r\n        \r\n        \/* Colores de Iconos INDIVIDUALES *\/\r\n        --icon-facebook: #E31B23;      \/* Rojo institucional *\/\r\n        --icon-whatsapp: #E31B23;      \r\n        --icon-insta: #E31B23;\r\n        --icon-youtube: #E31B23;\r\n        --icon-tiktok: #E31B23;\r\n        \r\n        \/* Tipograf\u00eda *\/\r\n        --cbc-font-family: 'Avenir', 'Montserrat', sans-serif; \r\n    }\r\n\r\n    \/* --- ESTILOS DEL CONTENEDOR --- *\/\r\n    .cbc-social-bar {\r\n        background-color: var(--cbc-bg-color);\r\n        color: var(--cbc-text-color);\r\n        font-family: var(--cbc-font-family);\r\n        \r\n        \/* Bordes Redondeados Superiores *\/\r\n        border-top-left-radius: 50px;\r\n        border-top-right-radius: 50px;\r\n        \r\n        \/* Espaciado y Tama\u00f1o *\/\r\n        padding: 20px 50px;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n        \r\n        \/* Flexbox para alinear *\/\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap; \r\n    }\r\n\r\n    \/* --- LADO IZQUIERDO: REDES --- *\/\r\n    .cbc-social-left {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 5px;\r\n    }\r\n\r\n    .cbc-social-label {\r\n        font-weight: 800; \r\n        font-size: 20px;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .cbc-icons-container {\r\n        display: flex;\r\n        gap: 15px; \r\n        font-size: 24px; \r\n    }\r\n\r\n    .cbc-icons-container a {\r\n        text-decoration: none;\r\n        transition: transform 0.3s ease;\r\n        display: inline-block; \r\n    }\r\n    \r\n    .cbc-icons-container a:hover {\r\n        transform: scale(1.2); \r\n    }\r\n\r\n    \/* Asignaci\u00f3n de colores *\/\r\n    .icon-fb { color: var(--icon-facebook); }\r\n    .icon-wa { color: var(--icon-whatsapp); } \r\n    .icon-ig { color: var(--icon-insta); }\r\n    .icon-yt { color: var(--icon-youtube); }\r\n    .icon-tt { color: var(--icon-tiktok); }\r\n\r\n    \/* --- LADO DERECHO: NOMBRE --- *\/\r\n    .cbc-school-name {\r\n        font-weight: 900;\r\n        font-size: 32px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        text-align: right;\r\n    }\r\n\r\n    \/* --- RESPONSIVE (M\u00f3viles) --- *\/\r\n    @media (max-width: 768px) {\r\n        .cbc-social-bar {\r\n            flex-direction: column;\r\n            text-align: center;\r\n            padding: 30px 20px;\r\n            border-top-left-radius: 30px;\r\n            border-top-right-radius: 30px;\r\n        }\r\n        \r\n        .cbc-social-left {\r\n            align-items: center;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .cbc-school-name {\r\n            text-align: center;\r\n            font-size: 24px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"cbc-social-bar\">\r\n\r\n    <div class=\"cbc-social-left\">\r\n        <div class=\"cbc-social-label\">Social Networks<\/div>\r\n        \r\n        <div class=\"cbc-icons-container\">\r\n            <a href=\"https:\/\/www.facebook.com\/colegiobilinguecuscatlan\" target=\"_blank\" class=\"icon-fb\" aria-label=\"Facebook\">\r\n                <i class=\"fab fa-facebook-f\"><\/i>\r\n            <\/a>\r\n            \r\n            <a href=\"https:\/\/wa.me\/50376079299\" target=\"_blank\" class=\"icon-wa\" aria-label=\"WhatsApp\">\r\n                <i class=\"fab fa-whatsapp\"><\/i>\r\n            <\/a>\r\n            \r\n            <a href=\"https:\/\/www.instagram.com\/Colegio_cbc\" target=\"_blank\" class=\"icon-ig\" aria-label=\"Instagram\">\r\n                <i class=\"fab fa-instagram\"><\/i>\r\n            <\/a>\r\n            \r\n            <a href=\"https:\/\/www.youtube.com\/@colegiobilinguecuscatlan2303\" target=\"_blank\" class=\"icon-yt\" aria-label=\"YouTube\">\r\n                <i class=\"fab fa-youtube\"><\/i>\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/www.tiktok.com\/@colegio_cbc\" target=\"_blank\" class=\"icon-tt\" aria-label=\"TikTok\">\r\n                <i class=\"fab fa-tiktok\"><\/i>\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"cbc-school-name\">\r\n        COLEGIO BILING\u00dcE CUSCATL\u00c1N\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MESSAGE FROM THE VICE-PRINCIPAL OFFICE \u00a1Hello We are Colegio Biling\u00fce Cuscatl\u00e1n! We invite you to learn more about our institution, sports, the educational community, our achievements, our programs, our pedagogical approach, healthy coexistence and all the activities we do during the school year. ROC\u00cdO DE PANAME\u00d1O School Management Vice Principal To our students: \u201cGo forth [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3342","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/pages\/3342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/comments?post=3342"}],"version-history":[{"count":326,"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/pages\/3342\/revisions"}],"predecessor-version":[{"id":26272,"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/pages\/3342\/revisions\/26272"}],"wp:attachment":[{"href":"https:\/\/cbcuscatlan.edu.sv\/index.php\/wp-json\/wp\/v2\/media?parent=3342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}