:root {
     --staregister-blue: #0056b3;
     --top-bar-bg: #1a1a1a;
     --text-dark: #333;
     --border-color: #eee;

     --sr-yellow: #FFB800;
     --sr-dark: #232D3B;
     --sr-gray-bg: #F2F2F4;

     --staregister-dark: #232D3B;
     --staregister-lightgray: #C8C8C8;
     --staregister-orange: #F4B434;
 }

 /* body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #fff;
            padding-top: 120px;
        } */

 .row-custom-width {
     max-width: 85%;
     /* El ancho que desees */
     margin-left: auto;
     margin-right: auto;
 }


 /* ---------------------------------------------- NORMAS CARD OVERLAY SLIDER -------------------------------------------------- */

 .normas-section {
     margin: 0;
     padding: 0 0 0 0;
     /* background-color: #F6C25C; */
     background-image: url('../img/seccion-normas.png');
     background-size: contain;
     background-repeat: no-repeat;
 }

 .normas-header {
     padding: 65px 0 30px 0;
     text-align: center;
 }

 .normas-header h2 {
     color: var(--sr-yellow);
     font-weight: normal;
     font-size: 25px;
     letter-spacing: 1px;
     margin-bottom: 10px;
 }

 .normas-header p {
     color: var(--sr-yellow);
     font-weight: 600;
     font-size: 1.4rem;
     margin: 0 auto;
     line-height: 1.1;
 }

 .normas-header .titulo {
     font-size: 3.4rem;
 }

 .normas-header .subtitulo {
     font-size: 2.0rem;
 }

 .slider-wrapper {
     position: relative;
     padding: 0 5%;
     max-width: 200px;
     margin: 50px auto 0 auto !important;
 }

 /* --- TARJETA STAREGISTER (200x280) --- */
 .card-overlay-container {
     position: relative;
     margin: 10px 10px;
     /* width: 220px !important; 
            height: 280px !important;  */
     overflow: hidden;
     background-color: var(--sr-dark);
     border-radius: 6px;
 }

 .card-overlay-container img {
     width: 100%;
     height: auto;
     object-fit: contain;
     transition: transform 0.3s ease-in-out;
     opacity: 0.3;
 }

 .card-overlay-container:hover img {
     transform: scale(1.2);
 }

 .card-overlay-container::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 80%);
     z-index: 1;
 }

 .card-content {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: clamp(8px, 2vw, 35px) clamp(8px, 1vw, 15px);
     z-index: 2;
     color: #fff;
 }

 .card-content h4 {
     color: #fff;
     font-weight: 800;
     font-size: clamp(1rem, 1.8vw, 2.1rem);
     text-transform: uppercase;
     margin-bottom: 5px;
 }

 .card-content p {
     font-weight: normal;
     font-size: clamp(0.68rem, 0.8vw, 0.85rem);
     line-height: 1.35 !important;
     margin-bottom: 10px;
     text-align: left !important;
 }

 .card-content img {
     width: clamp(38px, 4vw, 65px);
     height: auto;
     transition: none !important;
     transform: none !important;
     margin-bottom: 5px;
     opacity: 1;
 }

 /* .btn-mas-info {
            background-color: var(--sr-yellow);
            color: #fff;
			border: 1px solid var(--sr-yellow);
            padding: 2px 15px;
            font-size: 11px;
            font-weight: 400;
            text-decoration: none;
            display: inline-block;
			transition: all 0.3s ease;
			width: 90px;
			max-width: 150px;
			text-align: center;
        } */

 .btn-mas-info:hover {
     background-color: #fff;
     color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     transition: all 0.3s ease;
 }

 .btn-mas-info-big {
     background-color: var(--sr-yellow);
     color: #fff;
     border: 1px solid var(--sr-yellow);
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 400;
     /* text-transform: uppercase; */
     text-decoration: none;
     display: inline-block;
     margin-top: 10px;
     transition: all 0.3s ease;
     width: 210px !important;
     max-width: 250px !important;
     text-align: center;
 }

 .btn-mas-info-big:hover {
     background-color: #fff;
     color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     transition: all 0.3s ease;
 }

 /* --- FLECHAS PERSONALIZADAS --- */
 .custom-arrow {
     position: absolute;
     top: 140px;
     transform: translateY(-50%);
     width: 45px;
     height: 45px;
     background-color: #fff !important;
     border-radius: 50%;
     border: none;
     z-index: 100;
     cursor: pointer;
     display: flex !important;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
 }

 .custom-arrow i {
     color: var(--sr-dark);
     font-size: 18px;
 }

 .custom-arrow:hover {
     background-color: var(--sr-yellow) !important;
 }

 .custom-arrow:hover i {
     color: #fff;
 }

 /* "OTRAS NORMAS" solo es carrusel en movil y tablet: en escritorio el
    envoltorio no aporta nada y sus flechas van ocultas (ver css/movil.css). */
 .otras-normas-wrapper {
     position: relative;
 }

 .otras-normas-wrapper .custom-arrow {
     display: none !important;
 }

 .prev-sr {
     left: 5px;
 }

 .next-sr {
     right: 5px;
 }

 /* --- PUNTOS (DOTS) REINICIADOS Y ESTILIZADOS --- */
 .slick-dots {
     position: absolute;
     bottom: -40px;
     display: block;
     width: 100%;
     padding: 0;
     margin: 0;
     list-style: none;
     text-align: center;
 }

 .slick-dots li {
     position: relative;
     display: inline-block;
     width: 12px;
     height: 12px;
     margin: 0 5px;
     padding: 0;
     cursor: pointer;
 }

 .slick-dots li button {
     font-size: 0;
     line-height: 0;
     display: block;
     width: 12px;
     height: 12px;
     padding: 5px;
     cursor: pointer;
     color: transparent;
     border: 0;
     outline: none;
     background: #ccc;
     /* Color inactivo */
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .slick-dots li.slick-active button {
     background: var(--sr-yellow);
     /* Color activo Staregister */
     transform: scale(1.2);
 }

 /* Eliminar el icono por defecto de Slick que suele verse mal */
 .slick-dots li button:before {
     display: none;
 }


 .normas-card {
     display: contents;
 }

 .normas-section-card {
     display: inline-flex;
 }

 /* .card-overlay-container-normas {
            position: relative;
            margin: 20px 10px;
            height: 280px !important; 
            overflow: hidden;
            background-color: var(--sr-dark);
			border-radius: 6px;
        }

        .card-overlay-container-normas img {
            width: 100%;
            height: auto;
            object-fit: cover;
            transition: transform 0.5s ease;
            opacity: 0.75;
        }

        .card-overlay-container-normas::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 70%);
            z-index: 1;
        } */



 /* ------------------------------------------------------------ CERTIFICACION SECTION ------------------------------------------------------ */

 .certificacion-section {
     margin: 0 0 0 0;
     padding: 100px 0 50px 0;
     position: relative;
     /* background-image: url('../img/texto-gris-sistemas.png');
			background-size: contain;
			background-repeat: no-repeat; */
 }

 .certificacion-sistemas-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .certificacion-sistemas-section::before {
     background-image: url('../img/texto-gris-sistemas.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.5;
 }

 .proceso-btn {
     /* El ancho lo marca el texto: antes tenia min-width:380px y quedaba
        mucho mas ancho de lo necesario. */
     padding: 10px 30px;
     font-size: 18px;
     font-weight: bold;
     border: none;
     width: auto;
     text-align: center;
     margin-top: 15px;
     transition: all .3s ease;
 }

 #proceso_certificacion img {
     width: 100%;
 }

 .destacado.subtitulo {
     font-size: 34px;
     color: #f4b333;
     max-width: 84%;
     margin: 0 auto 15px auto;
     line-height: 32px;
 }

 .certificacion-text {
     text-align: center;
     max-width: 88%;
     margin: 0 auto 0 auto;
 }

 .certificacion-text p {
     /* max-width: 90%; */
     font-size: 24px;
     margin: 25px auto 10px auto;
     line-height: 28px;
 }

 .contacta-section {
     margin: 0 0 0 0;
     padding: 50px 0 50px 0;
 }

 .text-wrapper span.contacta_small {
     display: block;
     font-weight: 400;
     font-size: 1.2rem;
     text-transform: uppercase;
     margin: 0;
     padding: 0;
     line-height: 20px;
 }

 .text-wrapper span.contacta_big {
     display: block;
     font-weight: 400;
     font-size: 2.6rem;
     text-transform: uppercase;
     margin: 0;
     padding: 0;
     line-height: 50px;
 }

 /* .text-wrapper span.contacta_small {
            display: block;
            font-weight: 400;
            font-size: 1.6rem;
            text-transform: uppercase;
        } */


 /* --- NEWS SLIDER  --- */

 /* .container { max-width: 1200px; } */

 .news-section {
     margin: 0 0 0 0;
     padding: 50px 0 20px 0;
     position: relative;
     height: auto;
 }

 /* Los puntos del carrusel, mas pegados a las tarjetas */
 .news-section .slick-dots {
     bottom: -26px;
 }

 /* Imagen de fondo "ACTUALIDAD" eliminada a petición
		.news-section::before {
			background-image: url('../img/seccion-actualidad.png');
			background-size: contain;
			background-repeat: no-repeat;
			content: "";
			position: absolute;
			z-index: 0;
			inset: 0;
			opacity: 0.4;
		} */

 /* .news-wrapper {
			margin: 5% 0 0 0;
			background-image: url('../img/seccion-actualidad.png');
			padding-bottom: 273px;
		} */


 .section-title {
     font-weight: 800;
     text-transform: uppercase;
     border-left: 5px solid var(--staregister-blue);
     padding-left: 15px;
     margin-bottom: 40px;
     color: var(--text-dark);
 }

 /* --- ESTILO FICHA HORIZONTAL --- */
 .news-card-horizontal {
     background: #fff;
     margin: 15px 10px;
     /* Espacio entre las 2 fichas */
     border: 1px solid var(--border-color);
     display: flex !important;
     /* Importante para Slick */
     height: auto;
     min-height: 250px;
     /* Crece si el titulo ocupa varias lineas, en vez de recortarlo */
     overflow: visible;
     box-shadow: 0px 10px 20px -3px rgba(0, 0, 0, 0.1);

     /* transition: box-shadow 0.3s ease; */
     transition: box-shadow 0.3s ease-in-out;
     border-radius: 6px;
     padding: 25px 15px;
 }


 /* .news-card-horizontal:hover {
			box-shadow: 10px 10px 15px -3px rgba(0,0,0,0.1);
        } */



 /* Lado Izquierdo: Imagen */
 .news-image-wrapper {
     flex: 0 0 40%;
     /* La imagen ocupa el 40% del ancho */
     overflow: hidden;
     position: relative;
 }

 .news-image-wrapper img {
     width: 100%;
     /* Acompaña al alto de la ficha, que ahora crece con el título */
     height: 100%;
     min-height: 221px;
     object-fit: cover;
     display: block;
     transition: transform 0.5s;
 }

 .news-card-horizontal:hover .news-image-wrapper img {
     transform: scale(1.2);
 }

 /* --- Bloque de actualidad (rejilla, no carrusel) --------------------------
    Todas las fichas de la fila miden lo mismo: la columna se vuelve flex y la
    ficha se estira hasta el alto de la mas alta. La imagen acompaña ese alto
    en vez de quedarse fija en 221px. El titulo se sigue viendo entero. */
 /* Vale para el bloque de ACTUALIDAD y para el listado de NOTICIAS: los dos
    pintan .news-card-horizontal en rejilla. Sin esto, cada ficha crece con el
    alto de su foto y las de una misma fila quedan desiguales. */
 .actualidad-section [class*="col-"]:has(> .news-card-horizontal),
 .noticias-section [class*="col-"]:has(> .news-card-horizontal) {
     display: flex;
     align-items: stretch;
 }

 .actualidad-section .news-card-horizontal,
 .noticias-section .news-card-horizontal {
     height: auto;
     flex: 1 1 auto;
 }

 .actualidad-section .news-image-wrapper,
 .noticias-section .news-image-wrapper {
     display: flex;
     align-items: stretch;
     overflow: hidden;
 }

 /* La foto acompaña al alto de la ficha recortando lo que sobre, en vez de
    imponer el suyo (de origen trae min-height: 221px). */
 .actualidad-section .news-image-wrapper img,
 .noticias-section .news-image-wrapper img {
     height: 100%;
     min-height: 0;
     object-fit: cover;
 }

 /* --- Tamano fijo de ficha: carrusel de la home y listado de NOTICIAS -----
    Aqui las fichas SI llevan altura fija: al ir en un carrusel tienen que
    medir todas lo mismo. El titulo se recorta a 3 lineas y la imagen se
    ajusta al alto de la ficha. En el bloque de actualidad, que no es un
    carrusel, se mantiene el crecimiento libre. */
 /* Slick deja cada slide con su propia altura: se fuerza que todas se estiren */
 .news-slider-horizontal .slick-track {
     display: flex !important;
     align-items: stretch;
 }
 .news-slider-horizontal .slick-slide {
     height: auto !important;
 }
 .news-slider-horizontal .slick-slide > div { height: 100%; }

 .news-slider-horizontal .news-card-horizontal,
 .noticias-section .news-card-horizontal {
     height: 250px !important;
     min-height: 0 !important;
     overflow: hidden !important;
 }

 /* La imagen ocupa exactamente el alto de la ficha, ni mas ni menos */
 .news-slider-horizontal .news-image-wrapper {
     display: flex;
     align-items: stretch;
     overflow: hidden;
 }

 .news-slider-horizontal .news-title,
 .noticias-section .news-title {
     display: -webkit-box !important;
     -webkit-line-clamp: 3 !important;
     -webkit-box-orient: vertical !important;
     overflow: hidden !important;
     max-height: none !important;
 }

 .news-slider-horizontal .news-excerpt,
 .noticias-section .news-excerpt {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

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

 /* Lado Derecho: Contenido */
 .news-content-wrapper {
     flex: 0 0 60%;
     /* El texto ocupa el 60% */
     padding: 5px 25px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     /* el contenido arranca arriba, no centrado */
 }

 .news-category {
     color: var(--staregister-lightgray);
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 8px;
     display: block;
 }

 .news-title {
     font-size: 1.3rem;
     font-weight: 800;
     /* color:  var(--sr-yellow); */
     color: #2E3946;
     margin-bottom: 8px;
     line-height: 21px;
     /* text-transform: uppercase; */
     /* El título se ve entero: ni recorte a 3 líneas ni altura fija */
     height: auto !important;
     max-height: none !important;
     overflow: visible !important;
 }

 .news-title a {
     display: inline !important;
 }

 .news-title a {
     /* color:  var(--sr-yellow) !important; */
     color: #2E3946;
 }

 .news-title p {
     font-size: 0.8rem;
     line-height: 1.3 !important;
 }

 .news-date {
     color: var(--sr-yellow);
     font-size: 0.7rem;
     font-weight: 400;
     letter-spacing: 1px;
     margin-bottom: 8px;
     display: block;
 }

 .news-excerpt {
     font-size: 0.7rem;
     color: #666;
     margin-bottom: 10px;
     line-height: 1.2;
     /* Cortar a 2 líneas */
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }


 /* Enlace que envuelve una tarjeta de norma completa, para que se pueda
    pulsar en cualquier punto (no solo en "Leer mas"). No aporta estilo
    propio: el aspecto lo siguen dando .card-overlay-container y .card-content. */
 .card-clicable {
     display: block;
     text-decoration: none;
     color: inherit;
 }

 .card-clicable:hover {
     text-decoration: none;
     color: inherit;
 }

 .btn-mas-info {
     background-color: var(--sr-yellow);
     color: #fff;
     border: 1px solid var(--sr-yellow);
     padding: 1px 15px;
     font-size: 11px;
     font-weight: 400;
     text-decoration: none;
     display: inline-block;
     transition: all 0.3s ease;
     /* El ancho fijo de 90px estaba pensado para "Saber más". Al traducir la
        web, textos mas largos ("Learn more", "Daha fazla bilgi") no caben y el
        boton se parte en dos lineas. Con width:auto crece con su contenido y
        white-space:nowrap garantiza que se quede en una sola linea. */
     width: auto;
     min-width: 90px;
     max-width: none;
     white-space: nowrap;
     text-align: center;
 }

 /* Botón estilo azul */
 .btn-noticias {
     /* align-self: flex-start; */
     background-color: #fff;
     color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     padding: 2px 15px;
     font-size: 11px;
     font-weight: 400;
     text-decoration: none;
     display: inline-block;
     margin: 0 5px;
     transition: all 0.3s ease;
     text-align: center;
     /* Igual que .btn-mas-info: en otros idiomas el texto es mas largo */
     white-space: nowrap;
 }

 .btn-noticias:hover {
     background-color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     color: #fff;
     transition: background 0.3s;
 }

 .btn-noticias-big {
     /* align-self: flex-start; */
     background-color: #fff;
     color: var(--sr-yellow);
     border-radius: 0;
     /* Cuadrado */
     border: 1px solid var(--sr-yellow);
     margin: 0 15px;
     padding: 10px 20px;
     font-size: 14px;
     font-weight: normal;
     /* text-transform: uppercase; */
     width: 210px !important;
     max-width: 250px !important;
     text-decoration: none;
     transition: background 0.3s;
     text-align: center;
 }

 .btn-noticias-big:hover {
     background-color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     color: #fff;
     transition: background 0.3s;
 }

 .btn-mas-info-big {
     background-color: var(--sr-yellow);
     color: #fff;
     border: 1px solid var(--sr-yellow);
     margin: 0 0;
     padding: 10px 20px;
     font-size: 14px;
     font-weight: normal;
     /* text-transform: uppercase; */
     display: inline-block;
     margin-top: 10px;
     text-decoration: none;
     transition: background 0.3s;
     width: 190px !important;
     max-width: 250px !important;
     text-align: center;
 }

 .btn-mas-info-big:hover {
     background-color: #fff;
     color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     transition: all 0.3s ease;
 }

 /* Flechas personalizadas */
 .slick-prev:before,
 .slick-next:before {
     color: var(--staregister-blue);
     font-size: 30px;
 }

 .slick-list {
     margin: 0 50px !important;
 }

 .slick-dots li {
     width: 12px !important;
     height: 12px !important;
 }


 /* .slick-slide {
			margin: 0 100px !important;
		} */

 /* Ajustes para pantallas pequeñas */
 @media (max-width: 991px) {
     .news-card-horizontal {
         height: auto;
         flex-direction: column;
     }

     .news-image-wrapper {
         flex: 0 0 200px;
     }

     .news-content-wrapper {
         flex: 1;
     }
 }

 /* --- FORMACION  --- */

 .formacion-modalidades-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin: 20px 0;
 }

 .formacion-modalidad-card {
     flex: 1 1 250px;
     background: #f2f2f2;
     padding: 15px 20px;
     border-radius: 3px;
     font-size: 90%;
     line-height: 1.6;
 }

 .formacion-mod-label {
     color: #e8a02f;
     /* naranja como en la imagen */
     font-weight: bold;
 }

 /* --- EVENTOS  --- */
 :root {
     /* --staregister-yellow: #FFB800; */


 }

 /* body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* background-color: var(--staregister-yellow); */
 /* Simulación de la imagen de fondo difuminada */
 /*  background-image: linear-gradient(rgba(255, 184, 0, 0.85), rgba(255, 184, 0, 0.85)), url('https://www.transparenttextures.com/patterns/cubes.png');
            color: var(--staregister-dark);
            margin: 0;
            padding: 40px 0;
        } */

 .eventos-section {
     margin: 0;
     padding: 3% 0 0 0;
     padding-bottom: 113px;
     position: relative;
     height: 999px;
     background-image: url('../img/seccion-eventos.png');
     background-size: cover;
     background-repeat: no-repeat;
 }

 .eventos-section::before {
     background-image: url('../img/seccion-eventos.png');
     background-size: cover;
     background-repeat: no-repeat;
     /* content: "";
			position: absolute;
			z-index: 0;
			inset: 0;
			opacity: 0.5; */
     /* ← solo afecta al fondo */
 }

 .header-section {
     text-align: center;
     margin-bottom: 50px;
 }

 .header-section h2 {
     font-size: 2.7rem !important;
     letter-spacing: 2px;
     margin: 15px auto 0 auto;
     font-weight: 300;
     color: #2C3945;
 }

 .header-section h1 {
     font-size: 4.5rem;
     font-weight: 800;
     margin-bottom: 5px;
     color: #2C3945;
     padding: 0;
     margin: 0;
 }

 .header-section p {
     margin: 0 auto;
     color: #fff;
     font-weight: 500;
     line-height: 1.4;
     font-size: 1.7rem;
     padding: 0 75px;
 }

 /* --- ESTILOS AGENDA Y DATEPICKER --- */
 .agenda-title {
     position: relative;
     font-weight: 800;
     font-size: 1.4rem;
     color: 333F4F;
     font-family: Exo, sans-serif, 'Anton';
     margin: 20px 10px 20px 0;
     top: 20px;
 }

 #bloque_derecha .agenda-title {
     margin: 20px 10px 10px 18px;
 }

 .agenda-title-formacion {
     position: relative;
     font-weight: 800;
     font-size: 1.4rem;
     color: var(--staregister-orange);
     font-family: Exo, sans-serif, 'Anton';
     margin: 20px auto 10px auto;
     top: 20px;
     text-align: center;
 }

 .noticias-title {
     position: relative;
     font-weight: 800;
     font-size: 1.4rem;
     color: var(--staregister-orange);
     font-family: Exo, sans-serif, 'Anton';
     margin: 10px 10px 5px 18px;
 }

 .agenda-title-year {
     font-weight: 400;
 }

 /* La agenda de la home usa el div #calendar y la de certificacion-sistemas
    el #datepicker: los dos van en la misma caja blanca sobre el fondo amarillo. */
 #datepicker,
 .eventos-section #calendar {
     border: none !important;
     width: 100% !important;
     background: #fff;
     padding: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
 }

 /* En la home el titulo de la agenda va en azul oscuro sobre el amarillo,
    con el año en un tono mas claro, como el resto de titulos de seccion.
    El margen negativo sube el bloque para alinearlo con las tarjetas. */
 .eventos-section .agenda-title {
     color: var(--staregister-dark) !important;
     margin-top: -40px;
 }
 .eventos-section .agenda-title-year { color: #fff; font-weight: 400; }

 /* Cabecera del mes y nombres de los dias */
 .eventos-section #calendar .ui-datepicker-title { font-weight: 800 !important; }
 .eventos-section #calendar .ui-datepicker-calendar th {
     color: var(--staregister-dark) !important;
     font-weight: 700;
 }

 /* Personalización extrema de jQuery UI para coincidir con la imagen */
 .ui-datepicker {
     width: 100% !important;
     padding: 0 !important;
     border: none;
 }

 .ui-datepicker-header {
     background: #fff !important;
     border: none !important;
     color: var(--staregister-dark) !important;
     font-weight: 800 !important;
 }

 .ui-datepicker-calendar thead {
     background: var(--staregister-yellow);
 }

 .ui-datepicker-calendar th {
     color: var(--staregister-dark) !important;
     padding: 10px 0;
 }

 .ui-state-default {
     background: none !important;
     border: none !important;
     text-align: center !important;
     color: var(--staregister-dark) !important;
 }

 /* Días resaltados (como el 10, 19 y 26 de la imagen) */
 .highlight-date a {
     background-color: var(--staregister-yellow) !important;
     font-weight: bold !important;
     border-radius: 4px;
 }

 /* Días resaltados (como el 10, 19 y 26 de la imagen) */
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
     background-color: var(--staregister-yellow) !important;
     font-weight: bold !important;
     border: none !important;
     border-radius: 4px;
     color: #000 !important;
     opacity: 1;
 }

 .agenda-footer-text {
     font-size: 1.0rem;
     color: #fff;
     margin: 20px 0;
     font-weight: 600;
 }

 .btn-ver-formacion {
     background-color: var(--staregister-dark);
     color: #fff;
     padding: 1px 15px;
     border: 1px solid var(--staregister-dark);
     font-weight: bold;
     transition: all 0.3s ease;
 }

 .btn-ver-formacion:hover {
     color: var(--staregister-dark);
     background-color: #fff;
     border: 1px solid var(--staregister-dark);
     transition: all 0.3s ease;
 }

 /* Aire entre el texto de arriba y la fila de circulos */
 .presentacion {
     margin-top: 26px !important;
 }

 /* Circulos de cifras de la home: mas aire entre ellos sin tocar el 30% de
    ancho de cada bloque, que es lo que los reparte en la fila. */
 #circleBar .modulo_30 {
     padding: 0 8px;
     box-sizing: border-box;
 }

 /* Etiqueta bajo cada circulo (AÑOS, PAÍSES, EMPRESAS) */
 #circleBar span {
     font-size: 68%;
 }

 /* El bloque de la derecha se alinea abajo, a la altura del pie del logo, para
    que buscador, idiomas y bandera queden justo encima de la imagen de
    cabecera en vez de pegados al borde superior. El alto es el del logo. */
 #menu_superior_dchafull1_derecha {
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     min-height: 110px;
     padding-bottom: 6px;
     box-sizing: border-box;
 }

 /* --- CABECERA: buscador, idiomas y bandera -------------------------------
    Buscador arriba e idiomas debajo, los dos alineados a la derecha, y la
    bandera de la sede a su derecha centrada respecto a las dos filas. */
 .cab-utilidades {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 14px;
 }

 .cab-utilidades-col {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 6px;
 }

 .cab-utilidades-col .cab-buscador {
     margin: 0;
     display: flex;
 }

 .cab-utilidades-col .cab-idiomas {
     white-space: nowrap;
     text-align: right;
 }

 /* Formulario oculto del cambio de idioma: no debe ocupar sitio ni separar
    el buscador de los idiomas (se envia por JS, sigue funcionando oculto). */
 #form_idioma {
     display: none;
     margin: 0;
 }

 .cab-bandera {
     flex: 0 0 40px;
     display: flex;
     align-items: center;
 }

 .cab-bandera img {
     width: 40px;
     height: auto;
     display: block;
 }

 /* --- ESTILOS TARJETAS (CARDS) --- */
 .event-card {
     background: #fff;
     border: none;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     /* Hueco alrededor: al hacer scale(1.05) en el hover la tarjeta crece y
        antes se montaba sobre las vecinas y sobre el texto de arriba. */
     margin: 14px 5px 18px 5px;
     height: auto;
     flex: 1 1 auto;
     /* con la columna en flex, todas las tarjetas igualan altura */
     padding: 10px 15px 15px 15px;
     transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
     display: flex;
     flex-direction: column;
 }

 .event-card:hover {
     box-shadow: 0px 10px 20px -3px rgba(0, 0, 0, 0.4);
     transform: scale(1.05) translate(-5px, -5px);
     position: relative;
     z-index: 2;
     /* la que se amplia queda por encima de las vecinas */
 }

 /* La columna que contiene una tarjeta de evento se vuelve flex, de modo que
    la tarjeta se estira hasta el alto de la fila y todas quedan iguales. */
 [class*="col-"]:has(> .event-card) {
     display: flex;
     align-items: stretch;
 }

 /* La tarjeta entera es un enlace: sin subrayado y con los colores del texto
    tal cual, para que no se vea como un enlace gigante. */
 a.event-card--enlace,
 a.event-card--enlace:hover,
 a.event-card--enlace:focus {
     text-decoration: none !important;
     color: inherit;
 }

 /* El "Información" ya no es un <a>, pero debe seguir viendose como boton */
 .event-card--enlace .btn-mas-info {
     display: inline-block;
     cursor: pointer;
 }

 .card-img-wrapper {
     position: relative;
     height: 230px;
     overflow: hidden;
     flex: 0 0 auto;
     /* Imagen a sangre: anula el padding de la tarjeta para que
               llegue a los bordes y pegue arriba, justo sobre label-live */
     margin: -10px -15px 0 -15px;
 }

 .card-img-wrapper img {
     width: 100% !important;
     height: 100% !important;
     max-width: none !important;
     object-fit: cover;
     object-position: center center;
 }

 /* La cinta amarilla diagonal */
 .card-img-wrapper::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 40px;
     /* background: var(--staregister-yellow); */
     transform: skewY(-5deg) translateY(-20px);
     z-index: 1;
 }

 .card-body {
     padding: 0 0 0 0;
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     min-height: 0;
 }

 .label-live {
     color: var(--staregister-lightgray);
     font-size: 0.75rem;
     font-weight: normal;
     text-transform: uppercase;
     display: block;
     margin: 10px 0;
 }

 /* Modalidad y sede en la misma linea: la sede a la derecha */
 .card-etiquetas {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 10px;
 }
 .card-etiquetas .label-live { flex: 1 1 auto; min-width: 0; }

 .label-sede {
     flex: 0 0 auto;
     max-width: 55%;
     color: var(--staregister-orange, #F4B434);
     font-size: 0.72rem;
     font-weight: 400;
     opacity: .75;
     text-transform: uppercase;
     letter-spacing: .03em;
     text-align: right;
     margin: 10px 0;
 }

 .card-title {
     /* color: var(--staregister-orange) !important; */
     color: #2E3946 !important;
     font-weight: 700;
     font-size: 1.28rem;
     line-height: 1.25;
     height: auto;
     /* El titulo se autoajusta: 1 o 2 lineas como maximo */
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     margin: 10px 0;
 }

 .card-date {
     font-size: 0.85rem;
     font-weight: bold;
     color: var(--staregister-orange) !important;
     margin: 5px 0 15px 0;
 }

 .card-text {
     font-size: 0.7rem;
     color: #666;
     line-height: 1.3 !important;
     margin-bottom: 20px;
     /* Ocupa el espacio restante; si el titulo crece a 2 lineas,
			   el texto dispone de menos espacio y se recorta */
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
     text-align: left !important;
 }

 /* El boton siempre queda al fondo de la tarjeta */
 .card-body .btn-mas-info {
     margin-top: auto;
     align-self: flex-start;
 }

 .btn-informacion {
     background-color: var(--staregister-dark);
     color: #fff;
     border: none;
     padding: 5px 20px;
     font-size: 0.85rem;
     font-weight: bold;
 }


 /* --- ESTILOS CASOS DE ÉXITO  --- */
 :root {
     --staregister-yellow: #FFB800;
     --text-dark: #232D3B;
     --bg-light-section: #F2F2F4;
     --text-testimonial: #555555;
 }

 /* body { font-family: 'Segoe UI', sans-serif; } */

 .success-cases-section {
     margin: 0;
     padding: 5% 0 0 0;
     background-color: var(--bg-light-section);
     padding: 80px 0 40px 0;
 }

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

 .main-title {
     color: var(--text-dark);
     font-size: 2rem !important;
     font-weight: 800;
     text-transform: uppercase;
     margin-bottom: 5px;
     text-align: center;
 }

 .sub-title {
     color: var(--staregister-yellow);
     font-size: 1.7rem;
     font-weight: 600;
     text-align: center;
 }

 /* --- ESTILOS DE LA FICHA --- */
 /* Con rows/slidesPerRow, Slick monta esta estructura:
      .slick-slide > div (fila) > div (celda) > .testimonial-slide
    y a la celda le escribe en el atributo style width:50% y
    display:inline-block. Ese inline-block alinea las celdas por la linea base
    del texto, asi que las dos fichas de una fila quedaban desniveladas y con
    distinto alto.

    La fila pasa a ser flex y las celdas tambien, con align-items:stretch, para
    que las dos fichas de cada fila midan lo mismo. El display de la celda
    necesita !important porque el que hay que ganar es un estilo en linea. */
 .testimonial-slider .slick-slide > div {
     display: flex;
     align-items: stretch;
 }

 .testimonial-slider .slick-slide > div + div {
     margin-top: 10px;
 }

 .testimonial-slider .slick-slide > div > div {
     display: flex !important;
     align-items: stretch;
     float: none;
 }

 .testimonial-slider .slick-slide .testimonial-slide {
     display: flex;
     width: 100%;
     padding: 0 5px;
     box-sizing: border-box;
 }

 .testimonial-slider .slick-slide .testimonial-slide > .testimonial-card-horizontal {
     width: 100%;
     margin: 0;
 }

 .success-cases-section .testimonial-slider .testimonial-card-horizontal {
     width: 100%;
 }

 .testimonial-card-horizontal {
     background-color: #fff;
     border: 1px solid #EAEAEA;
     display: flex !important;
     /* Altura fija: todas las tarjetas iguales aunque el testimonio o el logo
        sean de distinto tamaño. */
     height: 185px;
     min-height: 185px;
     margin: 14px;
     /* Espacio entre fichas en el slider */
     transition: all 0.3s ease;
     overflow: hidden;
 }

 /* Columna del logo: ancho fijo en px (no un %), asi la caja de la imagen
    mide lo mismo en todas las tarjetas. */
 .logo-wrapper {
     flex: 0 0 150px;
     max-width: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-right: 1px solid #EEEEEE;
     padding: 18px;
     overflow: hidden;
 }

 .logo-placeholder {
     text-align: center;
     color: #CCCCCC;
     font-weight: 700;
     font-size: 0.8rem;
     text-transform: uppercase;
 }

 /* Logo real del caso de exito: entra completo en su hueco, sin deformarse y
    sin poder empujar el alto de la tarjeta. */
 .logo-wrapper img {
     max-width: 100%;
     max-height: 100px;
     width: auto;
     height: auto;
     object-fit: contain;
     display: block;
 }

 .testimonial-content-wrapper {
     flex: 1;
     min-width: 0;
     padding: 26px 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .testimonial-name {
     color: var(--staregister-yellow);
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.35;
     margin-bottom: 10px;
 }

 /* Con altura fija, un testimonio largo se recorta en lugar de desbordar */
 .testimonial-text {
     color: var(--text-testimonial);
     font-size: 0.82rem;
     line-height: 1.65;
     font-style: italic;
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .testimonial-text p {
     margin: 0px;
 }

 /* --- PERSONALIZACIÓN PUNTOS SLIDER --- */
 .slick-dots {
     bottom: -50px;
     list-style: none;
     display: flex !important;
     justify-content: center;
     padding: 0;
 }

 .slick-dots li {
     margin: 0 5px;
 }

 .slick-dots li button {
     font-size: 0;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #DDDDDD;
     border: none;
     padding: 0;
     cursor: pointer;
 }

 .slick-dots li.slick-active button {
     background: #BBBBBB;
 }

 /* --- CAMPO DE FICHERO (CV de las ofertas de empleo) -----------------------
    El input de tipo file no admite los estilos de .imput_texto, asi que se le
    da su propia caja para que encaje con el resto del formulario. */
 .imput_fichero {
     display: block;
     width: 100%;
     box-sizing: border-box;
     background: #f2f2f2;
     border: 1px solid #e2e2e2;
     padding: 10px 12px;
     font-size: 0.9rem;
     cursor: pointer;
 }

 .imput_fichero::file-selector-button {
     background: #333f4f;
     color: #fff;
     border: none;
     border-radius: 3px;
     padding: 7px 16px;
     margin-right: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: background .15s ease;
 }

 .imput_fichero::file-selector-button:hover {
     background: #f4b333;
 }

 .sr-cv-ayuda {
     display: block;
     color: #7a7a7a;
     margin-top: 6px;
 }

 /* --- DISTINTIVO DE reCAPTCHA ---------------------------------------------
    El contenido que se ve (.rc-anchor ...) vive dentro de un iframe de Google,
    asi que desde aqui solo se puede tocar su contenedor, .grecaptcha-badge.
    El menu de navegacion usa z-index 999 y sus <li> llegan a 1147483647, con
    lo que tapaban el distintivo. Se le da el maximo valor posible para que
    quede por encima de todo. */
 .grecaptcha-badge {
     z-index: 2147483647 !important;
     visibility: visible !important;
 }

 /* Pestanas de "Somos Staregister" y compania: principal.css les pone
    color: #e9ecef, un gris casi blanco que sobre fondo claro apenas se lee.
    Se oscurece en todos los tamanos; la activa sigue en amarillo. */
 .nav-underline-custom .nav-link {
     color: #6c757d;
 }

 /* Puntos mas discretos en todos los carruseles: los grises llenos competian
    con el contenido. El activo se distingue por opacidad, no por color. */
 .slick-dots li button {
     opacity: 0.45;
 }

 .slick-dots li.slick-active button {
     opacity: 0.8;
 }

 /* Ocultar flechas por defecto para limpiar el diseño */
 .slick-prev,
 .slick-next {
     display: none !important;
 }







 /* --- CONTACTA --- */
 :root {
     --sr-yellow: #FFB800;
     --sr-yellow-rgba: rgba(255, 184, 0, 0.85);
     --sr-blue-rgba: rgba(0, 86, 179, 0.7);
     --sr-black-rgba: rgba(0, 0, 0, 0.7);
 }

 /* body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #fff;
        } */

 /* --- TEXTOS DE CABECERA --- */
 .contact-header {
     padding: 40px 0 40px;
     text-align: center;
 }

 .contact-header h2 {
     color: var(--sr-yellow);
     font-weight: bold;
     font-size: 2.6rem !important;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 5px;
 }

 .contact-header p {
     color: var(--sr-yellow);
     font-weight: 600;
     font-size: 1.6rem;
     margin: 0 auto;
     line-height: 1.3;
     padding: 0 160px;
 }

 /* --- BANNERS INFERIORES --- */
 /* La fila lleva la clase g-0 de Bootstrap, que anula los gutters, y los tres
    banners quedaban pegados unos a otros. Se separan 20px con 10px de padding
    a cada lado de la columna, y la fila lleva el margen negativo equivalente
    para que el conjunto siga alineado con el resto de la seccion. */
 .contacta-section .row {
     margin-left: -10px;
     margin-right: -10px;
 }

 .contacta-section .row > [class*="col-"] {
     padding-left: 10px;
     padding-right: 10px;
 }

 /* La cabecera no es una columna, asi que hay que devolverle ese hueco */
 .contacta-section .contact-header {
     padding-left: 10px;
     padding-right: 10px;
 }

 .banner-container {
     position: relative;
     height: 140px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     overflow: hidden;
 }

 .banner-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     z-index: 1;
 }

 /* Capa de color (Overlay) */
 /* .banner-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 2;
        } */

 .text-wrapper {
     position: relative;
     z-index: 3;
     color: #fff;
     text-align: left;
     padding: 0 15px;
     margin: 30px 0 0 0;
     width: 100%;
 }

 .text-wrapper span {
     display: block;
     font-weight: 400;
     font-size: 1.5rem;
     text-transform: uppercase;
 }

 .text-wrapper strong {
     display: block;
     font-weight: 900;
     font-size: 2.2rem;
     line-height: 1;
     text-transform: uppercase;
 }

 /* Colores específicos de los Overlays */
 .overlay-black {
     background-color: var(--sr-black-rgba);
 }

 .overlay-blue {
     background-color: var(--sr-blue-rgba);
 }

 .overlay-yellow {
     background-color: var(--sr-yellow-rgba);
 }


 :root {
     --sr-yellow: #FFB800;
     /* Amarillo corporativo de Staregister */
     --sr-dark-overlay: rgba(35, 45, 59, 0.85);
     /* Fondo oscuro con transparencia */
 }

 /* body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        } */

 /* Contenedor principal con imagen de fondo */
 .contact-wrapper {
     /* background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920') no-repeat center center; */
     background: url('../img/formulario-contacto.png');
     background-size: cover;
     /* min-height: 100vh; */
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 /* Capa de color oscura sobre la imagen */
 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--sr-dark-overlay);
     z-index: 1;
 }

 .contact-container {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 2800px;
     padding: 40px 20px;
     color: #fff;
 }

 /* Títulos */
 .contact-container h1 {
     font-weight: 800;
     font-size: 3rem;
     text-transform: uppercase;
     margin-bottom: 0;
     letter-spacing: 2px;
 }

 .contact-container h2 {
     color: var(--sr-yellow);
     font-weight: 600;
     font-size: 1.5rem !important;
     margin-bottom: 40px;
 }

 /* Estilo de los inputs */
 .form-control {
     border-radius: 0 !important;
     padding: 5px 8x;
     font-size: 1.1rem;
     margin-bottom: 10px;
     background-color: #fff;
 }

 /* Placeholder en amarillo corporativo */
 .form-control::placeholder {
     color: var(--sr-yellow);
     font-weight: 600;
     opacity: 1;
 }

 textarea.form-control {
     height: 150px;
     resize: none;
 }

 /* Textos pequeños de política de privacidad */
 .privacy-text {
     font-size: 0.75rem;
     line-height: 1.4;
     margin-bottom: 10px;
     display: flex;
     align-items: flex-start;
 }

 .privacy-text input {
     margin-top: 3px;
     margin-right: 10px;
 }

 /* Botón de Enviar */
 .btn-enviar {
     background-color: var(--sr-yellow);
     color: #fff;
     border: none;
     border-radius: 0px;
     padding: 2px 40px;
     font-weight: 400;
     text-transform: uppercase;
     float: right;
     transition: background-color 0.3s;
 }

 .btn-enviar:hover {
     background-color: #e5a500;
     color: #fff;
 }

 @media (max-width: 768px) {
     .contact-container h1 {
         font-size: 2rem;
     }

     .btn-enviar {
         width: 100%;
         float: none;
     }
 }







 :root {
     --sr-yellow: #FFB800;
     --sr-dark-bg: #1a1e26;
 }

 /* body {
            margin: 0;
            font-family: 'Segoe UI', sans-serif;
        } */

 /* --- FOOTER AGENCIA --- */
 .footer-agencia {
     /* background: linear-gradient(rgba(26, 30, 38, 0.85), rgba(26, 30, 38, 0.85)), 
                        url('../img/pie.png'); */
     background: url('../img/pie.png');
     background-size: cover;
     background-position: center;
     /* Antes 50px 0 40px 0: sobraba mucho aire debajo del slogan. */
     padding: 35px 0 12px 0;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 /* El parrafo que envuelve la imagen del slogan arrastraba el margin-bottom
    por defecto de <p>, sumando otro hueco al padding del footer. */
 .footer-agencia .slogan {
     display: block;
     margin-left: auto;
 }

 .footer-agencia p:last-child {
     margin-bottom: 0 !important;
 }

 /* Contenedor del mapa mundial de fondo */
 .map-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80%;
     opacity: 0.2;
     z-index: 1;
     pointer-events: none;
 }

 .footer-content {
     position: relative;
     z-index: 2;
 }

 .agencia-info p {
     margin: 0.3rem !important;
 }

 /* Columna Izquierda: Información Agencia */
 .agencia-nombre {
     color: var(--sr-yellow);
     font-weight: 800;
     font-size: 1.8rem;
     margin-bottom: 5px;
 }

 .agencia-direccion {
     font-weight: 400;
     font-size: 1rem;
     margin-top: 0;
 }

 .agencia-enlaces {
     padding-top: 0px;
 }

 .enlaces-footer {
     color: #fff;
     text-decoration: none;
     margin: 0;
     padding: 0;
 }

 /* Columna Derecha: Redes y Web */
 .social-icons {
     display: flex;
     gap: 15px;
     justify-content: flex-end;
     margin-bottom: 10px;
 }

 .social-icons a {
     background-color: var(--sr-yellow);
     color: var(--sr-dark-bg);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-size: 1.2rem;
     transition: transform 0.3s ease;
 }

 .social-icons a:hover {
     transform: scale(1.1);
 }

 .web-url {
     color: var(--sr-yellow);
     font-weight: 800;
     font-size: 1.4rem;
     text-decoration: none;
     display: block;
     text-align: right;
 }

 img.slogan {
     width: 155px;
 }

 @media (max-width: 768px) {

     .social-icons,
     .web-url {
         justify-content: center;
         text-align: center;
     }

     .agencia-info {
         text-align: center;
         margin-bottom: 30px;
     }
 }




 /* Quienes somos */
 .why-section {
     padding: 0 0 0 0;
     background-color: var(--sr-gray-bg);
 }

 /* --- Estilos de Imagen --- */
 .image-stack {
     display: flex;
     flex-direction: column;
     gap: 0px;
 }

 .image-stack img {
     width: 300px;
     object-fit: cover;
 }

 .img-top {
     width: 150px;
     margin-bottom: 5px;
 }

 .img-bottom {
     width: 150px;
 }

 .yellow-bar-decor {
     width: 60px;
     height: 8px;
     background-color: var(--sr-yellow);
     margin: 0 84px 0 0;
 }

 .text-stack {
     padding-left: 40px;
 }

 /* --- Estilos de Texto --- */
 .why-title {
     color: var(--sr-dark);
     font-weight: 800;
     font-size: 2.2rem;
     margin-bottom: 5px;
 }

 .title-underline {
     width: 80px;
     height: 6px;
     background-color: var(--sr-yellow);
     margin-bottom: 40px;
 }

 .benefit-list {
     list-style: none;
     padding-left: 20px;
     font-family: Exo, sans-serif, 'Anton';
 }

 .benefit-item {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
     color: var(--sr-text-muted);
 }

 .benefit-icon {
     color: var(--sr-yellow);
     font-size: 1.4rem;
     margin-right: 15px;
     min-width: 30px;
     display: flex;
     justify-content: center;
 }


 .t-gris {
     color: #A7ABAF;
 }

 .texto-derecha {
     text-align: right;
     font-size: 1.9em !important;
 }

 .profile-section {
     padding: 40px 0;
     background-color: #fff;
 }

 /* Texto principal superior */
 .main-instruction {
     font-size: 1.55rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 10px;
 }

 .highlight-country {
     color: var(--sr-yellow);
     font-size: 1.55rem;
 }

 /* Estilos de la firma/perfil */
 .director-photo {
     width: 60px;
     height: 60px;
     object-fit: cover;
     border-radius: 0px;
     /* Ajuste sutil como en la imagen */
 }

 .director-name {
     color: var(--sr-yellow);
     font-weight: 800;
     font-size: 1.2rem;
     margin: 0;
     line-height: 1;
     align-items: center;
 }

 .director-title {
     color: var(--sr-yellow);
     font-weight: 400;
     font-size: 1rem;
     margin-top: 5px;
 }

 /* Ajuste para pantallas pequeñas */
 @media (max-width: 768px) {
     .main-instruction {
         font-size: 1.5rem;
     }

     .director-name {
         font-size: 1.4rem;
     }
 }


 /* Ajuste para móviles */
 @media (max-width: 768px) {
     .why-title {
         font-size: 1.8rem;
     }

     .image-stack {
         margin-bottom: 40px;
     }
 }

 .organization-section {
     margin: 20px 0 20px 0;
 }

 h1.titulo_seccion {
     display: block;
     padding: 15px 0 0 0;
     margin: 15px 0 0 0;
     color: 333F4F;
     font-weight: 800px;
     font-size: 3.5rem;
 }

 h2.titulo_seccion {
     display: block !important;
     padding: 0 0 15px 0 !important;
     margin: 0 !important;
     color: #f4b333 !important;
     font-weight: normal !important;
     font-size: 2.5rem !important;
 }

 h2.subtitulo_seccion {
     display: block !important;
     padding: 15px 0px !important;
     margin: 15px 0 0 0 !important;
     color: 333f4f !important;
     font-weight: 800px !important;
     font-size: 2.5rem !important;
 }

 /* Boton de envio de los formularios: llevaba modulo_30 (30% del ancho del
    formulario) y quedaba desproporcionado respecto a su texto. Se ajusta al
    contenido con un padding generoso a los lados. */
 .enviar_form .boton_enviar,
 .enviar_form .boton_enviar.modulo_30 {
     display: inline-block !important;
     width: auto !important;
     min-width: 0 !important;
     max-width: 100% !important;
     float: none !important;
     padding: 12px 34px !important;
     border-radius: 3px;
 }

 .enviar_form {
     text-align: center;
 }

 .titulo_parrafo {
     display: block;
     padding: 0 0 0 0;
     margin: 10px 0 20px 0;
     color: #f4b333;
     /* Estaba como 800px: unidad invalida, el navegador descartaba la
        declaracion y los titulos salian en peso normal. */
     font-weight: 800 !important;
     font-size: 1.5rem;
 }

 .titulo_normas {
     display: block;
     padding: 0 0 0 0;
     margin: 10px 0 0 0;
     color: #f4b333;
     font-weight: 800;
     font-size: 1.2rem;
 }

 .destacado_parrafo {
     font-weight: bold;
     font-size: 1rem;
     color: #606060;
 }

 .destacado_titulo {
     color: #f4b333;
     font-weight: 800px;
     font-size: 2.5rem;
 }

 .actualidad-section {
     margin: 20px 0 20px 0;
     padding: 20px 80px 40px 80px;
     background: url('../img/formulario-contacto.png');
     background-size: contain;
 }

 .frase-encabezado-seccion {
     font-size: 4rem;
     color: #fff;
     text-align: center;
     margin: 20px 0 0 0;
 }

 /* Las imagenes de encabezado (encabezado-proceso-certificacion.png,
    encabezado-actualidad.png...) son muy anchas y se salian de pantalla. Que
    se ajusten al ancho disponible sin deformarse. */
 .frase-encabezado img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0 auto;
 }


 #bloque_derecha {
     position: relative;
     float: left;
     width: 25%;
     background-color: #f1f1f3;
     height: auto;
     padding: 0;
     margin-top: 20px;
 }

 /* --- Listado del submenu lateral: "PROXIMOS EVENTOS FORMATIVOS" (submenu_eventos.php)
        y "ULTIMAS NOTICIAS" (submenu_noticias.php). Miniatura + titulo + fecha. --- */
 .proximos-eventos {
     flex: 0 0 100%;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
     padding: 10px 8% 20px 8%;
     margin: 10px 0 20px 0;
 }

 .proximos-eventos .pe-titulo {
     border-top: 1px solid #d5d5d5;
     padding-top: 18px;
     margin-bottom: 6px;
     font-family: Exo, sans-serif, 'Anton';
     line-height: 1.15;
 }

 .proximos-eventos .pe-linea1 {
     display: block;
     font-weight: 700;
     font-size: 1.25rem;
     color: #6b7280;
     letter-spacing: .5px;
 }

 .proximos-eventos .pe-linea2 {
     display: block;
     font-weight: 800;
     font-size: 1.35rem;
     color: var(--staregister-orange, #F4B434);
     letter-spacing: .5px;
 }

 .proximos-eventos .pe-item {
     display: flex;
     align-items: flex-start;
     /* la miniatura arriba, no centrada: los titulos largos crecen hacia abajo */
     gap: 14px;
     padding: 14px 0;
     border-bottom: 1px solid #dcdcdc;
     text-decoration: none;
     position: relative;
     transition: transform .25s ease;
 }

 .proximos-eventos .pe-item:last-child {
     border-bottom: 0;
 }

 /* Hover: se amplia la fila entera (no se cambia el color del texto) */
 .proximos-eventos .pe-item:hover {
     transform: scale(1.04);
     z-index: 2;
     /* por encima de las filas vecinas al crecer */
 }

 .proximos-eventos .pe-thumb {
     flex: 0 0 72px;
     width: 72px;
     height: 48px;
     margin-top: 2px;
     /* alinea el borde superior con la primera linea del titulo */
     overflow: hidden;
     border-radius: 3px;
     background: #e8e8e8;
 }

 .proximos-eventos .pe-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .proximos-eventos .pe-texto {
     min-width: 0;
 }

 .proximos-eventos .pe-nombre {
     display: block;
     font-family: Exo, sans-serif;
     font-weight: 600;
     font-size: .85rem;
     line-height: 1.3;
     color: #4a5568;
     transition: color .15s ease;
 }

 .proximos-eventos .pe-fecha {
     display: block;
     font-family: Exo, sans-serif;
     font-weight: 700;
     font-size: .72rem;
     color: var(--staregister-orange, #F4B434);
     margin-top: 4px;
 }

 .proximos-eventos .pe-vacio {
     font-size: .8rem;
     color: #8a8a8a;
     padding: 14px 0;
 }

 @media (max-width:991px) {
     .proximos-eventos {
         padding-left: 5%;
         padding-right: 5%;
     }
 }

 /* Los tres banners del submenu lateral: el texto arrancaba pegado al borde
    izquierdo de la imagen (.margen_2 solo pone un 2%). Se le da algo mas de
    aire sin tocar .margen_2, que se usa en mas sitios. */
 .imagen_form .margen_2,
 .oferta_form .margen_2,
 .verifica_form .margen_2 {
     padding-left: 22px;
 }

 .oferta_form {
     background: url('../img/verificador-certificados.png') no-repeat top center;
     background-size: cover;
     background-size: cover;
 }

 /* Tercer banner del submenu lateral: verificador de certificados */
 .verifica_form {
     background: url('../img/ofertas-empleo.png') no-repeat center center;
     background-size: cover;
 }
 /* Variante del banner cuando lleva al verificador de diplomas */
 .verifica_form--diploma {
     background-image: url('../img/banner-verifica-diploma.png');
 }

 .banner_verificador { display: block; text-decoration: none; }




 /* ---------------------------- Certificacion Personas ------------------------------ */

 .cert-levels-section {
     padding: 80px 0;
     background-color: #fff;
 }

 /* --- Estilo de los Banners Izquierdos --- */
 /* .banner-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
            overflow: hidden;
            background-color: var(--sr-yellow);
            height: 80px;
        }

        .banner-link:hover {
            transform: translateX(10px);
        } */

 .banner-img {
     display: flex;
     align-items: center;
     text-decoration: none;
     margin-bottom: 10px;
 }

 /* Antes tenia un tope de 1000px, asi que en pantallas anchas quedaba corta
    por la derecha. Ahora ocupa todo el ancho de la columna y se recorta en
    vertical para conservar la franja de 300px de alto. */
 #img-cert-personas {
     display: block;
     width: 100% !important;
     max-width: 100% !important;
     height: 300px !important;
     max-height: 300px !important;
     object-fit: cover;
     object-position: center;
 }

 /* .banner-img {
            width: 120px;
            height: 100%;
            object-fit: cover;
        } */

 /* .banner-text {
            flex-grow: 1;
            padding-left: 25px;
            color: white;
            font-size: 1.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
        } */

 /* --- Estilo de la Imagen del Certificado --- */
 .certificate-display {
     text-align: center;
     position: relative;
 }

 .certificate-display img {
     max-width: 100%;
     height: auto;
     /* El sombreado suave para dar efecto de profundidad sobre la balda */
     /* filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); */
 }

 /* Ajustes para móviles */
 @media (max-width: 768px) {
     .banner-text {
         font-size: 1.4rem;
     }

     .banner-link {
         height: 65px;
     }

     .certificate-display {
         margin-top: 50px;
     }
 }


 iso-section {
     padding: 60px 0;
     background-color: #fff;
 }

 /* --- Estilo del Bloque ISO (Alineación Horizontal Perfecta) --- */
 .iso-card {
     display: flex;
     /* El texto se apoya en la base de la imagen */
     align-items: flex-end;
     margin-bottom: 25px;
     /* Espaciado entre filas */
 }

 /* --- Contenedor de Icono Sutil --- */
 .iso-icon-wrapper {
     min-width: 50px;
     /* Ancho fijo para alineación */
     margin-right: 15px;
     display: flex;
     justify-content: center;
 }

 .iso-icon-wrapper img {
     width: 55px;
     /* Tamaño muy sutil, como en el original */
     /* height: auto; */
     /* opacity: 0.15;
            filter: grayscale(100%); */
 }

 /* --- Contenedor de Texto --- */
 .iso-text-content {
     flex-grow: 1;
 }

 /* Nombre ISO (Fuerte y Grande) */
 .iso-name {
     font-size: 1.2rem;
     /* Tamaño prominente */
     font-weight: 800;
     /* Mucho peso, como en la imagen */
     color: var(--sr-dark-blue);
     margin: 0;
     line-height: 1.1;
 }

 /* Descripción ISO (Sutil e Inferior) */
 .iso-desc {
     font-size: 0.88rem;
     color: var(--sr-gray-text);
     font-weight: 500;
     display: block;
     margin-top: 3px;
     line-height: 1.3;
 }




 /* --- CAJA DEL VERIFICADOR DE CERTIFICADOS ---------------------------------
    Banda clara a todo el ancho con la foto del certificado a la derecha
    (la misma imagen de siempre) y el formulario sobre la parte izquierda. */
 .verificador {
     position: relative;
     width: 100%;
     background: #f2f2f2 url('../img/verificador-certificados.jpg') no-repeat right center;
     background-size: auto 100%;
     min-height: 320px;
     display: flex;
     align-items: center;
     margin: 10px 0 30px;
     overflow: hidden;
 }

 /* Verificador de diplomas: misma caja, otra foto de fondo. */
 .verificador--diploma {
     background-image: url('../img/verificador-diplomas.jpg');
 }

 /* Degradado para que el texto se lea sobre la foto en pantallas estrechas */
 .verificador:before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #f2f2f2 0%, #f2f2f2 42%, rgba(242, 242, 242, 0) 62%);
     pointer-events: none;
 }

 .verificador-caja {
     position: relative;
     z-index: 1;
     width: 100%;
     max-width: 420px;
     padding: 30px 40px;
 }

 .verificador-titulo {
     margin: 0 0 22px;
     line-height: 1.6;
 }

 /* El interlineado se declara en los propios <span>: #internacional_mapa p de
    principal.css fija line-height:1.4em y, al ser un selector de id y estar en
    em, gana al del <p> y se hereda como valor fijo. */
 .verificador-titulo-1,
 .verificador-titulo-2 {
     display: block;
     color: #f4b333;
     font-family: Exo, sans-serif, 'Anton';
     line-height: 1.3;
 }

 .verificador-titulo-1 {
     font-size: 1.55rem;
     font-weight: 700;
 }

 .verificador-titulo-2 {
     font-size: 2rem;
     font-weight: 800;
 }

 .verificador-input {
     width: 100%;
     box-sizing: border-box;
     padding: 11px 14px;
     margin-bottom: 18px;
     border: 1px solid #d8d8d8;
     border-radius: 3px;
     background: #fff;
     font-size: .9rem;
     color: #333f4f;
 }

 .verificador-input::placeholder {
     color: #b3b3b3;
 }

 .verificador-input:focus {
     outline: none;
     border-color: #f4b333;
 }

 .verificador-boton {
     border: 0;
     background: #f4b333;
     color: #fff;
     font-weight: 700;
     font-size: .85rem;
     padding: 7px 26px;
     border-radius: 3px;
     cursor: pointer;
     transition: background .2s ease;
 }

 .verificador-boton:hover {
     background: #e0a223;
 }

 @media (max-width: 767px) {
     .verificador {
         background-position: right -60px center;
         min-height: 0;
     }

     .verificador-caja {
         max-width: 100%;
         padding: 26px 22px;
     }
 }

 /* --- FICHA DEL CERTIFICADO VERIFICADO ------------------------------------- */
 .cert-ficha {
     width: 100%;
     background: #fff;
     border: 1px solid #e6e6e6;
     border-radius: 6px;
     box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
     overflow: hidden;
     margin: 0 0 30px;
 }

 .cert-cabecera {
     position: relative;
     padding: 16px 26px 18px;
     border-bottom: 1px solid #eee;
     background: #fafafa;
 }

 /* El numero de certificado se saca del flujo y se ancla arriba a la derecha,
    asi no genera una fila propia por encima del nombre de la organizacion. */
 .cert-cabecera-top {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
     margin: 0;
 }
 .cert-cabecera-top .cert-numero {
     position: absolute;
     top: 16px;
     right: 26px;
 }

 .cert-estado {
     display: inline-flex;
     align-items: center;
     padding: 4px 14px;
     border-radius: 20px;
     font-size: .72rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .06em;
     color: #fff;
 }
 .cert-estado:before {
     content: "";
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: currentColor;
     margin-right: 8px;
 }
 .cert-estado--vigente  { background: #2e9e5b; }
 .cert-estado--retirado { background: #c0392b; }

 .cert-numero {
     font-size: .8rem;
     font-weight: 700;
     color: #8a8a8a;
     letter-spacing: .03em;
 }

 .cert-empresa {
     margin: 0;
     font-size: 1.35rem !important;
     font-weight: 800;
     color: #333f4f;
     line-height: 1.25;
 }

 .cert-razon {
     margin: 0;
     font-size: .95rem;
     font-weight: 700;
     color: #333f4f;
 }

 /* Separacion cuando la etiqueta va debajo de otro valor */
 .cert-etiqueta--sep { margin-top: 14px; }

 .cert-cuerpo { padding: 22px 26px 26px; }

 .cert-bloque { margin-bottom: 22px; }
 .cert-bloque:last-child { margin-bottom: 0; }

 .cert-etiqueta {
     display: block;
     font-size: .7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .05em;
     color: #9aa0a6;
     margin-bottom: 6px;
 }

 .cert-valor {
     display: block;
     font-size: .95rem;
     font-weight: 700;
     color: #333f4f;
 }

 .cert-texto {
     margin: 0;
     font-size: .9rem;
     line-height: 1.6;
     color: #444;
 }

 /* Normas como etiquetas amarillas */
 .cert-normas { display: flex; flex-wrap: wrap; gap: 8px; }
 .cert-norma {
     display: inline-block;
     padding: 6px 14px;
     border-radius: 3px;
     background: #f4b333;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
 }

 /* Rejilla de fechas: dos columnas */
 .cert-fechas {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px 26px;
     padding: 18px 0;
     margin-bottom: 22px;
     border-top: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
 }

 /* --- FICHA DEL DIPLOMA ----------------------------------------------------
    Reutiliza la tarjeta del certificado, pero el cuerpo se organiza en dos
    filas de dos columnas: arriba duracion y modalidad, debajo las fechas. */
 .dip-cuerpo { padding: 0 26px 24px; }

 .dip-rejilla {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px 26px;
     padding: 20px 0;
 }

 /* La segunda fila queda separada por una linea, sin borde suelto al final */
 .dip-rejilla--fechas {
     border-top: 1px solid #f0f0f0;
     padding-bottom: 0;
 }

 @media (max-width: 575px) {
     .dip-rejilla { grid-template-columns: 1fr; }
     .dip-cuerpo { padding-left: 18px; padding-right: 18px; }
 }

 /* Correo de contacto del formulario de CCP, en el amarillo corporativo */
 a.ccp-mail {
     color: #f4b333 !important;
     font-weight: 700;
     text-decoration: none;
 }

 a.ccp-mail:hover { text-decoration: underline; }

 /* --- AVISO CUANDO NO HAY RESULTADO ---------------------------------------
    Sustituye al parrafo rojo suelto: mismo ancho y misma tarjeta que la ficha
    de resultado, para que el bloque no quede huerfano bajo el buscador. */
 .cert-aviso {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     width: 100%;
     background: #fff;
     border: 1px solid #e6e6e6;
     border-left: 4px solid #c0392b;
     border-radius: 6px;
     box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
     padding: 22px 26px;
     margin: 0 0 30px;
 }

 .cert-aviso--conexion { border-left-color: #f4b333; }

 .cert-aviso-icono {
     flex: 0 0 auto;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #fdeceb;
     color: #c0392b;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     font-weight: 800;
     line-height: 1;
 }

 /* El icono de Font Awesome hereda tamaño y color del circulo */
 .cert-aviso-icono i { font-size: inherit; color: inherit; }

 .cert-aviso--conexion .cert-aviso-icono {
     background: #fdf3e2;
     color: #d79a1f;
 }

 .cert-aviso-texto { min-width: 0; }

 .cert-aviso-titulo {
     margin: 0 0 6px;
     font-size: 1.05rem !important;
     font-weight: 800;
     color: #333f4f;
     line-height: 1.3;
 }

 .cert-aviso-detalle {
     margin: 0;
     font-size: .92rem;
     line-height: 1.6;
     color: #666;
 }

 /* El enlace lleva a contacto.php y usa el amarillo corporativo, no el color
    de enlace por defecto del navegador. */
 .cert-aviso-detalle a {
     color: #f4b333;
     font-weight: 700;
     text-decoration: none;
 }

 .cert-aviso-detalle a:hover {
     text-decoration: underline;
 }

 @media (max-width: 575px) {
     .cert-aviso { padding: 18px; gap: 14px; }
 }

 .cert-lista {
     margin: 0;
     padding-left: 18px;
     font-size: .9rem;
     line-height: 1.6;
     color: #444;
 }
 .cert-lista li { margin-bottom: 4px; }

 @media (max-width: 575px) {
     .cert-fechas { grid-template-columns: 1fr; }
     .cert-cabecera, .cert-cuerpo { padding-left: 18px; padding-right: 18px; }
 }

 /* Texto principal superior */
 .titulo_gris_grande {
     font-size: 2.3rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 10px;
 }

 .btn-amarillo {
     background-color: var(--sr-yellow);
     color: #fff;
     border: 1px solid var(--sr-yellow);
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 400;
     /* text-transform: uppercase; */
     text-decoration: none;
     display: block;
     margin: 20px auto 0 auto;
     transition: all 0.3s ease;
     width: 190px !important;
     max-width: 250px !important;
     text-align: center;
 }

 .btn-amarillo:hover {
     background-color: #fff;
     color: var(--sr-yellow);
     border: 1px solid var(--sr-yellow);
     transition: all 0.3s ease;
 }


 /* ---------------------------- Formación ------------------------------ */
 .formacion-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .formacion-section::before {
     background-image: url('../img/texto-gris-formacion.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.5;
     /* ← solo afecta al fondo */

 }

 /* ---------------------------- Formación ------------------------------ */
 .certificacion-personas-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .certificacion-personas-section::before {
     background-image: url('../img/texto-gris-competencia-profesional.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.5;
     /* ← solo afecta al fondo */
 }

 /* ---------------------------- Actualidad ------------------------------ */
 .noticias-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .noticias-section::before {
     background-image: url('../img/texto-gris-actualidad.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.5;
     /* ← solo afecta al fondo */
 }

 /* ---------------------------- Empleo ---------------------------------- */
 .empleo-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .empleo-section::before {
     background-image: url('../img/texto-gris-oferta-empleo.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.5;
     /* ← solo afecta al fondo */
 }

 /* ---------------------------- Somos ----------------------------------- */
 .star-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .star-section::before {
     background-image: url('../img/texto-gris-staregister.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.4;
     /* ← solo afecta al fondo */
 }

 /* ---------------------------- Cotacto ----------------------------------- */

 .contacto-section {
     margin: 0 0 0 0;
     padding: 150px 0 50px 0;
     position: relative;
 }

 .contacto-section::before {
     /* Respaldo. partesuperior.php sobrescribe esta regla con la imagen del
        idioma activo (texto-gris-contacto_es/_en/_pt/_tc.png). */
     background-image: url('../img/texto-gris-contacto_es.png');
     background-size: contain;
     background-repeat: no-repeat;
     content: "";
     position: absolute;
     z-index: 0;
     inset: 0;
     opacity: 0.4;
     /* ← solo afecta al fondo */
 }

 #oculta_contacto_2 {
     margin-top: 40px;
     height: 0px !important;
     z-index: 9001;
 }

/* =========================================================================
   ESCALA TIPOGRAFICA FLUIDA
   =========================================================================
   Los titulos y textos que se repiten en toda la web pasan a tamano fluido
   con clamp(minimo, valor que crece con vw, maximo).

   Como se han calculado: el minimo es el tamano que tenian en movil y el
   maximo el de escritorio; entre 375px y 1366px de ancho el tamano interpola
   solo. Asi no hay que ir poniendo un font-size por cada breakpoint, que era
   la fuente de la mayoria de los descuadres.

   Va al final del fichero a proposito, para ganar por orden a las reglas de
   mas arriba sin subir la especificidad. El !important solo esta donde ya lo
   traia la regla original.

   Si hay que retocar un tamano, se cambia AQUI y no en movil.css.
   ========================================================================= */

 h1.titulo_seccion {
     font-size: clamp(1.6rem, 0.881rem + 3.07vw, 3.5rem);
 }

 h2.titulo_seccion {
     font-size: clamp(1.4rem, 0.9838rem + 1.78vw, 2.5rem) !important;
 }

 .header-section h1 {
     font-size: clamp(2rem, 1.054rem + 4.04vw, 4.5rem);
 }

 .header-section h2 {
     font-size: clamp(1.3rem, 0.7702rem + 2.26vw, 2.7rem) !important;
 }

 .header-section p {
     font-size: clamp(1rem, 0.7351rem + 1.13vw, 1.7rem);
 }

 .main-title {
     font-size: clamp(1.5rem, 1.311rem + 0.807vw, 2rem) !important;
 }

 .sub-title {
     font-size: clamp(1.1rem, 0.873rem + 0.969vw, 1.7rem);
 }

 .contact-header h2 {
     font-size: clamp(1.6rem, 1.222rem + 1.61vw, 2.6rem) !important;
 }

 .contact-header p {
     font-size: clamp(1rem, 0.773rem + 0.969vw, 1.6rem);
 }

 .titulo_gris_grande {
     font-size: clamp(1.5rem, 1.197rem + 1.29vw, 2.3rem);
 }

 .titulo_parrafo {
     font-size: clamp(1.2rem, 1.086rem + 0.484vw, 1.5rem);
 }

 .normas-header .titulo {
     font-size: clamp(1.9rem, 1.332rem + 2.42vw, 3.4rem);
 }

 .normas-header .subtitulo {
     font-size: clamp(1.15rem, 0.8284rem + 1.37vw, 2rem);
 }

 .certificacion-text p {
     font-size: clamp(1rem, 0.8108rem + 0.807vw, 1.5rem);
 }

 .destacado.subtitulo {
     font-size: clamp(1.3rem, 0.9878rem + 1.33vw, 2.125rem);
 }

 .card-title {
     font-size: clamp(1rem, 0.8936rem + 0.454vw, 1.281rem);
 }

 .news-title {
     font-size: clamp(1.1rem, 1.024rem + 0.323vw, 1.3rem);
 }

 .agencia-nombre {
     font-size: clamp(1.4rem, 1.249rem + 0.646vw, 1.8rem);
 }