@media only screen and (max-width: 991px) {

    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100%;
    }

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

    table {
        max-width: 100%;
    }

    .row-custom-width {
        max-width: 100%;
    }

    /* Margen lateral de toda la web en movil y tablet. Es el unico sitio donde
       se toca: el resto de contenedores van a 0 para que no se sumen. */
    .container-fluid.px-5 {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }

    .zona_interna,
    .zona_interna_trans {
        width: 100%;
    }

    /* principal.css, en su bloque de max-width:600px, le pone a este bloque un
       fondo con la foto Cabecera_quienes-Somos.jpg. Aparece detras del texto
       en cualquier pagina que use #titulo (el buscador, entre otras) y no
       aporta nada. */
    #internacional_mapa #titulo {
        background: none !important;
        padding-left: 0;
    }

    /* El modulo de cifras del submenu lateral (+20 años, +2.000
       organizaciones, Reconocimiento) no se muestra en movil ni en tablet: ese
       submenu ya queda debajo del contenido y alarga mucho la pagina. */
    .mod-experiencia {
        display: none !important;
    }

    /* "Estamos aquí para ayudarte a avanzar" del submenu lateral. La clase se
       llama .texto-derecha y trae text-align: right, que tiene sentido en la
       columna de la derecha del escritorio; apilado en movil queda descolgado.
       Tambien se recorta el margen de 77px de arriba, que viene en un style=""
       en linea. */
    #bloque_derecha .texto-derecha,
    .texto-derecha {
        text-align: left;
        margin: 20px 0 24px 0 !important;
    }

    /* El bloque que lo envuelve lleva padding: 2% 6% en un style="" en linea,
       que es la sangria que quedaba a la izquierda del titulo. */
    #bloque_derecha>.margen_2:has(> .texto-derecha) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Esta imagen lleva un alto fijo de 300px con object-fit: cover, pensado
       para una franja ancha. En movil recortaba los lados y se comia el texto
       (MANAGER / LEAD / LEAD AUDITOR). Aqui se ve completa: el alto lo marca
       su proporcion. */
    #img-cert-personas {
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
    }

    /* principal.css, en su bloque de max-width:600px, le pone al mapa
       width:96% con padding-left:2% y padding-right:4%. Yo solo anulaba el de
       la derecha, asi que quedaba un 2% de mas por la izquierda y el contenido
       de TODAS las paginas se veia descentrado. Se anulan los dos. */
    #internacional_mapa {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #bloque_derecha {
        float: none;
        width: 100%;
        margin-top: 30px;
    }

    #internacional_sedes {
        float: none;
        width: 100%;
    }

    /* Si el panel de sedes pasa a ocupar todo el ancho, la columna de texto
       que tiene al lado (col-md-7 / col-lg-8) tiene que hacer lo mismo. Si no,
       el panel baja debajo pero el texto se queda en su 58% y la mitad derecha
       de la pantalla se ve vacia. */
    .row:has(> #internacional_sedes) > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-right: 0;
    }

    #cabecerainterior {
        height: auto !important;
        min-height: 0 !important;
    }

    #cabecerainterior.cabecera-home {
        /* Aire debajo del texto para que se luzca la parte de abajo de la foto */
        padding-bottom: 175px;
        background-image: url('../img/cabecera-movil.jpg') !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        /* Anclada abajo: se ve la parte inferior de la foto y lo que sobra se
           recorta por arriba. */
        background-position: center bottom !important;
    }


    /* ---- Fondo de la cabecera de las paginas interiores ---------------
       principal.css declara estas clases (.cabecera-seccion-N, .imageN,
       .cabecera-web...) DENTRO de un @media (min-width: 601px), asi que en
       movil vertical la cabecera se quedaba sin foto. Se vuelven a declarar
       aqui, sin ese tope. */
    .cabecera-seccion-1 { background: url('../img/cabeceras/cabecera-seccion-1.png') no-repeat top center; background-size: cover; }
    .cabecera-seccion-2 { background: url('../img/cabeceras/cabecera-seccion-2.png') no-repeat top center; background-size: cover; }
    .cabecera-seccion-3 { background: url('../img/cabeceras/cabecera-seccion-3.png') no-repeat top center; background-size: cover; }
    .cabecera-seccion-4 { background: url('../img/cabeceras/cabecera-seccion-4.png') no-repeat top center; background-size: cover; }
    .cabecera-seccion-5 { background: url('../img/cabeceras/cabecera-seccion-5.png') no-repeat top center; background-size: cover; }
    .cabecera-seccion-6 { background: url('../img/cabeceras/cabecera-seccion-6.png') no-repeat top center; background-size: cover; }
    .cabecera-secciones { background: url('../img/cabecera-secciones.png') no-repeat top center; background-size: cover; }
    .cabecera-web       { background: url('../img/cabecera-web.jpg') no-repeat top center; background-size: cover; }
    .cabecera_web_1     { background: url('../img/cabecera_web_1.jpg') no-repeat top center; background-size: cover; }
    .image1 { background-image: url('../img/cab_wca1.png'); }
    .image2 { background-image: url('../img/cab_wca2.png'); }
    .image3 { background-image: url('../img/cab_wca3.png'); }
    .image4 { background-image: url('../img/cab_wca4.png'); }
    .image5 { background-image: url('../img/cab_wca5.png'); }
    .image6 { background-image: url('../img/cab_wca6.png'); }
    .image7 { background-image: url('../img/cab_wca_flag.png'); }

    /* Comun a todas: ancladas abajo, para que se vea la parte inferior de la
       foto y el recorte se lo lleve la de arriba (igual que la portada). */
    #cabecerainterior:not(.cabecera-home) {
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-size: cover !important;
        min-height: 150px !important;
        /* Este padding no es solo estetico: el ultimo <p> de la cabecera
           ("STAREGISTER") tiene el margen inferior por defecto y, al no haber
           padding ni borde abajo, ese margen se escapaba del bloque (colapso
           de margenes) y aparecia como una franja gris entre la foto y el
           menu. Con padding-bottom el margen se queda dentro. */
        padding-bottom: 18px;
    }

    #textos_cabecera,
    #textos_cabecera_no_home {
        width: auto;
        margin: 0;
        padding: 22px 18px 0 18px;
    }


    #textos_cabecera img {
        max-width: 380px;
        width: 100% !important;
    }

    #texto_agencia {
        font-size: 1.6em;
        margin-top: 12px;
        color: #F4B433;
        font-weight: bold;
        line-height: 1.15;
    }

    #texto_cabecera_home {
        font-size: 1.15em;
        line-height: 1.35;
    }

    #subtexto_cabecera_home {
        font-size: 0.95em;
        line-height: 1.45;
    }


    #subtexto_cabecera_home br {
        display: none;
    }

    /* Igual que #texto_agencia: el blanco y la negrita estan en principal.css
       dentro de un @media (min-width: 601px), asi que en movil vertical estos
       dos titulos se quedaban sin color sobre la foto de la cabecera. */
    #texto_cabecera {
        font-size: 2.1em;
        line-height: 1.2;
        margin-top: 20px;
        color: #fff;
        font-weight: bold;
    }

    #subtitulo_cabecera {
        font-size: 1.5em;
        line-height: 1.2;
        margin: 0;
        color: #fff;
        font-weight: bold;
    }

    .presentacion {
        display: none !important;
    }


    .presentacion {
        margin-top: 14px !important;
        background: none !important;
    }

    #circleBar .modulo_100 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 14px;
    }


    #circleBar .modulo_30,
    #circleBar .salto_movil {
        width: 31% !important;
        max-width: 31%;
        flex: 0 0 31%;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #circleBar .round .valor {
        margin-top: 0;
        font-size: 115%;
    }

    #circleBar span {
        font-size: 72%;
    }


    #circleBar .round {
        margin: 0 auto;
    }

    .circlebar-btn-wrap {
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        padding-top: 14px;
    }

    #cssmenu.align-center>ul {
        font-size: 13px;
        text-align: left;
    }

    #cssmenu.align-center>ul>li {
        display: block;
        width: 100%;
        text-align: left;
        margin: 0;
    }

    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li {
        padding-left: 0;
    }

    #cssmenu #menu-button {
        padding-left: 20px;
        padding-right: 20px;
    }

    #cssmenu>ul>li>a {
        font-size: 14px;
        letter-spacing: 0.03em;
        padding: 14px 20px;
        text-align: left;
    }


    #cssmenu ul ul li a {
        font-size: 13px;
        padding: 12px 20px 12px 34px;
    }

    #cssmenu ul ul ul li a {
        padding-left: 48px;
    }

    #blanco_superior_new {
        height: auto !important;
        padding: 10px 14px !important;
    }

    #menu_superior_dchafull1 {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    #menu_superior_dchafull1_izquierda {
        float: none;
        clear: none;
        width: auto;
        flex: 0 0 auto;
        text-align: left;
        padding: 0;
    }

    #menu_superior_dchafull1_izquierda img {
        height: 120px !important;
    }

    #menu_superior_dchafull1_derecha {
        float: none;
        clear: none;
        width: auto;
        flex: 1 1 auto;
        padding-bottom: 0;
        padding-top: 25px;
    }

    .cab-utilidades {
        position: static;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        padding: 0;
    }

    .cab-utilidades-col {
        align-items: flex-end;
        width: 100%;
    }

    .cab-bandera {
        align-self: flex-end;
    }

    /* ---- "OTRAS NORMAS" de la ficha de norma, como carrusel -----------
       El contenedor es display:inline-flex de origen; con Slick tiene que ser
       un bloque normal. Las columnas col-lg-2 no definen ancho a estos anchos,
       asi que se dejan al 100% del hueco que da Slick. */
    .otras-normas-lista.slick-initialized {
        display: block;
    }

    .otras-normas-lista.slick-initialized [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: none;
        padding: 0 6px;
        box-sizing: border-box;
    }

    .otras-normas-lista .slick-list {
        margin: 0 !important;
    }

    .otras-normas-lista .slick-dots {
        bottom: -28px;
    }

    .otras-normas-lista {
        padding-bottom: 34px;
    }

    /* El hueco de las flechas se hace con padding en el envoltorio, para que
       Slick mida bien el ancho de las tarjetas (con margen en .slick-list el
       calculo se le descuadra). */
    .otras-normas-wrapper {
        padding: 0 46px;
        box-sizing: border-box;
    }

    .otras-normas-wrapper .custom-arrow {
        display: flex !important;
        width: 38px;
        height: 38px;
        top: 50%;
    }

    .otras-normas-prev {
        left: 0;
    }

    .otras-normas-next {
        right: 0;
    }


    h1.titulo_seccion {
        line-height: 1.2;
        padding-top: 6px;
        margin-top: 6px;
    }

    h2.titulo_seccion {
        line-height: 1.3;
    }

    .header-section {
        margin-bottom: 26px;
    }

    .header-section h2 {
        letter-spacing: 1px;
    }

    .header-section h1 {
        line-height: 1.15;
    }

    .header-section p {
        padding: 12px 0 0 0;
    }


    .eventos-section {
        height: auto !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .eventos-section>.container-fluid>.row>.col-lg-3,
    .eventos-section>.container-fluid>.row>.col-lg-9 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }


    .eventos-section #calendar,
    #datepicker {
        max-width: 360px;
    }

    .eventos-section .agenda-footer-text {
        margin-top: 12px;
    }

    .contact-header {
        padding: 24px 0;
    }

    .contact-header p {
        padding: 0;
        line-height: 1.45;
    }

    .contacta-section .col-md-4 {
        margin-bottom: 20px;
    }

    .contacta-section .col-md-4:last-child {
        margin-bottom: 0;
    }

    .banner-container {
        height: 110px;
    }

    .titulo_gris_grande {
        line-height: 1.3;
    }

    .agenda-title-formacion,
    .agenda-title {
        font-size: 1.4rem;
        text-align: left;
    }

    .spad {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .formacion-section,
    .certificacion-personas-section,
    .certificacion-sistemas-section,
    .noticias-section,
    .empleo-section,
    .contacto-section {
        padding: 60px 0 40px 0;
    }

    .formacion-section::before,
    .certificacion-personas-section::before,
    .certificacion-sistemas-section::before,
    .noticias-section::before,
    .empleo-section::before,
    .contacto-section::before {
        display: none;
    }

    .testimonial-card-horizontal {
        flex-direction: column;
        height: auto;
        min-height: 0;
        margin: 10px 0;
    }

    .logo-wrapper {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #EEEEEE;
        padding: 16px;
    }

    .testimonial-content-wrapper {
        padding: 18px 20px;
    }

    .testimonial-text {
        -webkit-line-clamp: unset;
    }

    .certificacion-text {
        max-width: 100%;
    }

    .certificacion-text p {
        line-height: 1.5;
        margin: 16px auto 10px auto;
        text-align: center;
    }

    #ver_proceso,
    #proceso_certificacion {
        display: none !important;
    }

    .destacado.subtitulo {
        line-height: 1.3;
        max-width: 100%;
        margin-bottom: 12px;
        text-align: center;
    }

    .home_sub_1,
    .home_sub_2,
    .home_sub_3 {
        background-size: contain;
        background-position: bottom center;
        height: auto;
        max-height: none;
        aspect-ratio: 905 / 678;
        min-height: 0;
    }

    .nav-underline-custom {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0;
        border-bottom-width: 3px;
    }

    .nav-underline-custom .nav-item {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .nav-underline-custom .nav-link {
        width: 100%;
        white-space: normal;
        text-align: center;
        font-size: 14px;
        padding: 9px 6px;
    }

    .nav-underline-custom .nav-link.active::after {
        height: 3px;
        bottom: -1px;
    }

    #mundo>.caja_imagen_fit {
        display: none;
    }


    /* El listado de NOTICIAS comparte el tamano fijo de 250px con el carrusel
       de la home, pero a lo ancho de un movil ahi no cabe el texto: aqui las
       dos se apilan y crecen con su contenido. */
    .news-slider-horizontal .news-card-horizontal,
    .noticias-section .news-card-horizontal {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 12px 6px !important;
        padding: 10px 10px !important;
    }

    .news-slider-horizontal .news-image-wrapper,
    .noticias-section .news-image-wrapper {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        height: 150px !important;
    }

    .news-slider-horizontal .news-image-wrapper img,
    .noticias-section .news-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

    .news-slider-horizontal .news-content-wrapper,
    .noticias-section .news-content-wrapper {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        padding: 10px 2px 0 !important;
    }

    /* Titulo y entradilla a dos lineas: la ficha queda mas compacta */
    .news-slider-horizontal .news-title {
        -webkit-line-clamp: 2 !important;
    }

    .news-slider-horizontal .news-excerpt {
        -webkit-line-clamp: 2;
    }

    .news-slider-horizontal .btn-mas-info,
    .news-slider-horizontal .btn-noticias {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        max-width: none !important;
        min-height: 42px;
        padding: 10px 18px !important;
        font-size: 14px !important;
        font-weight: 600;
        border-radius: 3px;
        margin: 10px 8px 0 0 !important;
    }

    /* ---- Caja del verificador -----------------------------------------
       La foto se mantiene tambien en movil y tablet. En escritorio va a la
       derecha con un degradado horizontal que despeja la mitad izquierda para
       el formulario; a lo ancho de un movil eso no funciona, asi que la foto
       pasa a cubrir toda la caja y el degradado se gira: transparente arriba y
       opaco abajo, que es donde cae el formulario. */
    .verificador {
        background-size: cover !important;
        background-position: center right !important;
        min-height: 300px;
        padding: 24px 16px;
        align-items: center;
    }

    /* Un velo claro y uniforme sobre toda la foto, en vez del degradado: asi
       el texto se lee igual de bien pero no se ve ese difuminado hacia abajo. */
    .verificador:before {
        display: block;
        background: rgba(242, 242, 242, 0.55);
    }

    .verificador-caja {
        width: 100%;
        max-width: 100%;
    }

    .verificador-input,
    .verificador-boton {
        width: 100%;
        box-sizing: border-box;
    }

    /* Ficha de resultado del verificador */
    .cert-cabecera,
    .cert-cuerpo,
    .dip-cuerpo {
        padding-left: 18px;
        padding-right: 18px;
    }

    .cert-cabecera-top .cert-numero {
        position: static;
        display: block;
        margin-bottom: 8px;
    }

    /* Tarjetas de evento y de norma */
    .event-card,
    .norma-card {
        margin-bottom: 16px;
    }


    .normas-section .slider-wrapper {
        max-width: 100%;
        padding: 0 56px;
    }

    .normas-section .slick-list {
        margin: 0 !important;
    }


    .normas-section .custom-arrow {
        top: 50%;
    }

    .normas-section {
        background-image: none;
        position: relative;
    }

    .normas-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 500px;
        background: url('../img/seccion-normas.png') no-repeat top center;
        background-size: cover;
        z-index: 0;
        pointer-events: none;
    }

    /* El contenido por encima del fondo */
    .normas-section>* {
        position: relative;
        z-index: 1;
    }


    /* ---------------------------------------------------------------------
       1.6 Banners del submenu lateral
       --------------------------------------------------------------------- */
    /* Banners del submenu lateral (Contacto, Cotizacion, Verificador).
       El contenedor lleva la clase alto_100 (height: 100px fijo) y dentro el
       rotulo va con alto_80 (80px) mas 15px de margen en linea: 95px que, con
       el padding, se salen de los 100 y el texto se derramaba sobre el banner
       siguiente. Aqui el alto lo marca el contenido. */
    .imagen_form,
    .oferta_form,
    .verifica_form {
        float: none;
        width: 100%;
        height: auto !important;
        min-height: 110px;
        overflow: hidden;
    }

    .imagen_form .alto_80,
    .oferta_form .alto_80,
    .verifica_form .alto_80 {
        height: auto !important;
        margin-top: 0 !important;
    }

    .imagen_form .margen_2,
    .oferta_form .margen_2,
    .verifica_form .margen_2 {
        padding: 16px 20px;
    }

    /* El banner de Contacto es el unico que lleva el icono como <img> aparte,
       en un bloque con float:right; los otros dos lo traen dentro de su propia
       foto. Apilado en movil quedaba el icono arriba a la derecha y el texto
       debajo. Aqui se ponen en fila, con el icono a la izquierda: el div del
       icono ya va primero en el HTML, asi que basta con hacer flex el
       contenedor y quitar los float y los anchos en porcentaje. */
    #muestra_contacto .margen_2 {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    #muestra_contacto .margen_2 > .modulo_30 {
        float: none;
        flex: 0 0 auto;
        width: auto;
        height: auto !important;
    }

    #muestra_contacto .margen_2 > .modulo_30 img {
        max-height: 54px;
        width: auto;
    }

    /* El margin-top: 15px viene en un style="" en linea */
    #muestra_contacto .margen_2 > .modulo_65 {
        float: none;
        flex: 1 1 auto;
        width: auto;
        margin-top: 0 !important;
    }


    /* ---------------------------------------------------------------------
       1.7 Pie
       --------------------------------------------------------------------- */
    .footer-agencia {
        padding: 28px 0 18px 0;
        text-align: center;
    }

    .agencia-info,
    .agencia-enlaces,
    .social-icons,
    .footer-agencia .align_derecha {
        text-align: center !important;
    }

    .social-icons {
        justify-content: center;
        margin-top: 14px;
    }

    .footer-agencia .col-lg-6+.col-lg-6 {
        margin-top: 26px;
    }

    .logo-slider-section .section-title {
        font-size: 1.3rem;
    }
}


/* =========================================================================
   2. MOVIL  (hasta 767px)
   Aqui ya no cabe nada en dos columnas: se apila todo.
   ========================================================================= */
@media only screen and (max-width: 767px) {

    .modulo_2,
    .modulo_5,
    .modulo_10,
    .modulo_15,
    .modulo_18,
    .modulo_20,
    .modulo_21,
    .modulo_22,
    .modulo_23,
    .modulo_25,
    .modulo_28,
    .modulo_30,
    .modulo_31,
    .modulo_32,
    .modulo_33,
    .modulo_35,
    .modulo_39,
    .modulo_40,
    .modulo_45,
    .modulo_48,
    .modulo_49,
    .modulo_50,
    .modulo_55,
    .modulo_58,
    .modulo_60,
    .modulo_62,
    .modulo_63,
    .modulo_65,
    .modulo_66,
    .modulo_70,
    .modulo_73,
    .modulo_75,
    .modulo_78,
    .modulo_80,
    .modulo_85,
    .modulo_88,
    .modulo_90,
    .modulo_98 {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }


    #circleBar .modulo_30,
    #circleBar .salto_movil {
        width: 31% !important;
        float: none !important;
    }


    .texto_base .modulo_30,
    .texto_base_home .modulo_30 {
        width: 26%;
        float: left;
    }

    .texto_base .modulo_70,
    .texto_base_home .modulo_70 {
        width: 74%;
        float: right;
    }

    .texto_base {
        left: 0;
        right: 0;
        height: auto !important;
        padding: 8px 10px;
    }

    .texto_base .t_140,
    .texto_base .t_150 {
        font-size: 100%;
        line-height: 1.25;
    }

    .izquierda,
    .derecha {
        float: none;
    }


    .salto_movil {
        width: 100%;
        float: none;
    }


    /* ---------------------------------------------------------------------
       2.2 Formularios
       --------------------------------------------------------------------- */
    .contacto_web_embebido input[type="text"],
    .contacto_web_embebido input[type="email"],
    .contacto_web_embebido input[type="tel"],
    .contacto_web_embebido select,
    .contacto_web_embebido textarea,
    .imput_texto,
    .form-control {
        width: 100%;
        box-sizing: border-box;
    }

    .contacto_web_embebido label {
        display: block;
    }


    .contacto_web_embebido input,
    .contacto_web_embebido select,
    .contacto_web_embebido textarea,
    .imput_texto,
    .verificador-input {
        font-size: 16px;
    }

    .enviar_form .boton_enviar,
    .enviar_form .boton_enviar.modulo_30 {
        width: 100% !important;
        padding: 14px 20px !important;
    }


    /* Los dos popups van centrados con left:50% + translate(-50%,-50%). Aqui
       habia un left:3vw que rompia ese centrado: el translate seguia
       desplazandolos media anchura a la izquierda y se salian de pantalla.
       Solo se toca el tamano; la posicion se deja como esta. */
    #contacto_desplegable,
    #cotizacion_desplegable {
        width: 94vw !important;
        max-width: 94vw !important;
        max-height: 88vh !important;
        overflow-y: auto;
    }

    body #cotizacion_desplegable .contacto_web_embebido .modulo_48 {
        width: 100%;
    }


    /* ---------------------------------------------------------------------
       2.3 Cabecera en movil
       --------------------------------------------------------------------- */
    #texto_agencia {
        font-size: 1.35em;
    }

    .titulo_seccion span {
        display: block;
    }


    /* ---- Listado de normas de Certificacion de Sistemas ---------------
       Las columnas son col-lg-3 col-md-3 col-sm-1: por debajo de 768px
       ninguna de esas clases define ancho, asi que la tarjeta se quedaba a su
       tamano natural y sobraba media pantalla a la derecha. Aqui van dos por
       fila. (.normas-card es display:contents, por eso las columnas cuelgan
       directamente de la fila.) */
    .normas-card>[class*="col-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        padding: 0 6px;
        box-sizing: border-box;
    }

    .normas-card>[class*="col-"] .card-overlay-container {
        margin: 6px 0;
    }

    /* El bloque de ACTUALIDAD que secciones/seccion_actualidad.php añade al
       final de las paginas interiores (catalogo, normas, eventos, noticias...)
       no se muestra en movil: alarga mucho la pagina y repite contenido. La
       home no lo usa, monta su propio carrusel de noticias (.news-section). */
    .actualidad-section {
        display: none !important;
    }

    /* ---- Carrusel de logos del pie ------------------------------------
       Con un solo logo por pantalla (ver el slick de parteinferior.php), la
       diapositiva ocupa todo el ancho y el logo se centra dentro. */
    .logo-carousel .logo-slide {
        padding: 0 10px;
        justify-content: center;
    }

    .logo-carousel .logo-slide img {
        margin: 0 auto;
        max-width: 200px;
    }

    /* ---------------------------------------------------------------------
       2.4 Carruseles
       --------------------------------------------------------------------- */

    .testimonial-slider .slick-slide .testimonial-slide {
        padding: 0;
    }

    .success-cases-section .testimonial-slider {
        padding-bottom: 26px;
    }

    .success-cases-section .testimonial-slider .slick-dots {
        bottom: -12px;
    }


    /* ---- Quienes somos ------------------------------------------------
       El titulo del panel de la agencia va alineado a la derecha, pensado para
       la columna lateral del escritorio. Apilado en movil, esa alineacion
       queda descolgada del resto del texto. */
    /* El !important es obligatorio: quienes_somos.php trae un <style> en linea
       con este mismo selector y text-align:right, y al ir despues de las hojas
       de estilo del <head> le gana por orden. */
    #internacional_sedes .panel-titulo,
    #internacional_sedes .panel-titulo .t_amarillo,
    #internacional_sedes .panel-titulo .sub {
        text-align: left !important;
    }

    #internacional_sedes .panel-titulo {
        padding: 10px 0 18px 0;
    }

    /* Los <br> del subtitulo parten la frase en dos lineas cortas */
    #internacional_sedes .panel-titulo .sub br {
        display: none;
    }

    /* Las dos fotos tienen un ancho fijo (150px, y 300px la regla general) y
       el alto lo pone object-fit: cover, que las recorta. Aqui ocupan el ancho
       disponible, centradas y con su proporcion intacta. */
    .image-stack {
        align-items: center;
    }

    .image-stack img,
    .image-stack .img-top,
    .image-stack .img-bottom {
        width: 100%;
        max-width: 420px;
        height: auto;
        object-fit: contain;
    }

    /* ---------------------------------------------------------------------
       2.5 Calendario del componente componentes/calendario.php
       --------------------------------------------------------------------- */
    #calendar,
    .cal-contenedor {
        float: none !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    #calendar .ui-datepicker,
    .cal-contenedor .ui-datepicker {
        width: 100% !important;
        max-width: 340px;
        margin: 0 auto;
    }


    /* ---------------------------------------------------------------------
       2.6 Noticia y evento: cabecera de dos columnas a una
       --------------------------------------------------------------------- */
    .noticia-cabecera,
    .ev-ficha {
        flex-direction: column;
        gap: 16px;
    }

    .noticia-cabecera .noticia-media,
    .ev-ficha-img {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .noticia-encabezado {
        padding-right: 0;
    }

    .noticia-kicker {
        font-size: 1.8rem !important;
    }

    .noticia-fecha {
        font-size: 0.95rem;
    }


    /* ---------------------------------------------------------------------
       2.7 Rejillas de dos columnas de las fichas
       --------------------------------------------------------------------- */
    .cert-fechas,
    .dip-rejilla {
        grid-template-columns: 1fr;
    }

    .cert-aviso {
        flex-direction: column;
        gap: 12px;
    }
}


/* =========================================================================
   3. MOVIL PEQUENO  (hasta 480px)
   ========================================================================= */
@media only screen and (max-width: 480px) {

    .container-fluid.px-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* A este ancho los aros de 90px no caben en tres columnas: se escalan con
       el canvas para que la fila siga siendo horizontal. La cifra se recoloca
       porque .valor iba fijada a 45px/45px, el centro del aro sin escalar. */
    #circleBar .modulo_100 {
        gap: 6px 4px;
    }

    #circleBar .round,
    #circleBar .round canvas {
        width: 100% !important;
        max-width: 90px;
        height: auto !important;
    }

    #circleBar .round .valor {
        top: 42%;
        left: 50%;
        font-size: 95%;
    }

    #circleBar span {
        font-size: 66%;
    }
}


/* =========================================================================
   4. PANTALLA BAJA  (movil tumbado)ç
   ========================================================================= 
*/
@media only screen and (max-width: 991px) and (max-height: 560px) {

    .card-slider .card-overlay-container,
    .otras-normas-lista .card-overlay-container {
        height: 76vh;
    }


    .card-slider .card-overlay-container img,
    .otras-normas-lista .card-overlay-container img {
        height: 100%;
        object-fit: cover;
    }


    .normas-section::before {
        height: 100vh;
    }

    .testimonial-card-horizontal {
        height: auto;
        min-height: 0;
    }

    .testimonial-text {
        -webkit-line-clamp: 3;
    }

    .home_sub_1 .texto_base,
    .home_sub_2 .texto_base,
    .home_sub_3 .texto_base {
        bottom: 2px;
        height: auto !important;
        padding: 4px 8px;
    }

    .texto_base .t_140,
    .texto_base .t_150 {
        font-size: 78%;
        line-height: 1.15;
    }


    .eventos-section .card-img-wrapper {
        height: 120px;
    }

    .eventos-section .event-card {
        margin: 8px 5px 10px 5px;
        padding: 8px 12px 12px 12px;
    }

    .eventos-section .card-title,
    .eventos-section .event-card h3 {
        font-size: 1rem;
        line-height: 1.2;
    }

    #calendar .ui-datepicker,
    .cal-contenedor .ui-datepicker {
        max-width: 300px;
    }
}


/* =========================================================================
   5. TABLET Y MOVIL TUMBADO  (768px - 991px)
   ========================================================================= */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    .eventos-section .agenda-footer-text {
        color: #333f4f;
    }

    .eventos-section>.container-fluid>.row>.col-lg-3 {
        width: 38%;
        max-width: 38%;
        flex: 0 0 38%;
    }

    .eventos-section>.container-fluid>.row>.col-lg-9 {
        width: 62%;
        max-width: 62%;
        flex: 0 0 62%;
    }

    .eventos-home-lista.slick-initialized .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    .eventos-home-lista.slick-initialized .col-md-4 {
        justify-content: center;
    }

    .eventos-home-lista .event-card {
        width: 400px;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .eventos-home-lista .slick-list {
        margin: 0 !important;
    }

    .eventos-home-lista .slick-dots {
        bottom: -36px;
    }
}


/* =========================================================================
   6. TABLETS GRANDES  (992px - 1366px)
   ========================================================================= */
@media only screen and (min-width: 992px) and (max-width: 1366px) {

    .home_sub_1,
    .home_sub_2,
    .home_sub_3 {
        background-position: 10px bottom;
    }

    .texto_base {
        display: block;
        left: 0;
        right: 0;
        width: auto;
        height: auto !important;
        min-height: 60px;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    .texto_base .modulo_30 {
        width: 122px;
    }

    .texto_base .modulo_70 {
        width: calc(100% - 122px);
    }

    .texto_base .t_140,
    .texto_base .t_150 {
        font-size: 82%;
        line-height: 1.1;
    }
}

/* =========================================================================
   7. SIN FONDOS DECORATIVOS  (hasta 1366px)
   -------------------------------------------------------------------------
   En movil, tablet y tablet grande se quitan las imagenes de fondo de las
   secciones. A esos anchos no se leen (estan pensadas para un monitor ancho),
   compiten con el texto y pesan de mas.

   Se salvan las dos que si aportan: la cabecera de partesuperior.php
   (#cabecerainterior, que ademas tiene su propia foto de movil) y el pie de
   parteinferior.php (.footer-agencia y su carrusel de logos).

   Se hace por elemento <section> y su ::before, que es donde estan todos esos
   fondos. No entran ni los bloques .home_sub_X de la home ni los banners del
   submenu lateral, porque ahi la imagen ES el contenido.
   ========================================================================= */
@media only screen and (max-width: 1366px) {

    section:not(.logo-slider-section),
    section:not(.logo-slider-section)::before,
    .set-bg {
        background-image: none !important;
    }

    /* Al quedarse el fondo en blanco, estos textos iban en blanco sobre blanco */
    .header-section p,
    .agenda-footer-text,
    .eventos-section .agenda-title-year {
        color: #333f4f !important;
    }

    /* Esas secciones llevaban 150px (100 en una, 65 la cabecera de normas) de
       padding arriba: era el hueco reservado para que se viera la imagen de
       fondo por encima del contenido. Sin fondo, ese espacio queda vacio. */
    .star-section,
    .formacion-section,
    .certificacion-personas-section,
    .certificacion-sistemas-section,
    .noticias-section,
    .empleo-section,
    .contacto-section {
        padding-top: 35px !important;
    }

    .certificacion-section {
        padding-top: 35px !important;
    }

    .normas-header {
        padding-top: 25px;
    }
}