/*
Theme Name: Sistema de Diseño Dominicano
Author: OGTIC
Description: Plantilla para instituciones gubernamentales de RD
Version: 1.8.15
License: MIT
*/
/* Reset default styles */

.has-text-align-justify {
    text-align: justify !important;
}


/* CONTENEDOR PADRE */
.menu-principal-container li.menu-item-has-children {
    position: relative;
}

.btn-reset {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
}

/* SUBMENU NORMAL (nivel 1) */
.menu-principal-container .sub-menu {
    position: absolute;
}

/* SUBMENU NIVEL 2 → abrir hacia la derecha */
.menu-principal-container .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 0;
}

.pd-l-none {
  padding-left: 0px !important;
}

/* =============================================
   MENÚ LATERAL SERVICIOS – Sticky
   ============================================= */

.sticky-sidebar-col {
    align-self: stretch;
}

.sticky-menu-wrapper {
    position: sticky;
    top: 20px;
}

.contenedor-menu-lateral-servicio {
    padding: 0;
}

.menu-vertical {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 56, 118, 0.10);
    background: #fff;
    border: 1px solid #e3ecf7;
}

.menu-header {
    background: #003876;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 10px 10px 0 0;
}

.contenedor-menu-lateral-servicio .nav-link {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #2d3d55;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #edf2f8;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    line-height: 1.4;
    text-decoration: none;
}

.contenedor-menu-lateral-servicio .nav-link:last-child {
    border-bottom: none;
}

.contenedor-menu-lateral-servicio .nav-link:hover {
    background: #eef4fb;
    border-left-color: #0066cc;
    color: #003876;
}

.contenedor-menu-lateral-servicio .nav-link.active {
    background: #e8f0fb;
    border-left-color: #003876;
    color: #003876;
    font-weight: 600;
}

.derechos-autor{
display: flex;
gap: 10px;
align-items: center;
}

.logo-derechos-autor{
  height: 30px;
  width: auto;
}

p {
    font-size: 18px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: 35px;
    text-align: left;

}

.informacion-footer p{ 
    text-align: center;
    font-size: 16px;

}


.nav-menu-interes{
  border: none;
}

.menu-icon-interes {
  border: none;
  background-color: transparent;
  border-radius: 6px;
  padding: 6px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.menu-icon-interes:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.menu-icon-interes svg {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-icon-interes[aria-expanded="true"] svg {
  opacity: 0.65;
  transform: scale(0.9);
}

/* 1. Contenedor principal */
.wpcf7-form {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 40px; 
    max-width: 1000px;

    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* 2. REGLA CLAVE: No borramos los <p>, solo les quitamos el margen 
   para que no separen los labels de los inputs */
.wpcf7-form p {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* 3. Título y Botón a ancho completo */
.wpcf7-form h2, 
.wpcf7-form .form-submit-container {
    grid-column: span 2;
}

/* 4. Estilo de los campos de texto */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100% !important;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-top: 5px;
    box-sizing: border-box;
}


:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}


.wpcf7-form textarea {
    height: 80px !important; /* Altura fija inicial (ajústalo a tu gusto) */
    min-height: 80px !important; /* Evita que se vea muy pequeño */
    max-height: 200px; /* Limita qué tanto puede el usuario estirarlo */
    resize: vertical; /* Permite al usuario agrandarlo solo hacia abajo, no a los lados */
}

/* 5. CORRECCIÓN DEFINITIVA DE RADIOS (Círculo + Texto pegados) */
.wpcf7-list-item {
    display: flex !important;
    align-items: center !important; /* Alinea el círculo con el texto */
    margin: 5px 0 !important;
}

.wpcf7-list-item input[type="radio"] {
    margin: 0 8px 0 0 !important; /* Espacio corto a la derecha del círculo */
    width: auto !important;
}

.wpcf7-list-item-label {
    margin: 0 !important;
    font-size: 14px;
    display: inline-block !important;
}

/* 6. Botón Enviar estilo profesional */
.wpcf7-submit {
    grid-column: span 2;
    justify-self: end;
    background-color: #002c6b !important;
    color: white !important;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .wpcf7-form { grid-template-columns: 1fr; }
    .wpcf7-form h2, .wpcf7-submit { grid-column: span 1; }
}

.group-info-service-contact .qr{
	flex: 1 1 30%; min-width: 200px; text-align: center; border-left: 1px solid #e0e6f1; padding-left: 20px;
}

.group-info-service-contact .qr img{
	
	width: 200px;
	height: 200px; 
	margin-bottom: 10px;
	
}

.rounded-circle {
	padding: 14px 20px;
}


.servicio-image{
	margin:25px;
}


/* page styles */


    .custom-content a:not(.has-img-link) img {
        cursor: zoom-in;
        transition: 0.3s ease;
    }
    .custom-content a:not(.has-img-link) img:hover {
        opacity: 0.85;
    }
    .custom-content a.has-img-link img {
        cursor: pointer;
        transition: 0.3s ease;
    }

    /* Asegurar que el visor esté sobre todo */
    .glightbox-container { z-index: 999999 !important; }

    /* Imágenes con link: contenedor y botón de lupa */
    .img-link-wrapper {
        position: relative;
        display: inline-block;
    }
    .img-zoom-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.65);
        color: #fff !important;
        border-radius: 6px;
        padding: 5px 9px;
        font-size: 16px;
        line-height: 1;
        opacity: 0;
        transition: opacity 0.25s ease;
        text-decoration: none !important;
        z-index: 2;
        cursor: zoom-in;
        /* Evitar que CSS de galerías WP lo estire */
        flex: none !important;
        width: auto !important;
        height: auto !important;
        object-fit: none !important;
    }
    .img-link-wrapper:hover .img-zoom-btn,
    .img-link-wrapper:focus-within .img-zoom-btn {
        opacity: 1;
    }

    /* Galerías del editor de bloques: respetar link vs lightbox */
    .wp-block-gallery a.has-img-link img {
        cursor: pointer;
    }
    .wp-block-gallery .img-link-wrapper {
        width: 100%;
        height: 100%;
    }
    .wp-block-gallery .img-link-wrapper a.has-img-link {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* =============================================
       SIDEBAR MENU – page.php (subpages)
       ============================================= */
    .subpages-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .subpages-menu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid #edf2f8;
    }

    .subpages-menu li:last-child { border-bottom: none; }

    .subpages-menu li > ul {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        background: #f7faff;
    }

    .subpages-menu li.open > ul { display: block; }

    .subpages-menu li a {
        flex: 1;
        padding: 10px 20px;
        font-size: 14px;
        color: #2d3d55;
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: background 0.18s, border-color 0.18s, color 0.18s;
        line-height: 1.4;
    }

    .subpages-menu li ul li a {
        padding-left: 30px;
        font-size: 13px;
    }

    .subpages-menu li a:hover {
        background: #eef4fb;
        border-left-color: #0066cc;
        color: #003876;
    }

    .subpages-menu li.current_page_item > a,
    .subpages-menu li.current_page_ancestor > a,
    .subpages-menu li.current_page_parent > a {
        background: #e8f0fb;
        border-left-color: #003876;
        color: #003876;
        font-weight: 600;
    }

    /* =============================================
       BOTÓN TOGGLE DEL SUBMENU
       ============================================= */
    .submenu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 12px;
        color: #555;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        transition: background 0.18s, color 0.18s;
        flex-shrink: 0;
    }

    .submenu-toggle:hover {
        background: #eef4fb;
        color: #003876;
    }

    .toggle-icon {
        display: inline-block;
        font-size: 18px;
        font-style: normal;
        transition: transform 0.2s ease;
        line-height: 1;
    }

    .subpages-menu li.open > .submenu-toggle .toggle-icon {
        transform: rotate(90deg);
    }


/* .alignleft img, img.alignleft {
    float: left;
    padding: 14px;
    padding-left: 0px;

} */
/* .alignright img, img.alignright {
    float: right;
    padding: 14px;
    padding-right: 0px;

} */

.bs4-reset {
    all: revert;
}

/* FORZAR COLUMNAS DE GUTENBERG */
.post-content .wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 2rem !important;
    gap: 20px; /* Espacio entre columnas */
}

/* Forzar el ancho de cada columna individual */
.post-content .wp-block-column {
    flex: 1 !important; /* Esto obliga a que se repartan el espacio */
    min-width: 300px;   /* Si la pantalla es menor a 300px, se apilan (móvil) */
    margin-left: 0 !important;
}

/* Ajuste para imágenes dentro de las columnas */
.post-content .wp-block-column img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Títulos dentro de columnas para que no se peguen */
.post-content .wp-block-column h3 {
    margin-top: 1rem !important;
}

/* RESPONSIVIDAD: En móviles (menos de 768px) que se apilen */
@media (max-width: 767px) {
    .post-content .wp-block-columns {
        display: block !important; /* En móvil sí las queremos una abajo de otra */
    }
    .post-content .wp-block-column {
        width: 100% !important;
        margin-bottom: 2rem;
    }
 
/* .alignleft img, img.alignleft {
    float: none; 
    width: 100%;
    height: auto;
    padding: 0px;
}

.alignright img, img.alignright {
    float: none; 
    width: 100%;
    height: auto;
    padding: 0px;
}
figure.alignright, figure.alignleft {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
} */

}

/* NORTIC B2 – Criterion 4.2 (C1): carousel arrow visibility on mobile is now
   controlled by the scoped CSS inside slider.php (always display:flex).
   This global block kept only the transition tweak; the display:none that
   blocked mobile navigation has been removed. */
@media (max-width: 768px) {
    .carousel-inner {
        overflow: visible;
    }
    .carousel-item {
        transition: transform 0.5s ease-in-out;
    }
}

/* =============================================================
   ESTILO PROFESIONAL PARA CONTACT FORM 7
   ============================================================= */

/* Contenedor principal del formulario */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en escritorio */
    gap: 20px;
    max-width: 900px;
    margin: 2rem auto;
    font-family: 'Inter', sans-serif;
}

/* Hacer que el Mensaje y el Botón ocupen las 2 columnas */
.form-grid label:nth-child(7), /* El textarea */
.form-grid label:nth-child(8), /* El checkbox */
.form-grid .wpcf7-submit,
.form-grid .wpcf7-response-output {
    grid-column: span 2;
}

/* Estilo de las etiquetas (Labels) */
.form-grid label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 5px;
}

/* Estilo de todos los Inputs, Selects y Textareas */
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid select,
.form-grid textarea {
    margin-top: 8px;
    padding: 12px 16px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #f8f9fa;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

/* NORTIC B2 – Criterion 4.1 (C5 / WCAG 2.4.7): visible focus indicator preserved.
   outline:none was removed — box-shadow alone does not satisfy Focus Visible. */
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    outline: 3px solid #003869;
    outline-offset: 1px;
    border-color: #003869;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 56, 105, 0.1);
}

/* Estilo específico para el Textarea */
.form-grid textarea {
    min-height: 150px;
    resize: vertical;
}

/* Estilo del Checkbox de Aceptación */
.form-grid .wpcf7-list-item {
    margin: 0;
    font-weight: normal;
}

.form-grid input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

/* Botón de Enviar (Submit) */
.form-grid input[type="submit"] {
    background-color: #003869; /* Azul institucional */
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%; /* Ocupa todo el ancho en móvil */
}

.form-grid input[type="submit"]:hover {
    background-color: #002a50;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.form-grid input[type="submit"]:active {
    transform: translateY(0);
}

/* Mensajes de Validación y Error */
.wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 5px;
    font-weight: normal;
}

.wpcf7-response-output {
    border: 2px solid #ffc107 !important; /* Advertencia */
    border-radius: 8px;
    padding: 15px !important;
    margin-top: 20px !important;
    text-align: center;
    font-weight: 500;
}

.wpcf7-mail-sent-ok {
    border-color: #28a745 !important; /* Éxito */
    color: #155724;
    background-color: #d4edda;
}

/* Estilo específico para el check de términos */
.form-grid .form-acceptance {
    grid-column: span 2; /* Ocupa todo el ancho */
    display: flex;
    align-items: center; /* Alinea el check con el texto al centro */
    gap: 10px;
    margin: 10px 0;
}

.form-grid .form-acceptance input {
    width: auto !important; /* Evita que el check se estire al 100% */
    margin: 0;
    cursor: pointer;
}

.form-grid .acceptance-text {
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
}

/* Asterisco en campos requeridos: el ::after del label cae después del input,
   así que lo desactivamos y lo inyectamos via JS junto al texto. */
.wpcf7-form label:has(.wpcf7-validates-as-required)::after,
.wpcf7-form .form-grid label:has(.wpcf7-validates-as-required)::after {
    content: none;
}
.cf7-required-asterisk {
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}

/* Estilo para cuando el usuario olvida marcarlo (validación de CF7) */
.wpcf7-not-valid-tip {
    grid-column: span 2;
}

/* RESPONSIVIDAD: 1 columna en móviles */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid label:nth-child(n) {
        grid-column: span 1;
    }
}
.custom-content {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  /* adjust as needed */
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  /* text color */
}



.encabezado {
  background-color: #f0f0f0;
  color: #333;
  padding: 20px;
  font-size: 16px;
  border-bottom: 2px solid #ccc;
  color: black;
  font-weight: bold;
  text-align: center;
}


.buscador-top-integrado {

  border: 1px solid #b1b8be;
  border-radius: 100px;
  background-color: #fff;
  margin: 12px;
}

.buscador-input {
  flex: 1;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 0;
  outline: none;
  color: #000;
  min-width: 0;
  /* Important for flex shrink in small viewports */
}

.buscador-input::placeholder {
  color: #b1b8be;
  font-weight: 100;
}

.buscador-btn {
  background-color: #ff0000;
  border: none;
  padding: 11px 11px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px 100px 100px 100px;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.buscador-btn:hover {
  background-color: #c00000;
}

.buscador-btn i {
  font-size: 1.2rem;
}





.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Section Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #003876;
  margin: 0;
}



.view-all-link {
  display: flex;
  align-items: center;
  gap: 8px;
color: rgba(0, 0, 0, 0.75); /* antes probablemente era 0.5 o 0.6 */
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-all-link:hover {
  color: #1d4ed8;
  transform: translateX(4px);
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.view-all-link:hover .arrow-icon {
  transform: translateX(2px);
}

/* Services Grid — min() evita que la columna sea más ancha que la pantalla */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
  gap: 32px;
  margin-bottom: 48px;
}

/* Service Card */
.service-card {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
} */

.card-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #083876;
  border-radius: 4px 0 0 4px;
}

.card-content {
  padding: 10px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Service Icon */
/* NORTIC B2 – Criterion 4.2 (M3): added px unit — bare numbers are ignored by browsers */
.service-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #f0f9ff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 30px;
}

.service-card:hover .service-icon {
  background: #e0f2fe;
  transform: scale(1.05);
}

/* Service Info */
.service-info {
  flex: 1;
}

.service-title {
  font-size: 17px;
  font-weight: 600;
  color: #003876;
  margin-bottom: 12px;
  line-height: 1.3;
}

/* NORTIC B2 – Criterion 4.1 (M4 / WCAG 1.4.3): #64748b on white = 4.48:1 — fails AA.
   #5c6e83 on white = 4.60:1 — passes AA for normal text at 14px. */
.service-description {
  color: #5c6e83;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #003876;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-link:hover {
  color: #1d4ed8;
  transform: translateX(2px);
}

.link-arrow {
  transition: transform 0.3s ease;
}

.service-link:hover .link-arrow {
  transform: translateX(2px);
}

/* Navigation Arrows */
.navigation-arrows {
  position: absolute;
  right: 24px;
  bottom: 0;
  display: flex;
  gap: 12px;
}


/* Estadisticas */


.left-box {
  background-color: #eaeaea;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-border {
  border-right: 1px solid #ddd;
}

.with-border:last-child {
  border-right: none;
}


.stats span {
  font-size: 2.5rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.95rem;
  color: #555;
}

.green {
  color: #1ac047;
}

.blue {
  color: #0096ff;
}

.orange {
  color: #f48c06;
}

.nav-arrow {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.nav-arrow:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.nav-arrow:active {
  transform: translateY(0);
}

.iconos {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #003876;
  font-size: 30px;
  padding: 10px 0;
}




/* Responsive Design */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .navigation-arrows {
    position: static;
    justify-content: center;
    margin-top: 32px;
  }
}

@media (max-width: 768px) {

  .servicios-section {
    padding: 40px 0;
  }

  .container {
    padding: 0 16px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  .section-title {
    font-size: 28px;
  }

  .card-content {
    padding: 24px;
    flex-direction: column;
    text-align: center;
  }

  .service-icon {
    align-self: center;
  }

  .service-title {
    font-size: 18px;
  }

  .navigation-arrows {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 24px;
  }

  .card-content {
    padding: 20px;
  }

  .service-icon {
    width: 64px;
    height: 64px;
  }

  .service-icon svg {
    width: 36px;
    height: 36px;
  }

  .service-title {
    font-size: 16px;
  }

  .service-description {
    font-size: 13px;
  }
}


.cita-text {
  font-size: 20px;
  color: #000;
  /* background-color: #f8f8f8; */
  margin-bottom: 20px;
}


/* Tarjeta de noticia — el wrapper controla la altura, no la imagen */
.news-card {
  position: relative;
  border-radius: 10px;
  display: block;           /* el <a> es inline por defecto */
}

/* El wrapper define la altura fija; la imagen lo rellena con object-fit */
.news-img-wrapper {
  position: relative;
  height: 240px;            /* altura uniforme en desktop */
  overflow: hidden;
  border-radius: 10px;
}

.news-img-wrapper img,
.news-card .news-img,
.news-img-wrapper .news-img {
  position: absolute;       /* saca la imagen del flujo */
  inset: 0;                 /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.news-date {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #1e3a8a;
  color: white;
  padding: 5px 12px;
  font-size: 0.9rem;
  border-radius: 5px;
}

.news-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgb(0 56 118/.8);
  color: white;
  padding: 20px;
}

.news-overlay h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.ver-todas {
  text-align: end;
  margin-bottom: 1rem;
}


/* transparencia */


.title-section-transparencia {

  font-family: poppins;
  display: flex;
  align-items: center;

  max-height: 9rem;
  height: 9rem;
  background-color: rgb(239 247 255);
}


.title-section-transparencia nav {
  border: none;
  background-color: rgb(239 247 255);
}


.title-section {

  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;


  min-height: 9rem;
  height: auto;
  padding: 1.5rem 0;
  margin-bottom: 1.625rem;

  background-color: rgb(239 247 255);
}


.title-section nav {
  border: none;
  background-color: rgb(239 247 255);
}


.title-section-breadcrumbs {
  padding: clamp(1.5rem, 6vw, 6.25rem) 0;
  margin-bottom: 1.625rem;
  font-family: poppins;
  display: flex;
  align-items: center;

  max-height: 9rem;
  height: 9rem;
  background-color: rgb(239 247 255);
}


.title-section-breadcrumbs nav {
  border: none;
  background-color: rgb(239 247 255);
}


.breadcrumbs {
  font-size: 0.875rem;

}

.breadcrumbs a {
  padding-right: 3px;
  padding-left: 3px;  
  font-size: 1.125rem;
  color: #0073aa;
  text-decoration: none;
}


.breadcrumbs a:first-child {
   padding-left: 0px;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* NORTIC B2 – Criterion 4.3 (M6): .breadcrumb-current replaces the <br><span>
   pattern. display:block gives it the same line-break behaviour without using
   a presentational element inside a <nav> landmark. */
.breadcrumbs span,
.breadcrumbs .breadcrumb-current {
  font-size: 1.8rem;
  font-weight: bold;
  color: #003876;
  display: block;
}

.transparencia-container {
  padding-left: 0px;
  margin: auto;
}


@media (max-width: 768px) {
  .breadcrumbs span {
    font-size: 1.3rem; 
  }
  
  .breadcrumbs a {
    font-size: 0.9rem;
  }
}

.page-content {
  max-width: 75rem;
  width: 100%;
  top: -20vh;
  color: #000;
  font-family: poppins;
  font-size: 1.25rem;
  line-height: 1.875rem;
  padding-bottom: 10%;
}

.archivos-relacionacionados {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-family: poppins;
  display: flex;
  color: #003876;
  font-weight: bold;
}

.archivo-card {
  border: 1px solid #ddd;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.375rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: poppins;
  background: #fff;
  gap: 1rem;

}


.archivo-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.archivo-icon {
  min-width: 3.125rem;
  height: 3.125rem;
  flex-shrink: 0;
}

.archivo-meta {
  display: flex;
  flex-direction: column;

}

.archivo-title {
  font-weight: bold;
  font-size: 1rem;
}

.archivo-desc {
  font-size: 0.875rem;
  color: #444;
  margin-top: 0.25rem;
}

.archivo-detalles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.archivo-tipo {
  font-size: 0.75rem;
  font-weight: 600;
  color: #003876;
  background: #edf2f7;
  border-radius: 0.25rem;
  padding: 0.1rem 0.5rem;
}

.archivo-fecha {
  font-size: 0.875rem;
  color: #555;
}

.archivo-peso {
  font-size: 0.8rem;
  color: #777;
}

.archivo-descargar {
  display: flex;
  align-items: center;
}

.btn-descargar {
  border: 1px solid red;
  color: red;
  padding: 0.375rem 1.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.btn-descargar:hover {
  background-color: red;
  color: white;
}


/* ── Datos importantes (single-servicio) ── */
.card-custom {
  background: #fff;
  border: 1px solid #e0e6f1;
}

.icon-bg {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background-color: #e8f0fb;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #003876 !important;
}

.icon-bg i,
.icon-bg i::before,
.icon-service-contact i,
.icon-service-contact i::before {
  color: #003876 !important;
  font-size: 1.25rem;
}

.text-primary-custom {
  color: #003876;
}

.text-dark-custom {
  color: #2d2d2d;
}

.folder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.25rem;

}

.folder-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  padding: 1.5625rem;

  text-decoration: none;
  color: #111;
  transition: box-shadow 0.2s ease;
  background-color: #fff;
}

.folder-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.folder-icon {
  font-size: 2rem;

  margin-bottom: 0.5rem;
}

.folder-title {
  font-weight: 500;
  font-size: 1rem;

}

.folder-meta {
  font-size: 0.875rem;
  color: #333;
}


/* menu lateral (transparencia): estructura y tipografía base.
   El color/tipografía activos viven en el bloque "MENÚ LATERAL TRANSPARENCIA — NORTIC B2"
   más abajo, para no duplicar reglas en conflicto. */

#menu-menu-transparencia {
  padding: 0;
}

.menu-transparencia-container ul {
  padding-left: 0px;
}

#mainMenu {
  padding-left: 0px;
}

#menu-transparencia {
  padding-left: 0px;
}

#menu-transparencia .ul .li {
  padding-left: 0px;
}

#side-menu {
  padding-left: 0px;
}

.transparencia-container {
  padding-left: 0px;
  margin: auto;
}


/* single-servicio */

.main-contenedor {
  margin: 48px 10%;
  display: flex;
}

.icon {
  border: none;
  background-color: none;
  padding: 8px;
  width: 40PX;
  height: 40px;
}

.aside {
  flex: 0.8;
  border-right: 1px solid gray;
}

.comunicacion {
  flex: 2;
  margin-left: 30px;
}

.iconos {
  display: flex;
  border: solid gray 1px;
  border-left: none;
  border-right: none;
  padding: 5px;
  margin-bottom: 20px;
}

.iconos i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #003865;
  font-size: 25px;
}

.iconos a {
  text-decoration: none;
}

.ulist {
  width: 90%;
  margin: 0 20px;
  list-style: none;
  padding: 0;
}

.ulist li,
.ulist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ulist a {
  text-decoration: none;
  color: black;
}

.ulist button {
  width: 100%;
  font-size: 20px;
  padding: 8px 20px;
  padding-left: 0;
  margin: 15px;
  background: white;
  text-align: left;
  cursor: pointer;
  border: none;
  transition: .04s;
}

.ulist button:hover {
  background-color: rgba(153, 198, 240, 0.2);
  transition: .3s;
}

.ulist button:focus {
  background: rgba(153, 198, 240, 0.2);
  border-right: solid 4px #003865;
}

.ulist button+ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.ulist button:focus+ul {
  max-height: 1400px;
  transition: max-height 1s;
}

.ulist li ul li a {
  display: block;
  font-size: 22px;
  padding: 16px;
  color: dimgray;
  background-color: rgb(255, 255, 255);
  text-decoration: none;
}

.ulist li ul li a:hover {
  background-color: rgba(153, 198, 240, 0.2);
  color: #003865;
}

.ulist i {
  margin: 0 8px;
}

.contenido-principal-servicio {
  font-family: poppins;
  padding: 20px;
  max-width: 800px;
  margin: auto;

}

/* archive-noticias */


.post-content {
  font-family: 'Poppins', sans-serif;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.news-grid-wrapper-archive {
  max-width: 1340px;
  margin: auto;
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  gap: 10px;
}

.search-bar input {
  padding: 7px 15px;
  border-radius: 20px;
  border: 1px solid #acb5bd;
  width: 240px;
}



.news-grid-archive {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 20px;
}

.news-card-archive {
  position: relative;
  width: 308px;
  height: 260px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-end;
}



.news-image-archive {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.news-date-archive {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  position: absolute;
  top: 20px;
  left: 200px;


  background-color: #1a4fb3;
  color: white;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 5px;
  font-weight: bold;
  z-index: 2;
}

.news-title-archive {

  background: rgb(0 56 118 / .8);
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  z-index: 2;
  height: 80px;
  width: 308px;
  font-family: poppins;
}

.load-more-wrapper {
  text-align: center;
  margin-top: 30px;
}

#load-more-news {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #003366;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#load-more-news:hover {
  background-color: #0057b7;
}


@media (max-width: 600px) {
  .mrg {
    display: flex;
    align-items: center;
  }

  .mrg div {
    margin: 10px;
  }

  .container {
    flex-direction: row;
    font-size: 15px;

  }

  .main-contenedor {
    flex-direction: column;
    margin: 20px 1rem;
  }

  .aside,
  .comunicacion {
    width: 100%;
    margin-left: 0;
    border: none;
  }

  .ulist {
    max-width: 100%;
    display: none;
  }

  .ulist button {
    font-size: 1rem;
    padding: 0.5rem 0.625rem;
  }

  .ulist li ul li a {
    font-size: 1rem;
    padding: 0.625rem;
  }
}


.menu-container-class {
  display: flex;
  justify-content: space-between;
}

.menu-container-class .menu-item {
  padding: 10px 20px;
  font-size: 16px;
  color: #003865;
  text-decoration: none;
}

.menu-container-class .menu-item:hover {
  background-color: #f0f0f0;
  border-radius: 5px;
}

.menu-container-class .menu-item.active {
  font-weight: bold;
  color: #003865;
  border-bottom: 2px solid #003865;
}

.menu-container-class .menu-item.active:hover {
  background-color: #f0f0f0;
  border-radius: 5px;
}

.menu-container-class .menu-item i {
  margin-right: 8px;
}

.menu-container-class .menu-item i:hover {
  color: #003865;
}

.menu-container-class .menu-item span {
  font-weight: bold;
  color: #003865;
}

.menu-container-class .menu-item span:hover {
  color: #003865;
}

.menu-container-class .menu-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


.social-share {
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}


.social-share svg {
  width: 35px;
  height: 35px;
  fill: #007bff;
  margin-right: 10px;
  transition: fill 0.3s ease;
}

.social-share a:hover svg {
  fill: #0056b3;
}


/* macabro */




html,
body {
  margin: 0 !important;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: Arial, sans-serif;
}

header {

  color: white;

  text-align: center;
}

.header-top {
  background-color: #002855;
  color: white;
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-top a {
  color: white;
  text-decoration: none;
  font-size: 0.75rem;
}

nav {
  background-color: white;
  border-bottom: 0.125rem solid #ddd;
}

.nav-container {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0rem;
}

.search-bar input {
  font-size: 0.875rem;
  border-radius: 50rem;
}


.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #0a2540;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 22px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: background-color 0.2s;
}

.scroll-top-btn:hover {
  background-color: #003876;
}


.search-bar .btn-buscar{
  background-color: #ff0000;
  color: white;
  border: none;

  cursor: pointer;
  border-radius: 50rem;
  margin-left: -41px;
}

.search-bar .btn-buscar:hover {
  background-color: #ff0000;
}

.bi-search {
  color: #ffffff;
}

.divisor-search-menu {
  width: 0.025rem;
  height: 3.5rem;
  background-color: #c8c8c8;
  margin-left: 1.25rem;
  margin-right: 0.75rem;
}

.bi-grid-3x3-gap-fill {
  color: #003876;
  border-radius: 0.0625rem;
}

.svg-icon {
  color: #003876;
}

.menu-icon {
  cursor: pointer;
  padding: 0.625rem;
}

.menu-container-interes {
  margin-left: -330px;
}

.navbar-interes.showOnMobile {
  border-bottom: 1px solid rgba(200, 200, 200, 0.35);
}

/* Sección del menú de interés en móvil: fondo ligeramente diferenciado */
.navbar-interes.showOnMobile .accordion-item {
  background: transparent;
  border: none;
}

.navbar-interes.showOnMobile .accordion-button {
  padding: 0.75rem 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.show .showOnMobile .menu-container {
  display: block !important;
}

.show .showOnMobile .menu-container {
  display: block !important;
  position: relative;
  width: 100%;
  padding: 0px;
  box-shadow: none;
  right: auto;
  top: auto;
}

.navbar-interes.showOnMobile .menu-container>h3 {
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.menu-container .icon-interes {
  width: 1rem;
  height: 1rem;
  fill: #003876;
}

.showOnMobile .hideMobile,
.hideOnMobile .showMobile,
.navbar-interes .accordion.accordion-flush {
  display: none !important;
}

.menu-container-interes .accordion-flush .accordion-item .accordion-button,
.menu-container-interes .accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0;
  color: #282828;
}

.navbar.navbar-expand-lg {}

.navbar-interes .accordion.accordion-flush.show {
  display: block !important;
}

.showOnMobile button.accordion-button {
  font-size: 12px;
  background: white;
  border: none;
  box-shadow: none !important;
  background-color: white !important;
  font-weight: 500;
  color: #003876;
}

.showOnMobile button.accordion-button::after {
  background-size: 12px;
  margin-bottom: -10px;
}

.showOnMobile .top-header-mobile-interes {
  padding: 2px;
  color: #333 !important;
  font-weight: normal;
}

.showOnMobile .top-header-mobile-interes.show {
  color: #003876 !important;
}

/* NORTIC B2 – Criterion 4.2 (L4): min() prevents overflow on narrow viewports
   (< 380 px) while keeping the 380px max width on larger screens. */
.menu-container {
  position: absolute;
  top: 100px;
  width: min(380px, 95vw);
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.3125rem;
  padding: 0.9375rem;
  display: none;
  z-index: 999;
}

.menu-container.active {
  display: block;
}

.menu-container-interes .menu-container.active {
  max-height: 440px;
  overflow-y: auto;
}

.menu-container-interes .accordion-item:has(.accordion-collapse.show) .accordion-button {
  background: none;
  font-weight: 400;
  color: #003876 !important;
}

.menu-container-interes .menu-container.active::-webkit-scrollbar {
  width: .5rem;
  border-radius: .5rem;

}

.menu-container-interes .menu-container.active::-webkit-scrollbar-track {
  background: #eaeaea;
}

.menu-container-interes .menu-container.active::-webkit-scrollbar-thumb {
  background: #3f7ebb;
  border-radius: .5rem;
}

.menu-container-interes .menu-container.active::-webkit-scrollbar-thumb:hover {
  background: #165694;
}

.menu-container h3 {
  margin: 0 0 0.625rem;
  font-size: 1rem;
}

.menu-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-container ul li {
  padding: 0.5rem 0;
  border-bottom: 0.125rem solid #ddd;
}

.menu-container ul li:last-child {
  border-bottom: none;
}

.close-btn {
  float: right;
  cursor: pointer;
  /* NORTIC B2 – Criterion 4.1: reset native button styles (was a <span>) */
  border: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
  line-height: 1;
}

.close-btn:focus-visible {
  outline: 3px solid #003876;
  outline-offset: 2px;
}

.cards-section {
  padding-top: 1.875rem;
}

.menu {
  position: relative;
  display: flex;
  gap: 0.9375rem;
  z-index: 10;
}

.menu-item {
  position: relative;
  padding: 0.625rem 0rem;
}

.acentuacionAzul .menu-item a {
  text-decoration: none;
  font-size: 14px;
  color: #ffff;
  display: block;
  font-family: poppins;
}

/* NORTIC B2 – Criterion 4.1 (WCAG 2.4.7): anillo de foco visible en menú azul */
.acentuacionAzul .menu-item a:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
  border-radius: 2px;
}

.acentuacionBlanco .menu-item a,
.acentuacionBlanco .nav-link {
  text-decoration: none;
  font-size: 14px;
  color: #111111;
  display: block;
  font-family: poppins;
}

/* NORTIC B2 – Criterion 4.1 (WCAG 2.4.7): anillo de foco visible en menú blanco */
.acentuacionBlanco .menu-item a:focus-visible {
  outline: 3px solid #003869;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Botón toggle de submenú para teclado (NORTIC B2 – Criterion 4.1) ── */
.nav-submenu-toggle {
  background: none;
  border: none;
  padding: 0 6px;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: inherit;
  font-size: 0.6rem;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.acentuacionAzul  .nav-submenu-toggle { color: #fff; }
.acentuacionBlanco .nav-submenu-toggle { color: #003869; }

.nav-submenu-toggle:hover,
.nav-submenu-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Rotar la flecha cuando el submenú está abierto */
.menu-item-has-children.kb-open > a > .nav-submenu-toggle,
.menu-item-has-children:focus-within > a > .nav-submenu-toggle {
  transform: rotate(180deg);
}

/* Flecha horizontal para sub-menus anidados (nivel 2+) */
.sub-menu .menu-item-has-children > a > .nav-submenu-toggle {
  transform: rotate(-90deg);
}
.sub-menu .menu-item-has-children.kb-open > a > .nav-submenu-toggle,
.sub-menu .menu-item-has-children:focus-within > a > .nav-submenu-toggle {
  transform: rotate(0deg);
}

/* NORTIC B2 – foco visible en ítems del submenú */
.sub-menu .nav-link:focus-visible,
.sub-menu a:focus-visible {
  outline: 2px solid #003869;
  outline-offset: 1px;
  border-radius: 2px;
  background-color: #eef5ff;
}

.menu-item:hover>a {
  color: #ee2b24;
}

.menu-item:hover>.submenu {
  display: block;
  color: #eff7ff;

}

 .submenu {
  display: none;
  position: relative;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
  top: 100%;
  left: 0;
  list-style: none !important;
  padding: 0.625rem;
  border: 0.125rem solid #ccc;
}

.submenu li {
  margin-bottom: 0px;
}

.submenu li:last-child {
  margin-bottom: 0;
}

.submenu a {
  text-decoration: none;
  color: #333;
  font-size: 0.875rem;
}

.submenu a:hover {
  color: #002855;
}

/* — Bloque .menu-lateral duplicado eliminado: idéntico al bloque "menu lateral" anterior — */

/*  Estilos menu lateral noticias */
.menu-lateral-noticias {
  top: -16.625rem;
  background-color: #fff;
  padding: 1.875rem;
  font-family: IBM Plex Sans Condensed;
}

.menu-lateral-noticias li {
  padding: 0.5rem;
}

.menu-lateral-noticias li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: block;
}

.menu-lateral-noticias li a:hover {
  color: #007bff;
  background-color: #ffffff;
}

.menu-lateral-noticias {
  list-style: none;
}

.menu-lateral-noticias>li {
  padding: 0.625rem 0.625rem 0.625rem;
  border-bottom: 0.125rem solid #ddd;
  font-weight: bold;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  margin: 1.25rem 0px 0px 2.5rem;
}

.menu-lateral-noticias>li a {
  text-decoration: none;
  color: #000;
  font-size: 1rem;
  font-weight: 100;
}

.menu-lateral-noticias>li:hover a {
  color: #1a237e;
  /* Azul oscuro */
}

.menu-lateral-noticias>li .active>a {
  color: #2da549;
  font-weight: bold;
}

.menu-lateral-noticias>li .submenu-icon {
  font-size: 1rem;
  transition: transform 0.3s ease-in-out;
}

.menu-lateral-noticias>li.active .submenu-icon {
  transform: rotate(180deg);
}

/* Submenú */
.menu-lateral-noticias .sub-menu {
  list-style: none;
  padding: 0.125rem;
  margin: 0.375rem 0.3125rem 0.25rem 0.625rem;
  display: none;
}

.menu-lateral-noticias .sub-menu li {
  padding: 0.875rem;
  font-size: 1rem;
  margin: 0.125rem;
}

.menu-lateral-noticias .sub-menu li a {
  color: #909090;
  text-decoration: none;
  margin: -0.8125rem;
  font-size: 0.8125rem;
}

.menu-lateral-noticias .sub-menu li a:hover {
  color: #3b82f6;
}

/* Mostrar submenú activo */
.menu-lateral-noticias>li.active .sub-menu {
  display: block;
}

/* General Menu Header */
.navbar-nav {
  font-family: IBM Plex Sans Condensed;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 1rem;
  row-gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-nav>li {
  display: inline-block;
  position: relative;
  padding-right: 0;
  margin-bottom: 0px;
}

.navbar-nav .nav-item {
  position: relative;
}

.navbar-nav .nav-link {
  color: #333;
  padding: 0.5rem clamp(0.3rem, 0.8vw, 1rem);
  font-size: clamp(0.65rem, 0.85vw, 0.8rem);
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Submenu Styles */
.navbar-nav .menu-item-has-children>.nav-link:after {
  content: "\f107";
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* NORTIC B2 – Criterion 4.1: Eliminar la flecha CSS del navbar horizontal.
   El botón .nav-submenu-toggle inyectado por JS la reemplaza con una versión
   interactiva y accesible. !important supera la regla general
   .menu-item-has-children>a::after que usa font-family bootstrap-icons. */
.navbar-nav .menu-item-has-children > a::after,
.navbar-nav .menu-item-has-children > .nav-link::after {
  content: none !important;
  display: none  !important;
}

/* Flex en cada <li> con hijos para alinear enlace + botón toggle en la misma fila */
.navbar-nav li.menu-item-has-children {
  display: inline-flex !important;
  align-items: stretch;
  position: relative;
}

.navbar-nav .sub-menu li.menu-item-has-children {
  display: flex !important;
  flex-wrap: wrap;
}

.navbar-nav li.menu-item-has-children > a {
  flex: 1 1 auto;
}

.acentuacionAzul .sub-menu {
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 300px;
  background-color: #003869;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.acentuacionAzul .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 2px;
}

.acentuacionAzul .sub-menu .sub-menu.open-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

.acentuacionBlanco .sub-menu {
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 300px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.acentuacionBlanco .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 2px;
}

.acentuacionBlanco .sub-menu .sub-menu.open-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

/* NORTIC B2 – Criterion 4.1 (WCAG 2.1.1): submenú visible tanto en hover
   como cuando el foco del teclado está dentro del ítem padre (:focus-within). */
.navbar-nav .menu-item-has-children:focus-within > .sub-menu,
.navbar-nav .menu-item-has-children.kb-open > .sub-menu {
  display: block;
}

.sub-menu .menu-item {
  padding: 0.625rem;
  position: relative;
}

.sub-menu .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: #555;
}

/* iOS/Android (touch): los estilos :hover de abajo se omiten para estos
   selectores porque, al aplicarse a un <a>, Safari iOS exige un primer
   toque para activar el :hover y un segundo para navegar - el submenú
   parecía "no clickeable". Se restringen a punteros con hover real (mouse). */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .nav-link:hover {
    color: #007bff;
    text-decoration: none;
  }

  .acentuacionBlanco .menu-item a:hover,
  .acentuacionBlanco .nav-link:hover {
    color: #111111;
  }

  .navbar-nav .menu-item-has-children:hover > .sub-menu {
    display: block;
  }

  .sub-menu .menu-item:hover {
    background-color: #eff7ff;
    font-size: 0.9rem;
  }

  .sub-menu .nav-link:hover {
    background-color: #f8f9fa;
  }
}

/* Menu Hamburguer Toggle */
.navbar-toggler {
  border: none;
  outline: none;
}

.navbar-toggler-icon {
  background-color: #333;
  width: 1.5625rem;
  height: 0.1875rem;
  display: block;
  position: relative;
}

.navbar-toggler-icon:before,
.navbar-toggler-icon:after {
  content: '';
  background-color: #333;
  width: 1.5625rem;
  height: 0.1875rem;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.navbar-toggler-icon:before {
  top: -0.4375rem;
}

.navbar-toggler-icon:after {
  top: 0.4375rem;
}

/* Active Menu Item */
.navbar-nav .active>.nav-link {
  color: #007bff;
  font-weight: 600;
  text-decoration: underline;
}

.link-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: #212529;

  height: 100%;
  transition: transform 0.2s ease-in-out;
}

/* Íconos circulares */
.link-grid img {
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
  background-color: #f8f9fa;
  border-radius: 50%;

  margin-bottom: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Hover animación en íconos */
.link-grid a:hover img {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Texto debajo del ícono */
.link-grid a div {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  line-height: 1.2;
}

.sensorState {
  height: 0px;
  width: 0px;
  position: fixed;
  top: 0;
  z-index: 0;
  opacity: 0;
}

.showOnlyMobile {
  display: none;
}


#certificaciones-movil {
  display: none;
}

  .p-2 {
    padding: 1rem !important;
  }

.container.p-2 .row > .col-12 {
    padding: 0px;
}

@media (max-width: 990px) {
  .news-card-archive{
    width: 100%;
  }
  .news-date-archive {
     left: 70%;
     min-width: 110px;
  }
  
	.transparencia-container {
	  padding: 0px;
	  margin: auto;
	}


  .news-title-archive{
    width: 100%;
  }
  .enlace-noticia-grid{
    width: 100%;
  }
  .navbar.navbar-expand-lg {
    padding-bottom: 0px;
  }

  .menu-icon {
    padding-top: 11px;
  }

  .showOnlyMobile {
    display: block;
  }

  #menu-principal.navbar-nav>li>a::after {
    display: none;
  }

  /* NORTIC B2 – el botón .nav-submenu-toggle JS reemplaza este ::after en móvil también */
  #menu-principal.navbar-nav .menu-item-has-children > a::after {
    content: none !important;
    display: none  !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ PRINCIPAL – VERSIÓN MÓVIL
   Breakpoint < 992 px.
   El botón .nav-submenu-toggle se inyecta DENTRO del <a> por JS,
   por eso <a> tiene display:flex y el botón es su último flex-item.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* Suprimir anillo de foco y borde en la flecha al tocar */
  #mainMenu .nav-link:focus:not(:focus-visible),
  #mainMenu .nav-submenu-toggle:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  #mainMenu .nav-submenu-toggle:focus,
  #mainMenu .nav-submenu-toggle:focus-visible,
  #mainMenu .nav-submenu-toggle:hover {
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Cancelar la rotación global del toggle en móvil */
  #mainMenu .menu-item-has-children.kb-open > a > .nav-submenu-toggle,
  #mainMenu .menu-item-has-children:focus-within > a > .nav-submenu-toggle,
  #mainMenu .nav-submenu-toggle[aria-expanded="true"] {
    transform: none !important;
  }

  /* ── Lista raíz ── */
  #mainMenu .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    display: flex !important;
  }

  /* ── Ítems de primer nivel ── */
  #mainMenu .navbar-nav > li,
  #mainMenu .navbar-nav > li.menu-item-has-children {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    position: static !important;
  }

  #mainMenu .navbar-nav > li:last-child {
    border-bottom: none !important;
  }

  /* ── Enlace principal ──
     El <a> es flex-container; el texto ocupa el espacio y el botón va al final */
  #mainMenu .navbar-nav > li > a.nav-link {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: inherit !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: background 0.15s ease, border-left-color 0.15s ease !important;
  }

  #mainMenu .navbar-nav > li > a.nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7) !important;
    outline-offset: -2px !important;
  }

  /* ── Botón toggle: integrado al final del <a>, SIN borde-caja ──
     margin-left:auto lo empuja al extremo derecho de forma natural */
  #mainMenu .nav-submenu-toggle {
    flex: none !important;
    margin-left: auto !important;
    width: 40px !important;
    min-height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: 0.65rem !important;
    opacity: 0.55;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.5rem !important;
    transition: opacity 0.15s ease, transform 0.25s ease !important;
  }

  #mainMenu .nav-submenu-toggle:hover {
    opacity: 0.9 !important;
  }

  #mainMenu .nav-submenu-toggle[aria-expanded="true"] {
    opacity: 1 !important;
  }

  /* ── Submenú ── */
  #mainMenu .navbar-nav .sub-menu {
    display: none !important;
    flex-basis: 100% !important;
    width: 100% !important;
    position: static !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
    list-style: none !important;
  }

  /* Abrir solo con botón JS */
  #mainMenu .navbar-nav .menu-item-has-children:hover > .sub-menu,
  #mainMenu .navbar-nav .menu-item-has-children:focus-within > .sub-menu {
    display: none !important;
  }

  #mainMenu .navbar-nav .menu-item-has-children.kb-open > .sub-menu {
    display: block !important;
  }

  /* ── Ítems del submenú ── */
  #mainMenu .sub-menu .menu-item {
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #mainMenu .sub-menu .menu-item:last-child {
    border-bottom: none !important;
  }

  /* ── Enlace del submenú ── */
  #mainMenu .sub-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-height: 44px !important;
    padding: 0.6rem 1rem 0.6rem 1.5rem !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: inherit !important;
    text-decoration: none !important;
    opacity: 0.85;
    transition: background 0.15s ease, opacity 0.15s ease !important;
  }

  #mainMenu .sub-menu .nav-link::before {
    content: "›" !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
  }

  #mainMenu .sub-menu .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 1 !important;
    outline: none !important;
  }

  /* ── Ítem activo ── */
  #mainMenu .navbar-nav .active > a.nav-link {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-left-color: rgba(255, 255, 255, 0.9) !important;
  }

  /* ══════════════════════════════════════════════
     Variante BLANCO (acentuacionBlanco)
     ══════════════════════════════════════════════ */
  #mainMenu .acentuacionBlanco > li,
  #mainMenu .acentuacionBlanco > li.menu-item-has-children {
    border-bottom-color: #e2e8f0 !important;
  }

  #mainMenu .acentuacionBlanco > li:last-child {
    border-bottom: none !important;
  }

  #mainMenu .acentuacionBlanco > li > a.nav-link,
  #mainMenu .acentuacionBlanco .menu-item a {
    color: #111111 !important;
    border-left-color: transparent !important;
  }

  #mainMenu .acentuacionBlanco > li > a.nav-link:focus-visible {
    outline: 2px solid #111111 !important;
    outline-offset: -2px !important;
  }

  #mainMenu .acentuacionBlanco .nav-submenu-toggle {
    color: #003869 !important;
  }

  #mainMenu .acentuacionBlanco .nav-submenu-toggle[aria-expanded="true"] {
    color: #003869 !important;
  }

  #mainMenu .acentuacionBlanco .sub-menu {
    background-color: transparent !important;
    border-top-color: #d8dde5 !important;
    border-left-color: #003869 !important;
  }

  #mainMenu .acentuacionBlanco .sub-menu .menu-item {
    border-bottom-color: #e5edf6 !important;
  }

  #mainMenu .acentuacionBlanco .sub-menu .nav-link {
    color: #111111 !important;
    opacity: 1 !important;
  }

  #mainMenu .acentuacionBlanco .sub-menu .nav-link:focus-visible {
    background-color: #e2e6ec !important;
    color: #111111 !important;
    outline: none !important;
  }

  #mainMenu .acentuacionBlanco .sub-menu .nav-link::before {
    color: #111111 !important;
    opacity: 0.4 !important;
  }

  #mainMenu .acentuacionBlanco .active > a.nav-link {
    background-color: #eaf0fa !important;
    border-left-color: #003869 !important;
    color: #003869 !important;
  }

  /* Suprimir foco táctil en variante blanco también */
  #mainMenu .acentuacionBlanco .nav-link:focus:not(:focus-visible),
  #mainMenu .acentuacionBlanco .nav-submenu-toggle:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* iOS/Android (touch, menú móvil): mismas reglas :hover de arriba, pero
   restringidas a punteros con hover real (mouse/trackpad). En touch un
   :hover en un <a> obliga a doble toque para navegar - el primer toque
   solo "activa" el hover y el enlace del submenú parece no responder. */
@media (hover: hover) and (pointer: fine) and (max-width: 991.98px) {
  #mainMenu .navbar-nav > li > a.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left-color: rgba(255, 255, 255, 0.8) !important;
    outline: none !important;
  }

  #mainMenu .sub-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 1 !important;
    outline: none !important;
  }

  #mainMenu .acentuacionBlanco > li > a.nav-link:hover,
  #mainMenu .acentuacionBlanco .menu-item a:hover {
    background-color: #f0f5fb !important;
    border-left-color: #111111 !important;
    color: #111111 !important;
    outline: none !important;
  }

  #mainMenu .acentuacionBlanco .sub-menu .nav-link:hover {
    background-color: #e2e6ec !important;
    color: #111111 !important;
    outline: none !important;
  }
}

/* Responsive Styles */
@media (max-width: 768px) {
 
	.group-info-service-contact, .group-info-service-contact div{
		display:block !important;
	} 
	
	.group-info-service-contact .qr {
		
		text-align:left;
		border: 2px !important;
		padding-left:0px;
		align-items:center;
		
		
	}
	
	.icon-service-contact
	{ 
		float:left;
		text-align:center;
		padding-top:8px;
	}
	
  .news-container {
    margin: 0px;
    padding: 0px;
  }
  .news-container .col-md-9 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
  }

  #side-menu{
    display: none;
  }


  .title-section-transparencia{
    margin-bottom: 0.625rem;
  }
  #certificaciones-movil {
    display: block;
  }

  #certificaciones {
    display: none;
  }

  .search-bar {
    width: 100%;
    margin-top: 0.625rem;
  }

  .search-bar input {
    width: 80%;
  }

  .menu {
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
  }

  .menu-item>a {
    padding: 3px 30px;
    width: 100%;
  }

  /* En móvil el toggle no se muestra (el sidebar se oculta por d-none d-md-block) */
  .submenu-toggle {
    display: none;
  }
}


.divider {
  border-top: 1px solid #ccc;
  margin: 0.625rem 0;
}

/* Estilos para el logo titulo y descripcion*/
.logo-titulo {
  color: #213C74;
  font-style: normal;
  font-weight: lighter;
  font-size: 1.25rem;
  line-height: 1.5625rem;
  justify-content: right;
  max-width: 18.75rem;
  white-space: normal;
  word-break: break-word;
  text-align: left;

}


.search-form {
  display: contents;
}


/* Dispositivos móviles */
@media (max-width: 768px) {

  .sticky-sidebar-col,
  .contenedor-menu-lateral-servicio {
    display: none;
  }

  .search-form i {
    margin-top: -5px;
  }

  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.625rem 1.25rem;
  }

  .search-bar input {
    width: 100%;
  }

  .menu {
    flex-direction: column;
    gap: 0;
  }

  .menu-item {
    width: 100%;
    padding: 0.625rem 0;
  }

  .menu-container {
    width: 100%;
    right: 0;
    top: auto;
  }

  .archivo-descargar {
    width: 100%;
    justify-content: right;
  }

  .archivo-card {
    flex-direction: column;
  }



}

/* Tablets */
@media (max-width: 1024px) {
  .nav-container {
    padding: 0.625rem 1.25rem;
  }

  .menu-container {
    right: 0;
    width: 90%;
  }

  .menu {
    flex-wrap: wrap;
  }


}



/* ══════════════════════════════════════════════
   MENÚ LATERAL TRANSPARENCIA — NORTIC B2
   ══════════════════════════════════════════════ */

.menu-lateral,
.menu-lateral ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.menu-lateral .menu-item {
    display: block;
    border-bottom: 1px solid #e8eef5;
}

.menu-lateral .menu-item:last-child {
    border-bottom: none;
}

/* Wrapper flex: alinea enlace + botón en la misma fila */
.menu-lateral .item-row {
    display: flex;
    align-items: stretch;
}

/* Enlace principal. El selector ".menu-item > a" es el fallback para los
   ítems sin submenú: el JS solo envuelve en ".item-row" a los ítems con
   hijos (menu-item-has-children), así que los ítems sin hijos nunca tienen
   ".item-row" y dependen de esta regla para tener color/tipografía. */
.menu-lateral .item-row > a,
.menu-lateral .menu-item > a {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 10px 12px;

    text-decoration: none;
    color: #003876;
    line-height: 1.4;
    word-break: break-word;
    transition: background-color 0.15s;
}

.menu-lateral .item-row > a {
    border-right: 1px solid #e8eef5;
}

.menu-lateral .item-row > a:hover,
.menu-lateral .item-row > a:focus,
.menu-lateral .menu-item > a:hover,
.menu-lateral .menu-item > a:focus {
    background-color: #edf5ff;
    outline: none;
}

/* Ítem activo — visual */
.menu-lateral .current-menu-item > .item-row > a {
    font-weight: 700;
    border-left: 3px solid #003876;
    padding-left: 9px;
    background-color: #edf5ff;
}

/* Ítem activo — foco visible para teclado (WCAG 2.4.7) */
.menu-lateral .item-row > a:focus-visible {
    outline: 2px solid #003876;
    outline-offset: -2px;
}

/* Botón toggle */
.submenu-toggle-transparencia {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid #e8eef5;
    color: #003876;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s;
    flex-shrink: 0;
}

.submenu-toggle-transparencia:hover,
.submenu-toggle-transparencia:focus-visible {
    background-color: #dceeff;
    outline: 2px solid #003876;
    outline-offset: -2px;
}

/* Ícono animado */
.submenu-toggle-transparencia span {
    display: inline-block;
    transition: transform 0.2s ease;
    line-height: 1;
    user-select: none;
}

.menu-lateral .menu-item.open > .item-row .submenu-toggle-transparencia span {
    transform: rotate(90deg);
}

/* Submenú: fuera del flex, debajo del .item-row */
.menu-lateral .sub-menu {
    display: none;
    padding-left: 0;
    background-color: #f7faff;
    border-left: 3px solid #c8d8ee;
    margin-left: 12px;
}

.menu-lateral .menu-item.open > .sub-menu {
    display: block;
}

/* Segundo nivel */
.menu-lateral .sub-menu .menu-item {
    border-bottom: 1px solid #e0eaf5;
}

.menu-lateral .sub-menu .menu-item:last-child {
    border-bottom: none;
}

.menu-lateral .sub-menu .item-row > a,
.menu-lateral .sub-menu .menu-item > a {
    font-size: 0.85rem;
    color: #2d5586;
    padding: 8px 10px;
}

/* Tercer nivel */
.menu-lateral .sub-menu .sub-menu {
    margin-left: 10px;
}

.menu-lateral .sub-menu .sub-menu .item-row > a,
.menu-lateral .sub-menu .sub-menu .menu-item > a {
    font-size: 0.82rem;
    color: #4a5f7a;
    padding: 7px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE RESPONSIVE CONSOLIDADO — SDDWP
   Cubre los breakpoints faltantes del tema sin alterar el diseño de escritorio.
   Breakpoints usados: 1200px · 992px · 768px · 576px · 400px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables de spacing responsive ── */
:root {
    --section-pad-v: 3rem;
    --card-gap: 1.5rem;
}

/* ── Tipografía base: reduce el párrafo global en móvil ── */
@media (max-width: 768px) {
    p {
        font-size: 16px;
        line-height: 1.7;
    }

    .cita-text {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    .iconos,
    .iconos i {
        font-size: 1.25rem !important;
    }

    .cita-content-col {
        padding-top: 2rem   !important;
        padding-bottom: 2rem !important;
    }
}

/* ── Slider / Carousel ── */
@media (max-width: 992px) {
    .carousel-item img {
        height: 520px;
    }
    .carousel-caption-custom h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .carousel-item img {
        height: 340px;
        object-position: center top;
    }
    .carousel-caption-custom {
        left: 4%;
        right: 4%;
        top: 40%;
    }
    .carousel-caption-custom h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    .carousel-caption-custom p {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    .btn-orange {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

/* ── Breadcrumbs ── */
@media (max-width: 768px) {
    .title-section {
        padding: 1rem 0;
        min-height: auto;
        height: auto;
    }
}

/* ── Grid de Servicios ── */
.services-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .service-icon {
        margin: 16px;
    }
}

/* ── Estadísticas ── */
@media (max-width: 768px) {
    .left-box {
        min-height: 200px !important;
    }
    .stats span {
        font-size: 1.75rem;
    }
    .stat-label {
        font-size: 0.85rem;
    }
    /* El p-5 de Bootstrap genera demasiado padding en mobile */
    .col-md-6.p-5 {
        padding: 1.5rem !important;
    }
}

/* ── Tarjetas de Noticias (portada) — breakpoints responsive ── */
@media (max-width: 992px) {
    .news-img-wrapper {
        height: 210px;
    }
}

@media (max-width: 576px) {
    .news-img-wrapper {
        height: 190px;
    }
}

@media (max-width: 400px) {
    .news-img-wrapper {
        height: 170px;
    }
}



/* ── Tarjetas de Noticias (archivo) ── */
@media (max-width: 992px) {
    .news-card-archive {
        width: 100%;
        height: 240px;
    }
    .news-title-archive {
        width: 100%;
        height: auto;
        min-height: 70px;
    }
    .news-date-archive {
        left: auto;
        right: 12px;
        top: 12px;
    }
}

@media (max-width: 576px) {
    .news-card-archive {
        height: 200px;
    }
    .news-title-archive {
        font-size: 14px;
    }
}

/* ── Header: barra de búsqueda y logo ── */
@media (max-width: 992px) {

}

@media (max-width: 576px) {

    .logo-subtitulo span {
        display: none;   /* Oculta tagline en teléfono pequeño */
    }
}

/* ── Menú de interés (dropdown) ── */
@media (max-width: 992px) {
    .menu-container-interes {
        margin-left: 0;
        right: 0;
        left: auto;
    }
    .menu-container {
        right: 0;
        left: auto;
    }
}

/* ── Footer ── */
@media (max-width: 768px) {
    .informacion-footer h4 {
        font-size: 1rem;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    .informacion-footer p {
        font-size: 0.85rem !important;
    }
}

/* ── Página de contenido general (page.php) ── */
@media (max-width: 768px) {
    .custom-content {
        font-size: 16px;
    }
    .custom-content img {
        max-width: 100%;
        height: auto;
    }
    .archivo-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .archivo-descargar {
        width: 100%;
    }
    .btn-descargar {
        display: block;
        text-align: center;
    }
}

/* ── Single Servicio ── */
@media (max-width: 768px) {
    .main-contenedor {
        flex-direction: column;
        margin: 1.5rem 1rem;
    }
    .aside,
    .comunicacion {
        width: 100%;
        border: none;
        margin-left: 0;
    }
    .servicio-image {
        margin: 12px 0;
    }
    .group-info-service-contact {
        flex-direction: column !important;
    }
    .group-info-service-contact .qr {
        border-left: none !important;
        padding-left: 0 !important;
        text-align: left !important;
    }
}

/* ── Single Transparencia / menú lateral ── */
@media (max-width: 768px) {
    #side-menu {
        display: none;
    }
    .transparencia-container {
        padding: 0 0.5rem;
    }
}

/* ── Búsqueda ── */
@media (max-width: 576px) {
    .search-controls .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .search-controls .form-select,
    .search-controls .form-control,
    .search-controls .btn,
    .search-controls a {
        width: 100% !important;
    }
    .section-title.mb-4 {
        font-size: 1.3rem !important;
    }
}

/* ── Formularios ── */
@media (max-width: 768px) {
    .wpcf7-form {
        grid-template-columns: 1fr !important;
    }
}

/* ── Galería ── */
@media (max-width: 576px) {
    .folder-grid {
        flex-direction: column;
    }
    .folder-card {
        width: 100%;
    }
}

/* ── Mapa del Sitio ── */
@media (max-width: 576px) {
    #sitemap-heading {
        font-size: 1.4rem !important;
    }
}

/* ── Tablet intermedio 768px – 992px ── */
@media (min-width: 768px) and (max-width: 992px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    .news-card-archive {
        width: calc(50% - 10px);
        height: 240px;
    }
    .news-title-archive {
        width: 100%;
    }
    .carousel-item img {
        height: 520px;
    }
}

/* ── Corrección de overflow horizontal global ── */
@media (max-width: 768px) {
    .container-fluid,
    .container,
    .container-md {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    section {
        overflow-x: clip;
    }
}

/* ── Botón flotante de WhatsApp ── */
.whatsapp-float-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50px;
    padding: 12px 20px 12px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float-button i {
    font-size: 1.6rem;
    line-height: 1;
}

.whatsapp-float-button__label {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.whatsapp-float-button:hover,
.whatsapp-float-button:focus {
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 576px) {
    .whatsapp-float-button {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px 10px 12px;
        gap: 8px;
    }
    .whatsapp-float-button i {
        font-size: 1.4rem;
    }
    .whatsapp-float-button__label {
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ PRINCIPAL DESKTOP — FIX DEFINITIVO (una sola línea, sin salto de
   palabras, flecha ▾ junto al texto en vez de debajo).
   Se coloca al FINAL del archivo a propósito: .navbar-nav y .navbar-nav
   .nav-link están declarados más de una vez en esta hoja de estilos y, con
   igual especificidad, gana la regla que aparece más abajo en el archivo.
   Cualquier ajuste de estas reglas debe hacerse aquí (o con !important)
   para no volver a perderse contra un duplicado anterior.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .navbar-nav {
    /* El excedente de elementos pasa a la línea de abajo en vez de forzar
       una sola fila (antes: nowrap). Con ~11 ítems caben en una fila a los
       tamaños actuales; a partir del 12.º bajan automáticamente. */
    flex-wrap: wrap !important;
    row-gap: 0.25rem !important;
    column-gap: clamp(0.1rem, 0.35vw, 0.75rem) !important;
  }

  .navbar-nav .nav-link {
    white-space: nowrap !important;
    padding: 0.5rem clamp(0.1rem, 0.3vw, 0.75rem) !important;
    font-size: clamp(0.55rem, 0.8vw, 0.9rem) !important;
  }

  /* El <a> pasa a ser flex container (no solo flex item del <li>): así el
     texto y el botón ▾ quedan forzados a la misma fila, sin importar el
     ancho disponible, y el <a> no se encoge por debajo de su contenido. */
  .navbar-nav li.menu-item-has-children > a.nav-link {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .navbar-nav .nav-submenu-toggle {
    flex-shrink: 0 !important;
  }
}