/* Arreglos para el menú móvil offcanvas */

/* Prevenir scroll horizontal en el contenedor principal */
.offcanvas__info {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
    touch-action: pan-y; /* Permite solo scroll vertical en táctil */
}

/* Asegurar que el wrapper no se expanda más allá del contenedor */
.offcanvas__wrapper {
    max-width: 100%;
    overflow: visible; /* Cambiar a visible para permitir el scroll del padre */
}

/* Forzar word-wrap en todo el contenido del offcanvas */
.offcanvas__content {
    overflow: visible; /* Cambiar a visible para permitir el scroll del padre */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Aplicar word-wrap específico al texto descriptivo */
.offcanvas__content .text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Aplicar word-wrap a los elementos de contacto */
.offcanvas__contact ul li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Asegurar que los enlaces y texto dentro de los items no se desborden */
.offcanvas__contact-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    flex: 1;
    min-width: 0; /* Importante para flex items */
}

.offcanvas__contact-text a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    display: inline-block;
    max-width: 100%;
}

/* Asegurar que la dirección no cause overflow */
.offcanvas__contact ul li.d-flex {
    flex-wrap: wrap;
    align-items: flex-start !important;
}

/* Mantener el ícono en su lugar */
.offcanvas__contact-icon {
    flex-shrink: 0;
    min-width: 40px;
}

/* Ajustar el contenedor del logo para que no cause overflow */
.offcanvas__logo {
    max-width: 100%;
    overflow: hidden;
}

.offcanvas__logo a {
    display: block;
    max-width: 100%;
}

.offcanvas__logo a img {
    max-width: 100%;
    height: auto;
}

/* Arreglos para la imagen de actividades en la página About - Responsive Mobile */

/* Contenedor principal de la imagen */
.about-activities-wrapper.style-2 .activities-image-items {
    max-width: 100%;
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 30px;
}

/* La imagen principal debe ajustarse al contenedor */
.about-activities-wrapper.style-2 .activities-image-items > img {
    max-width: 100%;
    height: auto;
    width: 100%;
    display: block;
}

/* Ajustes responsive para móviles */
@media (max-width: 991px) {
    .about-activities-wrapper.style-2 .activities-image-items {
        margin-right: 0 !important;
        padding: 0 15px;
        max-width: 100%;
    }
    
    .about-activities-wrapper.style-2 .activities-image-items > img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {
    .about-activities-wrapper.style-2 .activities-image-items {
        padding: 0;
        margin-bottom: 40px;
    }
    
    .about-activities-wrapper.style-2 .activities-image-items .radius-shape,
    .about-activities-wrapper.style-2 .activities-image-items .circle-shape {
        display: none !important;
    }
}

/* Asegurar que el contenedor de la sección no tenga overflow */
.about-activities-section-2 .container {
    overflow-x: hidden;
}

/* Ajustar el contenedor de la columna */
.about-activities-wrapper.style-2 .row > .col-lg-6 {
    max-width: 100%;
    overflow: hidden;
}

/* Arreglar posición del marco de nube en las fotos del equipo */
/* Hacer que el enlace dentro de .team-image sea clicable en toda el área */
.team-items .team-image > a {
    display: block;
    position: relative;
    z-index: 2;
}

.team-items .team-image > a img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: block;
}

.team-items .team-image .shape-img {
    pointer-events: none;
    z-index: 1;
}

/* Arreglar tamaño de imágenes en la sección de noticias del home */
/* Cuando news-image es un enlace, necesita comportarse como un bloque */
.news-wrapper .news-single-items a.news-image {
    display: block !important;
    padding: 20px 20px 0 20px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.news-wrapper .news-single-items a.news-image img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease;
}

.news-wrapper .news-single-items a.news-image:hover img {
    transform: scale(1.05);
}

/* Para las noticias pequeñas en el lado derecho */
.news-wrapper .news-right-items a.news-thumb {
    display: block !important;
    width: 200px !important;
    height: 150px !important;
    flex-shrink: 0 !important;
    overflow: hidden;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .news-wrapper .news-right-items a.news-thumb {
        width: 100% !important;
        height: 200px !important;
    }
}

.news-wrapper .news-right-items a.news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease;
}

.news-wrapper .news-right-items a.news-thumb:hover img {
    transform: scale(1.05);
}


/* ============================================
   Wave / section-shape dividers — zoom responsive
   ============================================
   All full-width wave images are inside a container that has
   `position:absolute; left:0` but no `right:0` or explicit
   width. The browser therefore sizes the container to its
   content (the image's intrinsic pixels), so at any zoom
   level other than 100 % the wave shrinks toward the left.

   Fix:
     • Add `right:0` so the absolutely-positioned container
       always spans the full width of its positioned ancestor.
     • Ensure the <img> fills that container with `width:100%`.
     • `overflow:hidden` prevents the image bleeding outside
       the container when aspect-ratio rounding causes a 1-2 px
       overshoot.

   Covered elements (sitewide):
     .top-shape        — wave at the top of program/pricing/
                         feature/team/events sections
     .bottom-shape     — wave at the bottom of hero/about/
                         program sections
     .header-top-shape — decorative wave behind the header bar
     .footer-top-shape — wave at the top of the footer
     .f-bottom-shape   — wave at the bottom of the footer
   ============================================ */

/* ── Uniquely-named wave containers (safe to target globally) ── */
.header-top-shape,
.footer-top-shape,
.f-bottom-shape {
    right: 0;
    overflow: hidden;
}
.header-top-shape img,
.footer-top-shape img,
.f-bottom-shape img {
    display: block;
    width: 100%;
    height: auto;
}