/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       Brainstorm Force
 Author URI:   https://wpastra.com/about/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* Añade tu CSS personalizado a continuación: */

/* ==========================================================================
   TIPOGRAFÍA GLOBAL (FIRA SANS)
   ========================================================================== */
:root {
    --ast-font-family: 'Fira Sans', sans-serif;
    --ast-heading-font-family: 'Fira Sans', sans-serif;
    --e-global-typography-primary-font-family: 'Fira Sans', sans-serif;
    --e-global-typography-secondary-font-family: 'Fira Sans', sans-serif;
    --e-global-typography-text-font-family: 'Fira Sans', sans-serif;
    --e-global-typography-accent-font-family: 'Fira Sans', sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
select,
textarea {
    font-family: 'Fira Sans', sans-serif;
}

p.text {
    font-size: 20px;
}

/* ==========================================================================
   CARRUSEL RESPONSIVE PREMIUM (MAX ANCHO)
   ========================================================================== */

/* Contenedor principal para forzar ancho de pantalla completo */
.dt-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: #0D2B55;
    margin-top: 35px;
    min-height: 70vh;
}

/* Pista deslizante (Scroll Snapping Nativo) */
.dt-slider-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* Esto evita el scroll vertical raro dentro de las diapositivas */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Ocultar barras de scroll */
    scrollbar-width: none;
}

.dt-slider-container::-webkit-scrollbar {
    display: none;
}

/* Cada Diapositiva */
.dt-slide {
    flex: 0 0 100%;
    width: 100%;
    /* Altura ajustada: alrededor de dos tercios de la pantalla (65vh) */
    height: 70vh;
    min-height: 500px;
    position: relative;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Imágenes de fondo */
.dt-slide img.dt-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 10s ease-out;
}

/* Efecto Ken Burns al posar el ratón (Opcional visual) */
.dt-slide:hover img.dt-slide-bg {
    transform: scale(1.04);
}

/* Overlay oscuro con degradado (le da look premium y hace el texto legible) */
.dt-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 12, 23, 0.8) 0%, rgba(8, 12, 23, 0.3) 50%, rgba(8, 12, 23, 0.6) 100%);
    z-index: -1;
}

/* Contenido / Textos */
.dt-slide-content {
    text-align: center;
    color: #ffffff;
    padding: 0 2rem;
    max-width: 900px;
    /* Animación suave de entrada */
    animation: dtFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dt-slide-title {
    font-family: inherit;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    color: #ffffff;
}

.dt-slide-desc {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dt-slide-content-first {
    margin-top: 250px;
}

/* Botón Premium (Color Dorado corporativo de abogacía) */
.dt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 2.5rem;
    background: #1A56A8;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(26, 86, 168, 0.3);
}

.dt-btn:hover {
    background: #3878C8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 86, 168, 0.5);
    color: #ffffff;
}

/* Botones de control (Flechas izquierda/derecha) */
.dt-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.dt-slider-btn:hover {
    background: rgba(26, 86, 168, 0.8);
    border-color: #1A56A8;
}

.dt-slider-btn.prev {
    left: 1rem;
}

.dt-slider-btn.next {
    right: 1rem;
}

@media (max-width: 768px) {
    .dt-slider-btn {
        display: none;
        /* Mejor ocultar en móviles y que deslicen con el dedo */
    }
}

/* Keyframes */
@keyframes dtFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   SECCIÓN DE BIENVENIDA (TEXTO E IMAGEN)
   ========================================================================== */
.dt-welcome-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4rem;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.dt-welcome-content {
    flex: 1 1 500px;
}

.dt-welcome-subtitle {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1A56A8;
    margin-bottom: 1rem;
}

.dt-welcome-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    color: #0D2B55;
    margin-bottom: 1.5rem;
}

.dt-welcome-divider {
    width: 60px;
    height: 3px;
    background-color: #1A56A8;
    margin-bottom: 1.5rem;
}

.dt-welcome-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
}

.dt-welcome-image {
    flex: 1 1 400px;
    position: relative;
    padding-right: 20px;
    padding-bottom: 20px;
}

.dt-welcome-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    max-height: 600px;
}

/* Borde dorado de estilo corporativo detrás de la foto */
.dt-welcome-image::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 20px;
    border: 2px solid #1A56A8;
    border-radius: 4px;
    z-index: -1;
    transition: transform 0.3s ease;
}

.dt-welcome-image:hover::before {
    transform: translate(-10px, -10px);
}

@media (max-width: 768px) {
    .dt-welcome-section {
        flex-direction: column-reverse;
        /* En móvil, foto primero o descarta */
        padding: 4rem 1rem;
        gap: 3rem;
    }

    .dt-welcome-image {
        padding-right: 0;
        padding-bottom: 0;
    }

    .dt-welcome-image::before {
        display: none;
    }
}

/* ==========================================================================
   SECCIÓN BIENVENIDA  (dt-bienvenidos) — Rediseño moderno
   Layout: foto full-height izquierda | header + 2 columnas ES/EN derecha
   ========================================================================== */

.dt-bienvenidos {
    display: block !important;
    background: #EFF4FB !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ── Grid principal: foto | contenido ── */
.dt-bienvenidos__inner {
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    gap: 0 !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    min-height: 640px !important;
}

@media (max-width: 980px) {
    .dt-bienvenidos__inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
}

/* ── Foto: ocupa toda la altura del bloque ── */
.dt-bienvenidos__photo {
    position: relative !important;
    overflow: hidden !important;
    min-height: 520px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    width: auto !important;
}

.dt-bienvenidos__photo::before {
    display: none !important;
}

.dt-bienvenidos__photo::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, rgba(13, 43, 85, .18) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.dt-bienvenidos__photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 0 !important;
}

@media (max-width: 980px) {
    .dt-bienvenidos__photo {
        min-height: 360px !important;
        width: 100% !important;
    }

    .dt-bienvenidos__photo img {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 360px !important;
    }
}

/* ── Columna de contenido ── */
.dt-bienvenidos__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 56px 52px 52px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    background: #EFF4FB !important;
}

@media (max-width: 980px) {
    .dt-bienvenidos__content {
        padding: 40px 24px !important;
    }
}

/* Eyebrow */
.dt-bienvenidos__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #1A56A8 !important;
    margin: 0 0 14px 0 !important;
}

.dt-bienvenidos__eyebrow::before {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 1px !important;
    background: #1A56A8 !important;
    flex-shrink: 0 !important;
}

/* Título */
.dt-bienvenidos__title {
    font-size: clamp(1.65rem, 2.8vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0D2B55 !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Tagline */
.dt-bienvenidos__tagline {
    font-size: 1rem !important;
    font-style: italic !important;
    color: #1A56A8 !important;
    font-weight: 400 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* Divisor dorado */
.dt-bienvenidos__divider {
    display: block !important;
    width: 44px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #1A56A8, #3878C8) !important;
    border: none !important;
    border-top: none !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* ── Grid bilingüe: 2 columnas ES | EN ── */
.dt-bienvenidos__langs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    flex: 1 !important;
    border: 1px solid #C5D9EF !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .05) !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .dt-bienvenidos__langs {
        grid-template-columns: 1fr !important;
    }
}

/* Cada columna de idioma */
.dt-bienvenidos__lang-col {
    padding: 24px 24px 28px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Separador vertical entre ES y EN */
.dt-bienvenidos__lang-col+.dt-bienvenidos__lang-col {
    border-left: 1px solid #C5D9EF !important;
}

@media (max-width: 640px) {
    .dt-bienvenidos__lang-col+.dt-bienvenidos__lang-col {
        border-left: none !important;
        border-top: 1px solid #C5D9EF !important;
    }
}

/* Badge de idioma */
.dt-bienvenidos__lang-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: #0D2B55 !important;
    background: #EFF4FB !important;
    border: 1px solid #C5D9EF !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    margin: 0 0 14px 0 !important;
}

/* Textos en cada columna */
.dt-bienvenidos__lang-col p {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    color: #555 !important;
    font-style: italic !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.dt-bienvenidos__lang-col p:last-child {
    margin-bottom: 0 !important;
}

/* EN: ligeramente más sutil */
.dt-bienvenidos__lang-col--en p {
    color: #888 !important;
    font-size: 13px !important;
}

/* ── CTA ── */
.dt-bienvenidos__cta-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 28px !important;
    flex-wrap: wrap !important;
}

.dt-bienvenidos__btn,
.dt-bienvenidos__btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 30px !important;
    background: #0D2B55 !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 3px !important;
    transition: background .3s ease, transform .25s ease, box-shadow .3s ease !important;
    box-shadow: 0 4px 16px rgba(13, 43, 85, .2) !important;
}

.dt-bienvenidos__btn:hover {
    background: #1A56A8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(26, 86, 168, .35) !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

.dt-bienvenidos__btn .fas {
    font-size: 11px !important;
    transition: transform .3s ease !important;
}

.dt-bienvenidos__btn:hover .fas {
    transform: translateX(4px) !important;
}

/* ==========================================================================
   SECCIÓN COLABORADORES

   Contexto: widget HTML de Elementor con e-con-boxed como padre
   IMPORTANTE: se usan !important en layout para superar Astra + Elementor
   ========================================================================== */

.article-padding {
    padding-bottom: 10px;
}

/* ── Sección raíz: fondo azul oscuro para máximo contraste ── */
.dt-colaboradores {
    display: block !important;
    background: #0D2B55 !important;
    padding: 72px 0 80px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Patrón decorativo sutil en el fondo */
.dt-colaboradores::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(56, 120, 200, .15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(26, 86, 168, .12) 0%, transparent 40%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ── Cabecera: texto claro sobre fondo oscuro ── */
.dt-col__header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 52px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

.dt-col__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #7BAFD6 !important;
    /* azul claro sobre oscuro */
    margin: 0 0 14px 0 !important;
    white-space: nowrap !important;
}

.dt-col__eyebrow::before,
.dt-col__eyebrow::after {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 1px !important;
    background: #7BAFD6 !important;
    opacity: .6 !important;
    flex-shrink: 0 !important;
}

.dt-col__title {
    font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    /* blanco sobre azul oscuro */
    line-height: 1.2 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.dt-col__subtitle {
    font-size: 15px !important;
    color: rgba(255, 255, 255, .65) !important;
    /* blanco semitransparente */
    line-height: 1.7 !important;
    font-weight: 300 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Grid: 3 columnas uniformes ── */
.dt-col__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 26px !important;
    max-width: 1160px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 960px) {
    .dt-col__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .dt-col__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Tarjeta: blanca con borde superior azul siempre visible ── */
.dt-col__card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow:
        0 4px 24px rgba(13, 43, 85, .4),
        0 1px 4px rgba(13, 43, 85, .25) !important;
    position: relative !important;
    box-sizing: border-box !important;
    border-top: 4px solid #3878C8 !important;
    /* borde azul siempre visible */
    transition:
        box-shadow .35s cubic-bezier(.4, 0, .2, 1),
        transform .35s cubic-bezier(.4, 0, .2, 1),
        border-top-color .35s ease !important;
}

.dt-col__card:hover {
    box-shadow:
        0 20px 56px rgba(13, 43, 85, .55),
        0 4px 12px rgba(13, 43, 85, .3) !important;
    transform: translateY(-8px) !important;
    border-top-color: #1A56A8 !important;
}

/* Anular el ::before anterior (banda deslizante) — ya no lo necesitamos */
.dt-col__card::before {
    display: none !important;
}

/* ── Imagen: 300px uniforme ── */
.dt-col__image-wrap {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 300px !important;
    flex-shrink: 0 !important;
    background: #C3D8EE !important;
    box-sizing: border-box !important;
}

.dt-col__image-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1) !important;
    filter: brightness(1) !important;
}

.dt-col__card:hover .dt-col__image-wrap img {
    transform: scale(1.06) !important;
    filter: brightness(.92) !important;
}

/* Overlay: gradiente azul hacia abajo */
.dt-col__image-wrap::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom,
            transparent 35%,
            rgba(13, 43, 85, .5) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: opacity .35s ease !important;
    opacity: .7 !important;
}

.dt-col__card:hover .dt-col__image-wrap::after {
    opacity: 1 !important;
}

/* ── Cuerpo de la tarjeta ── */
.dt-col__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 22px 22px 0 !important;
    box-sizing: border-box !important;
}

.dt-col__name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0D2B55 !important;
    letter-spacing: .02em !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.dt-col__divider {
    display: block !important;
    width: 32px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #1A56A8, #3878C8) !important;
    border: none !important;
    border-top: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

.dt-col__bio {
    font-size: 13px !important;
    line-height: 1.75 !important;
    color: #4B6280 !important;
    font-weight: 300 !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ── Footer con enlace ── */
.dt-col__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 22px 22px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-top: 1px solid #EFF4FB !important;
    margin-top: 14px !important;
}

.dt-col__cta,
.dt-col__cta:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #1A56A8 !important;
    text-decoration: none !important;
    transition: gap .3s ease, color .3s ease !important;
    line-height: 1 !important;
}

.dt-col__cta .fas {
    font-size: 10px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: transform .3s ease !important;
}

.dt-col__cta:hover,
.dt-col__cta:focus {
    color: #0D2B55 !important;
    gap: 14px !important;
    text-decoration: none !important;
}


.dt-col__cta:hover .fas {
    transform: translateX(3px) !important;
}

/* ==========================================================================
   SECCIÓN CONTACTO PREMIUM (1/3 Formulario + 2/3 Info)
   ========================================================================== */
.dt-contact {
    display: block !important;
    background: #EFF4FB !important;
    /* Fondo suave general */
    padding: 100px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cabecera Principal Centrada */
.dt-contact__head {
    text-align: center !important;
    max-width: 680px !important;
    margin: 0 auto 60px !important;
    padding: 0 15px !important;
}

.dt-contact__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #1A56A8 !important;
    margin-bottom: 16px !important;
}

.dt-contact__eyebrow::before,
.dt-contact__eyebrow::after {
    content: '' !important;
    display: block !important;
    width: 30px !important;
    height: 1px !important;
    background: #1A56A8 !important;
    opacity: 0.4 !important;
}

.dt-contact__title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    color: #0D2B55 !important;
    line-height: 1.15 !important;
    margin: 0 0 16px 0 !important;
}

.dt-contact__subtitle {
    font-size: 16px !important;
    color: #4B6280 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Contenedor Principal (Más ancho disponible) */
.dt-contact__inner {
    display: grid !important;
    grid-template-columns: 1.35fr 2fr !important;
    /* Más espacio para el formulario */
    gap: 40px !important;
    max-width: 1360px !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}

@media (max-width: 1100px) {
    .dt-contact__inner {
        grid-template-columns: 1fr 1fr !important;
        /* En portátiles pequeños, 50/50 */
    }
}

@media (max-width: 860px) {
    .dt-contact__inner {
        grid-template-columns: 1fr !important;
    }
}

/* Columna Izquierda (1/3 Formulario) */
.dt-contact__form-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

.dt-contact__form-box {
    background: #ffffff !important;
    padding: 40px 32px !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px -5px rgba(13, 43, 85, 0.08) !important;
    height: 100% !important;
    border-top: 4px solid #1A56A8 !important;
    box-sizing: border-box !important;
}

.dt-contact__form-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0D2B55 !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
    position: relative !important;
    padding-bottom: 15px !important;
}

.dt-contact__form-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 30px !important;
    height: 2px !important;
    background: #1A56A8 !important;
}

/* Columna Derecha (2/3 Info) */
.dt-contact__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    background: transparent !important;
}

@media (max-width: 680px) {
    .dt-contact__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tarjeta Info */
.dt-contact__card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 36px 32px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(13, 43, 85, 0.05) !important;
    box-shadow: 0 8px 24px rgba(13, 43, 85, 0.03) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    min-width: 0 !important;
}

.dt-contact__card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(13, 43, 85, 0.08) !important;
    border-color: #1A56A8 !important;
}

/* Iconos de las tarjetas */
.dt-contact__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(26, 86, 168, 0.08) !important;
    color: #1A56A8 !important;
    border-radius: 10px !important;
    font-size: 20px !important;
    margin: 0 0 24px 0 !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

.dt-contact__card:hover .dt-contact__icon {
    background: #1A56A8 !important;
    color: #ffffff !important;
}

/* Textos de las tarjetas */
.dt-contact__details {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.dt-contact__label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #1A56A8 !important;
    margin-bottom: 10px !important;
}

.dt-contact__value {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0D2B55 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.dt-contact__value small {
    display: block !important;
    font-size: 13.5px !important;
    color: #4B6280 !important;
    font-weight: 400 !important;
    margin-top: 5px !important;
}

/* Enlaces */
.dt-contact__value a {
    display: block !important;
    color: #0D2B55 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.dt-contact__value a:not(:first-child) {
    margin-top: 6px !important;
}

.dt-contact__value a:hover {
    color: #1A56A8 !important;
}

/* ==========================================================================
   FORMULARIO WPFORMS  — paleta azul Del Toro
   Prefijo: #wpforms-3771 (ID del contenedor div) — máxima especificidad
   ========================================================================== */

/* ── Reset base del contenedor ── */
#wpforms-3771 {
    width: 100% !important;
    box-sizing: border-box !important;
}

#wpforms-3771 * {
    box-sizing: border-box !important;
    font-family: 'Fira Sans', sans-serif !important;
}

#wpforms-3771 .wpforms-form {
    width: 100% !important;
    padding: 0 !important;
}

/* ── Contenedor de campos: clearfix ── */
#wpforms-3771 .wpforms-field-container {
    overflow: hidden !important;
    width: 100% !important;
}

/* ── Campo genérico ── */
#wpforms-3771 .wpforms-field {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    padding: 0 0 22px 0 !important;
    margin: 0 !important;
}

/* ── Etiquetas principales ── */
#wpforms-3771 .wpforms-field-label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #1A56A8 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ── Sublabels (Nombre / Apellidos debajo del input) ── */
#wpforms-3771 .wpforms-field-sublabel {
    display: block !important;
    font-size: 11px !important;
    color: #4B6280 !important;
    font-weight: 400 !important;
    margin: 5px 0 0 2px !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    float: none !important;
}

/* ── Fila del campo NOMBRE: flex para anular floats de WPForms ── */
#wpforms-3771 .wpforms-field-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Cada bloque dentro de la fila */
#wpforms-3771 .wpforms-field-row-block {
    flex: 1 1 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Todos los inputs y textarea ── */
#wpforms-3771 input[type="text"],
#wpforms-3771 input[type="email"],
#wpforms-3771 input[type="number"],
#wpforms-3771 input[type="tel"],
#wpforms-3771 textarea {
    display: block !important;
    width: 100% !important;
    float: none !important;
    background: #ffffff !important;
    border: 1.5px solid #C5D9EF !important;
    border-radius: 4px !important;
    padding: 11px 14px !important;
    font-family: 'Fira Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #0D2B55 !important;
    line-height: 1.5 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .22s ease, box-shadow .22s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

/* Forzar TODO el ancho en inputs para el formulario contacto */
#wpforms-3771 .wpforms-field-medium,
#wpforms-3771 .wpforms-field-large,
#wpforms-3771 .wpforms-field-small,
#wpforms-3771 input[type="text"],
#wpforms-3771 input[type="email"],
#wpforms-3771 input[type="number"],
#wpforms-3771 input[type="tel"],
#wpforms-3771 select,
#wpforms-3771 textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Focus */
#wpforms-3771 input[type="text"]:focus,
#wpforms-3771 input[type="email"]:focus,
#wpforms-3771 input[type="number"]:focus,
#wpforms-3771 input[type="tel"]:focus,
#wpforms-3771 textarea:focus {
    border-color: #1A56A8 !important;
    box-shadow: 0 0 0 3px rgba(26, 86, 168, .12) !important;
    outline: none !important;
    background: #ffffff !important;
}

/* Placeholder */
#wpforms-3771 input::placeholder,
#wpforms-3771 textarea::placeholder {
    color: #A8BCCC !important;
    font-style: italic !important;
    opacity: 1 !important;
}

/* ── Textarea ── */
#wpforms-3771 textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* ── Botón Enviar ── */
#wpforms-3771 .wpforms-submit-container {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

#wpforms-3771 .wpforms-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 38px !important;
    background: #0D2B55 !important;
    color: #ffffff !important;
    font-family: 'Fira Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background .28s ease, transform .22s ease, box-shadow .28s ease !important;
    box-shadow: 0 4px 16px rgba(13, 43, 85, .22) !important;
    width: auto !important;
    min-width: 140px !important;
    line-height: 1 !important;
}

#wpforms-3771 .wpforms-submit:hover {
    background: #1A56A8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(26, 86, 168, .28) !important;
}

#wpforms-3771 .wpforms-submit:active {
    transform: translateY(0) !important;
}

/* ── Errores de validación ── */
#wpforms-3771 label.wpforms-error {
    display: block !important;
    font-size: 11.5px !important;
    color: #c0392b !important;
    margin: 5px 0 0 0 !important;
    font-weight: 500 !important;
    float: none !important;
}

#wpforms-3771 input.wpforms-error,
#wpforms-3771 textarea.wpforms-error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .1) !important;
}

/* ── Campos honeypot anti-spam: ocultar ──
   field_1 = honeypot (aria-hidden, tabindex=-1, label falsa)
   field_5 = honeypot (WPForms le pone inline position:absolute, pero reforzamos)
   field_6 = campo REAL "Nombre" — NO ocultar
   ── */
#wpforms-3771-field_1-container,
#wpforms-3771-field_5-container {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Páginas concretas */

.entry-header.ast-header-without-markup {
    display: none;
}

/* ==========================================================================
   TARJETA SERVICIO INDIVIDUAL (Herencias, Divorcios, etc.) - DISEÑO EDITORIAL
   Clase principal: .dt-service-card
   ========================================================================== */
.dt-service-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px -5px rgba(13, 43, 85, 0.05) !important;
    border: 1px solid rgba(13, 43, 85, 0.03) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.dt-service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -12px rgba(13, 43, 85, 0.15) !important;
}

/* Imagen de cabecera con Overlay oscuro */
.dt-service-card__media {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 280px !important;
    /* Más alta para dar presencia editorial */
    position: relative !important;
    background: #0D2B55 !important;
    overflow: hidden !important;
}

.dt-service-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease !important;
    display: block !important;
}

.dt-service-card:hover .dt-service-card__media img {
    transform: scale(1.08) !important;
}

/* El degradado oscuro sobre la imagen para que el texto blanco sea super legible */
.dt-service-card__media::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom,
            rgba(13, 43, 85, 0) 0%,
            rgba(13, 43, 85, 0.9) 100%) !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}

.dt-service-card:hover .dt-service-card__media::after {
    opacity: 0.95 !important;
    background: linear-gradient(to bottom,
            rgba(13, 43, 85, 0.2) 0%,
            rgba(13, 43, 85, 0.95) 100%) !important;
}

/* Contenido Principal */
.dt-service-card__content {
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: #ffffff !important;
    position: relative !important;
    /* Contexto para el título absoluto */
}

/* Título reposicionado (Flotando sobre la imagen mágicamente) */
.dt-service-card__title {
    position: absolute !important;
    bottom: 100% !important;
    /* Lo saca del card content y lo sube sobre la imagen */
    left: 0 !important;
    width: 100% !important;
    padding: 0 30px 25px !important;
    /* Espaciado dentro de la imagen */
    font-size: clamp(22px, 2.5vw, 26px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    z-index: 2 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
}

/* Subrayado decorativo claro bajo el título */
.dt-service-card__title::after {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    background: #7BAFD6 !important;
    margin-top: 15px !important;
    border-radius: 2px !important;
    transition: width 0.4s ease !important;
}

.dt-service-card:hover .dt-service-card__title::after {
    width: 80px !important;
}

/* Como el título ya no ocupa espacio interno, al extracto le damos un margen extra */
.dt-service-card__excerpt {
    font-size: 15px !important;
    color: #4B6280 !important;
    line-height: 1.65 !important;
    margin: 15px 0 30px 0 !important;
    font-weight: 400 !important;
}

.dt-service-card__excerpt p {
    margin: 0 0 10px 0 !important;
}

.dt-service-card__excerpt p:last-child {
    margin: 0 !important;
}

/* Acordeón (details/summary nativo) */
.dt-service-card__toggle {
    margin-top: auto !important;
    border-top: 1px solid rgba(13, 43, 85, 0.08) !important;
    padding-top: 20px !important;
}

.dt-service-card__toggle-title {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1A56A8 !important;
    cursor: pointer !important;
    list-style: none !important;
    transition: color 0.3s ease !important;
    padding: 4px 0 !important;
    user-select: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
}

.dt-service-card__toggle-title:hover {
    color: #0D2B55 !important;
}

.dt-service-card__toggle-title::-webkit-details-marker {
    display: none !important;
}

.dt-service-card__toggle-title::before {
    content: '+' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(26, 86, 168, 0.08) !important;
    border-radius: 50% !important;
    /* Círculo en vez de cuadrado, más elegante */
    margin-right: 12px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    color: #1A56A8 !important;
    transition: all 0.3s ease !important;
}

.dt-service-card__toggle[open] .dt-service-card__toggle-title::before {
    content: '-' !important;
    background: #1A56A8 !important;
    color: #ffffff !important;
    transform: rotate(180deg) !important;
}

.dt-service-card__toggle-content {
    margin-top: 20px !important;
    padding: 20px !important;
    background: #F8FAFD !important;
    /* Gris-azulado más limpio */
    border-left: 3px solid #1A56A8 !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 14px !important;
    color: #4B6280 !important;
    line-height: 1.65 !important;
    animation: dtAccordionFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    transform-origin: top !important;
}

.dt-service-card__toggle-content p {
    margin: 0 0 10px 0 !important;
}

.dt-service-card__toggle-content p:last-child {
    margin: 0 !important;
}

@keyframes dtAccordionFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   SECCIÓN JUMBO / HERO (Cabecera Principal Impactante)
   Clase principal: .dt-jumbo
   ========================================================================== */
.dt-jumbo {
    position: relative !important;
    width: 100% !important;
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #0D2B55 !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    /* Efecto Parallax suave en desktop */
    overflow: hidden !important;
    padding: 80px 20px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
}

/* Capa de oscurecimiento (Overlay) para legibilidad */
.dt-jumbo::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
            rgba(13, 43, 85, 0.90) 0%,
            rgba(13, 43, 85, 0.40) 100%) !important;
    z-index: 1 !important;
}

/* Contenido Principal */
.dt-jumbo__container {
    position: relative !important;
    z-index: 2 !important;
    max-width: 900px !important;
    width: 100% !important;
    text-align: center !important;
    animation: dtJumboFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.dt-jumbo__eyebrow {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    color: #7BAFD6 !important;
    margin-bottom: 20px !important;
}

.dt-jumbo__title {
    font-size: clamp(32px, 6vw, 64px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 0 25px 0 !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.dt-jumbo__subtitle {
    font-size: clamp(16px, 2vw, 22px) !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 700px !important;
    margin: 0 auto 40px auto !important;
    font-weight: 400 !important;
}

/* Botones de acción */
.dt-jumbo__actions {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.dt-button-primary {
    display: inline-block !important;
    background: #1A56A8 !important;
    color: #ffffff !important;
    padding: 16px 36px !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.dt-button-primary:hover {
    background: #ffffff !important;
    color: #1A56A8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

.dt-button-outline {
    display: inline-block !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 16px 36px !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    border: 2px solid #ffffff !important;
}

.dt-button-outline:hover {
    background: #ffffff !important;
    color: #0D2B55 !important;
}

/* Animación de entrada */
@keyframes dtJumboFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustes Mobile */
@media (max-width: 768px) {
    .dt-jumbo {
        min-height: 60vh !important;
        background-attachment: scroll !important;
        /* Desactiva parallax en móvil */
        padding: 60px 20px !important;
    }

    .dt-jumbo__actions {
        flex-direction: column !important;
    }

    .dt-button-primary,
    .dt-button-outline {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   REJILLA DE ENTRADAS (Posts) - DISEÑO CUADRADO Y PROFESIONAL
   Uso: .hfe-posts-grid, .hfe-post-card
   ========================================================================== */
.hfe-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.hfe-post-card {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    /* Cuadrado perfecto */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-radius: 12px !important;
    background: #0D2B55 !important;
    /* Fondo corporativo si no hay imagen */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.hfe-post-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(13, 43, 85, 0.15) !important;
}

/* Imagen destacada como fondo completo */
.hfe-post-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    margin: 0 !important;
}

.hfe-post-image a,
.hfe-post-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

.hfe-post-card:hover .hfe-post-image img {
    transform: scale(1.05) !important;
}

/* Overlay para legibilidad del texto blanco */
.hfe-post-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(13, 43, 85, 0.95) 0%, rgba(13, 43, 85, 0.45) 100%) !important;
    z-index: 2 !important;
    transition: background 0.4s ease !important;
}

.hfe-post-card:hover .hfe-post-image::after {
    background: linear-gradient(to top, rgba(26, 86, 168, 0.95) 0%, rgba(13, 43, 85, 0.6) 100%) !important;
}

/* Contenido del Post */
.hfe-post-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 32px !important;
    color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.hfe-post-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.2 !important;
}

.hfe-post-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.hfe-post-title a:hover {
    color: #7BAFD6 !important;
}

.hfe-post-meta {
    font-size: 11px !important;
    color: #7BAFD6 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 700 !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.hfe-post-excerpt {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 24px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    /* Limitar a 2 líneas para mantener clean look */
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.hfe-read-more {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
}

.hfe-read-more:hover {
    color: #7BAFD6 !important;
}

.hfe-read-more:hover::after {
    transform: translateX(5px) !important;
}

/* Si no hay imagen, aseguramos que el fondo del post content tenga presencia */
.hfe-post-card:not(:has(.hfe-post-image)) .hfe-post-content {
    background: #0D2B55 !important;
    height: 100% !important;
    justify-content: center !important;
}

/* Ajustes Responsive */
@media (max-width: 600px) {
    .hfe-posts-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   FORZADO QUIRÚRGICO DE 4 COLUMNAS (CONTENEDOR d2ca40b)
   ────────────────────────────────────────────────────────────────────────── */

/* Forzamos la rejilla de 4 columnas en el interior del contenedor específico */
div[data-id="d2ca40b"] > .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* Aseguramos que los widgets de Elementor no intenten forzar su propio ancho */
div[data-id="d2ca40b"] .elementor-widget-html {
    flex: 0 1 calc(25% - 20px) !important;
    min-width: 250px !important;
    max-width: 100% !important;
}



/* Optimización editorial para tarjetas en este bloque estrecho */
div[data-id="d2ca40b"] .dt-service-card__title {
    font-size: 18px !important; 
    padding-bottom: 20px !important;
}

div[data-id="d2ca40b"] .dt-service-card__media {
    height: 220px !important; 
}

/* Responsivo: 2 columnas en tablets y 1 en móviles */
@media (max-width: 1024px) {
    div[data-id="d2ca40b"] > .e-con-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    div[data-id="d2ca40b"] > .e-con-inner {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   VARIACIONES DE REJILLA (GRIDS)
   ========================================================================== */

/* Variación: 4 Columnas en escritorio */
.dt-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1320px !important;
    /* Un poco más ancho para albergar 4 columnas cómodas */
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .dt-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .dt-grid-4 {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   SECCIÓN ESPECIAL: VIOLENCIA DE GÉNERO (dt-vg-section)
   ========================================================================== */
.dt-vg-section {
    padding: 100px 0 !important;
    background: #f8fafc !important; /* Gris ultra-claro para transmitir paz */
}

.dt-vg-container {
    display: flex !important;
    align-items: center !important;
    gap: 80px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.dt-vg-content {
    flex: 1 !important;
}

.dt-vg-title {
    font-size: clamp(32px, 4vw, 42px) !important;
    color: #0D2B55 !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

.dt-vg-lead {
    font-size: 18px !important;
    color: #1A56A8 !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

.dt-vg-body p {
    font-size: 16px !important;
    color: #4B6280 !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}

.dt-vg-btn {
    display: inline-block !important;
    margin-top: 20px !important;
    padding: 16px 32px !important;
    background: #0D2B55 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.dt-vg-btn:hover {
    background: #1A56A8 !important;
    transform: translateY(-3px) !important;
}

/* Imagen con estilo de "Marco Editorial" */
.dt-vg-media {
    flex: 0 0 45% !important;
}

.dt-vg-image-wrapper {
    position: relative !important;
    padding: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 60px rgba(13, 43, 85, 0.1) !important;
}

.dt-vg-image-wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    width: 100px !important;
    height: 100px !important;
    border-top: 4px solid #c39a5c !important; /* Toque dorado corporativo */
    border-right: 4px solid #c39a5c !important;
}

.dt-vg-image-wrapper img {
    width: 100% !important;
    display: block !important;
}

@media (max-width: 980px) {
    .dt-vg-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 50px !important;
    }
    .dt-vg-media {
        width: 80% !important;
    }
}