/**
 * =============================================================================
 * HC PROMEDICAL — Estilos responsivos personalizados
 * =============================================================================
 *
 * Propósito:
 *   Este archivo corrige y extiende el comportamiento responsivo del sitio,
 *   que fue construido con el CMS Duda/DudaMobile. Duda genera CSS de
 *   escritorio con min-width fijos (960px, 768px) que rompen el layout en
 *   dispositivos móviles, por lo que usamos !important con alta especificidad
 *   para anular esas reglas.
 *
 * Paleta de colores:
 *   Azul principal:  #072449
 *   Azul secundario: #0d3a6e
 *   Acento cian:     #68ccd1
 *   Blanco:          #ffffff
 *
 * Breakpoints:
 *   Desktop    →  > 1024px   (estilos nativos de Duda)
 *   Tablet     →  ≤ 1024px   @media (max-width: 1024px)
 *   Mobile     →  ≤  767px   @media (max-width:  767px)
 *   Pequeño    →  ≤  480px   @media (max-width:  480px)
 *   Landscape  →  alto ≤ 500px + orientación horizontal
 *
 * Por qué usamos !important:
 *   Duda inyecta estilos inline (style="width:960px") y carga CSS con
 *   alta especificidad (html body#dmRoot .dmInner { min-width: 960px }).
 *   La única forma de anularlos desde CSS externo es con !important
 *   combinado con selectores de igual o mayor especificidad.
 *
 * Tabla de contenido:
 *   1.  RESETS GLOBALES
 *   2.  COMPONENTE: MENÚ HAMBURGUESA
 *   3.  COMPONENTE: HERO PANTALLA COMPLETA (escritorio)
 *   4.  COMPONENTE: CARDS DE SERVICIOS (igual alto y separación uniforme)
 *   4.5 PÁGINA: EQUIPO HC — Columnas de imagen (mismo alto en desktop/tablet)
 *   5.  FRAMEWORK DUDA — Desbloqueo de min-width (≤ 1024px)
 *   6.  TABLET — Ajustes generales (≤ 1024px)
 *   7.  MOBILE — Desbloqueo de framework Duda (≤ 767px)
 *   8.  MOBILE — Overrides genéricos de grid y widgets (≤ 767px)
 *   9.  MOBILE — Slider de testimonios
 *   10.  MOBILE — Galerías, social, mapas, formularios
 *   11. MOBILE — Menú hamburguesa activado
 *   12. MOBILE — Tipografía escalada
 *   13. MOBILE — Overrides de CSS fijos del Home (Duda)
 *   14. MOBILE — Página: HOME (index.htm)
 *   15. MOBILE — Página: EQUIPO HC (equipo-hc.html)
 *   16. MOBILE — Página: DISCOVER / Capacitación
 *   17. MOBILE — Página: CONTÁCTENOS
 *   18. MOBILE — Página: EXPERIENCES / Servicios (tab widget)
 *   19. MOBILE — Blog: Listado de artículos
 *   20. MOBILE — Blog: Artículo individual
 *   21. MOBILE — Página: Aviso de privacidad
 *   22. MOBILE — Páginas interiores genéricas
 *   23. MOBILE — Footer
 *   24. MOBILE — Botón sticky de contacto
 *   25. MÓVIL PEQUEÑO — Ajustes adicionales (≤ 480px)
 *   26. LANDSCAPE — Fix orientación horizontal
 *   27. PRINT — Estilos de impresión
 *
 * =============================================================================
 */


/* =============================================================================
   1. RESETS GLOBALES
   Reglas base que aplican a todos los breakpoints.
   ============================================================================= */

/* Box-sizing universal: padding/border se incluyen dentro del width */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Las imágenes nunca desbordan su contenedor */
img {
    max-width: 100%;
    height: auto;
}


/* =============================================================================
   2. COMPONENTE: MENÚ HAMBURGUESA
   Botón de 3 líneas que aparece en móvil (generado dinámicamente por JS).
   La animación convierte las 3 líneas en una "X" al abrir el menú.
   ============================================================================= */

/* Botón oculto por defecto — se activa en el breakpoint mobile (sección 10) */
.mobile-menu-toggle {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    z-index: 10001; /* Por encima del overlay (10000) */
    position: relative;
    flex: 0 0 auto;
}

/* Las 3 líneas del ícono hamburguesa */
.mobile-menu-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #072449;
    margin: 5px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Estado activo: las líneas se vuelven blancas (sobre fondo azul del overlay) */
.mobile-menu-toggle.active span {
    background-color: #fff;
}

/* Animación línea 1: rota 45° para formar la barra superior de la "X" */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

/* Animación línea 2: se oculta (la "X" solo necesita 2 líneas) */
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

/* Animación línea 3: rota -45° para formar la barra inferior de la "X" */
.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* --- Overlay del menú móvil (pantalla completa) --- */
/* Inactivo: oculto y transparente */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 36, 73, 0.97); /* Azul corporativo semi-opaco */
    z-index: 10000;
    overflow-y: auto;
    padding: 80px 20px 30px; /* Espacio superior para el botón "X" */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Activo: flex centrado con fade-in */
.mobile-nav-overlay.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* Links de navegación dentro del overlay */
.mobile-nav-overlay a {
    display: block;
    color: #fff !important;
    text-decoration: none;
    font-size: 22px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
    max-width: 300px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s;
}

/* Efecto hover/tap en los links */
.mobile-nav-overlay a:hover,
.mobile-nav-overlay a:active {
    background-color: rgba(98, 137, 174, 0.3);
}

/* Selector de idioma al final del menú */
.mobile-nav-overlay .mobile-lang-switch {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Botones de idioma con bordes sutiles */
.mobile-nav-overlay .mobile-lang-switch a {
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    padding: 8px 20px;
    width: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}


/* =============================================================================
   3. COMPONENTE: HERO PANTALLA COMPLETA (escritorio)
   Sección hero de la home que ocupa el 100% del viewport.
   Selector de alta especificidad porque Duda compite con ID + class combinados.
   ============================================================================= */

/* El div hero ocupa 100vh y centra su contenido */
#dm .dmBody div.u_1265393572 {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 100px 50px !important;
    box-sizing: border-box !important;
}

/* Contenedor del título hero: 90% del ancho para dar margen lateral */
#dm .dmBody div.u_1265393572 div.u_1277865775 {
    width: 90% !important;
    max-width: 90% !important;
}

/* Título hero: clamp() asegura tamaño legible en cualquier pantalla grande */
#dm .dmBody div.u_1265393572 h1,
#dm .dmBody div.u_1265393572 h1 span {
    font-size: clamp(1.8rem, 3.8vw, 4rem) !important;
    line-height: 1.15 !important;
}


/* =============================================================================
   5. COMPONENTE: CARDS DE SERVICIOS (¿Cómo logramos mejorar hospitales?)
   Aplica en todos los breakpoints. Garantiza igual ancho, igual alto y
   separación uniforme entre las tres cards.
   ============================================================================= */

/* Contenedor de la fila de cards: flex con stretch para igualar altura */
#dm .dmBody .u_1515447083 > .dmRespColsWrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
    padding: 0 24px !important;
}

/* Columnas directas del flex container:
   anula width/margin/float del grid Foundation de Duda (large-4 = 33.333%)
   para que las tres cards sean exactamente del mismo ancho */
#dm .dmBody .u_1515447083 > .dmRespColsWrapper > .dmRespCol {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}


/* =============================================================================
   PÁGINA: EQUIPO HC — Columnas de imagen (mismo alto en desktop y tablet)
   Las dos filas imagen+texto (u_1384127097 y u_1088983038) tienen distintas
   cantidades de texto, lo que hace que las imágenes adyacentes queden a
   diferente altura. Forzamos un alto fijo igual en ambas.
   Las reglas mobile (sección 15, ≤767px) usan mayor especificidad y las
   sobrescriben correctamente con 250px.
   ============================================================================= */

#dm .dmBody div.u_1121005992,                     /* imagen "Nuestra experiencia" */
#dm .dmBody div.u_1396287772 {                    /* imagen "¿Cómo podemos ayudarte?" */
    height: 306px !important;
    min-height: 306px !important;
    background-size: cover !important;
    background-position: center !important;
}


/* =============================================================================
   6. FRAMEWORK DUDA — Desbloqueo de min-width (≤ 1024px)
   =============================================================================
   PROBLEMA: Duda fija min-width: 960px (o 768px) en sus contenedores
   principales, causando scroll horizontal en tablets y móviles.
   SOLUCIÓN: Anulamos esos min-width con alta especificidad + !important.
   Los selectores usan "html body#dmRoot" para ganar la batalla de cascada.
   ============================================================================= */
@media screen and (max-width: 1024px) {

    /* --- Contenedor interior principal --- */
    /* Vence: .dmInner { min-width: 768px !important } */
    /* Vence: .dmDesktopBody .dmInner { min-width: 960px } */
    html body#dmRoot .dmInner,
    html body#dmRoot #dm .dmInner,
    html body.dmDesktopBody .dmInner,
    html body.dmDesktopBody #dm .dmInner,
    html body#dmRoot #dmStyle_innerContainer.dmInner,
    html body#dmRoot #dmStyle_innerContainer,
    .dmInner,
    .dmDesktopBody .dmInner,
    #dmStyle_innerContainer.dmInner {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Contenedor exterior --- */
    html body#dmRoot .dmOuter,
    html body#dmRoot #dm .dmOuter,
    html body#dmRoot #dmStyle_outerContainer.dmOuter,
    html body#dmRoot #dmStyle_outerContainer,
    .dmOuter,
    #dmStyle_outerContainer.dmOuter {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Layout wrapper y body containers --- */
    html body#dmRoot .dmLayoutWrapper,
    html body#dmRoot .dmStandardDesktop,
    html body#dmRoot #iscrollBody,
    html body#dmRoot #site_content,
    html body#dmRoot .dmContent,
    html body#dmRoot .allWrapper,
    html body#dmRoot #dm_content,
    html body#dmRoot .dmPageBody,
    .dmLayoutWrapper,
    .dmStandardDesktop,
    #iscrollBody,
    #site_content,
    .dmContent,
    .allWrapper,
    #dm_content,
    .dmPageBody {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* --- Contenedores de header y footer --- */
    html body#dmRoot .dmHeaderContainer,
    html body#dmRoot #hcontainer,
    html body#dmRoot .dmHeaderResp,
    html body#dmRoot .dmHeaderStack,
    html body#dmRoot .dmFooterContainer,
    html body#dmRoot .dmFooterResp,
    .dmHeaderContainer,
    #hcontainer,
    .dmHeaderResp,
    .dmHeaderStack,
    .dmFooterContainer,
    .dmFooterResp {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Header sticky (Duda lo fija con reglas inline de alta especificidad) --- */
    html body#dmRoot #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
    html body#dmRoot #dm .hasStickyHeader .dmInner div#desktopHeaderBox,
    html:not(.ios-preview) #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
    #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
    #dm .hasStickyHeader .dmInner div#desktopHeaderBox {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* --- Raíz: html, body, #dm --- */
    html,
    body,
    body#dmRoot,
    #dm,
    .dmwr,
    .dm_wrapper {
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* --- Contenedores de plantilla (templates de Duda) --- */
    html body#dmRoot .dmHomeRespTmpl,
    html body#dmRoot .dmDefaultRespTmpl,
    html body#dmRoot .dmAboutusRespTmpl,
    html body#dmRoot .innerPageTmplBox,
    html body#dmRoot .dmRespRowsWrapper,
    .dmHomeRespTmpl,
    .dmDefaultRespTmpl,
    .dmAboutusRespTmpl,
    .innerPageTmplBox,
    .dmRespRowsWrapper {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Filas y columnas responsivas --- */
    html body#dmRoot .dmRespRow,
    .dmRespRow {
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    html body#dmRoot .dmRespCol,
    .dmRespCol {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body#dmRoot .dmRespColsWrapper,
    .dmRespColsWrapper {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* --- Widgets dentro de columnas (regla de dmLargeBody) --- */
    /* Duda agrega .dmLargeBody al body en pantallas grandes;
       este selector garantiza que incluso con esa clase los widgets sean fluidos */
    html body#dmRoot #dm .dmRespRow .dmRespCol > .dmWidget,
    html body.dmLargeBody #dm .dmRespRow .dmRespCol > .dmWidget,
    .dmLargeBody #dm .dmRespRow .dmRespCol > .dmWidget {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =============================================================================
   5. TABLET — Ajustes generales (≤ 1024px)
   Ajustes de layout para resoluciones entre 768px y 1024px.
   Aquí no apilamos columnas aún — solo reducimos tamaños y soltamos max-widths.
   ============================================================================= */
@media screen and (max-width: 1024px) {

    /* --- Grid: columnas fluidas --- */
    #dm .dmBody .dmRespCol,
    #dm .dmBody div[class*="dmRespCol"] {
        max-width: 100% !important;
    }

    /* --- Header: reducir padding --- */
    #dm .p_hfcontainer div.u_1571063569,
    #dm .dmBody div.u_1571063569 {
        padding: 10px 15px !important;
    }

    /* --- Navegación: fuente más pequeña para caber en tablet --- */
    #dm .p_hfcontainer .dmNavWrapper > li > a .navItemText,
    #dm .p_hfcontainer .dmNavWrapper > li > a .navText,
    #dm .dmBody .dmNavWrapper > li > a .navItemText,
    #dm .dmBody .dmNavWrapper > li > a .navText {
        font-size: 12px !important;
    }

    /* --- Filas: prevenir scroll horizontal --- */
    #dm .dmBody .dmRespRow {
        overflow-x: hidden !important;
    }

    /* --- Párrafos --- */
    #dm .dmBody .dmNewParagraph {
        max-width: 100% !important;
    }

    /* --- Imágenes --- */
    #dm .dmBody .imageWidget img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Galerías de fotos --- */
    #dm .dmBody .dmPhotoGallery,
    #dm .dmBody .dmPhotoGalleryResp {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --- Slider de imágenes --- */
    #dm .dmBody .dmImageSlider {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    #dm .dmBody .dmImageSlider .slides li {
        overflow: hidden !important;
    }

    #dm .dmBody .dmImageSlider .slides .slide-title {
        font-size: 14px !important;
        padding: 0 10px !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    /* --- Formularios --- */
    #dm .dmBody .dmform {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Footer: reducir padding de columnas --- */
    .dmFooterContainer .dmRespCol {
        padding: 10px 15px !important;
    }

    /* --- Blog: 2 columnas en tablet --- */
    #dm .dmBody .mainBlog.layout4 .postArticle {
        width: 48% !important;
        margin: 1% !important;
    }

    #dm .dmBody .mainBlog .blogImg {
        background-size: cover !important;
    }

    /* --- Widget de tabs (Experiences) --- */
    #dm .dmBody .tab-label {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    /* --- Secciones de 2 columnas --- */
    #dm .dmBody .dmRespCol.medium-6.large-6 {
        min-height: auto !important;
    }

    /* --- Galería del equipo: 3 columnas en tablet --- */
    #dm .dmBody .dmPhotoGalleryResp .gallery4inArow .photoGalleryThumbs {
        width: 33.33% !important;
    }

    /* --- Formulario de contacto: 2 columnas en tablet --- */
    #dm .dmBody .dmform .dmRespDesignCol.medium-6 {
        width: 50% !important;
    }
}


/* =============================================================================
   7. MOBILE — Desbloqueo de framework Duda (≤ 767px)
   =============================================================================
   REPETIMOS las reglas de desbloqueo de la sección 4, pero ahora con los
   selectores de mobile (dmMobileBody) que Duda activa en pantallas pequeñas.
   Este bloque es separado del de tablet porque Duda puede cambiar las clases
   del body en tiempo de ejecución (el JS lo corrige, pero el CSS lo respalda).
   ============================================================================= */
@media screen and (max-width: 767px) {

    /* --- Contenedores principales --- */
    html body#dmRoot .dmInner,
    html body#dmRoot #dm .dmInner,
    html body.dmDesktopBody .dmInner,
    html body.dmMobileBody .dmInner,
    .dmInner,
    .dmDesktopBody .dmInner,
    #dmStyle_innerContainer.dmInner,
    #dmStyle_innerContainer {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    html body#dmRoot .dmOuter,
    .dmOuter,
    #dmStyle_outerContainer.dmOuter,
    #dmStyle_outerContainer {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    html body#dmRoot .dmLayoutWrapper,
    .dmLayoutWrapper,
    .dmLayoutWrapper.standard-var,
    .dmLayoutWrapper.dmStandardDesktop,
    .dmStandardDesktop {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    html body#dmRoot #iscrollBody,
    html body#dmRoot #site_content,
    html body#dmRoot .dmBody,
    html body#dmRoot .dmPageBody,
    #iscrollBody,
    #site_content,
    #dm_content,
    .allWrapper,
    .dmContent,
    .dmBody,
    .dm-home-page,
    .dmPageBody {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Header y footer --- */
    html body#dmRoot .dmHeaderContainer,
    html body#dmRoot .dmFooterContainer,
    .dmHeaderContainer,
    #hcontainer,
    .dmHeaderResp,
    .dmHeaderStack,
    .dmFooterContainer,
    .dmFooterResp,
    .dmHeaderContent,
    .freeHeaderRow1 {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Header sticky --- */
    html body#dmRoot #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
    html:not(.ios-preview) #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
    #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
    #dm .hasStickyHeader .dmInner div#desktopHeaderBox {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* --- Widgets --- */
    html body#dmRoot #dm .dmRespRow .dmRespCol > .dmWidget,
    html body.dmLargeBody #dm .dmRespRow .dmRespCol > .dmWidget {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Elementos específicos del header (IDs de Duda) --- */
    /* Estos IDs pertenecen a la barra de encabezado del sitio HC Promedical */
    #dm .p_hfcontainer div.u_1680518714 {
        width: auto !important;
        max-width: 100% !important;
    }

    #dm .p_hfcontainer div.u_1800247147 {
        width: 100% !important;
    }

    #dm .p_hfcontainer div.u_1270803871 {
        width: auto !important;
    }

    /* --- Elementos específicos del footer --- */
    div.u_1617407184 {
        min-width: 0 !important;
        padding: 30px 15px !important;
    }

    div.u_1116005605 {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #dm .p_hfcontainer h5.u_1829786542 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px auto !important;
    }

    /* Textos del footer: anular widths fijos de Duda */
    h5.u_1454343106,
    h5.u_1484704786,
    h5.u_1829786542,
    div.u_1995519401,
    h5.u_1507225760 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    div.u_1685880241 {
        width: 100% !important;
        max-width: 100% !important;
    }

    h3.u_1039029074,
    h3.u_1062560445,
    h3.u_1867282989 {
        width: 100% !important;
        max-width: 100% !important;
    }


/* =============================================================================
   8. MOBILE — Overrides genéricos de grid y widgets (≤ 767px)
   Forzamos el stacking de todas las columnas y normalizamos widgets comunes.
   ============================================================================= */

    /* --- Columnas de la grilla: todas a 100% de ancho --- */
    /* Duda usa clases .large-N y .medium-N para definir anchos de columnas.
       En móvil queremos que todas sean full-width y se apilen verticalmente. */
    #dm .dmBody .dmRespCol.large-2,
    #dm .dmBody .dmRespCol.large-3,
    #dm .dmBody .dmRespCol.large-4,
    #dm .dmBody .dmRespCol.large-5,
    #dm .dmBody .dmRespCol.large-6,
    #dm .dmBody .dmRespCol.large-7,
    #dm .dmBody .dmRespCol.large-8,
    #dm .dmBody .dmRespCol.large-9,
    #dm .dmBody .dmRespCol.large-10,
    #dm .dmBody .dmRespCol.medium-2,
    #dm .dmBody .dmRespCol.medium-3,
    #dm .dmBody .dmRespCol.medium-4,
    #dm .dmBody .dmRespCol.medium-5,
    #dm .dmBody .dmRespCol.medium-6,
    #dm .dmBody .dmRespCol.medium-7,
    #dm .dmBody .dmRespCol.medium-8,
    #dm .dmBody .dmRespCol.medium-9,
    #dm .dmBody .dmRespCol.medium-10 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Wrappers de columnas: flexbox en columna para apilar */
    #dm .dmBody .dmRespColsWrapper {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
    }

    /* Filas: sin scroll horizontal */
    #dm .dmBody .dmRespRow {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* --- Párrafos --- */
    #dm .dmBody .dmNewParagraph {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --- Widgets de imagen --- */
    #dm .dmBody .imageWidget {
        width: 100% !important;
        max-width: 100% !important;
    }

    #dm .dmBody .imageWidget img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Widgets gráficos (SVG icons) --- */
    #dm .dmBody .graphicWidget {
        max-width: 80px !important;
        margin: 10px auto !important;
    }

    #dm .dmBody .graphicWidget svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Botones --- */
    #dm .dmBody .dmButtonLink,
    #dm .dmBody a.dmButtonLink,
    #dm .dmBody button.dmButtonLink {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #dm .dmBody .dmButtonLink .text,
    #dm .dmBody a.dmButtonLink .text {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.2 !important;
    }

    #dm .dmBody .dmButtonLink .iconBg {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- Divisores --- */
    #dm .dmBody .dmDividerWrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Espaciadores: reducir altura en móvil --- */
    #dm .dmBody .dmSpacer {
        height: auto !important;
        min-height: 10px !important;
        max-height: 30px !important;
    }

    /* --- Formularios --- */
    #dm .dmBody .dmform {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Inputs: font-size 16px evita el zoom automático de iOS al hacer focus */
    #dm .dmBody .dmform input[type="text"],
    #dm .dmBody .dmform input[type="email"],
    #dm .dmBody .dmform input[type="tel"],
    #dm .dmBody .dmform textarea,
    #dm .dmBody .dmform select {
        width: 100% !important;
        font-size: 16px !important;
    }

    /* Columnas de campos del formulario: de 2 columnas a 1 columna */
    #dm .dmBody .dmform .dmRespDesignCol,
    #dm .dmBody .dmform .dmRespDesignCol.medium-6,
    #dm .dmBody .dmform .dmRespDesignCol.large-6 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Botón submit centrado y ancho máximo 300px */
    #dm .dmBody .dmform .dmformsubmit {
        text-align: center !important;
    }

    #dm .dmBody .dmform .dmformsubmit input[type="submit"] {
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
    }


/* =============================================================================
   9. MOBILE — Slider de testimonios
   El slider de Duda usa imágenes de fondo transparentes con texto flotante.
   En móvil usamos un fondo azul degradado para que sea legible sin la imagen.
   ============================================================================= */

    #dm .dmBody .dmImageSlider,
    #dm .dmBody .dmImageSlider.flex-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    #dm .dmBody .dmImageSlider .flexslider {
        overflow: hidden !important;
    }

    /* Cada slide: fondo azul cuando no hay imagen */
    #dm .dmBody .dmImageSlider .slides li {
        position: relative !important;
        height: auto !important;
        min-height: 320px !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, #072449 0%, #0d3a6e 100%) !important;
    }

    /* Ocultar imagen transparente placeholder del slide */
    #dm .dmBody .dmImageSlider .slides li > img {
        display: none !important;
    }

    /* Color overlay semitransparente sobre el fondo */
    #dm .dmBody .dmImageSlider .color-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0.3 !important;
        z-index: 0 !important;
    }

    /* Contenido del slide: flex centrado, por encima del overlay */
    #dm .dmBody .dmImageSlider .slides .slide-inner {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        min-height: 320px !important;
        padding: 30px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #dm .dmBody .dmImageSlider .slides .text-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    /* Texto del testimonio: blanco, itálica, sin truncar */
    #dm .dmBody .dmImageSlider .slides .slide-title {
        font-size: 14px !important;
        line-height: 1.7 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: unset !important;
        display: block !important;
        max-height: none !important;
        -webkit-line-clamp: unset !important;
        color: #fff !important;
        font-style: italic !important;
    }

    /* Nombre del autor del testimonio */
    #dm .dmBody .dmImageSlider .slides .slide-text {
        font-size: 13px !important;
        overflow: hidden !important;
        white-space: normal !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin-top: 10px !important;
        font-weight: 600 !important;
    }

    /* Botón invisible del slide: ocultar */
    #dm .dmBody .dmImageSlider .slide-button-invisible {
        display: none !important;
    }

    /* Flechas de navegación del slider */
    #dm .dmBody .dmImageSlider .flex-direction-nav a {
        width: 30px !important;
        height: 30px !important;
        opacity: 0.7 !important;
    }

    #dm .dmBody .dmImageSlider .flex-direction-nav a:before {
        font-size: 18px !important;
        color: #fff !important;
    }


/* =============================================================================
   10. MOBILE — Galerías, redes sociales, mapas, links
   ============================================================================= */

    /* Galerías: 2 columnas en móvil (default) */
    #dm .dmBody .dmPhotoGallery,
    #dm .dmBody .dmPhotoGalleryResp {
        width: 100% !important;
        max-width: 100% !important;
    }

    #dm .dmBody .gallery4inArow .photoGalleryThumbs {
        width: 50% !important;
    }

    /* Social hub: centrado */
    #dm .dmBody .dmSocialHub {
        text-align: center !important;
    }

    #dm .dmBody .socialHubIcon {
        margin: 5px !important;
    }

    /* Mapa embebido: altura fija adecuada para móvil */
    #dm .dmBody .dmMap {
        width: 100% !important;
        height: 250px !important;
    }

    /* Widget multilingüe */
    #dm .dmBody .multilingualWidget {
        width: auto !important;
        margin: 10px auto 0 !important;
    }

    /* Menús de links */
    #dm .dmBody .dmLinksMenu {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Prevención de scroll horizontal (global) --- */
    body,
    html,
    #dm,
    .dmwr,
    .dm_wrapper,
    .dmOuter,
    .dmInner,
    .dmLayoutWrapper,
    .dmPageBody,
    .dmContent,
    .allWrapper,
    .dmHomeRespTmpl,
    .dmDefaultRespTmpl,
    .dmAboutusRespTmpl,
    .innerPageTmplBox,
    .dmRespRowsWrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }


/* =============================================================================
   10. MOBILE — Menú hamburguesa activado
   Mostramos el botón hamburguesa y ocultamos la navegación de escritorio.
   ============================================================================= */

    /* Mostrar botón hamburguesa */
    .mobile-menu-toggle {
        display: block !important;
    }

    /* Ocultar navegación y elementos extra del header en desktop */
    #dm .p_hfcontainer .dmLinksMenu,
    #dm .p_hfcontainer .desktopNavWrapper,
    #dm .p_hfcontainer .u_1800247147,
    #dm .p_hfcontainer .u_1780181932,
    #dm .p_hfcontainer .u_1419566773,
    .dmHeaderContent .dmLinksMenu,
    .dmHeaderContent .desktopNavWrapper,
    .dmHeaderContent .u_1780181932,
    .dmHeaderContent .u_1419566773 {
        display: none !important;
    }

    /* Layout del header: logo a la izquierda, hamburguesa a la derecha */
    .dmHeaderContainer .dmRespColsWrapper,
    .dmHeaderResp .dmRespColsWrapper,
    .dmHeaderContent .dmRespColsWrapper,
    #dm .p_hfcontainer .dmHeaderContent .dmRespColsWrapper,
    #dm .p_hfcontainer .freeHeaderRow1 .dmRespColsWrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding: 12px 20px !important;
    }

    /* Columna del logo: automática, sin crecer demasiado */
    #dm .p_hfcontainer .u_1188728890,
    .dmHeaderContent .u_1188728890 {
        width: auto !important;
        max-width: 60% !important;
        flex: 0 0 auto !important;
    }

    #dm .p_hfcontainer .u_1188728890 .imageWidget,
    .dmHeaderContent .u_1188728890 .imageWidget {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Logo: altura máxima para que no sea enorme en móvil */
    #dm .p_hfcontainer .u_1188728890 .imageWidget img,
    .dmHeaderContent .u_1188728890 .imageWidget img {
        max-height: 65px !important;
        width: auto !important;
        max-width: 180px !important;
    }

    /* Override del width fijo del widget logo en el header */
    #dm .p_hfcontainer div.u_1680518714 {
        width: auto !important;
        max-width: 180px !important;
    }

    /* Padding del row del header */
    #dm .p_hfcontainer .u_1571063569,
    .dmHeaderContent.u_1571063569 {
        padding: 10px 15px !important;
        min-height: 0 !important;
    }


/* =============================================================================
   11. MOBILE — Tipografía escalada
   Los tamaños de fuente del desktop (85px, 80px, etc.) son ilegibles en móvil.
   Duda los aplica con clases .font-size-N y .m-font-size-N.
   ============================================================================= */

    /* Clase .hide-for-small de Duda: anular ocultamiento (mostramos todo) */
    #dm .dmBody .hide-for-small {
        display: block !important;
    }

    /* Clases de tamaño móvil que Duda define (pero no activa correctamente) */
    .m-font-size-50 { font-size: 28px !important; }
    .m-font-size-38 { font-size: 24px !important; }
    .m-font-size-36 { font-size: 22px !important; }
    .m-font-size-30 { font-size: 20px !important; }
    .m-font-size-28 { font-size: 18px !important; }
    .m-font-size-25 { font-size: 18px !important; }
    .m-font-size-17 { font-size: 15px !important; }
    .m-font-size-16 { font-size: 14px !important; }
    .m-font-size-14 { font-size: 13px !important; }
    .m-font-size-13 { font-size: 12px !important; }
    .m-font-size-8  { font-size: 8px  !important; }

    /* Título hero: tamaño fijo 30px en móvil */
    #dm .dmBody .u_1277865775 h1,
    #dm .dmBody .u_1277865775 h1 span.font-size-80,
    #dm .dmBody .u_1277865775 h1 span.m-font-size-50,
    #dm .dmBody .u_1277865775 h1 span.font-size-85 {
        font-size: 30px !important;
        line-height: 1.25 !important;
        text-shadow: rgba(0, 0, 0, 0.5) -2px 2px 10px !important;
    }

    /* Reducción escalonada de fuentes desktop → móvil */
    .font-size-85, .size-85, .size-85 > font { font-size: 26px !important; }
    .font-size-80, .size-80, .size-80 > font { font-size: 24px !important; }
    .font-size-60, .size-60, .size-60 > font { font-size: 22px !important; }
    .font-size-40, .size-40, .size-40 > font { font-size: 20px !important; }
    .font-size-36, .size-36, .size-36 > font { font-size: 19px !important; }
    .font-size-35, .size-35, .size-35 > font { font-size: 19px !important; }
    .font-size-28, .size-28, .size-28 > font { font-size: 17px !important; }
    .font-size-26, .size-26, .size-26 > font { font-size: 16px !important; }
    .font-size-25, .size-25, .size-25 > font { font-size: 16px !important; }
    .font-size-24, .size-24, .size-24 > font { font-size: 15px !important; }
    .font-size-20, .size-20, .size-20 > font { font-size: 15px !important; }
    .font-size-18, .size-18, .size-18 > font { font-size: 14px !important; }

    /* Todo el texto: evitar desbordamiento con word-wrap */
    #dm .dmBody h1, #dm .dmBody h2, #dm .dmBody h3,
    #dm .dmBody h4, #dm .dmBody h5, #dm .dmBody h6,
    #dm .dmBody p, #dm .dmBody span, #dm .dmBody div.dmNewParagraph {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }


/* =============================================================================
   12. MOBILE — index.htm | Organizado por sección visual
   ============================================================================= */

    /* ── HERO ─────────────────────────────────────────────────────────────────
       Pantalla de bienvenida a pantalla completa con parallax y botón CTA.      */
    #dm .dmBody .u_1676530856 { display: none !important; }               /* barra logos (solo desktop) */
    #dm .dmBody .u_1051186724 { display: none !important; }               /* nav secundaria hero (solo desktop) */

    #dm .dmBody div.u_1265393572 {                                        /* sección hero */
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 60px 20px !important;
        background-attachment: scroll !important;                         /* iOS no soporta fixed */
    }

    *#dm *.dmBody div.u_1277865775 { width: 100% !important; max-width: 100% !important; } /* bloque título */
    *#dm *.dmBody div.u_1628801418 { width: 100% !important; max-width: 100% !important; } /* subtítulo */
    *#dm *.dmBody h1.u_1579645427  { width: 100% !important; max-width: 100% !important; } /* h1 */
    *#dm *.dmBody h1.u_1133065121  { width: 100% !important; max-width: 100% !important; } /* h1 */
    *#dm *.dmBody h1.u_1353813068  { width: 100% !important; max-width: 100% !important; } /* h1 */
    *#dm *.dmBody a.u_1964749483   { width: auto !important; max-width: 100% !important; } /* botón CTA */

    #dm .dmBody .u_1277865775 h1,
    #dm .dmBody .u_1277865775 h1 span.font-size-80,
    #dm .dmBody .u_1277865775 h1 span.m-font-size-50,
    #dm .dmBody .u_1277865775 h1 span.font-size-85 {
        font-size: 30px !important;
        line-height: 1.25 !important;
        text-shadow: rgba(0, 0, 0, 0.5) -2px 2px 10px !important;
    }


    /* ── ¿QUÉ HACEMOS? ────────────────────────────────────────────────────────
       Sección con ícono central y descripción breve del negocio.                */
    #dm .dmBody div.u_1454083402 { padding: 40px 15px !important; }


    /* ── SERVICIOS ────────────────────────────────────────────────────────────
       Tres cards apiladas: Mantenimiento, Consultoría, Oxígeno.                 */
    #dm .dmBody div.u_1267104717 {                                        /* contenedor de la sección */
        padding: 30px 15px !important;
        background-attachment: scroll !important;
    }

    *#dm *.dmBody div.u_1870166286 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1659315345 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1574500582 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1236927843 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1666604412 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1568290092 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1891729351 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1901527490 { width: 100% !important; max-width: 100% !important; }

    #dm .dmBody div.u_1515447083 .dmRespColsWrapper {                     /* fila de cards */
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    #dm .dmBody div.u_1707738567,                                         /* card Mantenimiento */
    #dm .dmBody div.u_1022194192,                                         /* card Consultoría */
    #dm .dmBody div.u_1658109338 {                                        /* card Oxígeno */
        padding: 30px 20px !important;
        margin: 0 !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        border-radius: 12px !important;
    }

    #dm .dmBody div.u_1261686430,                                         /* ícono card 1 */
    #dm .dmBody div.u_1748137899,                                         /* ícono card 2 */
    #dm .dmBody div.u_1529401966 {                                        /* ícono card 3 */
        width: 70px !important;
        height: 70px !important;
        max-width: none !important;
        margin: 0 auto 15px !important;
    }

    #dm .dmBody div.u_1261686430 svg,
    #dm .dmBody div.u_1748137899 svg,
    #dm .dmBody div.u_1529401966 svg { width: 100% !important; height: 100% !important; }

    *#dm *.dmBody a.u_1720973098 { width: auto !important; max-width: 100% !important; } /* botón servicio 1 */
    *#dm *.dmBody a.u_1232270546 { width: auto !important; max-width: 100% !important; } /* botón servicio 2 */
    *#dm *.dmBody a.u_1624651796 { width: auto !important; max-width: 100% !important; } /* botón servicio 3 */
    *#dm *.dmBody a.u_1100386930 { width: auto !important; max-width: 100% !important; } /* botón extra */
    *#dm *.dmBody a.u_1459500836 { width: auto !important; max-width: 100% !important; } /* botón extra */
    *#dm *.dmBody a.u_1601710382 { width: auto !important; max-width: 100% !important; } /* botón extra */


    /* ── GALERÍA ──────────────────────────────────────────────────────────────
       Grid de imágenes de proyectos hospitalarios.                              */
    *#dm *.dmBody div.u_1319654285 { width: 100% !important; max-width: 100% !important; }

    #dm .dmBody div.u_1875463488 { padding: 20px 10px !important; }      /* contenedor galería */
    #dm .dmBody .u_1319654285 { display: block !important; }             /* Duda la oculta con hide-for-medium */


    /* ── ESTADÍSTICAS ─────────────────────────────────────────────────────────
       Tres cifras clave: retorno de inversión, ahorro, suministro 24/7.         */
    *#dm *.dmBody div.u_1623727588 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1636345532 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1472527089 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1083300486 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1609364686 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1411689119 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1940388877 { width: 100% !important; max-width: 100% !important; } /* descripción stat 1 */
    *#dm *.dmBody div.u_1282218524 { width: 100% !important; max-width: 100% !important; } /* descripción stat 2 */
    *#dm *.dmBody div.u_1180725448 { width: 100% !important; max-width: 100% !important; } /* descripción stat 3 */

    #dm .dmBody div.u_1200141485 { padding: 30px 15px !important; }      /* sección estadísticas */

    #dm .dmBody div.u_1588318528 .dmRespColsWrapper {                     /* fila de cifras */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    #dm .dmBody div.u_1588318528 .dmRespCol {
        width: 100% !important;
        padding: 10px 15px !important;
        text-align: center !important;
    }

    #dm .dmBody div.u_1940388877,
    #dm .dmBody div.u_1282218524,
    #dm .dmBody div.u_1180725448 { overflow: visible !important; }       /* evitar texto cortado */

    #dm .dmBody div.u_1940388877 p,
    #dm .dmBody div.u_1282218524 p,
    #dm .dmBody div.u_1180725448 p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }


    /* ── CTA ──────────────────────────────────────────────────────────────────
       Banner intermedio con imagen y llamada a la acción.                       */
    *#dm *.dmBody div.u_1204363519 { width: auto !important; max-width: 150px !important; } /* imagen decorativa */
    *#dm *.dmBody div.u_1755351472 { width: auto !important; max-width: 280px !important; } /* imagen CTA */

    #dm .dmBody div.u_1963354568 { padding: 30px 15px !important; }      /* sección CTA */
    #dm .dmBody div.u_1755351472 { max-width: 280px !important; }


    /* ── TESTIMONIOS ──────────────────────────────────────────────────────────
       Slider de citas de clientes con fondo parallax.                           */
    *#dm *.dmBody div.u_1814579910 { width: 100% !important; max-width: 100% !important; } /* slider widget */
    *#dm *.dmBody div.u_1053428613 { width: 50px !important; }                             /* ícono comillas */

    #dm .dmBody div.u_1624816370 {                                        /* sección testimonios */
        padding: 40px 15px !important;
        background-attachment: scroll !important;
    }

    #dm .dmBody div.u_1053428613 {                                        /* ícono comillas */
        width: 50px !important;
        height: 50px !important;
        max-width: none !important;
        margin: 0 auto 10px !important;
    }


    /* ── CERTIFICACIONES ──────────────────────────────────────────────────────
       Galería de logos de certificaciones y normas (ISO, etc.).                 */
    *#dm *.dmBody div.u_1656575161 { width: 100% !important; max-width: 100% !important; }
    *#dm *.dmBody div.u_1242225059 { width: 100% !important; max-width: 100% !important; } /* galería logos */
    *#dm *.dmBody div.u_1493786868 { width: 80px !important; max-width: none !important; } /* badge certificación */
    *#dm *.dmBody h2.u_1373837870  { width: 100% !important; max-width: 100% !important; } /* título sección */
    *#dm *.dmBody div.u_1440648730 { width: 100% !important; max-width: 100% !important; }

    #dm .dmBody div.u_1893622662 {                                        /* sección certificaciones */
        padding: 25px 15px !important;
        background-attachment: scroll !important;
    }

    #dm .dmBody div.u_1493786868 { width: 80px !important; max-width: none !important; }

    #dm .dmBody .u_1242225059 .gallery4inArow .photoGalleryThumbs {
        width: 33.333% !important;                                        /* 3 columnas en móvil */
    }


    /* ── CONTACTO ─────────────────────────────────────────────────────────────
       Formulario de contacto con fondo y columna espaciadora oculta.            */
    *#dm *.dmBody div.u_1863688793 { width: 100% !important; max-width: 100% !important; } /* form widget */
    *#dm *.dmBody div.u_1423960304 { width: 100% !important; max-width: 100% !important; } /* columna form */
    *#dm *.dmBody div.u_1632917616 { width: 100% !important; max-width: 100% !important; }

    #dm .dmBody div.u_1112479837 {                                        /* sección contacto */
        padding: 40px 15px 15px !important;
        background-position: center top !important;
    }

    #dm .dmBody div.u_1065238126 { display: none !important; }           /* columna espaciadora (ocultar) */


/* =============================================================================
   14. MOBILE — Página: EQUIPO HC (equipo-hc.html)
   Layout alternado: imagen de fondo (izquierda desktop) + texto (derecha).
   En móvil: imagen arriba (order: 1), texto abajo (order: 2).
   ============================================================================= */

    /* ── HERO ─────────────────────────────────────────────────────────────────
       Banner de bienvenida de la página con fondo parallax.                    */
    #dm .dmBody div.u_1020242766 {                                        /* sección hero */
        padding: 60px 20px !important;
        background-attachment: scroll !important;
    }


    /* ── SECCIONES IMAGEN + TEXTO ─────────────────────────────────────────────
       Dos bloques alternados: imagen de fondo a un lado, texto al otro.
       En móvil se apilan: imagen arriba, texto abajo.                          */

    /* Filas contenedoras — deben ser block para que el flex interno funcione */
    #dm .dmBody .u_1384127097.dmRespRow,                                  /* fila bloque 1 */
    #dm .dmBody .u_1088983038.dmRespRow {                                 /* fila bloque 2 */
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        overflow: visible !important;
    }

    /* Wrapper de columnas: flex vertical para apilar imagen y texto */
    #dm .dmBody .u_1384127097 .dmRespColsWrapper,
    #dm .dmBody .u_1088983038 .dmRespColsWrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Columnas de imagen (primeras en el DOM): aparecen primero visualmente */
    #dm .dmBody .u_1121005992.dmSectionNoParallax[data-gallery-bg],       /* imagen bloque 1 */
    #dm .dmBody .u_1396287772.dmSectionNoParallax[data-gallery-bg] {      /* imagen bloque 2 */
        order: 1 !important;
        min-height: 250px !important;
        height: 250px !important;
        width: 100% !important;
        display: block !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin-bottom: 20px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* Altura mínima cuando NO tiene data-gallery-bg todavía */
    #dm .dmBody .u_1121005992[data-gallery-bg],
    #dm .dmBody .u_1396287772[data-gallery-bg] {
        min-height: 250px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Fallback CSS si JS falla al leer data-gallery-bg */
    #dm .dmBody .u_1121005992.dmSectionNoParallax {
        background-image: url('https://lirp.cdn-website.com/0070e392/dms3rep/multi/opt/pexels-marcelo-dias-2379944-1920w.jpg') !important;
    }
    #dm .dmBody .u_1396287772.dmSectionNoParallax {
        background-image: url('https://lirp.cdn-website.com/md/unsplash/dms3rep/multi/opt/photo-1502120492606-fba13cc63721-1920w.jpg') !important;
    }

    /* Espaciadores internos que dan altura a la columna imagen */
    #dm .dmBody .u_1121005992 .u_1864691751,
    #dm .dmBody .u_1396287772 .u_1590842263 {
        min-height: 250px !important;
        height: 250px !important;
        display: block !important;
        width: 100% !important;
    }

    /* Columnas de texto: aparecen después de la imagen */
    #dm .dmBody .u_1005246877,                                            /* texto bloque 1 */
    #dm .dmBody .u_1890706108 {                                           /* texto bloque 2 */
        order: 2 !important;
        padding: 0 15px 20px 15px !important;
        width: 100% !important;
    }

    /* Columnas de texto: padding genérico cuando no llevan data-gallery-bg */
    #dm .dmBody .u_1121005992,
    #dm .dmBody .u_1005246877,
    #dm .dmBody .u_1396287772,
    #dm .dmBody .u_1890706108 {
        text-align: center !important;
        padding: 20px 15px !important;
    }

    /* Títulos de cada bloque */
    #dm .dmBody .u_1503770160,
    #dm .dmBody h3[id="1568650862"] {
        font-size: 24px !important;
        font-weight: bold !important;
        margin-bottom: 15px !important;
        text-align: left !important;
    }

    /* Párrafos de descripción */
    #dm .dmBody .u_1933469417,
    #dm .dmBody .u_1569994394 {
        line-height: 1.7 !important;
        text-align: justify !important;
        margin-bottom: 15px !important;
    }


    /* ── CONFIANZA ─────────────────────────────────────────────────────────────
       Sección con íconos o texto de razones de confianza / propuesta de valor. */
    #dm .dmBody div.u_1390041924 {                                        /* sección confianza */
        padding: 30px 15px !important;
    }


/* =============================================================================
   15. MOBILE — Página: DISCOVER / Capacitación (DISCOVER.html)
   Página de capacitaciones con hero + secciones alternadas de 2 columnas.
   ============================================================================= */

    /* ── HERO ─────────────────────────────────────────────────────────────────
       Banner con título de la sección de capacitación.                         */
    #dm .dmBody div.u_1735382108 {                                        /* sección hero */
        padding: 60px 20px !important;
        background-attachment: scroll !important;
    }


    /* ── CONTENIDO ────────────────────────────────────────────────────────────
       Bloques alternados: texto + imagen de fondo (o icono) por capacitación.  */

    /* Secciones con 2 columnas: cada bloque de capacitación */
    #dm .dmBody div.u_1234740349,                                         /* bloque capacitación 1 */
    #dm .dmBody div.u_1457749527 {                                        /* bloque capacitación 2 */
        padding: 20px 15px !important;
    }

    /* Columnas espaciadoras de desktop: ocultar en móvil */
    #dm .dmBody .u_1090128029,                                            /* espaciador bloque 1 */
    #dm .dmBody .u_1399151663 {                                           /* espaciador bloque 2 */
        display: none !important;
    }

    /* Columnas de contenido: centradas en móvil */
    #dm .dmBody .u_1173032811,                                            /* contenido bloque 1 */
    #dm .dmBody .u_1996678325 {                                           /* contenido bloque 2 */
        text-align: center !important;
        padding: 20px 15px !important;
    }


/* =============================================================================
   16. MOBILE — Página: CONTÁCTENOS (contáctenos.html)
   Hero + sección de info/formulario lado a lado + mapa embebido.
   ============================================================================= */

    /* ── HERO ─────────────────────────────────────────────────────────────────
       Banner de la página de contacto.                                         */
    #dm .dmBody div.u_1869744900 {                                        /* sección hero */
        padding: 60px 20px !important;
        background-attachment: scroll !important;
    }


    /* ── INFO + FORMULARIO ────────────────────────────────────────────────────
       Dos columnas en desktop: datos de contacto a la izq., formulario a la der.
       En móvil: se apilan verticalmente.                                       */
    #dm .dmBody .u_1083601351 {                                           /* columna info de contacto */
        text-align: center !important;
        padding: 20px 15px !important;
    }

    #dm .dmBody .u_1215709734 {                                           /* columna formulario */
        padding: 20px 15px !important;
    }


    /* ── MAPA ─────────────────────────────────────────────────────────────────
       Sección con mapa embebido de ubicación.                                  */
    #dm .dmBody .u_1416522416,                                            /* columna izq. del mapa */
    #dm .dmBody .u_1231936649 {                                           /* columna der. del mapa */
        padding: 15px !important;
    }


/* =============================================================================
   17. MOBILE — Página: EXPERIENCES / Servicios (experiences.html)
   Widget de tabs personalizado con imagen + descripción + botón.
   En móvil: tabs apilados verticalmente, imagen arriba del texto.
   ============================================================================= */

    /* Contenedor del widget de tabs */
    #dm .dmBody .widget-7b2ba5,
    #dm .dmBody .dmCustomWidget[data-widget-id="7b2ba547771b4d4db17e3e2b9f0abd0c"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Navegación de tabs: vertical en vez de horizontal */
    #dm .dmBody .widget-7b2ba5 .nav,
    #dm .dmBody .widget-7b2ba5 .nav.desktop {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Etiquetas de tab: ancho completo como botones */
    #dm .dmBody .widget-7b2ba5 .tab-label {
        width: 100% !important;
        text-align: center !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 14px 15px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

    /* Tab activo: borde izquierdo cian como indicador visual */
    #dm .dmBody .widget-7b2ba5 .tab-label.active {
        background-color: rgba(104, 204, 209, 0.1) !important;
        border-left: 3px solid #68ccd1 !important;
    }

    /* Cada panel de tab: oculto por defecto */
    #dm .dmBody .widget-7b2ba5 .tab.layout-a {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Solo el tab activo visible */
    #dm .dmBody .widget-7b2ba5 .tab.layout-a.active {
        display: flex !important;
    }

    /* Contenedor de imagen: arriba del texto (order: 1) */
    #dm .dmBody .widget-7b2ba5 .image-container.layout-a {
        width: 100% !important;
        max-width: 100% !important;
        height: 250px !important;
        margin: 0 0 20px 0 !important;
        order: 1 !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 8px !important;
    }

    #dm .dmBody .widget-7b2ba5 .image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Espacio decorativo entre tabs: ocultar en móvil */
    #dm .dmBody .widget-7b2ba5 .tab-space {
        display: none !important;
    }

    /* Contenedor de texto: debajo de la imagen (order: 2) */
    #dm .dmBody .widget-7b2ba5 .tab-text-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        order: 2 !important;
    }

    #dm .dmBody .widget-7b2ba5 .tab-description {
        width: 100% !important;
        text-align: left !important;
    }

    /* Título de la descripción */
    #dm .dmBody .widget-7b2ba5 .desc-title {
        font-size: 20px !important;
        font-weight: bold !important;
        margin-bottom: 12px !important;
        color: #072449 !important;
    }

    /* Párrafos de la descripción */
    #dm .dmBody .widget-7b2ba5 .tab-description p {
        line-height: 1.7 !important;
        margin-bottom: 10px !important;
        text-align: left !important;
    }

    /* Contenedor del botón CTA */
    #dm .dmBody .widget-7b2ba5 .btn-container {
        width: 100% !important;
        text-align: center !important;
        margin-top: 15px !important;
    }

    #dm .dmBody .widget-7b2ba5 .btn-container .button-class {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 30px !important;
        min-width: 140px !important;
        text-align: center !important;
    }

    #dm .dmBody .widget-7b2ba5 .btn-container .button-class .text {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.2 !important;
    }

    /* Galería de fotos de servicios: 1 columna */
    #dm .dmBody .dmPhotoGallery .photoGalleryThumbs {
        width: 100% !important;
    }

    /* Secciones alternadas con fondo de imagen */
    #dm .dmBody .dmSectionNoParallax[data-gallery-bg] {
        min-height: 200px !important;
        background-size: cover !important;
        background-position: center !important;
    }


/* =============================================================================
   18. MOBILE — Blog: Listado de artículos (blog.html)
   ============================================================================= */

    /* Grid del blog: de 2 columnas a 1 columna */
    #dm .dmBody .mainBlog.layout4 .postArticle {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        float: none !important;
    }

    #dm .dmBody .mainBlog.layout4 {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Cards de posts: padding compacto */
    #dm .dmBody .postArticle .postTextContainer {
        padding: 12px !important;
    }

    /* Imagen de la card: altura fija con cover */
    #dm .dmBody .postArticle .blogImg {
        height: 200px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Título del post */
    #dm .dmBody .postArticle .postTitle {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* Extracto del post */
    #dm .dmBody .postArticle .postBody {
        font-size: 14px !important;
    }

    /* Buscador del blog */
    #dm .dmBody .dmBlogSearch {
        width: 100% !important;
        max-width: 100% !important;
    }

    #dm .dmBody .dmBlogSearchInput {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 16px !important; /* Evita zoom en iOS */
    }

    /* Lista de posts */
    #dm .dmBody .dmBlogPostList {
        padding: 0 10px !important;
    }

    #dm .dmBody .dmBlogPostList .dmBlogPostEntry {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
    }


/* =============================================================================
   19. MOBILE — Blog: Artículo individual
   ============================================================================= */

    /* Layout del artículo: columnas en vertical */
    #dm .dmBody .blog-post-row .dmRespColsWrapper,
    #dm .dmBody .postPageExtRoot .dmRespColsWrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    #dm .dmBody .blog-post-row .dmRespCol,
    #dm .dmBody .postPageExtRoot .dmRespCol {
        width: 100% !important;
        padding: 0 15px !important;
    }

    /* Imagen del artículo: full-width arriba del contenido */
    #dm .dmBody .blog-post-row .imageWidget,
    #dm .dmBody .postPageExtRoot .imageWidget {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        float: none !important;
        display: block !important;
    }

    #dm .dmBody .blog-post-row .imageWidget img,
    #dm .dmBody .postPageExtRoot .imageWidget img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        display: block !important;
        float: none !important;
    }

    /* Texto del artículo: margen y padding limpios */
    #dm .dmBody .blog-post-row .dmNewParagraph,
    #dm .dmBody .postPageExtRoot .dmNewParagraph {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }

    #dm .dmBody .blog-post-row .dmNewParagraph div,
    #dm .dmBody .postPageExtRoot .dmNewParagraph div {
        text-align: left !important;
        line-height: 1.7 !important;
    }

    /* Banner hero del artículo */
    #dm .dmBody .u_1325247579,
    #dm .dmBody [data-blog-template="bind-bg-img"] {
        min-height: 200px !important;
        padding: 40px 20px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Título del artículo en el banner */
    #dm .dmBody .u_1325247579 h3,
    #dm .dmBody [data-blog-template="bind-title"] {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    /* Navegación anterior/siguiente */
    #dm .dmBody .blog-post-row ~ .dmRespRow a[data-blog-post-alias] {
        float: none !important;
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        margin: 5px 0 !important;
    }

    /* Cuerpo del post: márgenes y padding correctos */
    #dm .dmBody .dmBlogPostBody,
    #dm .dmBody .dmBlogPostBody .dmNewParagraph {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Imágenes dentro del cuerpo del post */
    #dm .dmBody .dmBlogPostBody img,
    #dm .dmBody .postBodyContent img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Navegación (siguiente/anterior) */
    #dm .dmBody .dmBlogPostNavigation a,
    #dm .dmBody .postNavigation a {
        float: none !important;
        display: block !important;
        text-align: center !important;
        margin: 5px 0 !important;
    }

    /* Botones para compartir */
    #dm .dmBody .dmSocialShare {
        text-align: center !important;
    }

    /* Posts relacionados: 1 columna */
    #dm .dmBody .dmBlogRelated .postArticle,
    #dm .dmBody .related-posts .postArticle {
        width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
    }


/* =============================================================================
   20. MOBILE — Página: Aviso de privacidad
   Solo necesita word-wrap para texto largo sin espacios.
   ============================================================================= */

    #dm .dmBody .dmNewParagraph p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }


/* =============================================================================
   21. MOBILE — Páginas interiores genéricas
   Reglas compartidas por todas las páginas que no son la home.
   ============================================================================= */

    /* Banners hero de páginas interiores */
    #dm .dmBody .dmRespRow.fullBleedMode .dmRespCol {
        padding: 20px 15px !important;
    }

    /* Background-attachment: scroll en iOS (fixed no es compatible con Safari móvil) */
    #dm .dmBody .dmSectionNoParallax,
    #dm .dmBody .dmSectionParallaxNew,
    .dmSectionParallex {
        background-attachment: scroll !important;
    }

    /* Padding estándar para columnas de contenido interior */
    #dm .dmBody .dmHomeRespTmpl > .dmRespRow > .dmRespColsWrapper > .dmRespCol,
    #dm .dmBody .dmDefaultRespTmpl > .innerPageTmplBox > .dmRespRow > .dmRespColsWrapper > .dmRespCol,
    #dm .dmBody .dmAboutusRespTmpl > .innerPageTmplBox > .dmRespRow > .dmRespColsWrapper > .dmRespCol {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


/* =============================================================================
   22. MOBILE — Footer
   ============================================================================= */

    /* Columnas del footer apiladas verticalmente */
    .dmFooterContainer .dmRespRow .dmRespColsWrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    .dmFooterContainer .dmRespCol {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 15px !important;
    }

    /* Padding del contenedor principal del footer */
    #dm .dmBody div.u_1617407184 {
        padding: 20px 15px !important;
    }

    /* Logo en el footer: tamaño moderado */
    .dmFooterContainer .u_1116005605 img {
        max-width: 120px !important;
    }

    /* Textos del footer: centrados */
    .dmFooterContainer h5 {
        text-align: center !important;
    }

    .dmFooterContainer h5 div {
        text-align: center !important;
    }

    /* Barra inferior del footer */
    #dm .dmBody .u_1196580976 {
        padding: 10px 15px !important;
    }


/* =============================================================================
   23. MOBILE — Botón sticky de contacto
   Botón flotante que Duda coloca como widget fijo en esquina de la pantalla.
   ============================================================================= */

    #dm .sticky-widgets-container-global .dmButtonLink {
        font-size: 12px !important;
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #dm .sticky-widgets-container-global .dmButtonLink .text {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.2 !important;
    }

    #dm .sticky-widgets-container-global .dmButtonLink .iconBg {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

} /* fin @media (max-width: 767px) */


/* =============================================================================
   24. MÓVIL PEQUEÑO — Ajustes adicionales (≤ 480px)
   Para teléfonos con pantallas menores a 480px de ancho (ej: iPhone SE).
   ============================================================================= */
@media screen and (max-width: 480px) {

    /* Fuentes aún más pequeñas */
    .font-size-85, .size-85, .size-85 > font { font-size: 24px !important; }
    .font-size-80, .size-80, .size-80 > font { font-size: 22px !important; }
    .font-size-60, .size-60, .size-60 > font { font-size: 20px !important; }
    .font-size-40, .size-40, .size-40 > font { font-size: 18px !important; }
    .font-size-36, .size-36, .size-36 > font { font-size: 18px !important; }
    .font-size-35, .size-35, .size-35 > font { font-size: 18px !important; }
    .font-size-28, .size-28, .size-28 > font { font-size: 16px !important; }
    .m-font-size-50 { font-size: 22px !important; }
    .m-font-size-38 { font-size: 20px !important; }
    .m-font-size-36 { font-size: 18px !important; }

    /* Logo del header: ligeramente más pequeño */
    #dm .p_hfcontainer .u_1188728890 .imageWidget img,
    .dmHeaderContent .u_1188728890 .imageWidget img {
        max-height: 55px !important;
        max-width: 150px !important;
    }

    /* Título hero en pantallas muy pequeñas */
    #dm .dmBody .u_1277865775 h1,
    #dm .dmBody .u_1277865775 h1 span {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    /* Padding reducido del hero */
    #dm .dmBody div.u_1265393572 {
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 40px 12px !important;
    }

    /* Galerías: 1 columna en pantallas muy pequeñas */
    #dm .dmBody .gallery4inArow .photoGalleryThumbs {
        width: 100% !important;
    }

    /* Logos de certificaciones: 2 columnas (en móvil normal son 3) */
    #dm .dmBody .u_1242225059 .gallery4inArow .photoGalleryThumbs {
        width: 50% !important;
    }

    /* Secciones: padding aún más compacto */
    #dm .dmBody div.u_1963354568 { padding: 20px 10px !important; }
    #dm .dmBody div.u_1624816370 { padding: 30px 10px !important; }
    #dm .dmBody div.u_1267104717 { padding: 20px 10px !important; }

    /* Footer */
    #dm .dmBody div.u_1617407184 { padding: 15px 10px !important; }

    /* Formulario de contacto */
    #dm .dmBody div.u_1423960304 { padding: 15px 10px !important; }

    /* Botones: tamaño mínimo 160px para táctil */
    #dm .dmBody .dmButtonLink {
        width: auto !important;
        min-width: 160px !important;
        max-width: 100% !important;
        padding: 10px 20px !important;
    }

    /* Texto del slider aún más compacto */
    #dm .dmBody .dmImageSlider .slides .slide-title {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    #dm .dmBody .dmImageSlider .slides .slide-inner {
        padding: 25px 15px !important;
    }

    /* CTA imagen */
    #dm .dmBody div.u_1755351472 { max-width: 220px !important; }

    /* Imágenes de blog card */
    #dm .dmBody .postArticle .blogImg { height: 160px !important; }

    /* Labels de tabs: compactos */
    #dm .dmBody .tab-label {
        font-size: 13px !important;
        padding: 10px 8px !important;
    }

    /* Banners de páginas interiores */
    #dm .dmBody div.u_1020242766 { padding: 40px 15px !important; }
    #dm .dmBody div.u_1735382108 { padding: 40px 15px !important; }
    #dm .dmBody div.u_1869744900 { padding: 40px 15px !important; }

    /* Columnas de imagen del equipo: reducir altura */
    #dm .dmBody .u_1121005992[data-gallery-bg],
    #dm .dmBody .u_1396287772[data-gallery-bg] {
        min-height: 180px !important;
    }
}


/* =============================================================================
   25. LANDSCAPE — Fix orientación horizontal en móvil
   Cuando el teléfono está horizontal y el alto es menor a 500px,
   reducimos el hero y el menú para que quepan en pantalla.
   ============================================================================= */
@media screen and (max-height: 500px) and (orientation: landscape) {

    /* Hero: sigue siendo 100vh pero con menos padding */
    #dm .dmBody div.u_1265393572 {
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 30px 20px !important;
    }

    /* Overlay del menú: menos padding superior para aprovechar el espacio */
    .mobile-nav-overlay {
        padding: 60px 20px 20px;
    }

    /* Links del menú: texto más pequeño */
    .mobile-nav-overlay a {
        font-size: 18px;
        padding: 10px 20px;
    }
}


/* =============================================================================
   26. PRINT — Estilos de impresión
   Al imprimir, ocultamos elementos de navegación e interfaz interactiva.
   ============================================================================= */
@media print {
    .mobile-menu-toggle,
    .mobile-nav-overlay,
    .sticky-widgets-container-global {
        display: none !important;
    }
}