.rs-header-two .header-logo {
    min-width: auto !important;
}

/* El ancho manda: la cabecera mide lo que mida el logo más 10+10 de relleno.
   El logo (logo32.svg, viewBox 106.5x78) a 142px sale de 104px de alto, así que
   la cabecera queda en ~124px. No hay que encogerlo: a 113px las líneas
   "55 AÑOS COLOMBIA / 30 AÑOS ECUADOR" quedaban de ~5px de alto y Chrome las
   dibujaba mordisqueadas. No es cosa del SVG (un PNG sale peor): es el tamaño. */
.header-logo {
    width: 142px !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.rs-header-two .header-wrapper {
    align-items: stretch !important;
}

.rs-header-two .header-right {
    background: #12398f;
    height: auto !important;
    min-height: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
}

@media (min-width: 992px) {
    .rs-header-two .header-left {
        width: 50% !important;
        min-width: 1004px !important;
        flex: 0 0 auto !important;
        max-width: 1004px;
        padding-inline-end: 20px !important;
    }
}

@media (max-width: 1600px) and (min-width: 992px) {
    .rs-header-two .header-left {
        min-width: 864px !important;
    }
}

@media (max-width: 1366px) and (min-width: 992px) {
    .rs-header-two .header-left {
        min-width: 700px !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .rs-header-two .header-left {
        min-width: 498px !important;
    }
}

.rs-header-two .header-wrapper {
    background-color: #2b3944;
}

.rs-header-two .header-right,
.rs-header-two .header-right .rs-promo-wrapper,
.rs-header-two .header-right .rs-promo-wrapper .rs-promo-content {
    justify-content: flex-end !important;
  
    display: flex !important;
    
}


.header-top-area .row,
.header-top-area .col-xl-6,
.header-top-area .col-lg-6,
.header-top-area .header-top-right,
.header-top-area .header-contact-info{
  display: flex;
  align-items: stretch;
}

.office-info{
  display: flex;
  align-items: center;
  height: auto;
  padding: 0 30px;
  background: #223746;
}

/* Card de Noticias / Blog: imagen uniforme y tarjetas alineadas */
.rs-blog-two .rs-blog-item,
.rs-blog-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.rs-blog-two .rs-blog-thumb,
.rs-blog-thumb {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px 6px 0 0 !important;
    width: 100% !important;
    height: 260px !important;
    flex: 0 0 260px !important;
}

.rs-blog-two .rs-blog-thumb a,
.rs-blog-thumb a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.rs-blog-two .rs-blog-thumb img,
.rs-blog-thumb img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    max-height: 260px !important;
    object-fit: cover !important;
    transform: scale(1.02);
    transition: all 0.8s ease;
}

.rs-blog-two .rs-blog-thumb:hover img {
    transform: scale3d(1.1, 1.1, 1) !important;
}

/* Rejillas de Noticias (home.php) y Blog (category-blog.php): recorte
   centrado. Estuvo anclado arriba para no cortar cabezas en fotos de retrato,
   pero se prefirió el centro. Acotado a .vera-noticias para no tocar el
   carrusel de Noticias Destacadas de la portada. */
.vera-noticias .rs-blog-thumb img {
    object-position: center !important;
}

.rs-blog-two .rs-blog-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Swiper deja cada slide con la altura de su contenido, así que un título de
   cuatro líneas hacía la tarjeta 31px más alta que uno de tres (medido). Al
   estirar los slides, el height: 100% de .rs-blog-item iguala todas. */
.rs-blog-two .swiper-wrapper {
    align-items: stretch;
}

.rs-blog-two .swiper-slide {
    height: auto;
}

/* Títulos de Noticias Destacadas más pequeños que el h5 del tema (24/22/20px). */
.rs-blog-two .rs-blog-title {
    font-size: 20px;
    line-height: 1.4;
}

@media only screen and (max-width: 1600px) {
    .rs-blog-two .rs-blog-title {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1199px) {
    .rs-blog-two .rs-blog-title {
        font-size: 17px;
    }
}

/* Indicador de fecha sobre la imagen del blog */
.rs-blog-two .rs-blog-meta,
.rs-blog-thumb .rs-blog-meta {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 35 !important;
    pointer-events: none !important;
}

/* Pines de las sedes sobre el mapa de Contáctenos.
   El contenedor medía 0×0, así que el porcentaje de posición de cada pin daba
   cero y los dos quedaban encimados en el centro del mapa (medido). La imagen
   es cuadrada, con object-fit: cover, en un recuadro que siempre es más ancho
   que alto (851×600, 930×600, 690×600, 355×355): el cuadrado ocupa todo el
   ancho y queda centrado en vertical. El contenedor copia ese cuadrado, y así
   cada porcentaje cae en el mismo punto del mapa en cualquier ancho. */
.rs-contact-two .rs-contact-ripple-wrapper {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    z-index: 35;
    pointer-events: none;
}

.rs-contact-two .rs-ripple-item {
    z-index: 1;
    pointer-events: auto;
}

/* El pin activo (el que rota main.js, o el que tiene el ratón) va encima del otro. */
.rs-contact-two .rs-ripple-item.ripple,
.rs-contact-two .rs-ripple-item:hover {
    z-index: 2;
}

/* La punta del pin es el punto exacto: .rs-ripple-item mide 0×0. */
.rs-contact-two .vera-pin {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

/* Onda aplanada, como sobre el suelo, que late bajo la punta. */
.rs-contact-two .vera-pin::before,
.rs-contact-two .vera-pin::after {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: vera-pin-onda 2400ms ease-out infinite;
    pointer-events: none;
}

.rs-contact-two .vera-pin::after {
    animation-delay: 1200ms;
}

@keyframes vera-pin-onda {
    0% {
        transform: scale(0.4, 0.18);
        opacity: 0.9;
    }
    100% {
        transform: scale(3.2, 1.4);
        opacity: 0;
    }
}

.rs-contact-two .vera-pin-icon {
    position: absolute;
    left: -17px;
    top: -44px;
    width: 34px;
    height: 44px;
    z-index: 1;
    filter: drop-shadow(0 6px 10px rgba(4, 14, 40, 0.45));
    transform-origin: 50% 100%;
    transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rs-contact-two .rs-ripple-item.ripple .vera-pin-icon,
.rs-contact-two .rs-ripple-item:hover .vera-pin-icon {
    transform: translateY(-6px) scale(1.08);
}

/* Tarjeta de la sede, encima del pin. Mismas propiedades que main.css. */
.rs-contact-two .rs-ripple-figure {
    left: 0;
    bottom: 0;
    width: max-content;
    min-width: 0;
    max-width: 260px;
    gap: 0;
    padding: 14px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(4, 14, 40, 0.35);
    text-align: left;
    transform: translate3d(-50%, -48px, 0) scale(0.96);
    transform-origin: 50% 100%;
    transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
}

.rs-contact-two .rs-ripple-item.ripple .rs-ripple-figure,
.rs-contact-two .rs-ripple-item:hover .rs-ripple-figure {
    transform: translate3d(-50%, -62px, 0) scale(1);
}

.rs-contact-two .rs-ripple-figure::before {
    left: 50%;
    right: auto;
    top: 100%;
    bottom: auto;
    margin: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    transform: translateX(-50%);
}

.rs-contact-two .ripple-content .title,
.rs-contact-two .mobile_item .pre-title .title {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #12398f;
}

.rs-contact-two .ripple-content .description {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

/* Ficha de móvil (por debajo de 768px no hay tarjeta flotante). pointer-events se
   hereda, y main.css pone unset en .mobile_item.active: sin el auto explícito en
   las dos, el none del contenedor dejaba sin clic la X de cerrar (medido). */
.rs-contact-two .mobile_item,
.rs-contact-two .mobile_item.active {
    pointer-events: auto;
}

.rs-contact-two .mobile_item {
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(4, 14, 40, 0.35);
}

/* La barra de administración de WordPress (solo con sesión iniciada) es fija y
   ocupa 32px arriba, 46px por debajo de 782px. La cabecera fija y el menú
   lateral también van a top: 0, así que quedaban tapados por ella. Por debajo
   de 600px la barra deja de ser fija y se va con el scroll: ahí, top: 0. */
body.admin-bar .rs-sticky-header,
body.admin-bar .offcanvas-area {
    top: 32px;
}
body.admin-bar .offcanvas-area {
    height: calc(100% - 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .rs-sticky-header,
    body.admin-bar .offcanvas-area {
        top: 46px;
    }
    body.admin-bar .offcanvas-area {
        height: calc(100% - 46px);
    }
}
@media screen and (max-width: 600px) {
    body.admin-bar .rs-sticky-header,
    body.admin-bar .offcanvas-area {
        top: 0;
    }
    body.admin-bar .offcanvas-area {
        height: 100%;
    }
}

/* Cuadro de la sección La Firma, sobre la imagen: blanco en lugar del gris del tema. */
.rs-about-three .rs-about-meta {
    background: #fff;
}

/* Cuadro del título de Contáctenos: gris claro con letras negras. El h2 lleva
   is-white y la descripción va en blanco en main.css, de ahí los colores explícitos. */
.rs-contact-two .section-title-wrapper {
    background: #e6e6e6;
}

.rs-contact-two .section-title-wrapper .section-title,
.rs-contact-two .section-title-wrapper .rs-section-desc {
    color: #000;
}

/* Títulos de sección (h2.section-title) a 40px en todo el sitio. El h2 del tema
   va a 52/50/47/42px desde 992px; por debajo ya queda en 37/32/27px y no se
   agranda. */
@media only screen and (min-width: 992px) {
    h2.section-title {
        font-size: 40px;
    }
}

/* "Contáctenos" de la portada a 36px. main.css lo deja en 40px hasta 1367px y en
   35px o menos por debajo: ahí no se toca. */
@media only screen and (min-width: 1367px) {
    .rs-contact-two .section-title[data-gravit-id="contact_title"] {
        font-size: 36px;
    }
}


/* Selector de idioma, a la derecha de las direcciones de la cabecera: un botón
   y una lista propia que abre hacia abajo, en azul (la lista nativa de un
   <select> no se puede pintar). El script está en header.php. */
.vera-idioma {
    position: relative;
    display: flex;
    align-self: stretch;
}

.vera-idioma-boton {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.vera-idioma-boton:hover,
.vera-idioma.abierto .vera-idioma-boton {
    background-color: rgba(255, 255, 255, 0.08);
}

.vera-idioma-boton i {
    font-size: 17px;
}

.vera-idioma-boton .ri-arrow-down-s-line {
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.vera-idioma.abierto .vera-idioma-boton .ri-arrow-down-s-line {
    transform: rotate(180deg);
}

.vera-idioma-corto {
    display: none;
}

/* Al pulsar con el ratón, el foco ponía de golpe un marco blanco y se veía como
   un temblor. El foco solo se marca con teclado: la clase vera-teclado la pone
   header.php (:focus-visible no distinguía el ratón en Chrome, medido). */
.vera-idioma-boton:focus,
.vera-idioma-opcion:focus {
    outline: none;
}

html.vera-teclado .vera-idioma-boton:focus {
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.7);
}

/* Lista: sale del borde inferior de la cabecera, del mismo azul que el bloque. */
.vera-idioma-lista {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #12398f;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 18px 40px rgba(4, 14, 40, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* visibility sin transición al abrir: en el primer instante de la transición la
   lista seguía oculta y focus() sobre la opción no hacía nada (con teclado, la
   primera flecha dejaba el foco en el botón, medido). Al cerrar sí la conserva. */
.vera-idioma.abierto .vera-idioma-lista {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* transition propia: la heredada del tema también animaba visibility, y al abrir
   la opción seguía oculta unos 300ms aunque la lista ya se viera, así que el
   foco con teclado no entraba en la primera apertura (medido). */
.vera-idioma-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vera-idioma-opcion:hover,
.vera-idioma-opcion:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.vera-idioma-opcion.activa {
    color: #fff;
}

.vera-idioma-codigo {
    min-width: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.vera-idioma-opcion .ri-check-line {
    margin-left: auto;
    padding-left: 12px;
    font-size: 16px;
    visibility: hidden;
}

.vera-idioma-opcion.activa .ri-check-line {
    visibility: visible;
}

/* Por debajo de 1600px no cabía "Español" (medido): el botón muestra el código
   y la lista sigue con los nombres completos. */
@media only screen and (max-width: 1600px) {
    .vera-idioma-boton {
        gap: 4px;
        padding: 0 12px;
    }

    .vera-idioma-boton .ri-global-line,
    .vera-idioma-largo {
        display: none;
    }

    .vera-idioma-corto {
        display: inline;
    }
}

/* Entre 992 y 1199px la cabecera es una rejilla de dos columnas iguales y
   .header-left solo lleva el logo y el botón del menú (90 + 54px, medido). Su
   min-width de 498px obligaba a la primera columna y el bloque azul se salía de
   la pantalla a 992px. Con 200px la rejilla se reparte en dos columnas iguales;
   por debajo de ~1030px, el botón del menú se corre a la izquierda. */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
    /* width: auto: con el 50% de arriba, .header-left ocupaba media celda y
       dejaba un hueco de 200-300px sin azul junto al bloque de oficinas. */
    .rs-header-two .header-left {
        width: auto !important;
        min-width: 200px !important;
    }
}

/* Cada teléfono (icono + número) va en .vera-tel y no se parte. Al encoger, el
   teléfono se partía por dentro ("(+57)" arriba, "6017561413" abajo) y, con los
   números enteros, el icono del celular se quedaba arriba sin su número (visto
   a 1280px). Ahora baja el celular completo. changeOfficeInfo (header.php)
   usa el mismo marcado al cambiar de oficina. */
.office-info .vera-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* El gap: 6px del style del span gana a la hoja: de ahí el !important. */
@media only screen and (min-width: 992px) {
    .office-info > span:last-child {
        flex-wrap: wrap;
        column-gap: 14px !important;
        row-gap: 2px !important;
    }
}

/* Oficinas de la cabecera: pestañas "Bogotá" / "Quito" en columna, a la
   izquierda de la dirección. Antes eran enlaces "Oficina directa …" (~195px) y
   dejaban sin espacio el bloque azul; encima de la dirección, el texto ocupaba
   76 de los 110px de alto y se veía apretado (a la izquierda, 46px; medido).
   changeOfficeInfo (header.php) cambia la pestaña activa y la dirección. */
.vera-oficinas {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 22px;
    padding: 0 22px;
    background-color: rgba(0, 0, 0, 0.2);
}

.vera-oficinas .office-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vera-oficinas .office-link {
    margin: 0;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 2px solid transparent;
    text-align: left;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.vera-oficinas .office-link:hover {
    color: #fff;
}

.vera-oficinas .office-link.active {
    color: #fff;
    border-left-color: #fff;
}

.vera-oficinas .office-link:focus {
    outline: none;
}

.vera-oficinas .office-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
}

/* La regla .office-info de arriba (del sitio estático) le pone fondo #223746 y
   30px de relleno: dentro de las pestañas quedaba como un recuadro oscuro y la
   dirección no se alineaba con "Bogotá" (visto a 1440px). */
.vera-oficinas .office-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 0;
    background: none;
}

/* Hovers en blanco en vez del azul del tema (main.css usa --rs-theme-primary).
   Tarjetas de Servicios Legales Especializados: solo el título se ponía azul. */
.rs-services-three .rs-services-title a:hover {
    color: #fff;
}

/* Footer: enlaces de las columnas (y su flecha), enlaces legales y redes. En las
   redes, un fondo blanco dejaría invisible el icono blanco: se marca el borde. */
.rs-footer-one .rs-footer-widget-link ul li a:hover,
.rs-footer-one .rs-footer-widget-link ul li a::before {
    color: #fff;
}

.rs-copyright-one .rs-footer-copyright-link a:hover {
    color: #fff;
    border-color: #fff;
}

/* main.css usa ri-arrow-right-double-line (\f2e5): en hover se veía una flecha
   doble. Se cambia por la flecha sencilla ri-arrow-right-s-line. */
.rs-footer-one .rs-footer-widget-link ul li a::before {
    content: "\ea6e";
}

/* Línea de copyright: main.css no le fija tamaño y heredaba el del párrafo. */
.rs-copyright-one .rs-footer-copyright p {
    font-size: 16px;
}

.rs-footer-one .rs-footer-social a:hover {
    background: transparent;
    border-color: #fff;
}

/* ------------------------------------------------------------------
   Noticias (home.php) y detalle de entrada (single.php)
   ------------------------------------------------------------------ */

/* Banner de Noticias: discreto, azul plano y bajo (antes imagen con degradado,
   370px de alto y título de 54px). */
.vera-breadcrumb {
    padding-top: 50px;
    padding-bottom: 45px;
    background: #0e3488;
}

.vera-breadcrumb .rs-breadcrumb-title {
    margin-top: 0;
    font-size: 36px;
}

.vera-breadcrumb .rs-breadcrumb-line {
    margin-top: 16px;
    margin-bottom: 14px;
}

.vera-breadcrumb .rs-breadcrumb-desc {
    margin: 0;
    font-size: 16px;
}

@media only screen and (max-width: 767px) {
    .vera-breadcrumb {
        padding-top: 35px;
        padding-bottom: 30px;
    }

    .vera-breadcrumb .rs-breadcrumb-title {
        font-size: 30px;
    }
}

.vera-breadcrumb-pagina {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-weight: 500;
}

/* Rejilla de noticias */
.vera-noticias .row {
    row-gap: 30px;
}

/* Paginador: paginate_links() marca la página actual con <span>, y el tema solo
   daba forma a los <a>. */
.vera-paginador {
    margin-top: 60px;
    text-align: center;
}

.vera-paginador ul {
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.vera-paginador ul li .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rs-border-primary);
    border-radius: 50%;
    background: var(--rs-bg-secondary);
    color: var(--rs-black);
    font-weight: 500;
}

.vera-paginador ul li span.current {
    border-color: #12398f;
    background: #12398f;
    color: #fff;
}

.vera-paginador ul li span.dots {
    border-color: transparent;
    background: none;
}

.vera-paginador ul li a.page-numbers:hover {
    border-color: #12398f;
    background: #12398f;
    color: #fff;
}

.vera-paginador ul li .page-numbers i {
    font-size: 20px;
}

.vera-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Detalle: una columna centrada con sección y fecha, título, imagen, contenido
   y navegación. */
.vera-entrada {
    padding-top: 70px;
    padding-bottom: 100px;
}

@media only screen and (max-width: 767px) {
    .vera-entrada {
        padding-top: 40px;
        padding-bottom: 70px;
    }
}

.vera-entrada-cabecera {
    margin-bottom: 30px;
}

.vera-entrada-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--rs-text-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vera-entrada-meta a {
    color: #12398f;
}

.vera-entrada-titulo {
    margin: 0;
    font-size: 32px;
    line-height: 1.25;
}

@media only screen and (max-width: 991px) {
    .vera-entrada-titulo {
        font-size: 30px;
    }
}

@media only screen and (max-width: 575px) {
    .vera-entrada-titulo {
        font-size: 24px;
    }
}

/* Imagen destacada: el <img> trae width/height de WordPress y el tema solo le
   pone width: 100%, así que la altura del atributo se quedaba fija y la imagen
   se estiraba. Con proporción 21:9 y cover se recorta en vez de deformarse. */
.vera-entrada-imagen {
    margin-bottom: 40px;
}

.vera-entrada-imagen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    /* Mismo criterio que la tarjeta: centrado. */
    object-position: center;
}

.vera-entrada-contenido {
    color: var(--rs-text-primary);
    font-size: 17px;
    line-height: 1.75;
}

.vera-entrada-contenido p,
.vera-entrada-contenido ul,
.vera-entrada-contenido ol,
.vera-entrada-contenido table,
.vera-entrada-contenido figure {
    margin-bottom: 22px;
}

.vera-entrada-contenido h2,
.vera-entrada-contenido h3,
.vera-entrada-contenido h4 {
    margin: 38px 0 16px;
    line-height: 1.3;
}

.vera-entrada-contenido h2 {
    font-size: 30px;
}

.vera-entrada-contenido h3 {
    font-size: 26px;
}

.vera-entrada-contenido h4 {
    font-size: 22px;
}

.vera-entrada-contenido ul,
.vera-entrada-contenido ol {
    padding-left: 24px;
}

.vera-entrada-contenido ul li {
    list-style: disc;
    margin-bottom: 8px;
}

.vera-entrada-contenido ol li {
    list-style: decimal;
    margin-bottom: 8px;
}

.vera-entrada-contenido a {
    color: #12398f;
    text-decoration: underline;
}

.vera-entrada-contenido strong,
.vera-entrada-contenido b {
    color: var(--rs-title-primary);
}

.vera-entrada-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Tablas del sitio viejo: con scroll propio si no caben. */
.vera-entrada-contenido table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.vera-entrada-contenido td,
.vera-entrada-contenido th {
    padding: 8px 12px;
    border: 1px solid var(--rs-border-primary);
}

.vera-entrada-navegacion .rs-postbox-more-item {
    flex: 1 1 0;
    min-width: 0;
}

.vera-entrada-navegacion .rs-postbox-more-item:last-child {
    display: flex;
    justify-content: flex-end;
}

/* La línea divisoria entre Anterior y Siguiente. main.css la dibuja como una
   barra de 50px de ancho girada 90deg, con left: 50% y sólo translateY(-50%):
   el 50% coloca el BORDE IZQUIERDO en el centro, y como el giro es sobre el
   centro de la barra, la línea acababa 25px a la derecha del eje (la mitad de
   esos 50px). Falta el translateX que descuente el ancho propio. */
.vera-entrada-navegacion .rs-postbox-more-item::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.vera-entrada-navegacion a {
    gap: 18px;
    max-width: 100%;
    text-transform: none;
    line-height: 1.35;
}

.vera-entrada-navegacion a span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vera-entrada-navegacion a small {
    display: block;
    margin-bottom: 4px;
    color: var(--rs-text-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vera-entrada-navegacion a i {
    flex-shrink: 0;
}

.vera-entrada-siguiente {
    text-align: right;
}

.vera-entrada-navegacion a:hover {
    color: #12398f;
}

/* Email y teléfono de Contáctenos: 55px arriba y abajo en todos los anchos
   (main.css ponía 88/85, 60 o 30px según el ancho) y el mismo tamaño que los
   párrafos del sitio (var(--rs-fs-p), 17px/28px), en vez de 24 y 20px. */
.rs-contact-two .rs-contact-item-wrapper {
    padding-top: 55px;
    padding-bottom: 55px;
}

.rs-contact-two .rs-contact-title,
.rs-contact-two .rs-contact-item a {
    font-size: var(--rs-fs-p);
    line-height: 28px;
}

.rs-contact-two .rs-contact-title {
    margin-bottom: 4px;
}

/* Teléfonos de Bogotá y Quito en Contáctenos, con icono. Email y Teléfonos se
   alinean por arriba: con dos líneas de teléfono, centrados, sus títulos
   quedaban a distinta altura. */
.rs-contact-two .rs-contact-item-wrapper {
    align-items: flex-start;
}

.vera-telefonos {
    margin: 0;
    padding: 0;
}

.vera-telefonos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    list-style: none;
    font-size: var(--rs-fs-p);
    line-height: 28px;
}

.vera-telefonos li i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
}

.vera-telefonos li a {
    white-space: nowrap;
}

.vera-telefono-ciudad {
    color: rgba(255, 255, 255, 0.55);
}

/* Email y teléfonos del bloque de contacto: en hover, subrayado y texto blanco
   en vez del azul del tema (main.css usa --rs-theme-primary). */
.rs-contact-two .rs-contact-item a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Servicios Legales Especializados (portada): 60px arriba en todos los anchos.
   section-space-top ponía 120/100/70/60px según la pantalla. */
.rs-services-area.rs-services-three {
    padding-top: 60px;
}

/* ------------------------------------------------------------------
   Socios: página /socios/ (archive-vera_socio.php) y perfil
   (single-vera_socio.php). Datos del plugin Vera Socios.
   ------------------------------------------------------------------ */

.vera-socios {
    padding-top: 70px;
    padding-bottom: 100px;
}

.vera-socios-grupo + .vera-socios-grupo {
    margin-top: 70px;
}

/* Rótulo con un filete que llena el resto de la línea. */
.vera-socios-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 30px;
    font-size: 26px;
    line-height: 1.25;
}

.vera-socios-grupo-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rs-border-primary);
}

.vera-socios-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 40px 30px;
}

/* Retratos de tamaños muy distintos (de 200×200 a 1200×1600): todos al mismo
   recorte 4:5, centrados arriba para no cortar la cara. */
.vera-socio-tarjeta-foto,
.vera-socio-retrato {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #12398f;
}

.vera-socio-tarjeta-foto {
    border-radius: 10px;
}

.vera-socio-tarjeta-foto img,
.vera-socio-retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.vera-socio-tarjeta-foto img {
    transition: transform 0.6s ease;
}

.vera-socio-tarjeta:hover .vera-socio-tarjeta-foto img {
    transform: scale(1.04);
}

.vera-socio-iniciales {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.vera-socio-tarjeta-texto {
    padding-top: 16px;
}

.vera-socio-tarjeta-nombre {
    margin: 0 0 4px;
    font-size: 19px;
    line-height: 1.3;
}

.vera-socio-tarjeta-nombre a:hover {
    color: #12398f;
}

.vera-socio-tarjeta-cargo {
    margin: 0;
    color: var(--rs-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Perfil */
.vera-socio {
    padding-top: 50px;
    padding-bottom: 100px;
}

.vera-socio-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 30px;
    color: var(--rs-text-primary);
    font-size: 15px;
    font-weight: 500;
}

.vera-socio-volver:hover {
    color: #12398f;
}

.vera-socio-cabecera {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--rs-border-primary);
}

.vera-socio-retrato {
    border-radius: 6px;
}

.vera-socio-grupo {
    margin-bottom: 10px;
    color: #12398f;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vera-socio-nombre {
    margin: 0 0 12px;
    font-size: 44px;
    line-height: 1.15;
}

.vera-socio-cargo {
    margin: 0;
    color: var(--rs-text-primary);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.vera-socio-hoja {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.vera-socio-bloque {
    padding: 30px;
    border-radius: 6px;
    background: var(--rs-bg-secondary);
}

.vera-socio-bloque h3 {
    margin: 0 0 16px;
    font-size: 21px;
    line-height: 1.3;
}

.vera-socio-bloque ul,
.vera-socio-bloque ol {
    margin: 0;
    padding-left: 20px;
}

.vera-socio-bloque li {
    margin-bottom: 8px;
    color: var(--rs-text-primary);
    font-size: 16px;
    line-height: 1.6;
    list-style: disc;
}

.vera-socio-bloque ol li {
    list-style: decimal;
}

.vera-socio-bloque p {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.vera-socio-bloque p:last-child,
.vera-socio-bloque li:last-child {
    margin-bottom: 0;
}

.vera-socio-bloque a {
    color: #12398f;
    text-decoration: underline;
}

/* Cuadro azul de contacto al final (provisional). */
.vera-socio-contacto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 50px;
    padding: 45px 50px;
    border-radius: 6px;
    background: #12398f;
    color: #fff;
}

.vera-socio-contacto h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    line-height: 1.25;
}

.vera-socio-contacto p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.vera-socio-contacto-datos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.vera-socio-contacto-datos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    list-style: none;
    color: #fff;
}

.vera-socio-contacto-datos a {
    color: #fff;
}

.vera-socio-contacto-datos a:hover {
    text-decoration: underline;
}

.vera-socio-contacto-datos i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
}

.vera-socio-contacto-ciudad {
    color: rgba(255, 255, 255, 0.55);
}

@media only screen and (max-width: 991px) {
    .vera-socio-cabecera {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 30px;
    }

    .vera-socio-nombre {
        font-size: 34px;
    }

    .vera-socio-hoja {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 575px) {
    .vera-socios-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 16px;
    }

    .vera-socio-tarjeta-nombre {
        font-size: 16px;
    }

    .vera-socio-tarjeta-cargo {
        font-size: 11px;
    }

    .vera-socio-cabecera {
        grid-template-columns: 1fr;
    }

    .vera-socio-retrato {
        max-width: 260px;
    }

    .vera-socio-nombre {
        font-size: 28px;
    }

    .vera-socio-bloque {
        padding: 24px;
    }

    .vera-socio-contacto {
        padding: 30px 25px;
    }
}

/* Socios, vista sin fotos (/socios/?vista=sin-fotos): tarjetas de texto
   clicables enteras y perfil sin retrato. */
/* Mínimo de 320px: 3 por fila en escritorio (antes 4, de 308px), 2 en tablet. */
.vera-socios-rejilla--sin-fotos {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Gris plano y radio de 6px, como las piezas de /areas/. El borde queda
   transparente para que al pasar el ratón aparezca sin mover el contenido. */
.vera-socio-ficha {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #efefef;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.vera-socio-ficha:hover {
    border-color: #12398f;
    box-shadow: 0 14px 30px rgba(18, 57, 143, 0.12);
    transform: translateY(-3px);
}

.vera-socio-ficha:focus-visible {
    border-color: #12398f;
    outline: 2px solid #12398f;
    outline-offset: 2px;
}

.vera-socio-ficha-nombre {
    margin: 0 0 6px;
    color: var(--rs-title-primary);
    font-size: 20px;
    line-height: 1.3;
}

.vera-socio-ficha-cargo {
    margin: 0;
    color: var(--rs-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vera-socio-ficha-ver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 22px;
    color: #12398f;
    font-size: 15px;
    font-weight: 600;
}

.vera-socio-ficha-ver i {
    transition: transform 0.2s ease;
}

.vera-socio-ficha:hover .vera-socio-ficha-ver i {
    transform: translateX(4px);
}

.vera-socio-cabecera--sin-foto {
    grid-template-columns: minmax(0, 1fr);
}

@media only screen and (max-width: 575px) {
    .vera-socios-rejilla--sin-fotos {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vera-socio-ficha {
        padding: 22px 24px;
    }
}

/* ------------------------------------------------------------------
   Header: fondo de los submenús desplegables (y del mega menú de Áreas)
   ------------------------------------------------------------------ */
.main-menu .submenu,
.main-menu .submenu ul,
.main-menu .mega-menu {
    background-color: #0f286a;
}

/* ------------------------------------------------------------------
   Perfil de socio, vista sin fotos (single-vera_socio.php?vista=sin-fotos)
   ------------------------------------------------------------------ */

/* Cabecera: la del perfil estático (clases rs-team-details de main.css), con
   un cuadro de cargo y nombre en el lugar del retrato. */
.vera-socio-intro {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: stretch; /* el cuadro del nombre llega hasta abajo */
    gap: 30px 60px;
    margin-bottom: 60px;
}

.vera-socio-intro-ficha {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* cargo y nombre abajo */
    padding: 40px;
    border-radius: 6px;
    background: #2f3337;
}

.vera-socio-intro-ficha .rs-team-details-desig {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
}

.vera-socio-intro-ficha .rs-team-details-title {
    color: #fff;
}

.vera-socio-intro .rs-team-details-desig {
    display: block;
}

.vera-socio-intro .rs-team-details-title {
    margin-bottom: 0;
    font-size: 36px;
    line-height: 1.2;
}

.vera-socio-intro .rs-team-details-desc {
    margin-top: 0;
    margin-bottom: 0;
}

.vera-socio-intro .rs-team-details-line::after {
    background: #0f286a;
}

/* El recuadro del email se ajusta al ancho del email: a media línea (la
   rejilla de main.css) lo partía. Solo en pantallas estrechas se corta. */
.vera-socio-intro .rs-team-details-info {
    grid-template-columns: minmax(0, max-content);
}

.vera-socio-intro .rs-team-details-info-item {
    padding-inline-end: 40px;
}

.vera-socio-intro .rs-team-details-info-value a {
    color: var(--rs-text-primary);
    overflow-wrap: anywhere;
}

.vera-socio-intro .rs-team-details-info-value a:hover {
    color: #12398f;
}

/* Hoja de vida en cuadros azules. */
.vera-socio-hoja--azul .vera-socio-bloque {
    background: #12398f;
}

.vera-socio-hoja--azul .vera-socio-bloque h3 {
    color: #fff;
}

.vera-socio-hoja--azul .vera-socio-bloque li,
.vera-socio-hoja--azul .vera-socio-bloque p {
    color: rgba(255, 255, 255, 0.85);
}

.vera-socio-hoja--azul .vera-socio-bloque li::marker {
    color: rgba(255, 255, 255, 0.5);
}

.vera-socio-hoja--azul .vera-socio-bloque strong,
.vera-socio-hoja--azul .vera-socio-bloque a {
    color: #fff;
}

@media only screen and (max-width: 991px) {
    .vera-socio-intro {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 575px) {
    .vera-socio-intro .rs-team-details-title {
        font-size: 30px;
    }

    .vera-socio-intro-ficha {
        padding: 28px 24px;
    }

    .vera-socio-intro .rs-team-details-line {
        margin-top: 35px;
        margin-bottom: 30px;
    }
}

/* ------------------------------------------------------------------
   Áreas: página /areas/ (archive-vera_area.php) y detalle
   (single-vera_area.php). Datos del plugin Vera Áreas.
   ------------------------------------------------------------------ */

.vera-areas {
    padding-top: 70px;
    padding-bottom: 100px;
}

/* Mosaico tipo "bento": 4 columnas y filas de altura fija. El tamaño de cada
   pieza lo decide vera_areas_mosaico_patron() (functions.php), probado para que
   con grid-auto-flow: dense no queden huecos a 4 ni a 2 columnas. */
.vera-areas-mosaico {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 180px;
    grid-auto-flow: dense;
    gap: 20px;
}

.vera-areas-mosaico--pocas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 280px;
}

/* Pieza entera clicable, sin foto: grises planos que se alternan de claro a
   oscuro (el ciclo de 4 casa con las 4 columnas) y, al pasar el ratón, el azul
   de la marca. Texto oscuro sobre gris; blanco solo sobre el azul. */
.vera-area-mosaico {
    --vera-area-gris: #efefef;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 6px;
    background: var(--vera-area-gris);
    color: #1c1c1c;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.vera-area-mosaico:nth-child(4n+2) {
    --vera-area-gris: #e4e4e4;
}

.vera-area-mosaico:nth-child(4n+3) {
    --vera-area-gris: #d8d8d8;
}

.vera-area-mosaico:nth-child(4n+4) {
    --vera-area-gris: #cbcbcb;
}

.vera-area-mosaico--grande {
    grid-column: span 2;
    grid-row: span 2;
}

.vera-area-mosaico--alta {
    grid-row: span 2;
}

.vera-area-mosaico--ancha {
    grid-column: span 2;
}

.vera-area-mosaico:hover,
.vera-area-mosaico:focus-visible {
    background: #0f286a;
    color: #fff;
}

.vera-area-mosaico:focus-visible {
    outline: 3px solid #12398f;
    outline-offset: 3px;
}

.vera-area-mosaico-flecha {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    color: #1c1c1c;
    font-size: 20px;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.vera-area-mosaico:hover .vera-area-mosaico-flecha {
    background: #fff;
    color: #0f286a;
    transform: rotate(45deg);
}

.vera-area-mosaico-cuerpo {
    padding: 24px;
}

.vera-area-mosaico-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    color: #0f286a;
    font-size: 22px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.vera-area-mosaico-titulo {
    margin: 0;
    color: inherit;
    font-size: 19px;
    line-height: 1.3;
}

.vera-area-mosaico:hover .vera-area-mosaico-icono,
.vera-area-mosaico:focus-visible .vera-area-mosaico-icono {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.vera-area-mosaico--alta .vera-area-mosaico-titulo,
.vera-area-mosaico--ancha .vera-area-mosaico-titulo {
    font-size: 23px;
}

.vera-area-mosaico--grande .vera-area-mosaico-cuerpo {
    padding: 38px;
}

.vera-area-mosaico--grande .vera-area-mosaico-icono {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 28px;
}

.vera-area-mosaico--grande .vera-area-mosaico-titulo {
    font-size: 36px;
    line-height: 1.15;
}

@media only screen and (max-width: 1199px) {
    /* Columnas estrechas: los títulos largos llegan a 4 líneas y a 170px
       "Contratos Asociados a la Propiedad Intelectual" se salía de la pieza. */
    .vera-areas-mosaico {
        grid-auto-rows: 210px;
    }

    .vera-area-mosaico--grande .vera-area-mosaico-titulo {
        font-size: 30px;
    }
}

@media only screen and (max-width: 991px) {
    .vera-areas-mosaico {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 170px;
        gap: 16px;
    }
}

/* Móvil: una columna, todas del mismo ancho; la grande solo algo más alta. */
@media only screen and (max-width: 575px) {
    .vera-areas-mosaico,
    .vera-areas-mosaico--pocas {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
    }

    .vera-area-mosaico--grande,
    .vera-area-mosaico--alta,
    .vera-area-mosaico--ancha {
        grid-column: auto;
        grid-row: auto;
    }

    .vera-area-mosaico--grande {
        grid-row: span 2;
    }

    .vera-area-mosaico--grande .vera-area-mosaico-cuerpo {
        padding: 26px;
    }

    .vera-area-mosaico--grande .vera-area-mosaico-titulo {
        font-size: 28px;
    }

    .vera-area-mosaico--alta .vera-area-mosaico-titulo,
    .vera-area-mosaico--ancha .vera-area-mosaico-titulo {
        font-size: 20px;
    }
}

/* Detalle */
.vera-area-migas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vera-area-migas:hover {
    color: #fff;
}

.vera-area {
    padding-top: 70px;
    padding-bottom: 90px;
}

/* Sin lateral, una columna centrada: a lo ancho del contenedor las líneas
   del texto quedaban demasiado largas. */
.vera-area-principal {
    max-width: 1140px;
    margin: 0 auto;
}

/* Cabecera: imagen a la izquierda, introducción a la derecha. Si falta una de
   las dos, la otra ocupa todo el ancho. */
.vera-area-cabecera {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

.vera-area-cabecera--una {
    grid-template-columns: 1fr;
}

.vera-area-imagen {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
}

/* El <img> trae width/height de WordPress: con proporción fija y cover se
   recorta en vez de deformarse. */
.vera-area-imagen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vera-area-intro {
    margin: 0;
    padding-left: 28px;
    border-left: 3px solid #12398f;
    color: var(--rs-title-primary);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.55;
}

.vera-area-contenido {
    color: var(--rs-text-primary);
    font-size: 17px;
    line-height: 1.75;
}

.vera-area-contenido p {
    margin-bottom: 22px;
}

.vera-area-contenido h3,
.vera-area-contenido h4 {
    margin: 40px 0 18px;
    font-size: 24px;
    line-height: 1.3;
}

.vera-area-contenido > :first-child {
    margin-top: 0;
}

/* Las listas son el grueso del contenido: cada punto, una tarjeta con check. */
.vera-area-contenido ul {
    display: grid;
    gap: 12px;
    margin: 0 0 30px;
    padding: 0;
}

/* Con 7 puntos o más la lista se hacía eterna: pasa a dos columnas. Las cortas
   (2-5 puntos, casi siempre de texto largo) siguen en una. */
.vera-area-contenido ul:has(> li:nth-child(7)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vera-area-contenido li {
    position: relative;
    padding: 15px 20px 15px 60px;
    border-radius: 10px;
    background: var(--rs-bg-secondary);
    list-style: none;
    line-height: 1.55;
}

.vera-area-contenido li::before {
    content: "\eb7b"; /* ri-check-line */
    position: absolute;
    top: 14px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #12398f;
    color: #fff;
    font-family: var(--rs-ff-remixicon);
    font-size: 16px;
    line-height: 1;
}

.vera-area-contenido ul:last-child,
.vera-area-contenido p:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
    .vera-area-cabecera {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .vera-area-intro {
        font-size: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .vera-areas,
    .vera-area {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .vera-area-intro {
        padding-left: 18px;
        font-size: 18px;
    }

    .vera-area-contenido ul:has(> li:nth-child(7)) {
        grid-template-columns: 1fr;
    }

    .vera-area-contenido li {
        padding: 13px 16px 13px 54px;
    }

    .vera-area-contenido li::before {
        left: 15px;
    }
}

/* "Explore otras soluciones legales" al final de cada área (parts/areas-otras.php).
   El tema reparte bordes y márgenes por :nth-child para 8 tarjetas; con otro
   número se descuadran. Estas reglas los igualan y el script de la pieza marca
   la primera y la última fila según las columnas visibles. */
/* Fondo gris claro para separar la sección del contenido del área (el mismo
   #F8F8F9 de Noticias Destacadas en la portada). El recuadro de las tarjetas es
   gris en el tema: pasa a blanco para que no se funda con el fondo. */
.vera-areas-otras {
    background-color: #F8F8F9;
}

.vera-areas-otras .rs-feature-wrapper {
    background: #fff;
}

.vera-areas-otras .rs-feature-wrapper.is-normalized .rs-feature-item {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--rs-border-primary);
}

.vera-areas-otras .rs-feature-wrapper.is-normalized .rs-feature-item.is-first-row {
    border-top: 1px solid var(--rs-border-primary);
    padding-top: 15px;
}

.vera-areas-otras .rs-feature-wrapper.is-normalized .rs-feature-item.is-last-row {
    margin-bottom: 0;
}

.vera-areas-otras-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #0f286a;
    color: #fff;
    font-size: 26px;
}

/* Blog (/blog/): títulos de las tarjetas a 20px en todos los anchos (Noticias
   y la portada bajan a 18/17px en pantallas estrechas). Con body.category-blog
   gana también a esas reglas de media query. */
.category-blog .rs-blog-two .rs-blog-title {
    font-size: 20px;
    line-height: 1.4;
}

/* La Firma, "Presencia y Alianzas": la foto de fondo ocupa toda la sección y
   sin oscurecer (antes brightness(0.35) en línea). main.css le da
   height: calc(100% - 360px) pegada abajo, pensado para otro diseño; la clase es
   propia porque Signos Distintivos también usa .rs-working-nine. */
.rs-working-nine .vera-firma-alianzas-fondo {
    top: 0;
    height: 100%;
    filter: none;
}

/* Portada, Noticias Destacadas: tres tarjetas fijas (antes carrusel). A dos
   columnas la tercera baja de línea y necesita separación. */
.vera-portada-noticias {
    row-gap: 30px;
}

/* La Firma: las fotos de Fundación y Apertura son muy apaisadas (2,4:1 y 1,8:1)
   y en su columna quedaban bajas. Proporción fija y recorte, como en las áreas.
   main.css fija la caja en 350px con overflow: hidden y a la foto le da
   height: 100%, que anula el aspect-ratio: una foto más alta quedaba cortada
   sin que se notara. Ambas vuelven a auto con selectores igual de fuertes. */
.rs-working-eight .vera-firma-historia-imagen {
    height: auto;
}

.rs-working-eight .vera-firma-historia-imagen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media only screen and (max-width: 991px) {
    .rs-working-eight .vera-firma-historia-imagen img {
        aspect-ratio: 3 / 2;
    }
}

/* Fundación y Apertura: el subtítulo va sobrepuesto en la esquina inferior de la foto,
   en una caja del azul del banner. La caja ya es position: relative (main.css). */
.rs-working-eight .vera-firma-historia-imagen--rotulo .section-subtitle {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    margin: 0;
    padding: 8px 16px;
    border-radius: 4px;
    background: #0e3488;
    color: #fff;
}

@media only screen and (max-width: 575px) {
    .rs-working-eight .vera-firma-historia-imagen--rotulo .section-subtitle {
        left: 12px;
        bottom: 12px;
        padding: 6px 12px;
        font-size: 12px;
        letter-spacing: 1.5px;
    }
}

/* ------------------------------------------------------------------
   Contáctenos (page-contactenos.php): una pestaña por oficina, con
   formulario, datos y mapa. Grises planos, radio de 6px y el azul del
   banner, como Áreas y Socios.
   ------------------------------------------------------------------ */
.vera-contacto {
    padding-top: 70px;
    padding-bottom: 100px;
}

.vera-contacto-pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.vera-contacto-pestana {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: 0;
    border-radius: 6px;
    background: #efefef;
    color: #1c1c1c;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.vera-contacto-pestana i {
    color: #0e3488;
    font-size: 18px;
    transition: color 0.25s ease;
}

.vera-contacto-pestana:hover {
    background: #e4e4e4;
}

.vera-contacto-pestana.is-activa {
    background: #0e3488;
    color: #fff;
}

.vera-contacto-pestana.is-activa i {
    color: #fff;
}

.vera-contacto-pestana:focus-visible {
    outline: 3px solid #0e3488;
    outline-offset: 3px;
}

/* Formulario a la izquierda, datos y mapa a la derecha. */
.vera-contacto-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 30px;
    align-items: start;
}

.vera-contacto-formulario,
.vera-contacto-info {
    border-radius: 6px;
    background: #efefef;
    padding: 40px;
}

.vera-contacto-titulo {
    margin: 0 0 24px;
    font-size: 26px;
    line-height: 1.25;
}

.vera-contacto-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vera-contacto-campo {
    display: block;
    margin: 0;
}

.vera-contacto-campo--ancho {
    grid-column: 1 / -1;
}

.vera-contacto-campo input,
.vera-contacto-campo textarea {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: #1c1c1c;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color 0.2s ease;
}

.vera-contacto-campo input {
    height: 54px;
}

.vera-contacto-campo textarea {
    min-height: 160px;
    resize: vertical;
}

.vera-contacto-campo input:focus,
.vera-contacto-campo textarea:focus {
    border-color: #0e3488;
    outline: none;
}

.vera-contacto-envio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 22px;
}

.vera-contacto-boton {
    min-width: 180px;
    border-radius: 6px;
    background: #0e3488;
}

.vera-contacto-boton:disabled {
    opacity: 0.6;
    cursor: wait;
}

.vera-contacto-aviso {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.vera-contacto-aviso.is-ok {
    color: #1a7f37;
}

.vera-contacto-aviso.is-error {
    color: #b42318;
}

.vera-contacto-lateral {
    display: grid;
    gap: 30px;
}

/* Datos en el azul del banner: se distinguen del formulario gris. */
.vera-contacto-info {
    background: #0e3488;
    color: #fff;
}

.vera-contacto-info .vera-contacto-titulo {
    color: #fff;
}

.vera-contacto-datos {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vera-contacto-datos li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 1.55;
}

.vera-contacto-datos i {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: -5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 18px;
}

.vera-contacto-datos a {
    color: #fff;
    overflow-wrap: anywhere;
}

.vera-contacto-datos a:hover {
    color: #fff;
    text-decoration: underline;
}

.vera-contacto-mapa {
    overflow: hidden;
    border-radius: 6px;
    background: #efefef;
}

.vera-contacto-mapa iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

@media only screen and (max-width: 991px) {
    .vera-contacto-rejilla {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 575px) {
    .vera-contacto {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .vera-contacto-pestana {
        flex: 1 1 100%;
        justify-content: center;
    }

    .vera-contacto-formulario,
    .vera-contacto-info {
        padding: 26px 22px;
    }

    .vera-contacto-titulo {
        font-size: 22px;
    }

    .vera-contacto-campos {
        grid-template-columns: 1fr;
    }

    .vera-contacto-boton {
        width: 100%;
    }
}

/* Franja de fondo de las secciones de áreas (parts/areas.php y areas-otras.php):
   era la imagen feature-bg-thumb-05.webp; ahora gris plano, el mismo gris claro
   de los mosaicos de áreas para no sumar otro gris al sitio. */
.rs-feature-thirteen .rs-feature-bg-thumb {
    background: #efefef;
}

/* ------------------------------------------------------------------
   Cabecera en móvil (≤1366px): una sola fila, logo a la izquierda y a la
   derecha el idioma junto al botón del menú. main.css apilaba la cabecera en
   column-reverse y el bloque azul de oficinas + idioma ocupaba una fila entera
   encima del logo; las pestañas Bogotá/Quito se salían por la izquierda (x=-53
   a 390px, medido). Las oficinas se esconden: están en el pie y en Contacto.
   .header-left pasa a display: contents para poder poner el idioma ENTRE el
   logo y el botón del menú (van en contenedores distintos). Vale para las dos
   cabeceras, la normal y la fija.
   El corte está en 1366px y no en los 991 del tema: entre 1200 y 1366 el menú
   de escritorio ya no cabía y se movía. Lo mismo en main.js (meanScreenWidth)
   y en .vera-solo-movil, que sustituye al d-xl-none de Bootstrap (1200px).
   display: flex porque main.css pone la cabecera en rejilla hasta 1199px.
   ------------------------------------------------------------------ */
@media only screen and (min-width: 1367px) {
    .vera-solo-movil {
        display: none !important;
    }
}

@media only screen and (max-width: 1366px) {
    .rs-header-two .header-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px;
        padding-inline: 15px;
        background-color: #12398f;
    }

    .rs-header-two .header-left {
        display: contents;
    }

    /* Sin flex-shrink: 0 la fila lo encogía a 64px (medido a 390px). */
    .rs-header-two .header-logo {
        flex-shrink: 0;
        margin-inline-end: auto;
    }

    /* Apilada, esta franja ocupaba todo el ancho con 15px de relleno: en fila
       empujaba el botón del menú fuera de la pantalla a 360px (medido). */
    .rs-header-two .header-right {
        order: 2;
        flex: 0 0 auto;
        width: auto !important;
        padding: 0 !important;
        align-self: center !important;
        background: none;
    }

    .rs-header-two .header-content {
        order: 3;
    }

    /* El menú de escritorio: vacío aquí, pero con 30px de margen y dos huecos
       de la fila, 50px que sacaban el botón del menú de la pantalla a 320px.
       meanmenu lo copia al menú lateral igual (lee el DOM, no si se ve). */
    .rs-header-two .header-menu {
        display: none !important;
    }

    .rs-header-two .vera-oficinas {
        display: none !important;
    }

    .rs-header-two .vera-idioma {
        align-self: center;
    }

    .rs-header-two .vera-idioma-boton {
        height: 44px;
        padding: 0 12px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    /* La lista abre pegada al botón y alineada a su derecha. */
    .rs-header-two .vera-idioma-lista {
        top: calc(100% + 6px);
        right: 0;
        left: auto;
    }
}

/* ------------------------------------------------------------------
   Menú lateral (móvil). main.css mete cada opción en una caja con borde lila y
   esquinas redondeadas (.mobile-menu.mean-container .menu-item), y el "+" de
   Áreas quedaba arriba a la derecha de su caja. Aquí: lista limpia con líneas
   separadoras y el "+" centrado en la fila.
   ------------------------------------------------------------------ */
.offcanvas-area .mobile-menu.mean-container .menu-item {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e6e8eb;
    border-radius: 0;
}

/* box-sizing: border-box en enlaces y sublista. meanmenu les da width: 100% con
   content-box, y el relleno de aquí se sumaba por fuera: el contenido medía
   389px en un panel de 375 y al desplazar el menú en el teléfono "bailaba" de
   lado (medido). */
.offcanvas-area .mobile-menu.mean-container .mean-nav ul li a:not(.mean-expand),
.offcanvas-area .mobile-menu.mean-container .mean-nav ul ul {
    box-sizing: border-box;
    width: 100%;
}

/* Red de seguridad: el panel solo se desplaza en vertical. */
.offcanvas-area {
    overflow-x: hidden;
}

.offcanvas-area .mobile-menu.mean-container .mean-nav > ul > li > a:not(.mean-expand) {
    padding: 16px 44px 16px 0;
    border-top: 0;
    color: #1c1c1c;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.offcanvas-area .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
    top: 12px;
    margin-top: 0;
    width: 30px;
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #12398f;
}

/* Toda la fila de un elemento con submenú lo despliega, no solo el "+"
   (el script está en header.php). */
.offcanvas-area .mobile-menu.mean-container .mean-nav > ul > li.menu-item-has-children > a:not(.mean-expand) {
    cursor: pointer;
}

/* Submenú de Áreas: sangrado, sin separadores y con su icono. */
.offcanvas-area .mobile-menu.mean-container .mean-nav ul ul {
    padding: 0 0 12px 14px;
}

.offcanvas-area .mobile-menu.mean-container .mean-nav ul ul .menu-item {
    border-bottom: 0;
}

.offcanvas-area .mobile-menu.mean-container .mean-nav ul ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 0;
    color: #3a4650;
    font-size: 15px;
    font-weight: 400;
}

.offcanvas-area .mobile-menu.mean-container .mean-nav ul ul li a i {
    color: #12398f;
    font-size: 17px;
}

/* Formulario de contacto de la portada: por debajo de 1200px main.css le quita
   el relleno lateral a la caja blanca y los campos tocaban sus bordes. Mismos
   márgenes que el texto del héroe: 30px, y 20px en teléfonos. */
@media only screen and (max-width: 1199px) {
    .rs-contact-two .rs-contact-form {
        padding-inline: 30px;
    }
}

@media only screen and (max-width: 575px) {
    .rs-contact-two .rs-contact-form {
        padding-inline: 20px;
    }
}

/* Ancla del botón "Conozca más" del héroe (#servicios): al saltar, la cabecera
   fija (124px) tapaba el título de la sección. Con la barra de WordPress
   (solo con sesión) va 32px más abajo. */
#servicios {
    scroll-margin-top: 124px;
}

body.admin-bar #servicios {
    scroll-margin-top: 156px;
}

/* Pantalla de carga de la portada: se desvanece en cuanto el HTML está listo
   (la clase la pone el script de header.php) y deja de recibir toques desde ese
   instante, para que el menú responda aunque las imágenes sigan bajando. La
   animación es la red de seguridad si el script no llegara a correr. */
#pre-load {
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    animation: vera-pre-load-fuera 0.35s ease 4s forwards;
}

#pre-load.vera-pre-load-fuera {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes vera-pre-load-fuera {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Cajas de Servicios Legales Especializados (portada) sin hover en móvil. En
   escritorio la descripción sale al pasar el ratón: main.js le pone height: 0 y
   marca .active la caja bajo el puntero. En un teléfono el primer toque hacía de
   hover (abría una caja y cerraba otra, con salto de altura) y el enlace del
   título pedía un segundo toque. Aquí la descripción va siempre visible y nada
   cambia al tocar. (hover: none) cubre también tabletas grandes en horizontal. */
@media (hover: none), (max-width: 991px) {
    .rs-services-three .rs-services-item .rs-desc-height,
    .rs-services-three .rs-services-item:hover .rs-desc-height,
    .rs-services-three .is-item-active.active .rs-desc-height {
        scale: 1;
        opacity: 1;
        height: auto !important;
        margin-bottom: 25px;
        transition: none;
    }

    .rs-services-three .rs-services-item .rs-services-desc,
    .rs-services-three .is-item-active.active .rs-services-desc {
        margin-top: 20px;
    }

    .rs-services-three .rs-services-item .rs-services-title::after,
    .rs-services-three .rs-services-item:hover .rs-services-title::after {
        width: 70px;
        transition: none;
    }

    .rs-services-three .rs-services-content {
        transition: none;
    }

    /* Con la descripción siempre a la vista el panel tapaba hasta el 94% de la
       foto (medido). Compacto: icono pequeño en la misma línea que el título
       (main.css lo bajaba a una línea propia en teléfonos) y menos relleno. */
    .rs-services-three .rs-services-content {
        padding-top: 18px;
        padding-inline-start: 20px;
        padding-inline-end: 20px;
        margin-inline-end: 20px;
    }

    .rs-services-three .rs-services-info {
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
    }

    .rs-services-three .rs-services-icon svg {
        display: block;
        width: 34px;
    }

    .rs-services-three .rs-services-title {
        padding-bottom: 0;
        font-size: 19px;
        line-height: 1.25;
    }

    /* La línea bajo el título pasa a ir bajo toda la cabecera (icono + título). */
    .rs-services-three .rs-services-title::before,
    .rs-services-three .rs-services-title::after {
        display: none;
    }

    .rs-services-three .rs-services-info {
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .rs-services-three .rs-services-item .rs-services-desc,
    .rs-services-three .is-item-active.active .rs-services-desc {
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.5;
    }

    .rs-services-three .rs-services-item .rs-desc-height,
    .rs-services-three .rs-services-item:hover .rs-desc-height,
    .rs-services-three .is-item-active.active .rs-desc-height {
        margin-bottom: 18px;
    }
}

/* Pie en móvil y tableta (columnas apiladas, ≤991px). footer.php da en línea a
   la columna derecha 480px de ancho fijo y 40px de relleno izquierdo, pensados
   para escritorio: en un teléfono las dos columnas medían 520px en 375 de
   pantalla y la descripción y el texto de PRAGMA se salían 160px (medido). Aquí
   ocupa el ancho disponible y arranca en el mismo borde que la columna izquierda.
   !important porque los estilos van en el atributo style. */
@media only screen and (max-width: 991px) {
    .rs-footer-area .rs-footer-left,
    .rs-footer-area .rs-footer-right {
        min-width: 0;
        max-width: 100%;
    }

    .rs-footer-area .rs-footer-right {
        padding-left: 0 !important;
    }

    .rs-footer-area .rs-footer-right > div {
        width: 100% !important;
        min-width: 0;
    }

    .rs-footer-area .rs-footer-widget-wrapper {
        flex-wrap: wrap;
        gap: 20px 40px !important;
    }
}