{"id":80,"date":"2025-09-11T17:16:32","date_gmt":"2025-09-11T17:16:32","guid":{"rendered":"https:\/\/mododigital.net.gt\/?page_id=80"},"modified":"2026-04-28T19:26:10","modified_gmt":"2026-04-28T19:26:10","slug":"home","status":"publish","type":"page","link":"https:\/\/mododigital.net.gt\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"80\" class=\"elementor elementor-80\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82d7732 e-con-full e-flex e-con e-parent\" data-id=\"82d7732\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa64e10 elementor-widget elementor-widget-spacer\" data-id=\"fa64e10\" 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>\n\t\t<div class=\"elementor-element elementor-element-c267594 e-con-full e-flex e-con e-parent\" data-id=\"c267594\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-021fba0 elementor-widget elementor-widget-html\" data-id=\"021fba0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"carousel-container-large\">\r\n  <div class=\"carousel\">\r\n    <!-- Slide 1 (activo) -->\r\n    <a href=\"\" target=\"_blank\" class=\"carousel-item active\">\r\n      <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/10\/Banners-03-scaled.png\" alt=\"Banner 1\">\r\n    <\/a>\r\n\r\n    <!-- Slide 2 -->\r\n    <a href=\"\" target=\"_blank\" class=\"carousel-item\">\r\n      <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Banners-04-scaled.png\" alt=\"Banner 2\">\r\n    <\/a>\r\n\r\n    <!-- Slide 3 -->\r\n    <a href=\"\" target=\"_blank\" class=\"carousel-item\">\r\n      <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Banners-02-scaled.png\" alt=\"Banner 3\">\r\n    <\/a>\r\n    <!-- Slide 4 -->\r\n    <a href=\"\" target=\"_blank\" class=\"carousel-item\">\r\n      <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Banners-04-scaled.png\" alt=\"Banner 3\">\r\n    <\/a>\r\n    <!-- Slide 5 -->\r\n    <a href=\"\" target=\"_blank\" class=\"carousel-item\">\r\n      <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/10\/guardianes-sin-fondo.png\" alt=\"Banner 3\">\r\n    <\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<style>\r\n\r\n.carousel-container-large{\r\n  width:100%;\r\n  padding-top: 160px; \/* \ud83d\udc48 separa del men\u00fa fijo *\/\r\n  overflow:hidden;\r\n  position:relative;\r\n  background:#fff;\r\n}\r\n\r\n\r\n  .carousel-container-large{\r\n    width:100%;\r\n    margin:0;\r\n    overflow:hidden;\r\n    position:relative;\r\n    background:#fff; \/* fondo neutro detr\u00e1s de la imagen (letterbox) *\/\r\n  }\r\n\r\n  \/* Altura basada en ratio (por defecto 16:9), limitada en monitores para que no sea gigante *\/\r\n  .carousel{\r\n    position:relative;\r\n    width:100%;\r\n    aspect-ratio: var(--ratio-w, 16) \/ var(--ratio-h, 9);\r\n    max-height: 72vh;   \/* m\u00e1s peque\u00f1o en escritorio *\/\r\n    min-height: 320px;  \/* altura m\u00ednima razonable *\/\r\n  }\r\n  @media (min-width: 1400px){\r\n    .carousel{ max-height: 62vh; } \/* un poco m\u00e1s chico en pantallas muy grandes *\/\r\n  }\r\n\r\n  .carousel-item{\r\n    position:absolute;\r\n    inset:0;            \/* ocupa todo el contenedor *\/\r\n    opacity:0;\r\n    transition: opacity 1.2s ease-in-out;\r\n    display:block;\r\n  }\r\n  .carousel-item.active{ opacity:1; }\r\n\r\n  .carousel-item img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit: contain;     \/* \ud83d\udd38 clave: muestra la imagen completa (sin recortar) *\/\r\n    object-position: center;\r\n    background:#fff;         \/* relleno en los bordes si sobra espacio *\/\r\n    display:block;\r\n    transition: transform .3s ease;\r\n  }\r\n  .carousel-item:hover img{ transform: scale(1.01); }\r\n\r\n  \/* M\u00f3vil: mantiene el contain y permite ser m\u00e1s bajito si hace falta *\/\r\n  @media (max-width: 768px){\r\n    .carousel{\r\n      max-height: 54vh;\r\n      min-height: 220px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function () {\r\n    const items = document.querySelectorAll(\".carousel-item\");\r\n    const carousel = document.querySelector(\".carousel\");\r\n\r\n    \/\/ Ajusta el aspect-ratio seg\u00fan el tama\u00f1o real de la imagen (evita cortes).\r\n    const firstImg = items[0]?.querySelector(\"img\");\r\n    function setRatioFromImage(img){\r\n      if(!img || !carousel) return;\r\n      if (img.naturalWidth && img.naturalHeight){\r\n        carousel.style.setProperty('--ratio-w', img.naturalWidth);\r\n        carousel.style.setProperty('--ratio-h', img.naturalHeight);\r\n      } else {\r\n        img.addEventListener('load', ()=> {\r\n          carousel.style.setProperty('--ratio-w', img.naturalWidth);\r\n          carousel.style.setProperty('--ratio-h', img.naturalHeight);\r\n        }, { once:true });\r\n      }\r\n    }\r\n    setRatioFromImage(firstImg);\r\n\r\n    \/\/ Rotaci\u00f3n autom\u00e1tica (si agregas m\u00e1s slides)\r\n    let currentIndex = 0;\r\n    function showNext() {\r\n      items[currentIndex].classList.remove(\"active\");\r\n      currentIndex = (currentIndex + 1) % items.length;\r\n      items[currentIndex].classList.add(\"active\");\r\n    }\r\n    if(items.length){\r\n      items[0].classList.add(\"active\");\r\n      if(items.length > 1){\r\n        setInterval(showNext, 4000);\r\n      }\r\n    }\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0b9ea7e e-flex e-con-boxed e-con e-parent\" data-id=\"0b9ea7e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cad45d elementor-widget elementor-widget-spacer\" data-id=\"7cad45d\" 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-68db95e e-con-full e-flex e-con e-parent\" data-id=\"68db95e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45a45c6 elementor-widget elementor-widget-html\" data-id=\"45a45c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOQUE 3 COLUMNAS (FONDO BLANCO + TEXTO A COLOR) -->\r\n<section class=\"hero-3cols\" aria-label=\"Mensaje principal\">\r\n  <div class=\"hero-inner\">\r\n    <!-- Columna 1: Texto -->\r\n    <div class=\"col col-text\" data-animate>\r\n      <h1 class=\"headline\">\r\n        Hagamos un Internet <span class=\"subrayado\">m\u00e1s seguro<\/span> para la ni\u00f1ez y adolescencia.\r\n      <\/h1>\r\n    <\/div>\r\n\r\n    <!-- Columna 2: Imagen -->\r\n    <figure class=\"col col-image\" data-animate>\r\n      <img\r\n        src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/cropped-olivet-01-scaled-1.png\"\r\n        alt=\"Ilustraci\u00f3n de seguridad en Internet\"\r\n        class=\"hero-img\" loading=\"eager\" decoding=\"async\">\r\n      <span class=\"glow\"><\/span>\r\n    <\/figure>\r\n\r\n    <!-- Columna 3: Tarjeta con fondo -->\r\n    <div class=\"col col-card\" data-animate>\r\n      <h2 class=\"card-title\"><\/h2>\r\n      <p>\r\n        Todos tenemos m\u00e1s de alg\u00fan usuario en cualquier red social, utilizamos aplicaciones de mensajer\u00eda instant\u00e1nea y pasamos tiempo jugando en l\u00ednea. Solo debemos saber cu\u00e1l es la manera adecuada para no exponernos a riesgos en internet. Conozcamos datos importantes obtenidos en Guatemala sobre c\u00f3mo nos conectamos a internet.\r\n      <\/p>\r\n      <a href=\"https:\/\/mododigital.net.gt\/?page_id=37\" class=\"btn-cta\">Ver recursos<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  :root{\r\n    --hero-h-desktop: 60vh;\r\n    --hero-h-tablet: 64vh;\r\n    --hero-h-mobile: auto;      \/* \u2705 en m\u00f3vil, altura autom\u00e1tica (sin recortes) *\/\r\n\r\n    --azul-oscuro:#0d47a1;\r\n    --azul:#1976d2;\r\n    --cian:#00bcd4;\r\n    --tinta:#0b1b2b;\r\n    --acento:#ffcc00;\r\n\r\n    --ink:#0b1b2b;\r\n    --card-bg:#ffffff;\r\n    --card-stroke:#e6eef8;\r\n    --shadow:0 14px 36px rgba(0,0,0,.18);\r\n    --radius:16px;\r\n    --gap: clamp(14px, 2.8vw, 32px); \/* \ud83d\udd3c m\u00e1s espacio entre columnas *\/\r\n    --container: min(1200px, 92vw);\r\n  }\r\n\r\n  .hero-3cols{\r\n    width: 100vw;\r\n    margin-inline: calc(50% - 50vw);\r\n    min-height: var(--hero-h-desktop);\r\n    display: grid;\r\n    place-items: center;\r\n    position: relative;\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n    background: #fff;\r\n    color: var(--ink);\r\n  }\r\n  .hero-3cols::after{ content:none; }\r\n\r\n  .hero-inner{\r\n    width: var(--container);\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr 1fr;\r\n    gap: var(--gap);\r\n    align-items: center;\r\n    padding: clamp(16px, 3vh, 36px) 0;\r\n  }\r\n\r\n  .headline{\r\n    font-size: clamp(26px, 3.6vw, 42px);\r\n    line-height: 1.18;\r\n    font-weight: 800;\r\n    letter-spacing: .2px;\r\n    margin: 0 0 8px;\r\n    color: var(--azul-oscuro);\r\n    text-wrap: balance;\r\n  }\r\n\r\n  .subrayado{\r\n    position: relative;\r\n    background: linear-gradient(90deg, var(--azul-oscuro), var(--azul), var(--cian));\r\n    -webkit-background-clip: text; background-clip: text;\r\n    color: transparent;\r\n    white-space: nowrap;\r\n  }\r\n  .subrayado::after{\r\n    content: \"\";\r\n    position: absolute; left: 0; right: 0; bottom: -4px;\r\n    height: 5px; border-radius: 6px;\r\n    background: linear-gradient(90deg, var(--acento), #ffe27a);\r\n    transform-origin: left center; transform: scaleX(0);\r\n    animation: underline-in .7s .15s ease forwards;\r\n  }\r\n  @keyframes underline-in{ to{ transform: scaleX(1); } }\r\n\r\n  \/* ===== Imagen central ===== *\/\r\n  .col-image{\r\n    grid-column: 2 \/ 3;\r\n    display:grid; place-items:center; position:relative; z-index:2;\r\n  }\r\n  .hero-img{\r\n    width: min(480px, 44vw);\r\n    height: auto;                 \/* \u2705 sin l\u00edmites de alto fijos *\/\r\n    object-fit: contain;\r\n    border-radius: clamp(12px, 2vw, 16px);\r\n    background: #fff;\r\n    box-shadow: var(--shadow);\r\n    transform: translateZ(0);\r\n    transition: transform .6s ease, filter .6s ease, box-shadow .6s ease;\r\n  }\r\n  \/* Efecto SHINE + tilt en desktop *\/\r\n  @media (pointer:fine){\r\n    .col-image::before{\r\n      content:\"\";\r\n      position:absolute; inset:8%;\r\n      background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);\r\n      transform: translateX(-120%) skewX(-12deg);\r\n      transition: transform .8s ease;\r\n      pointer-events:none;\r\n      border-radius: 14px;\r\n      mix-blend-mode: screen;\r\n    }\r\n    .col-image:hover::before{ transform: translateX(120%) skewX(-12deg); }\r\n    .col-image:hover .hero-img{\r\n      transform: perspective(800px) rotateY(-4deg) scale(1.03);\r\n      filter: saturate(1.06) contrast(1.03);\r\n      box-shadow: 0 18px 48px rgba(0,0,0,.22);\r\n    }\r\n  }\r\n\r\n  .glow{\r\n    position:absolute; width:70%; height:70%; border-radius:28px;\r\n    background: radial-gradient(closest-side, rgba(25,118,210,.12), transparent 70%);\r\n    filter: blur(34px); z-index:-1; opacity:.7; pointer-events:none;\r\n  }\r\n\r\n  \/* ===== Tarjeta derecha ===== *\/\r\n  .col-card{\r\n    background: var(--card-bg);\r\n    border: 1px solid var(--card-stroke);\r\n    padding: clamp(14px, 2.2vw, 24px);\r\n    border-radius: var(--radius);\r\n    box-shadow: 0 10px 24px rgba(0,0,0,.10);\r\n  }\r\n  .card-title{\r\n    margin: 0 0 8px;\r\n    font-size: clamp(18px, 1.8vw, 22px);\r\n    color: var(--azul-oscuro);\r\n    font-weight: 800;\r\n  }\r\n  .col-card p{ color:#2f3b49; }\r\n  .btn-cta{\r\n    display:inline-block; margin-top:12px; padding:12px 18px; border-radius:12px;\r\n    color:#0d47a1; background: linear-gradient(180deg,#ffd95a,#ffcc00);\r\n    font-weight:700; text-decoration:none;\r\n    box-shadow: 0 10px 22px rgba(0,0,0,.12);\r\n    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;\r\n  }\r\n  .btn-cta:hover{ transform: translateY(-2px); filter: brightness(1.05); }\r\n\r\n  \/* Animaci\u00f3n de entrada *\/\r\n  [data-animate]{ opacity:0; transform: translateY(16px) scale(.985); }\r\n  [data-animate].in{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }\r\n\r\n  \/* ===== RESPONSIVE ===== *\/\r\n  @media (max-width: 1024px){\r\n    .hero-3cols{ min-height: var(--hero-h-tablet); }\r\n    .hero-img{ width:min(520px, 56vw); }\r\n  }\r\n  @media (max-width: 900px){\r\n    .hero-3cols{ min-height: var(--hero-h-mobile); }\r\n    .hero-inner{\r\n      grid-template-columns: 1fr;\r\n      grid-template-areas:\r\n        \"image\"\r\n        \"text\"\r\n        \"card\";\r\n      text-align:center;\r\n      gap: clamp(16px, 3.5vh, 28px);\r\n      padding-inline: clamp(12px, 4vw, 20px);\r\n    }\r\n    .col-image{ order:-1; }               \/* Imagen primero en m\u00f3vil *\/\r\n    .hero-img{\r\n      width:min(560px, 92vw);\r\n      max-height:none;                    \/* \u2705 sin recortes verticales *\/\r\n    }\r\n    \/* Efecto flotaci\u00f3n sutil en m\u00f3vil *\/\r\n    @keyframes float-y{0%{transform: translateY(0)}50%{transform: translateY(-6px)}100%{transform: translateY(0)}}\r\n    .hero-img{ animation: float-y 5s ease-in-out infinite; }\r\n  }\r\n\r\n  \/* Accesibilidad: menos movimiento *\/\r\n  @media (prefers-reduced-motion: reduce){\r\n    .subrayado::after{ animation:none; transform: scaleX(1); }\r\n    .hero-img{ animation:none !important; }\r\n    .col-image:hover .hero-img{ transform:none; }\r\n    [data-animate]{ opacity:1; transform:none; }\r\n    .hero-img, .btn-cta{ transition:none !important; }\r\n  }\r\n  \/* ====== NUEVO LOOK SOLO PARA M\u00d3VIL ====== *\/\r\n@media (max-width: 900px){\r\n  .hero-3cols{ min-height: auto; }\r\n\r\n  \/* Contenedor tipo tarjeta en m\u00f3vil *\/\r\n  .hero-inner{\r\n    grid-template-columns: 1fr;\r\n    grid-template-areas:\r\n      \"image\"\r\n      \"text\"\r\n      \"card\";\r\n    gap: clamp(18px, 4.5vw, 28px);\r\n    text-align: center;\r\n    padding: clamp(14px, 5vw, 22px);\r\n    background: #fff;\r\n    border-radius: 18px;\r\n    box-shadow: 0 8px 24px rgba(0,0,0,.06);\r\n  }\r\n\r\n  \/* IMAGEN \u2013 arriba y protagonista *\/\r\n  .col-image{ order:-1; position: relative; }\r\n  .hero-img{\r\n    width: min(560px, 92vw);\r\n    height: auto;                    \/* evita recortes *\/\r\n    max-height: none;\r\n    object-fit: contain;\r\n    border-radius: 20px;\r\n    background:\r\n      linear-gradient(#fff,#fff) padding-box,\r\n      linear-gradient(135deg,#eaf2ff,#ffffff) border-box; \/* borde sutil *\/\r\n    padding: 10px;                   \/* marco blanco *\/\r\n    border: 1px solid rgba(10,60,150,.08);\r\n    box-shadow: 0 14px 36px rgba(13,71,161,.16);\r\n    animation: floaty 5s ease-in-out infinite; \/* flotaci\u00f3n suave *\/\r\n  }\r\n  \/* brillo al moverse el dedo: no requiere hover *\/\r\n  .col-image::before{\r\n    content:\"\"; position:absolute; inset:14% 8%;\r\n    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);\r\n    transform: translateX(-130%) skewX(-12deg);\r\n    animation: shine 3.5s 1.2s ease-in-out infinite;\r\n    pointer-events:none; border-radius: 16px; mix-blend-mode: screen;\r\n  }\r\n  @keyframes shine{ 0%{transform:translateX(-130%) skewX(-12deg)} 60%,100%{transform:translateX(130%) skewX(-12deg)} }\r\n  @keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }\r\n\r\n  \/* TITULAR centrado y legible *\/\r\n  .headline{\r\n    font-size: clamp(22px, 7vw, 30px);\r\n    line-height: 1.18;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* TARJETA de texto clara, con bot\u00f3n full width *\/\r\n  .col-card{\r\n    text-align: left;\r\n    background: #f8fbff;\r\n    border: 1px solid #e6eef8;\r\n    border-radius: 16px;\r\n    padding: clamp(14px, 5vw, 18px);\r\n    box-shadow: 0 6px 18px rgba(13,71,161,.10);\r\n  }\r\n  .col-card p{ line-height: 1.55; }\r\n\r\n  .btn-cta{\r\n    display:block;\r\n    width: 100%;\r\n    text-align: center;\r\n    padding: 12px 18px;\r\n    border-radius: 12px;\r\n    margin-top: 12px;\r\n  }\r\n\r\n  \/* quitar zooms bruscos en t\u00e1ctiles *\/\r\n  @media (pointer: coarse){\r\n    .hero-img{ animation: floaty 6s ease-in-out infinite; }\r\n  }\r\n}\r\n\r\n\/* Respeto de accesibilidad *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  .hero-img{ animation: none !important; }\r\n  .hero-3cols .col-image::before{ animation: none !important; }\r\n}\r\n\/* ===== SOLO M\u00d3VIL: nuevo orden y mejor lectura ===== *\/\r\n@media (max-width: 900px){\r\n  \/* Orden: texto \u2192 imagen \u2192 tarjeta *\/\r\n  .hero-inner{\r\n    grid-template-columns: 1fr;\r\n    grid-auto-flow: row;\r\n    gap: clamp(18px, 4.5vw, 28px);\r\n    text-align: center;\r\n    padding-inline: clamp(16px, 6vw, 24px);\r\n  }\r\n  .col-text { order: 1; }\r\n  .col-image{ order: 2; }\r\n  .col-card { order: 3; }\r\n\r\n  \/* Titular m\u00e1s legible y compacto *\/\r\n  .headline{\r\n    font-size: clamp(22px, 7vw, 30px);\r\n    line-height: 1.15;\r\n    max-width: 22ch;          \/* limita el largo de la l\u00ednea *\/\r\n    margin: 0 auto 4px;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  \/* Permite que \u201cm\u00e1s seguro\u201d se parta en m\u00f3vil (antes estaba sin saltos) *\/\r\n  .subrayado{ white-space: normal !important; }\r\n\r\n  \/* Imagen centrada, sin recortes *\/\r\n  .hero-img{\r\n    width: min(560px, 92vw);\r\n    height: auto;\r\n    max-height: none;\r\n    object-fit: contain;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  \/* Texto de la tarjeta m\u00e1s estrecho para no verse \u201calargado\u201d *\/\r\n  .col-card{\r\n    text-align: left;\r\n    margin-inline: auto;\r\n    max-width: 60ch;\r\n  }\r\n  .col-card p{ line-height: 1.55; }\r\n}\r\n\/* ===== SOLO M\u00d3VIL: orden + subrayado visible + tarjeta horizontal ===== *\/\r\n@media (max-width: 900px){\r\n  \/* Orden m\u00f3vil: 1) t\u00edtulo 2) imagen 3) tarjeta *\/\r\n  .col-text { order: 1; }\r\n  .col-image{ order: 2; }\r\n  .col-card { order: 3; }\r\n\r\n  \/* Titular m\u00e1s compacto y centrado *\/\r\n  .headline{\r\n    font-size: clamp(22px, 7vw, 30px);\r\n    line-height: 1.15;\r\n    max-width: 22ch;               \/* evita l\u00edneas muy largas *\/\r\n    margin: 0 auto 6px;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  \/* \u201cm\u00e1s seguro\u201d SIEMPRE subrayado (visible en m\u00f3vil) *\/\r\n  .subrayado{\r\n    display: inline-block;\r\n    position: relative;\r\n    white-space: normal !important; \/* permite partir en 2 l\u00edneas si hace falta *\/\r\n    padding-bottom: .15em;\r\n    background: linear-gradient(90deg, var(--azul-oscuro), var(--azul), var(--cian));\r\n    -webkit-background-clip: text; background-clip: text;\r\n    color: transparent;\r\n  }\r\n  .subrayado::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:0; bottom: .02em;\r\n    width:100%; height:.25em;\r\n    border-radius:.25em;\r\n    background: linear-gradient(90deg, var(--acento), #ffe27a);\r\n    \/* sin animaci\u00f3n para que no desaparezca *\/\r\n    transform: none; animation: none;\r\n  }\r\n\r\n  \/* Imagen centrada, sin recortes *\/\r\n  .hero-img{\r\n    width: min(560px, 92vw);\r\n    height: auto;\r\n    max-height: none;\r\n    object-fit: contain;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  \/* Tarjeta horizontal y compacta: ocupa todo el ancho del tel\u00e9fono *\/\r\n  .col-card{\r\n    display:flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 12px;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    margin-inline: auto;\r\n    padding: 12px 14px;\r\n    background: #f8fbff;\r\n    border: 1px solid #e6eef8;\r\n    border-radius: 14px;\r\n    box-shadow: 0 6px 16px rgba(13,71,161,.08);\r\n    text-align: left;\r\n  }\r\n  .col-card .card-title{ display:none; } \/* (est\u00e1 vac\u00eda) *\/\r\n  .col-card p{\r\n    flex: 1;\r\n    margin: 0;\r\n    font-size: clamp(14px, 3.8vw, 16px);\r\n    line-height: 1.35;               \/* menos alto *\/\r\n  }\r\n  .btn-cta{\r\n    flex: 0 0 auto;\r\n    margin: 0;\r\n    padding: 10px 14px;\r\n    border-radius: 10px;\r\n    font-size: 14px;\r\n    white-space: nowrap;             \/* no se parte *\/\r\n  }\r\n}\r\n\/* ==== SOLO M\u00d3VIL: 1) t\u00edtulo 2) imagen 3) tarjeta horizontal a todo el ancho ==== *\/\r\n@media (max-width: 900px){\r\n  \/* Cambiamos grid por flex columna para eliminar cualquier \u201cdoble columna\u201d residual *\/\r\n  .hero-inner{\r\n    display: flex !important;\r\n    flex-direction: column;\r\n    gap: clamp(18px, 4.5vw, 28px);\r\n    text-align: center;\r\n    padding-inline: clamp(16px, 6vw, 24px);\r\n  }\r\n\r\n  \/* Orden *\/\r\n  .col-text { order: 1; }\r\n  .col-image{ order: 2; }\r\n  .col-card { order: 3; }\r\n\r\n  \/* Titular compacto y legible *\/\r\n  .headline{\r\n    font-size: clamp(22px, 7vw, 30px);\r\n    line-height: 1.15;\r\n    max-width: 22ch;            \/* controla el largo *\/\r\n    margin: 0 auto 6px;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  \/* \u201cm\u00e1s seguro\u201d SIEMPRE subrayado y puede partir l\u00ednea *\/\r\n  .subrayado{\r\n    position: relative;\r\n    display: inline-block;\r\n    white-space: normal !important;\r\n    padding-bottom: .15em;\r\n    background: linear-gradient(90deg, var(--azul-oscuro), var(--azul), var(--cian));\r\n    -webkit-background-clip: text; background-clip: text;\r\n    color: transparent;\r\n  }\r\n  .subrayado::after{\r\n    content:\"\";\r\n    position:absolute; left:0; bottom:.02em; width:100%; height:.25em;\r\n    border-radius:.25em;\r\n    background: linear-gradient(90deg, var(--acento), #ffe27a);\r\n  }\r\n\r\n  \/* Imagen centrada, sin recortes *\/\r\n  .hero-img{\r\n    width: min(560px, 92vw);\r\n    height: auto; max-height: none; object-fit: contain;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  \/* Tarjeta HORIZONTAL y compacta (texto + bot\u00f3n en una sola fila) *\/\r\n  .col-card{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    width: 100%; max-width: 100%;\r\n    padding: 12px 14px;\r\n    background: #f8fbff;\r\n    border: 1px solid #e6eef8;\r\n    border-radius: 14px;\r\n    box-shadow: 0 6px 16px rgba(13,71,161,.08);\r\n    text-align: left;           \/* texto alineado natural *\/\r\n  }\r\n  .col-card .card-title{ display:none; } \/* est\u00e1 vac\u00edo *\/\r\n  .col-card p{\r\n    flex: 1 1 auto;             \/* \u2705 el texto ocupa TODO el ancho disponible *\/\r\n    min-width: 0;               \/* evita que parezca \u201cotra columna\u201d *\/\r\n    margin: 0;\r\n    font-size: clamp(14px, 3.6vw, 16px);\r\n    line-height: 1.35;\r\n  }\r\n  .btn-cta{\r\n    flex: 0 0 auto;\r\n    margin: 0;\r\n    padding: 10px 14px;\r\n    border-radius: 10px;\r\n    font-size: 14px;\r\n    white-space: nowrap;         \/* no se parte el bot\u00f3n *\/\r\n  }\r\n}\r\n\/* --- SOLO M\u00d3VIL: arreglar bloque de texto + bot\u00f3n --- *\/\r\n@media (max-width: 900px){\r\n  \/* El bloque pasa a flujo vertical normal *\/\r\n  .hero-3cols .col-card{\r\n    display: block !important;     \/* anula cualquier flex anterior *\/\r\n    width: 100%;\r\n    max-width: none;\r\n    padding: 12px 16px;\r\n    text-align: left;\r\n  }\r\n\r\n  \/* El texto ocupa todo el ancho, sin \u201cdos columnas\u201d ni recortes *\/\r\n  .hero-3cols .col-card p{\r\n    flex: initial !important;\r\n    min-width: 0;\r\n    margin: 0;\r\n    font-size: clamp(14px, 3.8vw, 16px);\r\n    line-height: 1.45;\r\n    overflow-wrap: anywhere;        \/* evita cortes extra\u00f1os en m\u00f3vil *\/\r\n  }\r\n\r\n  \/* El bot\u00f3n va DEBAJO del texto (no al medio) *\/\r\n  .hero-3cols .btn-cta{\r\n    flex: initial !important;\r\n    display: inline-block;\r\n    width: auto;                    \/* si lo quieres a todo el ancho pon 100% *\/\r\n    margin-top: 12px;               \/* separarlo del p\u00e1rrafo *\/\r\n  }\r\n}\r\n\/* --- SOLO M\u00d3VIL: arreglar bloque de texto + bot\u00f3n --- *\/\r\n@media (max-width: 900px){\r\n  \/* El bloque pasa a flujo vertical normal *\/\r\n  .hero-3cols .col-card{\r\n    display: block !important;     \/* anula cualquier flex anterior *\/\r\n    width: 100%;\r\n    max-width: none;\r\n    padding: 12px 16px;\r\n    text-align: left;\r\n  }\r\n\r\n  \/* El texto ocupa todo el ancho, sin \u201cdos columnas\u201d ni recortes *\/\r\n  .hero-3cols .col-card p{\r\n    flex: initial !important;\r\n    min-width: 0;\r\n    margin: 0;\r\n    font-size: clamp(14px, 3.8vw, 16px);\r\n    line-height: 1.45;\r\n    overflow-wrap: anywhere;        \/* evita cortes extra\u00f1os en m\u00f3vil *\/\r\n  }\r\n\r\n  \/* El bot\u00f3n va DEBAJO del texto (no al medio) *\/\r\n  .hero-3cols .btn-cta{\r\n    flex: initial !important;\r\n    display: inline-block;\r\n    width: auto;                    \/* si lo quieres a todo el ancho pon 100% *\/\r\n    margin-top: 12px;               \/* separarlo del p\u00e1rrafo *\/\r\n  }\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<script>\r\n  \/\/ Animaci\u00f3n de entrada con IntersectionObserver\r\n  (function(){\r\n    const els = document.querySelectorAll('[data-animate]');\r\n    if (!('IntersectionObserver' in window)) { els.forEach(e=>e.classList.add('in')); return; }\r\n    const io = new IntersectionObserver((entries)=>{\r\n      entries.forEach(entry=>{\r\n        if(entry.isIntersecting){ entry.target.classList.add('in'); io.unobserve(entry.target); }\r\n      });\r\n    }, {threshold:.2});\r\n    els.forEach(e=>io.observe(e));\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-10b3755 e-flex e-con-boxed e-con e-parent\" data-id=\"10b3755\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-863f853 elementor-widget elementor-widget-spacer\" data-id=\"863f853\" 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8935236 e-con-full e-flex e-con e-parent\" data-id=\"8935236\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-473e2ae elementor-widget elementor-widget-html\" data-id=\"473e2ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SECCI\u00d3N: HERRAMIENTAS DE FORMACI\u00d3N (im\u00e1genes completas) -->\r\n<section class=\"sec-herramientas\" aria-labelledby=\"title-herramientas\">\r\n  <div class=\"herramientas-wrapper\">\r\n    <h2 id=\"title-herramientas\" class=\"herramientas-title\">HERRAMIENTAS DE FORMACI\u00d3N<\/h2>\r\n\r\n    <div class=\"herramientas-grid\">\r\n      <!-- Card 1 -->\r\n      <article class=\"herr-card\">\r\n        <figure class=\"herr-figure\">\r\n          <img src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Secciones-01-scaled.png\" alt=\"Herramienta 1\" loading=\"lazy\" decoding=\"async\">\r\n        <\/figure>\r\n        <div class=\"herr-actions\"><a class=\"herr-btn\" href=\"https:\/\/mododigital.net.gt\/?page_id=37\">Ver herramienta<\/a><\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 2 -->\r\n      <article class=\"herr-card\">\r\n        <figure class=\"herr-figure\">\r\n          <img src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Secciones-02-scaled.png\" alt=\"Herramienta 2\" loading=\"lazy\" decoding=\"async\">\r\n        <\/figure>\r\n        <div class=\"herr-actions\"><a class=\"herr-btn\" href=\"https:\/\/mododigital.net.gt\/?page_id=133\">Ver herramienta<\/a><\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 3 -->\r\n      <article class=\"herr-card\">\r\n        <figure class=\"herr-figure\">\r\n          <img src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Secciones-03-scaled.png\" alt=\"Herramienta 3\" loading=\"lazy\" decoding=\"async\">\r\n        <\/figure>\r\n        <div class=\"herr-actions\"><a class=\"herr-btn\" href=\"https:\/\/mododigital.net.gt\/?page_id=136\">Ver herramienta<\/a><\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 4 -->\r\n      <article class=\"herr-card\">\r\n        <figure class=\"herr-figure\">\r\n          <img src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Secciones-04-scaled.png\" alt=\"Herramienta 4\" loading=\"lazy\" decoding=\"async\">\r\n        <\/figure>\r\n        <div class=\"herr-actions\"><a class=\"herr-btn\" href=\"https:\/\/mododigital.net.gt\/?page_id=139\">Ver herramienta<\/a><\/div>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* Scope para evitar conflictos *\/\r\n  .sec-herramientas, .sec-herramientas * { box-sizing: border-box; }\r\n\r\n  :root{\r\n    \/* Colores institucionales *\/\r\n    --azul-osc:#0d47a1; --azul:#1976d2; --acento:#ffcc00; --blanco:#fff; --stroke:#e7edf5;\r\n    --container:min(1200px,94vw);\r\n    --gap:clamp(16px,2.2vw,28px);\r\n    --radio-card:18px;\r\n  }\r\n\r\n  .sec-herramientas{\r\n    width:100%;\r\n    background:#fff;\r\n    padding: clamp(28px, 6vw, 72px) 0;\r\n  }\r\n  .sec-herramientas .herramientas-wrapper{ width:var(--container); margin:0 auto; }\r\n\r\n  .sec-herramientas .herramientas-title{\r\n    margin:0 0 clamp(18px,2.2vw,28px) 0; text-align:center; font-weight:900;\r\n    color:var(--azul-osc); font-size:clamp(22px,3vw,34px);\r\n  }\r\n  .sec-herramientas .herramientas-title::after{\r\n    content:\"\"; display:block; width:190px; height:6px; margin:12px auto 0; border-radius:6px;\r\n    background:linear-gradient(90deg, var(--acento), #ffe27a);\r\n  }\r\n\r\n  .sec-herramientas .herramientas-grid{\r\n    display:grid; grid-template-columns:repeat(4,1fr);\r\n    gap:var(--gap); align-items:stretch;\r\n  }\r\n\r\n  .sec-herramientas .herr-card{\r\n    display:flex; flex-direction:column; min-width:0;\r\n    background:#fff; border:1px solid var(--stroke); border-radius:var(--radio-card);\r\n    overflow:hidden; box-shadow:0 6px 18px rgba(13,71,161,.08);\r\n    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;\r\n  }\r\n  .sec-herramientas .herr-card:hover{\r\n    transform:translateY(-6px);\r\n    box-shadow:0 18px 40px rgba(13,71,161,.16);\r\n    border-color:#cfe0fa;\r\n  }\r\n\r\n  \/* ==== IMAGENES COMPLETAS ==== *\/\r\n  \/* Desktop: marco consistente *\/\r\n  .sec-herramientas .herr-figure{\r\n    margin:0 !important;\r\n    aspect-ratio:4 \/ 3;                 \/* proporci\u00f3n visual en escritorio *\/\r\n    background:#fff;\r\n    padding: clamp(8px, 1.2vw, 12px);   \/* marco interior *\/\r\n    display:grid; place-items:center;\r\n  }\r\n  .sec-herramientas .herr-figure img{\r\n    max-width:100% !important;\r\n    max-height:100% !important;\r\n    width:auto !important;\r\n    height:auto !important;\r\n    object-fit: contain !important;     \/* \u2705 nunca se corta ni deforma *\/\r\n    display:block;\r\n    transition: transform .45s ease, filter .45s ease;\r\n  }\r\n  .sec-herramientas .herr-card:hover .herr-figure img{\r\n    transform:translateY(-2px) scale(1.02);\r\n    filter:saturate(1.05) contrast(1.03);\r\n  }\r\n\r\n  .sec-herramientas .herr-actions{\r\n    padding:14px; display:flex; justify-content:center;\r\n  }\r\n  .sec-herramientas .herr-btn{\r\n    display:inline-block; padding:10px 16px; border-radius:12px;\r\n    background:linear-gradient(180deg,#ffd95a,var(--acento));\r\n    color:var(--azul-osc); text-decoration:none; font-weight:800;\r\n    box-shadow:0 8px 20px rgba(255,204,0,.35);\r\n    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;\r\n  }\r\n  .sec-herramientas .herr-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 12px 28px rgba(255,204,0,.45); }\r\n\r\n  \/* ===== Responsive: quitamos proporci\u00f3n forzada para que la IMAGEN mande ===== *\/\r\n  @media (max-width:1024px){\r\n    .sec-herramientas .herramientas-grid{ grid-template-columns:repeat(2,1fr); }\r\n    .sec-herramientas .herr-figure{ aspect-ratio:auto; padding:10px; }\r\n  }\r\n  @media (max-width:640px){\r\n    .sec-herramientas .herramientas-grid{ grid-template-columns:1fr; }\r\n    .sec-herramientas .herr-figure{ aspect-ratio:auto; padding:10px; }\r\n  }\r\n\r\n  \/* En pantallas t\u00e1ctiles quitamos el \u201czoom\u201d hover para evitar saltos *\/\r\n  @media (pointer: coarse){\r\n    .sec-herramientas .herr-card:hover .herr-figure img{ transform:none; filter:none; }\r\n  }\r\n  \/* Fondo con textura para la secci\u00f3n (solo esto, lo dem\u00e1s queda igual) *\/\r\n.sec-herramientas{\r\n  background-color:#2b89bc; \/* color base similar *\/\r\n  background-image:url('https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Texturas-02.png');\r\n  background-size:cover;\r\n  background-position:center;\r\n  background-repeat:no-repeat;\r\n}\r\n\r\n<\/style>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c9cae1 e-con-full e-flex e-con e-parent\" data-id=\"0c9cae1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28d9fdb elementor-widget elementor-widget-html\" data-id=\"28d9fdb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SECCI\u00d3N: CONSULTAS ONLINE -->\r\n<section class=\"sec-consultas\" aria-labelledby=\"title-consultas\">\r\n  <div class=\"consultas-wrapper\">\r\n    <h2 id=\"title-consultas\" class=\"consultas-title\">HAZ TUS CONSULTAS ONLINE<\/h2>\r\n    <center>\r\n      <div class=\"consultas-grid\">\r\n        <!-- 1) ILUSTRACI\u00d3N IZQUIERDA -->\r\n        <figure class=\"col col-image\" aria-hidden=\"true\">\r\n          <img\r\n            src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/cropped-olivet-01-scaled-1.png\"\r\n            alt=\"Ilustraci\u00f3n consultas online\" loading=\"lazy\" decoding=\"async\">\r\n        <\/figure>\r\n\r\n        <!-- 2) TEXTO CENTRO -->\r\n        <div class=\"col col-text\">\r\n          <h3 class=\"headline\">\r\n            <span class=\"line-azul\">HAGAMOS UN INTERNET<\/span><br>\r\n            <span class=\"line-navy\">M\u00c1S SEGURO<\/span>\r\n          <\/h3>\r\n          <p class=\"subcopy\">\r\n            Si quieres resolver tus dudas sobre ciberdelitos este es tu espacio\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- 3) QR DERECHA -->\r\n<div class=\"col col-qr\">\r\n  <h4 class=\"qr-title\">\r\n    <a href=\"https:\/\/wa.link\/i8iz9q\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Chat de consejer\u00eda OLIVET en WhatsApp\">\r\n      Chat de consejer\u00eda <strong>OLIVET<\/strong>\r\n    <\/a>\r\n  <\/h4>\r\n  <hr class=\"qr-divider\" aria-hidden=\"true\">\r\n  <div class=\"qr-box\">\r\n    <a href=\"https:\/\/wa.link\/i8iz9q\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Chat de consejer\u00eda OLIVET en WhatsApp\">\r\n      <img\r\n        src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/whatssap.png\"\r\n        alt=\"C\u00f3digo QR del chat de consejer\u00eda OLIVET\" loading=\"lazy\" decoding=\"async\">\r\n    <\/a>\r\n  <\/div>\r\n<\/div>\r\n      <\/div>\r\n    <\/center>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* ===== Variables ===== *\/\r\n  :root{\r\n    --azul-claro:#29b6f6;\r\n    --azul-oscuro:#0d47a1;\r\n    --acento:#ffcc00;\r\n    --tinta:#0b1b2b;\r\n\r\n    --container: min(1200px, 94vw);\r\n    --gap: clamp(16px, 2vw, 32px);\r\n\r\n    --card-bg:#fff;\r\n    --card-shadow: 0 10px 30px rgba(0,0,0,.08);\r\n    --radius: 24px;\r\n  }\r\n\r\n  \/* ===== Secci\u00f3n (fondo blanco) ===== *\/\r\n  .sec-consultas{\r\n    background:#fff;\r\n    padding: clamp(28px, 6vw, 72px) 0;\r\n  }\r\n  .sec-consultas .consultas-wrapper{\r\n    width:var(--container);\r\n    margin:0 auto;\r\n    background: var(--card-bg);\r\n    border-radius: var(--radius);\r\n    box-shadow: var(--card-shadow);\r\n    padding: clamp(20px, 4vw, 40px);\r\n  }\r\n\r\n  .sec-consultas .consultas-title{\r\n    text-align:center;\r\n    margin:0 0 26px;\r\n    color:var(--azul-oscuro);\r\n    font-weight:900;\r\n    font-size: clamp(22px, 2.6vw, 30px);\r\n    text-wrap: balance;\r\n  }\r\n  .sec-consultas .consultas-title::after{\r\n    content:\"\";\r\n    display:block;\r\n    width:180px; height:6px; margin:12px auto 0; border-radius:6px;\r\n    background:linear-gradient(90deg,var(--acento),#ffe27a);\r\n  }\r\n\r\n  \/* ===== GRID con \u00e1reas (controla el orden por breakpoint) ===== *\/\r\n  .sec-consultas .consultas-grid{\r\n    display:grid;\r\n    grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.2fr) minmax(280px, 1fr);\r\n    grid-template-areas: \"image text qr\";\r\n    gap: var(--gap);\r\n    align-items: center;\r\n  }\r\n  .sec-consultas .col-image{ grid-area: image; }\r\n  .sec-consultas .col-text { grid-area: text;  }\r\n  .sec-consultas .col-qr   { grid-area: qr;    }\r\n\r\n  \/* ===== Tipograf\u00eda central ===== *\/\r\n  .sec-consultas .headline{\r\n    margin:0 0 8px;\r\n    line-height:1.08;\r\n    font-weight:900;\r\n    font-size: clamp(26px, 4vw, 54px);\r\n    text-wrap: balance;\r\n  }\r\n  .sec-consultas .line-azul{ color: var(--azul-claro); }\r\n  \/* Degradado bonito para \u201cM\u00c1S SEGURO\u201d *\/\r\n  .sec-consultas .line-navy{\r\n    background: linear-gradient(90deg, var(--azul-oscuro), #1976d2 60%, #29b6f6);\r\n    -webkit-background-clip: text; background-clip: text;\r\n    color: transparent;\r\n  }\r\n  .sec-consultas .subcopy{\r\n    margin-top: 10px;\r\n    font-size: clamp(14px, 1.4vw, 18px);\r\n    color:#3a4856;\r\n  }\r\n\r\n  \/* ===== Imagen izquierda ===== *\/\r\n  .sec-consultas .col-image{\r\n    display:grid; place-items:center;\r\n  }\r\n  .sec-consultas .col-image img{\r\n    width:100%;\r\n    max-width: 340px;\r\n    height:auto;\r\n    display:block;\r\n    border-radius: 18px;\r\n    box-shadow: 0 8px 24px rgba(13,71,161,.16);\r\n  }\r\n\r\n  \/* ===== QR derecha ===== *\/\r\n  .sec-consultas .qr-title{\r\n    margin:0 0 8px;\r\n    font-size: clamp(18px, 1.6vw, 22px);\r\n    font-weight: 800;\r\n    color: var(--tinta);\r\n    white-space: nowrap;   \/* 1 l\u00ednea en desktop *\/\r\n  }\r\n\r\n  \/* \u2705 NUEVO: Estilo del enlace dentro del t\u00edtulo *\/\r\n  .sec-consultas .qr-title a {\r\n    color: var(--tinta);\r\n    text-decoration: none;\r\n    transition: color 0.2s ease;\r\n  }\r\n\r\n  .sec-consultas .qr-title a:hover {\r\n    color: var(--azul-oscuro);\r\n    text-decoration: underline;\r\n  }\r\n\r\n  .sec-consultas .qr-divider{\r\n    border:none; border-top:2px solid #cfd8e3;\r\n    margin: 6px 0 14px;\r\n  }\r\n  .sec-consultas .qr-box{\r\n    display:grid; place-items:center;\r\n    background:#f7fafc;\r\n    border:2px dashed #cbd5e1;\r\n    border-radius:16px;\r\n    min-height: 240px;\r\n    padding:12px;\r\n  }\r\n  .sec-consultas .qr-box img{\r\n    width:min(100%, 280px);\r\n    height:auto;\r\n    display:block;\r\n  }\r\n\r\n  \/* ===== Responsive ===== *\/\r\n  @media (max-width: 1024px){\r\n    .sec-consultas .consultas-grid{\r\n      grid-template-columns: 1fr 1fr;\r\n      grid-template-areas:\r\n        \"image text\"\r\n        \"qr    qr\";\r\n      align-items: start;\r\n    }\r\n    .sec-consultas .qr-title{ white-space: normal; } \/* permite 2 l\u00edneas si hace falta *\/\r\n  }\r\n\r\n  @media (max-width: 680px){\r\n    .sec-consultas .consultas-grid{\r\n      grid-template-columns: 1fr;\r\n      grid-template-areas:\r\n        \"image\"\r\n        \"text\"\r\n        \"qr\";\r\n      gap: 18px;\r\n      text-align: center;\r\n    }\r\n    .sec-consultas .col-text{ margin-inline:auto; }\r\n    .sec-consultas .col-image img{ max-width: 220px; border-radius:14px; }\r\n    .sec-consultas .qr-box{ min-height: 200px; }\r\n  }\r\n\r\n  \/* M\u00e1s espacio entre las columnas\/filas del bloque de consultas *\/\r\n  .sec-consultas .consultas-grid{\r\n    gap: clamp(28px, 3.5vw, 56px);  \/* antes: clamp(16px, 2vw, 32px) *\/\r\n  }\r\n\r\n  \/* Ajuste de separaci\u00f3n en tablet *\/\r\n  @media (max-width: 1024px){\r\n    .sec-consultas .consultas-grid{\r\n      gap: clamp(24px, 4vw, 40px);\r\n    }\r\n  }\r\n\r\n  \/* Ajuste de separaci\u00f3n en m\u00f3vil *\/\r\n  @media (max-width: 680px){\r\n    .sec-consultas .consultas-grid{\r\n      gap: clamp(22px, 5vw, 32px);\r\n    }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-75c2705 e-flex e-con-boxed e-con e-parent\" data-id=\"75c2705\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-edd3c28 elementor-widget elementor-widget-html\" data-id=\"edd3c28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SECCI\u00d3N: CONOCE A LOS CIBERGUARDIANES (t\u00edtulo arriba, imagen abajo) -->\r\n<section class=\"sec-guard\" aria-labelledby=\"guard-title\">\r\n  <div class=\"guard-wrap\">\r\n    <header class=\"guard-header\">\r\n      <h2 id=\"guard-title\" class=\"guard-heading\">CONOCE A LOS CIBERGUARDIANES<\/h2>\r\n      <p class=\"guard-sub\">Tus aliados para mantenerte a salvo en la red.<\/p>\r\n      <span class=\"heading-underline\" aria-hidden=\"true\"><\/span>\r\n    <\/header>\r\n\r\n    <figure class=\"guard-figure\">\r\n      <img\r\n        src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Personajes-08-scaled.png\"\r\n        alt=\"Personajes Ciberguardianes\"\r\n        loading=\"lazy\" decoding=\"async\">\r\n      <span class=\"guard-glow\" aria-hidden=\"true\"><\/span>\r\n    <\/figure>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  :root{\r\n    --ink:#fff;\r\n    --accent:#ffcc00;\r\n    --container:min(1200px,94vw);\r\n    --pad:clamp(28px,6vw,72px);\r\n    --radius:28px;\r\n\r\n    \/* \ud83d\udc49 misma textura de fondo *\/\r\n    --texture:url('https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/Texturas-02.png');\r\n  }\r\n\r\n  \/* Banda full-bleed con textura + overlay azul para contraste *\/\r\n  .sec-guard{\r\n    width:100vw;\r\n    margin-inline:calc(50% - 50vw);\r\n    color:var(--ink);\r\n    position:relative;\r\n    overflow:hidden;\r\n    padding:var(--pad) 0;\r\n    background:\r\n      linear-gradient(0deg, rgba(13,71,161,.78), rgba(13,71,161,.78)),\r\n      var(--texture);\r\n    background-size:cover;\r\n    background-position:center;\r\n    background-repeat:no-repeat;\r\n  }\r\n  .sec-guard::after{\r\n    content:\"\"; position:absolute; inset:0; pointer-events:none;\r\n    background:\r\n      radial-gradient(1100px 480px at 85% -20%, rgba(255,255,255,.12), transparent 60%),\r\n      radial-gradient(800px 380px at -10% 110%, rgba(255,204,0,.10), transparent 60%);\r\n  }\r\n\r\n  .guard-wrap{ width:var(--container); margin:0 auto; display:grid; gap:clamp(18px,3vw,28px); }\r\n\r\n  \/* Cabecera centrada *\/\r\n  .guard-header{ text-align:center; }\r\n  .guard-heading{\r\n    margin:0;\r\n    font-weight:900;\r\n    letter-spacing:.4px;\r\n    line-height:1.08;\r\n    font-size:clamp(28px,4.6vw,64px);\r\n    text-wrap:balance;\r\n  }\r\n  .guard-sub{\r\n    margin:10px auto 0;\r\n    font-size:clamp(16px,1.6vw,20px);\r\n    opacity:.95;\r\n    max-width:60ch;\r\n  }\r\n  .heading-underline{\r\n    display:block;\r\n    width:220px; height:6px; margin:14px auto 0; border-radius:6px;\r\n    background:linear-gradient(90deg, var(--accent), #ffe27a);\r\n  }\r\n\r\n  \/* Imagen m\u00e1s grande, con marco blanco para resaltar sobre la textura *\/\r\n  .guard-figure{\r\n    margin:0;\r\n    display:grid; place-items:center;\r\n    position:relative;\r\n  }\r\n  .guard-figure img{\r\n    width:min(900px, 78vw);   \/* grande en desktop *\/\r\n    height:auto;\r\n    display:block;\r\n    background:#fff;\r\n    padding:12px;             \/* marco blanco *\/\r\n    border-radius:calc(var(--radius) + 8px);\r\n    box-shadow:0 22px 60px rgba(0,0,0,.28);\r\n    transition:transform .5s ease, filter .5s ease, box-shadow .5s ease;\r\n  }\r\n  .guard-figure:hover img{\r\n    transform:scale(1.02);\r\n    filter:saturate(1.06) contrast(1.04);\r\n    box-shadow:0 34px 90px rgba(0,0,0,.34);\r\n  }\r\n  .guard-glow{\r\n    position:absolute; inset:auto; width:86%; height:86%;\r\n    border-radius:40px;\r\n    background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);\r\n    filter:blur(42px); z-index:-1; pointer-events:none;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width:900px){\r\n    .guard-figure img{ width:min(820px, 92vw); } \/* casi todo el ancho en m\u00f3vil *\/\r\n  }\r\n\r\n  \/* Accesibilidad: menos movimiento *\/\r\n  @media (prefers-reduced-motion:reduce){\r\n    .guard-figure img{ transition:none !important; }\r\n  }\r\n<\/style>\r\n\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-47ac2ec e-flex e-con-boxed e-con e-parent\" data-id=\"47ac2ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-830cb0c elementor-widget elementor-widget-spacer\" data-id=\"830cb0c\" 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a4ccd20 e-flex e-con-boxed e-con e-parent\" data-id=\"a4ccd20\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b7e7fa elementor-widget elementor-widget-html\" data-id=\"4b7e7fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SECCI\u00d3N: LOGOS - Una Iniciativa auspiciada por: -->\r\n<section class=\"sec-logos\" aria-labelledby=\"logos-title\">\r\n  <div class=\"logos-wrap\">\r\n\r\n    <!-- SECCI\u00d3N: \"CREADO POR\" -->\r\n    <div class=\"created-by-section\">\r\n      <h3 class=\"created-by-text\">Creado por:<\/h3>\r\n      <div class=\"created-by-logo-placeholder\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/svet.png\"\r\n          alt=\"SVET - Secretar\u00eda contra la Violencia Sexual, Explotaci\u00f3n y Trata de Personas\"\r\n          loading=\"lazy\"\r\n        >\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- T\u00edtulo del carrusel -->\r\n    <h2 id=\"logos-title\" class=\"logos-title\">Una Iniciativa auspiciada por:<\/h2>\r\n\r\n    <!-- Carrusel de logos -->\r\n    <div class=\"logos-carousel\" role=\"region\" aria-label=\"Carrusel de logos\">\r\n      <button class=\"logos-nav prev\" aria-label=\"Anterior\" type=\"button\">&#10094;<\/button>\r\n\r\n      <div class=\"logos-track\" tabindex=\"0\">\r\n        <a class=\"logo-item\" href=\"#\">\r\n          <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/naciones-unidas.png\" alt=\"Naciones Unidas\">\r\n        <\/a>\r\n        <a class=\"logo-item\" href=\"#\">\r\n          <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/joint.png\" alt=\"Joint Initiative\">\r\n        <\/a>\r\n        <a class=\"logo-item\" href=\"#\">\r\n          <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/global.png\" alt=\"Global Partnership\">\r\n        <\/a>\r\n        <a class=\"logo-item\" href=\"#\">\r\n          <img decoding=\"async\" src=\"https:\/\/mododigital.net.gt\/wp-content\/uploads\/2025\/09\/UNICEF_Logo.png\" alt=\"UNICEF\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <button class=\"logos-nav next\" aria-label=\"Siguiente\" type=\"button\">&#10095;<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root {\r\n  --ink: #0b1b2b;\r\n  --accent: #ffcc00;\r\n  --wrap: max(280px, min(1200px, 94vw));\r\n  --gap: clamp(12px, 2vw, 20px);\r\n  --radius: 14px;\r\n  --logo-height: 120px;\r\n  --logo-width: 300px;\r\n}\r\n\r\n\/* ===== SECCI\u00d3N GENERAL ===== *\/\r\n.sec-logos {\r\n  width: 100%;\r\n  background: #fff;\r\n  padding: clamp(40px, 8vw, 80px) 0;\r\n}\r\n\r\n.logos-wrap {\r\n  width: var(--wrap);\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ===== SECCI\u00d3N \"CREADO POR\" ===== *\/\r\n.created-by-section {\r\n  text-align: center;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.created-by-text {\r\n  margin: 0;\r\n  color: var(--ink);\r\n  font-size: clamp(18px, 2.5vw, 22px);\r\n  font-weight: 700;\r\n  letter-spacing: 0.4px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.created-by-logo-placeholder {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 120px; \/* \ud83d\udd39 aumentado de 80px a 120px *\/\r\n  margin: 0 auto;\r\n}\r\n\r\n.created-by-logo-placeholder img {\r\n  max-height: 110px; \/* \ud83d\udd39 el logo ahora luce m\u00e1s grande *\/\r\n  width: auto;\r\n  object-fit: contain;\r\n  filter: brightness(1.05);\r\n  transition: transform 0.3s ease, filter 0.3s ease;\r\n}\r\n\r\n.created-by-logo-placeholder img:hover {\r\n  transform: scale(1.06);\r\n  filter: brightness(1.15);\r\n}\r\n\r\n\/* ===== T\u00cdTULO DEL CARRUSEL ===== *\/\r\n.logos-title {\r\n  margin: 0 0 clamp(14px, 2vw, 22px) 0;\r\n  text-align: center;\r\n  color: var(--ink);\r\n  font-weight: 900;\r\n  letter-spacing: 0.3px;\r\n  font-size: clamp(18px, 3vw, 26px);\r\n  position: relative;\r\n}\r\n\r\n.logos-title::after {\r\n  content: \"\";\r\n  display: block;\r\n  width: 180px;\r\n  height: 6px;\r\n  margin: 10px auto 0;\r\n  border-radius: 6px;\r\n  background: linear-gradient(90deg, var(--accent), #ffe27a);\r\n}\r\n\r\n\/* ===== CARRUSEL ===== *\/\r\n.logos-carousel {\r\n  position: relative;\r\n  display: grid;\r\n  align-items: center;\r\n}\r\n\r\n.logos-track {\r\n  display: flex;\r\n  gap: var(--gap);\r\n  overflow-x: auto;\r\n  scroll-snap-type: x mandatory;\r\n  -webkit-overflow-scrolling: touch;\r\n  padding: var(--gap);\r\n  scrollbar-width: none;\r\n}\r\n\r\n.logos-track::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.logo-item {\r\n  flex: 0 0 var(--logo-width);\r\n  scroll-snap-align: start;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #fff;\r\n  border: 1px solid #e8eef6;\r\n  border-radius: var(--radius);\r\n  box-shadow: 0 6px 18px rgba(13, 71, 161, 0.08);\r\n  height: var(--logo-height);\r\n  padding: 10px;\r\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n}\r\n\r\n.logo-item:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 14px 30px rgba(13, 71, 161, 0.18);\r\n}\r\n\r\n.logo-item img {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  object-fit: contain;\r\n  object-position: center;\r\n  transition: transform 0.25s ease;\r\n  filter: grayscale(100%);\r\n}\r\n\r\n.logo-item:hover img {\r\n  filter: grayscale(0%);\r\n  transform: scale(1.05);\r\n}\r\n\r\n\/* ===== NAVEGACI\u00d3N ===== *\/\r\n.logos-nav {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 42px;\r\n  height: 42px;\r\n  border: none;\r\n  border-radius: 50%;\r\n  background: #ffffffc9;\r\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\r\n  font-size: 20px;\r\n  line-height: 42px;\r\n  text-align: center;\r\n  cursor: pointer;\r\n  backdrop-filter: blur(4px);\r\n  transition: transform 0.2s ease, background 0.2s ease;\r\n  z-index: 2;\r\n}\r\n\r\n.logos-nav:hover {\r\n  transform: translateY(-50%) scale(1.06);\r\n  background: #fff;\r\n}\r\n\r\n.logos-nav.prev { left: 6px; }\r\n.logos-nav.next { right: 6px; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .logo-item {\r\n    flex: 0 0 calc((100% - var(--gap)) \/ 3);\r\n    max-width: calc((100% - var(--gap)) \/ 3);\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .logo-item {\r\n    flex: 0 0 calc((100% - var(--gap)) \/ 2);\r\n    max-width: calc((100% - var(--gap)) \/ 2);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const track = document.querySelector('.logos-track');\r\n  const prev = document.querySelector('.logos-nav.prev');\r\n  const next = document.querySelector('.logos-nav.next');\r\n  if (!track) return;\r\n\r\n  function step() {\r\n    const item = track.querySelector('.logo-item');\r\n    if (!item) return 0;\r\n    const rect = item.getBoundingClientRect();\r\n    const styles = getComputedStyle(track);\r\n    const gap = parseFloat(styles.gap) || 0;\r\n    return rect.width + gap;\r\n  }\r\n\r\n  function goNext() {\r\n    const s = step();\r\n    if (!s) return;\r\n    const atEnd = Math.ceil(track.scrollLeft + track.clientWidth + 1) >= track.scrollWidth;\r\n    track.scrollTo({ left: atEnd ? 0 : track.scrollLeft + s, behavior: 'smooth' });\r\n  }\r\n\r\n  function goPrev() {\r\n    const s = step();\r\n    if (!s) return;\r\n    const atStart = track.scrollLeft <= 0;\r\n    track.scrollTo({ left: atStart ? track.scrollWidth : track.scrollLeft - s, behavior: 'smooth' });\r\n  }\r\n\r\n  prev.addEventListener('click', goPrev);\r\n  next.addEventListener('click', goNext);\r\n\r\n  let timer = setInterval(goNext, 3000);\r\n  ['mouseenter', 'focusin'].forEach(ev => track.addEventListener(ev, () => clearInterval(timer)));\r\n  ['mouseleave', 'focusout'].forEach(ev => track.addEventListener(ev, () => timer = setInterval(goNext, 3000)));\r\n\r\n  track.addEventListener('keydown', (e) => {\r\n    if (e.key === 'ArrowRight') goNext();\r\n    if (e.key === 'ArrowLeft') goPrev();\r\n  });\r\n})();\r\n<\/script>\r\n\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>Hagamos un Internet m\u00e1s seguro para la ni\u00f1ez y adolescencia. Todos tenemos m\u00e1s de alg\u00fan usuario en cualquier red social, utilizamos aplicaciones de mensajer\u00eda instant\u00e1nea y pasamos tiempo jugando en l\u00ednea. Solo debemos saber cu\u00e1l es la manera adecuada para no exponernos a riesgos en internet. Conozcamos datos importantes obtenidos en Guatemala sobre c\u00f3mo nos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=80"}],"version-history":[{"count":319,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions\/869"}],"wp:attachment":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}