/* =========================================
   1. IMPORTACIÓN DE FUENTES Y VARIABLES
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    --color-primary: #00DA73;
    --color-dark: #00051C;  
    --color-light: #EDEDED;   
}
/* =========================================
   TIPOGRAFÍA GLOBAL (FORZADA CON !IMPORTANT)
========================================= */

/* Título Principal (H1) - Ej: "Asesoría Fiscal y Contable" */
h1, .h1 {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


h2.custom-title, .custom-title {
    font-size: 3rem !important;
    line-height: 1.3 !important;
    font-weight: normal; /* Reseteamos el peso aquí */
}
/* En tu CSS de Joomla */
.titulo-gigante {
    font-size: 3rem !important; /* El !important asegura que Bootstrap no lo aplaste */
}
/* La parte "Segura/Gruesa" */
.texto-grueso {
    font-weight: 700 !important; /* También puedes probar con 800 si lo quieres más bold */
}

/* La parte "Fina/Elegante" */
.texto-fino {
    font-weight: 400 !important; /* Esto es lo que hace que la letra se vea delgadita */
}

/* Subtítulos destacados (H3) - Ej: "Nuestros servicios comprenden..." */
h3, .h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

/* Títulos de tarjetas o bloques pequeños (H4) */
h4, .h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Títulos menores (H5) */
h5, .h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* Subtítulos pequeños o etiquetas (H6) - Ej: "SOBRE NOSOTROS" */
h6, .h6 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* Párrafos generales (p) */
p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #00051c !important;
}

/* Párrafos destacados (Clase .lead) */
.lead {
    font-size: 1rem !important;
    font-weight: 400 !important;
}
.tarjeta-equipo .cargo-verde {
    color: #000000 !important;
}
/* =========================================
   TAMAÑO FUENTES: BOTONES Y ENLACES
========================================= */

/* 1. Botones (Clases de Bootstrap y etiquetas estándar) */
.btn, 
button, 
input[type="submit"], 
input[type="button"], 
input[type="reset"] {
    font-size: 1rem !important;
}

/* 2. Enlaces generales */
a {
    font-size: 1rem !important;
}

/* 3. EXCEPCIÓN DE SEGURIDAD */
/* Esto evita que si pones un enlace en un Título Grande (H1, H2...), se vuelva pequeño.
   Le dice al navegador: "Si el enlace está dentro de un título, usa el tamaño del título". */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
    font-size: inherit !important; 
}
/* =========================================
   AJUSTE OBLIGATORIO PARA MÓVILES
   (Reducimos los títulos gigantes en pantallas pequeñas)
========================================= */
@media (max-width: 768px) {
    h1, .h1 { font-size: 2.5rem !important; } /* Baja a 40px en móvil */
    h2, .h2 { font-size: 2rem !important; }   /* Baja a 32px en móvil */
    h3, .h3 { font-size: 1.5rem !important; } /* Baja a 24px en móvil */
}
.text-primary {
    color: var(--color-primary) !important;
}
.bg-primary {
    background-color: var(--color-primary) !important;
}
.border-primary {
    border-color: var(--color-primary) !important;
}

body {
    font-family: 'Red Hat Display', sans-serif !important;
    overflow-x: hidden;
}

.mod-custom.custom {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
main,
.blog-featured {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.moduletable {
    margin: 0 !important;
    padding: 0 !important;
}
.container-footer.footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.mod-breadcrumbs__wrapper,
.mod-breadcrumbs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.breadcrumb {
    background-color: #ffffff08;
}
.caja-servicio {
    background-color: #ededed !important;
}
/* Color para el contenedor, el botón y el cuerpo del acordeón */
.accordion-item, 
.accordion-button, 
.accordion-body {
    background-color: #ededed !important;
}

/* Opcional: Quitar el azul que pone Bootstrap al hacer clic en el botón */
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

/* Opcional: Mantener el color gris cuando el acordeón está abierto */
.accordion-button:not(.collapsed) {
    background-color: #ededed !important;
    color: #000; /* Color del texto cuando está abierto */
}
/* =========================================
   1. ESTRUCTURA Y FONDO DE LA CABECERA
========================================= */
.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--color-dark) !important; 
    background-image: none !important;
    width: 100%;
}
.jaula-cabecera {
    max-width: 1320px;           
    margin: 0 auto;               
    padding: 20px 20px;           
    width: 100%;
    position: relative;           
}
/* =========================================
   2. REDIMENSIONAR EL LOGO DEL MENÚ
========================================= */
.navbar-brand .brand-logo img {
    max-width: 66% !important;  
    height: auto  !important;
}

/* =========================================
   3. ALINEACIÓN DEL MENÚ
========================================= */
.container-nav {
    display: flex !important;
    justify-content: center !important; 
    width: 100%;
}

.container-nav .navbar {
    padding: 0;
}
.mod-menu {
    display: flex;
    align-items: center;
    gap: 30px; 
    margin: 0;
}

/* =========================================
   4. ESTILOS DE TEXTO (INICIO, QUIÉNES SOMOS...)
========================================= */
.metismenu-item > a {
    color: white !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.metismenu-item > a:hover,
.metismenu-item.active > a {
    color: var(--color-primary) !important;
}
.metismenu-item > a::after,
.metismenu-item > a::before {
    display: none !important;
    content: none !important;
}

/* =========================================
   5. ESTILOS DEL BOTÓN "CONTACTO"
========================================= */
.btn-menu-outline {
    border: 2px solid white !important;
    border-radius: 30px !important;
    padding: 8px 25px !important;
    color: white !important;
    margin-left: 10px; 
    transition: all 0.3s ease;
}
.btn-menu-outline:hover,
.metismenu-item.active > .btn-menu-outline {
    background-color: transparent !important; 
    border-color: var(--color-primary) !important; 
    color: var(--color-primary) !important; 
}
/* =========================================
   6. MENÚ DESPLEGABLE (LA SOLUCIÓN A LOS CHOQUES)
========================================= */
.metismenu-item > ul,
.dropdown-menu {
    background-color: #00e676 !important; 
    border: none !important;              
    border-radius: 8px !important;        
    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important; 
    padding: 0 !important;                
    margin-top: 15px !important; 
    width: max-content !important; 
    min-width: 250px !important;
    overflow: hidden !important; 
}
.metismenu-item > ul > li > a,
.dropdown-item {
    display: block !important;
    width: 100% !important;
    color: #000000 !important;            
    font-weight: 700 !important;          
    font-size: 0.95rem !important;
    padding: 15px !important; 
    text-align: left !important;   
    background-color: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important; 
    transition: background-color 0.2s ease !important; 
}

/* Efecto al pasar el ratón (Hover) -> Se vuelve BLANCO */
.metismenu-item > ul > li > a:hover,
.dropdown-item:hover,
.metismenu-item > ul > li > a.active,
.dropdown-item.active {
    background-color: #ffffff !important; 
    color: #000000 !important;            
}
/* =========================================
   6. OTROS BOTONES (SECCIÓN CONÓCENOS)
========================================= */

/* Relleno verde al pasar el ratón en los botones secundarios de la web */
.btn-outline-primary:hover,
.btn-outline-custom:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-dark) !important;
}

/* =========================================
   7. BOTÓN DE CONTACTO A LA DERECHA (PC)
========================================= */

@media (min-width: 992px) {
    .navbar, .navbar-collapse, .mod-menu {
        width: 100% !important;
    }
    .mod-menu {
        width: 100% !important;
        justify-content: flex-end !important; 
        padding-right: 200px !important;      
    }
   .mod-menu > .metismenu-item:last-child {
        position: absolute !important;
        right: 0 !important; 
        top: 50%;
        transform: translateY(-50%); 
        padding: 0 !important;
    }
}
/* =========================================
   NEUTRALIZAR PADDINGS POR DEFECTO DE JOOMLA
========================================= */
.metismenu.mod-menu .metismenu-item {
    padding: 0 !important; 
}
.mod-list li {
    padding: 0 !important;
}
/* =========================================
   CAMBIAR EL ICONO DESPLEGABLE 
========================================= */
.metismenu.mod-menu .mm-toggler::after {
    border: none !important;
    border-top: 0 none transparent !important; 
    border-bottom: 0 none transparent !important;
    border-left: 0 none transparent !important;
    border-right: 0 none transparent !important;
    background: none !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    font-family: "bootstrap-icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    content: "\f282" !important; /* El código del icono Chevron */
    color: var(--color-lightr-primary) !important; 
    font-size: 1rem !important;
    margin-left: 3px !important;
    transition: transform 0.3s ease !important;
}
.metismenu-item.mm-active .mm-toggler::after {
    transform: rotate(180deg) !important; 
}
.metismenu-item.mm-active .mm-toggler::after {
    transform: rotate(180deg) !important; 
}
.metismenu.mod-menu .mm-toggler {
    color: var(--color-darkr-primary) !important; 
   
}
/* =========================================
   DESPLEGAR AL PASAR EL RATÓN + PUENTE INVISIBLE
========================================= */
@media (min-width: 992px) {
    .metismenu-item.parent:hover > ul {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }
    .metismenu-item.parent > ul::before {
        content: "" !important;
        position: absolute !important;
        top: -15px !important; 
        left: 0 !important;
        width: 100% !important;
        height: 15px !important; 
        background-color: transparent !important; 
    }
}
/* =========================================
   DESPLEGAR AL PASAR EL RATÓN + PUENTE INVISIBLE
========================================= */

@media (min-width: 992px) {
    .metismenu-item.parent:hover > ul {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }
    .metismenu-item.parent > ul::before {
        content: "" !important;
        position: absolute !important;
        top: -15px !important; 
        left: 0 !important;
        width: 100% !important;
        height: 15px !important; 
        background-color: transparent !important;
    }
}
/* =========================================
   ELIMINAR LA "ZONA MUERTA" DEL DESPLEGABLE
========================================= */

.metismenu-item.parent > ul {
    margin-top: 0 !important; 
    border-top: 15px solid transparent !important; 
    background-clip: padding-box !important; 
}

@media (min-width: 992px) {
    .metismenu-item.parent:hover > ul {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
/* =========================================
   DEJAR EL ICONO ESTÁTICO (SIN GIRO)
========================================= */

.metismenu.mod-menu .mm-toggler::after,
.metismenu-item.mm-active .mm-toggler::after,
.metismenu-item.parent:hover .mm-toggler::after {
    transform: none !important;  
    transition: none !important; 
}
/* =========================================
   CORREGIR COLOR DE PÁGINA ACTIVA EN SUBMENÚ
========================================= */
.metismenu-item > ul > li.active > a,
.metismenu-item > ul > li.current > a {
    background-color: #ffffff !important; 
    color: #000000 !important;            
}
.metismenu-item.active .mm-toggler,
.metismenu-item.current .mm-toggler {
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
}
/* =========================================
   ELIMINAR LÍNEA INFERIOR DEL ICONO DE SERVICIOS
========================================= */

.metismenu-item.active > .mm-toggler,
.metismenu-item.current > .mm-toggler,
.metismenu-item.parent > .mm-toggler {
    box-shadow: none !important;       
    border: none !important;          
    border-bottom: none !important;    
    text-decoration: none !important;  
    outline: none !important;          
    background-color: transparent !important;
}
/* =========================================
   ELIMINAR LÍNEAS INFERIORES (TEXTOS Y FLECHAS)
========================================= */

.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before,
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before {
    content: none !important;          
    display: none !important;          
    background: transparent !important; 
}
/* =========================================
   SINCRONIZAR COLOR: TEXTO + FLECHA JUNTOS
========================================= */
.metismenu-item.parent:hover > a,
.metismenu-item.parent:hover > .mm-toggler::after {
    color: var(--color-primary) !important;
    transition: color 0.3s ease !important;
}
.metismenu-item.parent.active > a,
.metismenu-item.parent.mm-active > a,
.metismenu-item.parent.current > a,
.metismenu-item.parent.active > .mm-toggler::after,
.metismenu-item.parent.mm-active > .mm-toggler::after,
.metismenu-item.parent.current > .mm-toggler::after {
    color: var(--color-primary) !important; 
}

/* Estado normal del botón */
.btn-verde-hover {
    background-color: #00DA73;
    color: #ffffff !important; /* Mantenemos el texto blanco inicialmente */
    border-radius: 30px;
    font-size: 1.1rem;
    border: 2px solid #00DA73; /* IMPORTANTE: Le ponemos el borde ya, pero pintado del mismo verde que el fondo */
    transition: all 0.3s ease; /* Hacemos que la transición sea suave para todos los cambios */
    text-decoration: none;
}

/* Estado al pasar el ratón (:hover) o al hacer clic/tocar (:active) */
.btn-verde-hover:hover,
.btn-verde-hover:active {
    background-color: transparent; /* Quitamos el color de fondo */
    color: #00DA73 !important;     /* Pintamos las letras de verde */
    border: 2px solid #00DA73;     /* El borde verde ahora se hace visible */
    transform: scale(1.05);        /* Mantenemos el pequeño efecto de zoom que tenías pensado */
}


/* =========================================
   3. BOTONES PERSONALIZADOS
========================================= */
.btn-primary-custom {
    background-color: var(--color-primary);
    color: white !important;
    border: none;
    border-radius: 30px;
    padding: 12px 40px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #00b55f;
    transform: translateY(-2px);
}

.btn-outline-custom {
    background-color: transparent;
    color: white !important;
    border: 1px solid white;
    border-radius: 30px;
    padding: 12px 40px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: white;
    color: var(--color-dark) !important;
}

.btn-info-custom {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: white !important;
    border-radius: 28.5px;
    padding: 15px 50px;
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.btn-info-custom:hover {
    background-color: #00b55f;
    border-color: #00b55f;
}

/* =========================================
   SUPERPOSICIÓN DE TEXTO SOBRE CARRUSEL (CORREGIDO)
========================================= */

.container-banner {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}
.hero-overlay-static {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; 
    z-index: 10;
    pointer-events: none; 
    display: flex !important;
    align-items: center !important;      
    justify-content: center !important;  
    padding-top: 310px !important; 
    box-sizing: border-box !important; 
}
.hero-overlay-static .container {
    pointer-events: auto;
}
.container-banner {
    position: relative !important;
    width: 100% !important;
    display: block !important; 
    max-height: 650px !important; 
    overflow: hidden !important;  
}
/* =========================================
   4. SECCIÓN HERO (INICIO)
========================================= */
.hero-section {
    background-color: var(--color-dark);
    min-height: 100vh;
    position: relative;
    color: white;
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 5, 28, 0.9), rgba(0, 5, 28, 0.7));
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-top: 100px;
}

/* =========================================
   TARJETAS CIRCULARES (QUIÉNES SOMOS)
========================================= */

.circle-card {
    background-color: var(--color-light);
    border-radius: 50%;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circle-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 218, 115, 0.15) !important;
}

.icon-top {
    font-size: 3.5rem;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.circle-card .card-title {
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.circle-card p {
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .circle-card {
        padding: 43px;
        max-width: 338px;
    }
    .icon-top {
        font-size: 2.5rem;
    }
    .circle-card p {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .circle-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #00051c !important;
    }
}
/* =========================================
   6. SERVICIOS Y SEPARADORES (DIVIDERS)
========================================= */
.services-section {
    background-color: var(--color-dark);
    color: white;
    padding: 80px 0;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden; 
}
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.section-subtitle {
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 600;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px 0;
}

.divider-line-left {
    height: 2px;
    width: 370px;
    background: linear-gradient(to right, rgba(0, 218, 115, 0), #00DA73);
}

.divider-line-right {
    height: 2px;
    width: 370px;
    background: linear-gradient(to left, rgba(0, 218, 115, 0), #00DA73);
}

.divider-icon {
    width: 44px;
    height: 44px;
    background-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 20px;
}
/* =========================================
   EFECTO DE IMAGEN EN SERVICIOS (Herencias)
========================================= */

.services-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, var(--color-dark) 35%, rgba(0, 5, 28, 0.1) 100%), url('/images/herencias.jpg');
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

@media (max-width: 991px) {
    .services-bg-image {
        background-image: linear-gradient(to right, var(--color-dark) 10%, rgba(0, 5, 28, 0.85) 100%), url('/images/herencias.jpg');
    }
}

/* =========================================
   7. GALERÍA DE IMÁGENES
========================================= */
.gallery-section {
    background-color: var(--color-light); 
    padding: 80px 0;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden; 
}

.service-grid-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none !important; 
}
.sg-bg {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.sg-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 5, 28, 0.7);
    transition: background-color 0.4s ease;
}

.sg-content {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 2;
    transition: transform 0.4s ease; 
}

.sg-icon {
    font-size: 3.5rem;
    color: var(--color-primary);
    line-height: 1;
    display: block;
    margin-bottom: 15px;
}

.sg-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.sg-hover-btn {
    position: absolute;
    top: 75%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0; 
    transition: all 0.4s ease;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 6px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* =========================================
   EFECTOS AL PASAR EL RATÓN (HOVER)
========================================= */

.service-grid-card:hover .sg-bg {
    transform: scale(1.1);
}

.service-grid-card:hover .sg-overlay {
    background-color: rgba(0, 5, 28, 0.85);
}

.service-grid-card:hover .sg-content {
    transform: translate(-50%, -75%);
}

/* 4. El botón "Ver más" aparece desde abajo */
.service-grid-card:hover .sg-hover-btn {
    opacity: 1;
    top: 70%;
}

/* 5. Efecto al pasar el ratón justo por el botón "Ver más" */
.sg-hover-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

/* =========================================
   8. SECCIÓN CONTACTO (Formulario y Fondo)
========================================= */

/* --- 1. Contenedor Principal y Fondo --- */
.contact-section {
    background-color: var(--color-dark);
    color: white;
    padding: 80px 0;
    
    /* Magia para que el fondo ocupe el 100% de la pantalla */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden; 
}

.contact-bg-woman {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
    
    /* Degradado oscuro a la izquierda que se vuelve transparente a la derecha */
    background-image: linear-gradient(to right, var(--color-dark) 30%, rgba(0, 5, 28, 0.1) 100%), url('/images/contacto.png');
}

/* --- 2. Campos del Formulario --- */
.line-input {
    width: 100%;
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 0;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.line-input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    box-shadow: none;
}

.line-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* --- 3. Iconos y Textos (Columna Derecha) --- */
.contact-feature {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.check-icon {
    width: 33px;
    height: 33px;
    margin-right: 15px;
    color: var(--color-primary);
}

.feature-icon-green {
    width: 70px;
    height: 70px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
}

.tracking-wide {
    letter-spacing: 1px;
    line-height: 1.4;
}

/* --- 4. Adaptación para Móviles --- */
@media (max-width: 991px) {
    .contact-bg-woman {
        /* Oscurecemos más la foto para que el texto del formulario sea legible */
        background-image: linear-gradient(to right, var(--color-dark) 10%, rgba(0, 5, 28, 0.85) 100%), url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1200');
        
        /* Limpiamos la regla antigua por si algún navegador se lía */
        mask-image: none;
        -webkit-mask-image: none;
    }
}
/* =========================================
   9. SECCIÓN PROCESOS
========================================= */
.process-section {
    background-color: var(--color-light);
    padding: 80px 0;
}

.process-circle {
    width: 277px;
    height: 277px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    color: white;
}

.process-number {
    font-size: 4rem;
    font-weight: 700;
}
/* =========================================
   DISEÑO DE LA LÍNEA DEL TIEMPO (TIMELINE)
========================================= */

/* 1. Magia para que el fondo gris ocupe toda la pantalla */
.process-timeline-section {
    background-color: #EDEDED!important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden; 
}

/* 2. Contenedor centrado de la línea */
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

/* 3. La línea gris vertical que cruza por el centro */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #d1d5db; /* Gris de la línea */
    transform: translateX(-50%);
    z-index: 1;
}

/* 4. Cada fila (Paso) */
.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -20px; /* Hace que los círculos se "pisen" un poco como en el diseño */
    position: relative;
    z-index: 2;
}

/* 5. Los círculos verdes gigantes */
.timeline-circle {
    width: 220px;
    height: 220px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 218, 115, 0.2); /* Sombra verde sutil */
    flex-shrink: 0;
}

.timeline-circle .num {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
}

.timeline-circle .desc {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 5px;
    line-height: 1.2;
}

/* 6. Las tarjetas blancas */
.timeline-card-wrapper {
    width: 50%;
}

.left-card {
    padding-left: 20px; /* Separación de la tarjeta con el centro */
}

.right-card {
    padding-right: 20px;
}

.timeline-card-wrapper .card {
    border-radius: 20px !important;
}

/* =========================================
   ADAPTACIÓN PARA MÓVILES (Responsivo)
========================================= */
@media (max-width: 768px) {
    /* Movemos la línea central a la izquierda */
    .timeline-container::before {
        left: 40px;
    }
    
    /* Apilamos todo en una sola columna */
    .timeline-row, .timeline-row.flex-row-reverse {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 90px; /* Dejamos espacio para el círculo a la izquierda */
        margin-bottom: 40px;
    }
    
    /* Hacemos los círculos más pequeños */
    .timeline-circle {
        width: 80px;
        height: 80px;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .timeline-circle .num {
        font-size: 2rem;
    }
    
    .timeline-circle .desc {
        display: none; /* Ocultamos el texto del círculo en móvil por falta de espacio */
    }
    
    /* Ajustamos las tarjetas */
    .timeline-card-wrapper {
        width: 100%;
    }
    
    .left-card, .right-card {
        padding: 0 !important;
    }
}
.tarjeta-cuadrada {
    aspect-ratio: 1 / 1 !important; /* El truco: Fuerza a que el alto sea idéntico al ancho */
    max-width: 250px;               /* Límite para que no se hagan gigantes en ordenadores */
    margin: 0 auto;                 /* Las centra automáticamente si sobra espacio */
    
    /* Centramos el icono y el texto perfectamente en el medio del cuadrado */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* =========================================
   1. ESTRUCTURA DE FILAS (EVITAR CHOQUES)
========================================= */
.timeline-row {
    display: flex !important;
    align-items: center !important;  /* Clave: Centra el círculo y el cuadrado para que estén en paralelo */
    margin-bottom: 55px !important; /* Airbag gigante: Separa las filas para que los cuadrados no se pisen */
}

.timeline-row:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   2. TARJETAS CUADRADAS PERFECTAS
========================================= */
.tarjeta-cuadrada {
    aspect-ratio: 1 / 1 !important; 
    width: 100% !important;
    max-width: 220px !important;    /* Tamaño exacto para igualar la proporción de tu boceto */
    margin: 0 auto;                 
    
    /* Centrado interno del texto y el icono */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px !important;
}

/* =========================================
   3. ESTILO DE LOS ICONOS Y TEXTOS
========================================= */
/* Forzamos el color verde neón de tu diseño para los iconos */
.tarjeta-cuadrada i.bi {
    color: #00e676 !important; 
    font-size: 2.5rem !important; /* Hacemos el icono un poco más grande */
    margin-bottom: 15px !important;
}

/* Ajustamos el texto para que quede igual de fino que en el boceto */
.tarjeta-cuadrada p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
/* =========================================
   ALINEACIÓN VERTICAL MATEMÁTICA (PC)
========================================= */
@media (min-width: 768px) {
    .timeline-row {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Obligamos a que las dos cajas midan exactamente la mitad de la pantalla y centren lo que tienen dentro */
    .timeline-circle-wrapper, 
    .timeline-card-wrapper {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
    }

    /* Limpiamos cualquier margen antiguo que estuviera desviando al círculo de su centro */
    .timeline-circle {
        margin: 0 !important;
    }
}

/* =========================================
   AJUSTE FINAL DE LA TARJETA CUADRADA
========================================= */
.tarjeta-cuadrada {
    aspect-ratio: 1 / 1 !important; 
    width: 100% !important;
    max-width: 220px !important;    
    margin: 0 !important; /* Quitamos el margin auto porque ya lo centra el wrapper superior */
    
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px !important;
}
/* =========================================
   10. TESTIMONIOS
========================================= */
.testimonials-section {
    padding-top: 0;
    padding-bottom: 80px;
}

.testimonial-card {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.stars {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
    text-align: center;
}
.testimonial-title {
    color: var(--color-dark);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 15px;
    text-align: center;
}

/* =========================================
   PÁGINA O SECCIÓN DE CONTACTO
========================================= */

/* Fondo oscuro a pantalla completa */
.contact-page-section {
    background-color: var(--color-light);
    
    /* Truco definitivo del ancho completo */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden;
}

/* Envoltorio de los iconos de contacto (Círculos) */
.contact-icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 218, 115, 0.1); /* Verde transparente */
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Tarjeta blanca del formulario */
.contact-form-card {
    border-radius: 15px;
    padding: 6rem 3rem!important;
    /* Borde superior neón */
}

/* Campos del formulario personalizados */
.custom-input {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Efecto al hacer clic en un campo (Foco) */
.custom-input:focus {
    background-color: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 218, 115, 0.25); /* Resplandor verde */
}
/* =========================================
   IMAGEN INTERACTIVA DE GOOGLE MAPS
========================================= */

.map-image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    max-width: 400px; /* Límite de ancho para que no sea gigante */
    border-radius: 8px;
}

.map-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease; /* Transición suave para el zoom */
}

/* Estado normal de la capa verde (invisible) */
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 230, 118, 0.9); /* Verde con un 10% de transparencia */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Totalmente invisible */
    transition: opacity 0.4s ease; /* Transición suave de aparición */
}

/* Efectos al pasar el ratón (Hover) */
.map-image-container:hover img {
    transform: scale(1.08); /* Zoom sutil a la foto del local */
}

.map-image-container:hover .map-overlay {
    opacity: 1; /* Hacemos visible la capa verde */
}
/* =========================================
   BANNER SUPERIOR DE CONTACTO
========================================= */

.contact-hero-banner {
    position: relative;
    width: 100%;
    height: 350px; /* La altura de la franja con la foto */
    background-size: cover;
    background-position: center;
    margin-top: -20px; /* Para que se pegue justo debajo de tu menú superior */
}

/* Cristal oscuro para que el texto resalte sobre la imagen */
.contact-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(4 5 39 / 50%); /* Oscurece la foto un 50% */
}

/* =========================================
   ÁREAS DE ESPECIALIZACIÓN (DESARROLLADAS)
========================================= */

/* Fondo gris completo */
.services-cards-section {
    background-color: var(--color-light);
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden;
}

/* Iconos de cabecera en las tarjetas */
.feature-icon {
    width: 65px;
    height: 65px;
    border-radius: 12px; /* Cuadrado con bordes redondeados */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

/* Tarjetas grandes con efecto elevación */
.service-detailed-card {
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid transparent;
}

.service-detailed-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important;
    border-top: 4px solid var(--color-primary); /* Se ilumina el borde superior al pasar el ratón */
}

/* Botón personalizado hueco (Outline) */
.btn-outline-custom {
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    background-color: transparent;
    padding: 10px 24px;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-outline-custom:hover {
    background-color: var(--color-primary);
    color: var(--color-dark);
}
.container-banner {
    margin:0 0 0rem !important;
    display: block
}


/* =========================================
   SECCIÓN: QUIÉNES SOMOS (ABOUT US)
========================================= */

/* Fondo blanco a pantalla completa */
.about-us-section {
    background-color: #ffffff;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden;
}

/* --- Decoración de la Imagen --- */
.about-image-wrapper {
    padding-right: 20px;
    padding-bottom: 20px;
}

.about-image-decoration {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 20px;
    background-color: var(--color-primary);
    border-radius: 1rem;
    z-index: 1;
    opacity: 0.15; /* Un verde muy sutil de fondo */
}

/* Tarjeta flotante de años de experiencia */
.experience-badge {
    bottom: -15px;
    left: -15px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- Tarjetas de Valores --- */
.value-card {
    border-radius: 15px;
    border-bottom: 4px solid var(--color-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important;
}

/* Círculo del icono en las tarjetas de valores */
.value-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 218, 115, 0.1);
    color: var(--color-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto: Al pasar el ratón por la tarjeta, el icono se vuelve verde sólido */
.value-card:hover .value-icon {
    background-color: var(--color-primary);
    color: white;
}

/* Ajustes para móviles */
@media (max-width: 991px) {
    .experience-badge {
        bottom: 10px;
        left: 10px;
    }
}

.margen-equipo {
    margin-bottom: 5rem !important;
}
/* =========================================
   11. PIE DE PÁGINA (FOOTER)
========================================= */
.footer {
    background-color: var(--color-dark);
    background-image: none !important; 
    color: white;
    padding: 60px 0 30px;
    
}

/* Enlaces del Footer (Gris claro que cambia a verde al pasar el ratón) */
.footer-links a,
.bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.footer-links a:hover,
.bottom-links a:hover {
    color: var(--color-primary);
}

/* Redes Sociales: Cuadrados verdes con iconos oscuros */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--color-primary);
    color: var(--color-dark) !important;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

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

/* Línea horizontal verde separadora */
.footer-divider {
    height: 1px;
    background-color: var(--color-primary);
    width: 100%;
    opacity: 0.4;
}

/* Adaptación de los enlaces inferiores para móviles */
@media (max-width: 991px) {
    .bottom-links {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}
.container-footer .grid-child {
    display: block !important; /* Quita el flexbox que lo aplasta */
    padding: 0 !important;     /* Quita los márgenes blancos */
    width: 100% !important;
}

/* Asegurar que el mapa rellene su contenedor */
.map-wrapper iframe {
    display: block;
    width: 100%;
    height: 220px;
}

.map-wrapper {
    line-height: 0; /* Evita un pequeño margen inferior que suelen dejar los iframes */
}
/* =========================================
  PAGINA ASEOSRIA FISCAL Y CONTABLE 
========================================= */

/* Damos una sombra más elegante y una transición suave */
.caja-servicio {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05) !important; /* Borde súper sutil */
}

/* Efecto al pasar el ratón: La caja "levita" un poco hacia arriba */
.caja-servicio:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}
 /* =========================================
   ESTILOS PARA LA SECCIÓN FINAL (CTA)
========================================= */

/* 1. Configuración del fondo */
.cta-final-section {
    background-size: cover;       /* La imagen cubre todo el espacio */
    background-position: center;  /* Se centra la parte más importante de la foto */
    background-attachment: fixed; /* Efecto parallax: el fondo se queda quieto al bajar */
}

/* 2. Diseño del botón "Verde Neón" */
.btn-verde-neon {
    background-color: #00e676 !important;
    border: 2px solid #00e676 !important;
    color: #000000 !important; /* Texto en negro para que se lea súper bien */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón (Hover): Se vuelve transparente con borde verde */
.btn-verde-neon:hover {
    background-color: transparent !important;
    color: #00e676 !important;
    box-shadow: none !important;
    transform: translateY(-3px); /* Pequeño efecto de elevación */
}

/* =========================================
   CLASE PARA FONDO DE ARTÍCULO DE LADO A LADO
========================================= */

.fondo-expandido {
    background-color: var(--color-light) !important; /* El color que elegiste antes */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    /* El padding es vital para dar aire arriba y abajo */
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/* =========================================
   FONDO EXPANDIDO (TÉCNICA DEL PROYECTOR)
========================================= */

/* 1. La caja principal: Solo sirve para dar espacio arriba/abajo y anclar el fondo */
.fondo-expandido {
    position: relative !important; /* Vital: le dice al fondo fantasma de dónde colgarse */
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1; /* Asegura que la caja esté por encima del fondo */
}
/* 2. El "Proyector": Una caja fantasma que pinta el color por detrás */
.fondo-expandido::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important; /* Ancho total del monitor */
    background-color: var(--color-light) !important; /* Tu color claro */ 
    z-index: -1 !important; 
}

/* =========================================
   2. ANCLAMOS LAS 4 CAJAS PRINCIPALES
========================================= */
#mod-custom128, 
#mod-custom129, 
#mod-custom130,
#mod-custom131 {
    position: relative !important;
    z-index: 1 !important; /* Mantiene tus textos por encima */
}

/* =========================================
   3. EL PROYECTOR GRIS (FISCAL, LABORAL, JURÍDICA, HERENCIAS)
========================================= */
#mod-custom128::before, 
#mod-custom129::before, 
#mod-custom130::before,
#mod-custom131::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important; 
    background-color: #ffffff  !important; 
    z-index: -1 !important; 
}

/* =========================================
   4. FONDO EXPANDIDO FOTOGRÁFICO (LLAMADA A LA ACCIÓN)
========================================= */
.cta-final-section {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important; 
}

.cta-final-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), var(--fondo-cta) !important;
    background-size: cover !important;       
    background-position: center !important;  
    background-attachment: fixed !important; 
    z-index: -1 !important; 
}

/* =========================================
   ESTILOS PARA LA PÁGINA "QUIÉNES SOMOS"
========================================= */

.tarjeta-equipo {
    background-color: #000; 
    transition: transform 0.3s ease;
}

.tarjeta-equipo img {
    transition: opacity 0.4s ease, filter 0.4s ease;
    filter: grayscale(100%); 
}
.info-equipo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    opacity: 0; 
    transition: opacity 0.4s ease;
}

.tarjeta-equipo:hover {
    transform: translateY(-5px); 
}

.tarjeta-equipo:hover img {
    filter: grayscale(0%); 
    opacity: 0.7; 
}

.tarjeta-equipo:hover .info-equipo {
    opacity: 1; 
}

.btn-contacto-quienes {
    background-color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.btn-contacto-quienes:hover {
    background-color: #00e676 !important;
    border-color: #00e676 !important;
    color: #000000 !important;
    transform: translateY(-3px);
}

/* =========================================
   FONDOS EXPANDIDOS (QUIÉNES SOMOS)
========================================= */

#proyector-oscuro,
#proyector-gris {
    position: relative !important;
    z-index: 1 !important;
}

#proyector-oscuro::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background-color: var(--color-dark) !important; 
    z-index: -1 !important;
}

#proyector-gris::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    
    background-color: var(--color-light) !important; 
    z-index: -1 !important;
}

#proyector-oscuro,
#proyector-oscuro-final {
    position: relative !important;
    z-index: 1 !important;
}

#proyector-oscuro::before,
#proyector-oscuro-final::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background-color: var(--color-light) !important; 
    z-index: -1 !important;
}

/* =========================================
           MENÚ MÓVIL  
========================================= */

@media (max-width: 991px) {
    .container-nav {
        justify-content: flex-end !important;
    }
    .container-header .navbar-toggler {
        border: none !important;
        color: #ffffff !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 5px 10px !important;
    }
    
    .container-header .navbar-collapse,
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 1050 !important;
        padding: 2rem !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        overflow-y: auto !important; 
    }

    .container-header .navbar-collapse.show,
    .navbar-collapse.show {
        transform: translateX(0) !important;
    }

    .mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding-bottom: 1.5rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 1.5rem !important;
        flex-shrink: 0 !important;
    }
    .btn-cerrar-menu {
        background: none !important;
        border: none !important;
        color: #00051C !important;
        cursor: pointer !important;
        padding: 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mod-menu {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .metismenu-item {
        width: 100% !important;
        text-align: left !important;
        margin: 15px 0 !important;
    }
    .metismenu-item > a {
        color: #00051C !important;
        font-weight: 500 !important;
        font-size: 1.1rem !important;
        text-transform: uppercase !important;
        padding-left: 0 !important;
        display: inline-block !important;
    }
    .metismenu-item.active > a {
        color: #00e676 !important;
    }
    .metismenu.mod-menu .metismenu-item.active > a,
    .metismenu.mod-menu .metismenu-item.active > button,
    .metismenu.mod-menu .metismenu-item > a:hover,
    .metismenu.mod-menu .metismenu-item > button:hover {
        text-decoration: none !important;
    }

    /* --- SUBMENÚ: ANTI-FLASH Y ESTILOS PC ANULADOS --- */
    
    .mm-collapse,
    .mm-collapse.mm-show,
    .mm-collapsing,
    .metismenu-item > ul,
    .dropdown-menu {
        position: static !important; 
        float: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        width: 100% !important;
        min-width: auto !important;
    }

    .mm-collapse .metismenu-item,
    .mm-collapsing .metismenu-item {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .mm-collapse .metismenu-item:last-child,
    .mm-collapsing .metismenu-item:last-child {
        border-bottom: none !important;
    }
    
    /* ¡EL FIX DE LA LETRA! Añadimos .mm-collapsing para que no engorde al cerrarse */
    .mm-collapse .metismenu-item > a,
    .mm-collapsing .metismenu-item > a {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        text-transform: none !important;
        padding: 12px 0 12px 25px !important;
        display: block !important;
        color: #333333 !important;
    }

    /* --- LA FLECHA: ALTURA FIJA PARA QUE NO SALTE --- */
    .metismenu-item.deeper.parent {
        position: relative !important;
    }
    .metismenu-item.deeper.parent > a {
        padding-right: 35px !important;
    }
    .metismenu.mod-menu .mm-toggler {
        color: #00051C !important;
        opacity: 1 !important;
        display: inline-block !important;
        background: transparent !important;
        position: absolute !important;
        right: 0 !important;
        top: -3px !important; 
        height: 30px !important; 
        width: 40px !important;
    }
    .metismenu.mod-menu .metismenu-item.active .mm-toggler {
        color: #00e676 !important;
    }
    
    /* --- BOTÓN CONTACTO --- */
    .metismenu.mod-menu > li:last-child {
        margin-top: 30px !important; 
        margin-bottom: 40px !important; 
        width: 100% !important;
    }
    .metismenu.mod-menu > li:last-child > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background-color: #00e676 !important;
        color: #000000 !important;
        border: 2px solid #00e676 !important;
        padding: 12px 20px !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .fondo-oscuro-menu {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(0, 5, 28, 0.6);
        backdrop-filter: blur(4px);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
    }
    .fondo-oscuro-menu.show {
        opacity: 1;
        visibility: visible;
    }
    
    .container-header {
        position: sticky !important; 
    }
      
    html.bloquear-scroll,
    body.bloquear-scroll {
        overflow: hidden !important;
        height: 100vh !important;
        overscroll-behavior: none !important;
        touch-action: none !important; 
    }
}
/* =========================================
   EFECTO DEGRADADO: SECCIÓN EXPERIENCIA
========================================= */
.seccion-experiencia-degradado {
    position: relative;
    background-image: url('/images/banners/equipo1.jpg');
    background-size: cover;          
    background-position: center right; 
    background-repeat: no-repeat;
  
}

.capa-filtro-fundido {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(237, 237, 237, 1) 0%, rgb(237 237 237 / 82%) 45%, rgb(237 237 237 / 0%) 100%) !important;
    padding: 11%;
}
@media (max-width: 991px) {
    .capa-filtro-fundido {
        background: linear-gradient(to right, rgba(237, 237, 237, 0.95) 0%, rgb(237 237 237 / 53%) 100%) !important;
    }
}
/* =========================================
   ROMPER CONTENEDOR: FONDO AL 100% DEL MONITOR
========================================= */
.seccion-experiencia-degradado {
    width: 100vw !important;        
    position: relative !important; 
    left: 50% !important;            
    right: 50% !important;
    margin-left: -50vw !important;   
    margin-right: -50vw !important;  
    
    
}
 
/* =========================================
   ROMPER CONTENEDOR: SECCIÓN FILOSOFÍA
========================================= */
#seccion-filosofia-oscura {
    width: 100vw !important;          
    position: relative !important; 
    left: 50% !important;             
    right: 50% !important;
    margin-left: -50vw !important;    
    margin-right: -50vw !important;   
}


/* =========================================
   NUEVA SECCIÓN FISCAL 
========================================= */
.seccion-fiscal-fondo {
    position: relative;
    background-image: url('/images/empresas.jpg'); 
    background-size: cover;          
    background-position: center right; 
    background-repeat: no-repeat;

    /* TÉCNICA FULL-BLEED: Rompe los márgenes para ocupar el 100% de la pantalla */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Ajuste para móvil: centrar la foto */
@media (max-width: 991px) {
    .seccion-fiscal-fondo {
        background-position: center center !important;
    }
}

.mt-1 {
    margin-top: 0 !important;
}


@media (max-width: 768px) {
    .divider-icon i {
        font-size: 1rem !important; /* Reducir icono */
    }
    
    .divider-icon {
        width: 40px; /* Ajustar el contenedor si es necesario */
        height: 40px;
    }
    
    /* Si quieres que las líneas sean más cortas visualmente en móvil */
    .divider {
        width: 90%; /* Dejar un pequeño margen a los lados */
        margin: 0 auto;
    }
    .divider-icon {
    flex-shrink: 0; /* Evita que las líneas aplasten al icono si falta espacio */
    /* Tus estilos actuales del icono (ancho, alto, etc.) se mantienen aquí */
}
}

/* =========================================
   HERO HEADER RESPONSIVE (Logo, Título y Texto)
========================================= */

/* 1. Estilos por defecto (Escritorio/PC) */
.hero-logo-img {
    max-width: 188px;
    height: auto;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
}

.hero-titulo-principal {
    font-size: 4.5rem !important; /* Tamaño gigante en PC */
    line-height: 1.1 !important;
    text-shadow: 2px 4px 6px rgba(0,0,0,0.5);
}

.hero-texto-desc {
    font-size: 1.4rem !important;
    font-weight: 300;
    line-height: 1.4;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.6);
    max-width: 500px;
}

/* 2. Estilos específicos para Móviles (Pantallas de menos de 768px) */
@media (max-width: 767.98px) {
    /* Reducimos el tamaño del título y ajustamos el interlineado */
    .hero-overlay-static h1.hero-titulo-principal {
        font-size: 2.5rem !important; 
        line-height: 1.2 !important;
    }
    
    /* Reducimos los márgenes superior e inferior del bloque */
    .hero-overlay-static {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
	.hero-overlay-static {
    display: flex;
    align-items: center; /* Esta es la magia que lo centra en vertical */
    min-height: 200px; /* Sube o baja este número para hacer tu fondo más alto o más bajo */
}
}







/* =========================================
   CONTACTO
========================================= */

/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE CONTACTO (SISTEMA NATIVO DE JOOMLA)
   ========================================================================== */

/* 1. OCULTAR LA BASURA NATIVA DE JOOMLA (Títulos e iconos feos) */
.com-contact > h2,
.com-contact__miscinfo dt,
.com-contact h3, 
.contact-miscinfo legend {
    display: none !important;
}

/* Ajustar el contenedor para que no deje el hueco del icono oculto */
.com-contact__miscinfo dd {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 2. CREAR LAS DOS COLUMNAS (Flexbox) */
.contact {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
    padding: 3rem 0;
}

/* Columna Izquierda (Tu información y mapa) */
.contact .contact-miscinfo {
    flex: 1 1 45%; 
    min-width: 320px;
}

/* Columna Derecha (Formulario nativo de Joomla) */
.contact .contact-form {
    flex: 1 1 45%; 
    min-width: 320px;
    background-color: #ffffff;
    /* Usamos el mismo padding y bordes que tenías en .contact-form-card */
    padding: 6rem 3rem !important;
    border-radius: 15px;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.10); 
}

/* 3. MAQUILLAR EL FORMULARIO NATIVO DE JOOMLA */
.contact .contact-form legend {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #00051C !important;
    margin-bottom: 1.5rem !important;
    border: none !important;
    display: block !important; /* Forzamos que se vea el título del form */
}

/* Estilo para los campos de texto (Hereda de tu .custom-input) */
.contact .contact-form input[type="text"],
.contact .contact-form input[type="email"],
.contact .contact-form textarea {
    width: 100%;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Efecto focus idéntico al tuyo */
.contact .contact-form input:focus,
.contact .contact-form textarea:focus {
    background-color: white;
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(0, 218, 115, 0.25);
}

/* Botón de enviar (Lo forzamos para que sea igual al .btn-verde-hover) */
.contact .contact-form button[type="submit"], 
.contact .contact-form .btn-primary {
    width: 100%;
    padding: 1rem;
    background-color: #00e676 !important;
    color: #00051C !important;
    border: none !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px; /* Ajusta según el diseño de tus botones */
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.contact .contact-form button[type="submit"]:hover,
.contact .contact-form .btn-primary:hover {
    background-color: #00c853 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 230, 118, 0.3);
}
/* =========================================================
   CAMBIAR EL ORDEN DE LAS COLUMNAS (INFO IZQ / FORM DER)
   ========================================================= */

.contact .contact-miscinfo {
    order: 1 !important; /* Fuerza a la información a ser la primera columna */
}

.contact .contact-form {
    order: 2 !important; /* Fuerza al formulario a ser la segunda columna */
}
/* =========================================================
   CONTENEDOR PRINCIPAL JOOMLA (Con fondo pantalla completa)
   ========================================================= */
.contact {
    /* Tu truco de ancho completo y fondo */
   
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw; 
    overflow: hidden;

    /* Flexbox para las columnas */
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
    justify-content: center; /* Centra el contenido en pantallas gigantes */
    
    /* El padding calcula el espacio para mantener el contenido centrado como en un contenedor normal */
    padding: 5rem calc((100vw - 1200px) / 2) !important; 
}

/* En pantallas móviles y tablets, reducimos el padding lateral para que no se aplaste */
@media (max-width: 1250px) {
    .contact {
        padding: 4rem 5% !important;
    }
}
/* =========================================================
   ESTILOS PARA EL ENLACE DEL EMAIL (Quitar azul y subrayado)
   ========================================================= */

.mi-contacto-info a {
    color: inherit !important; /* Coge el color oscuro del texto que tiene alrededor */
    text-decoration: none !important; /* Quita la línea del subrayado */
    transition: color 0.3s ease; /* Transición suave para el hover */
}

/* Opcional: Un pequeño toque para cuando pasen el ratón por encima */
.mi-contacto-info a:hover {
    color: #00e676 !important; /* Se vuelve verde neón al pasar el ratón */
}
/* ==========================================================================
   DISEÑO EXACTO DEL FORMULARIO DE LA IMAGEN
   ========================================================================== */

/* 1. La tarjeta blanca (Sombra sutil y bordes suaves) */
.contact .contact-form {
    background-color: #ededed;
    padding: 3.5rem !important; 
    border-radius: 12px; /* Curva suave de la caja principal */
    box-shadow: 0 10px 40px rgba(0,0,0,0.04); /* Sombra muy, muy difuminada */
}

/* 2. Título principal (Enviar un correo electrónico) */
.contact .contact-form legend {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
    border: none !important;
    display: block !important;
}

/* 3. Etiquetas encima de los campos (Nombre *, Correo electrónico *) */
.contact .contact-form label {
    display: block !important; /* Fuerza a que se pongan encima de la caja */
    font-size: 0.9rem;
    color: #4a5568;
    margin-bottom: 0.4rem;
    font-weight: normal;
}

/* Ocultar cualquier texto extra molesto que meta Joomla junto a las etiquetas */
.contact .contact-form label .optional {
    display: none;
}

/* 4. Cajas de texto (Gris muy claro, bordes sutiles) */
.contact .contact-form input[type="text"],
.contact .contact-form input[type="email"],
.contact .contact-form textarea {
    width: 100%;
    background-color: #fafafa; /* Ese gris casi blanco de tu diseño */
    border: 1px solid #e2e8f0;
    padding: 0.8rem 1rem;
    border-radius: 8px; /* Curva muy ligera, casi rectangular */
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #2d3748;
    transition: all 0.3s ease;
}

/* Efecto al hacer clic en las cajas */
.contact .contact-form input:focus,
.contact .contact-form textarea:focus {
    background-color: #ffffff;
    border-color: #00e676;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.1);
}

/* 5. El botón verde intenso */
.contact .contact-form button[type="submit"], 
.contact .contact-form .btn-primary {
    width: 100%;
    padding: 1.1rem;
    background-color: #00e676 !important;
    color: #ffffff !important; /* Texto blanco */
    border: none !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    border-radius: 30px; /* Igual que las cajas de texto */
    transition: background-color 0.3s ease;
    margin-top: 0.5rem;
}

.contact .contact-form button[type="submit"]:hover,
.contact .contact-form .btn-primary:hover {
    background-color: #00c853 !important; /* Un poco más oscuro al pasar el ratón */
    cursor: pointer;
}
/* 5. EL BOTÓN VERDE CON EFECTO INVERSO (HOVER TRANSPARENTE) */
.contact .contact-form button[type="submit"], 
.contact .contact-form .btn-primary {
    width: 100%;
    padding: 1.1rem;
    background-color: #00DA73 !important; /* Tu verde específico */
    color: #ffffff !important; 
    border-radius: 30px !important; /* Forma de píldora */
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #00DA73 !important; /* Borde del mismo color que el fondo */
    transition: all 0.3s ease; 
    margin-top: 0.5rem;
    display: block;
}

/* Estado al pasar el ratón (:hover) o al hacer clic/tocar (:active) */
.contact .contact-form button[type="submit"]:hover,
.contact .contact-form button[type="submit"]:active,
.contact .contact-form .btn-primary:hover,
.contact .contact-form .btn-primary:active {
    background-color: transparent !important; /* Quitamos el fondo */
    color: #00DA73 !important;                /* Texto verde */
    border: 2px solid #00DA73 !important;      /* El borde se mantiene visible */
    transform: scale(1.05);                    /* Efecto de zoom sutil */
    cursor: pointer;
}
/* =========================================================
   BOTÓN "CONTACTO" EN EL MENÚ SUPERIOR (Ítem 111)
   ========================================================= */

/* Estado normal: Borde blanco */
.metismenu-item.item-111 > a {
    border: 2px solid #ffffff !important; 
    color: #ffffff !important;           
    border-radius: 30px;               
    padding: 12px 20px !important;       
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    background-color: transparent !important;
}

/* Estado al pasar el ratón: Se vuelve verde */
.metismenu-item.item-111 > a:hover,
.metismenu-item.item-111.active > a {
    border-color: #00DA73 !important;     
    color: #00DA73 !important;           
    background-color: transparent !important;
    transform: scale(1.05);             
}

/* =========================================
   CENTRAR TEXTO Y BOTÓN EN MÓVIL (BANNER)
========================================= */
@media (max-width: 991px) {
    .hero-overlay-static {
        /* 1. Obligamos a la caja a medir lo mismo que la foto (350px) */
        height: 350px !important; 
        min-height: 350px !important;
        
        /* 2. Magia Flexbox para centrado absoluto */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; 
        align-items: center !important;     
        
        /* 3. Limpiamos paddings viejos (como el de 310px que tenías en PC) */
        padding-top: 0 !important; 
        padding-bottom: 0 !important;
    }
    
    /* 4. Quitamos los rellenos de Bootstrap para que el centro sea matemáticamente exacto */
    .hero-overlay-static .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }
	
}
@media (max-width: 991px) {
    .testimonials-section {
        padding-top: 60px !important; /* Ajusta este número si quieres más o menos espacio */
    }
}
/* =========================================
   NUEVO BANNER HÍBRIDO 
========================================= */

.banner-atencion-custom {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 200px;
    padding-bottom: 200px;
    background-color: #ffffff;

    /* 1. Fondo: Degradado de blanco a transparente Y la imagen conceptual */
    /* El degradado debe estar ENCIMA de la imagen para que funcione */
    background-image: linear-gradient(to right, #ededede3 40%, rgba(255, 255, 255, 0) 100%),
                      url('/images/contacto3.jpg'); 
    background-size: cover;
    background-position: center right; /* Mantiene la imagen visible a la derecha */
    background-repeat: no-repeat;

    /* 2. Técnica FULL-BLEED (Proyector): Ocupa el 100% del monitor */
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* =========================================
   Ajuste para Móvil
========================================= */
@media (max-width: 991px) {
    .banner-atencion-custom {
    
        background-position: center center !important;
        padding-top: 60px;
        padding-bottom: 60px;
        text-align: center; /* Centramos el texto para mejor balance */
    }

    /* Reducimos el tamaño del título grande en el móvil */
    .banner-atencion-custom h2 {
        font-size: 2.5rem !important;
    }
}

/* =========================================
   TIMELINE: EFECTOS HOVER Y PUNTO VIAJERO
========================================= */

/* --- 1. TRANSICIONES (Para que el zoom y el cambio de color sea suave) --- */
.timeline-circle,
.tarjeta-cuadrada,
.tarjeta-cuadrada i,
.tarjeta-cuadrada p,
.tarjeta-cuadrada strong {
    transition: all 0.3s ease-in-out;
}

/* --- 2. EFECTO HOVER EN LOS CÍRCULOS (Al pasar el ratón por la fila) --- */
.timeline-row:hover .timeline-circle {
    background-color: #ffffff !important;
    color: #00e676 !important;
    transform: scale(1.1); 
    box-shadow: 0 10px 20px rgba(0, 230, 118, 0.3);
    border: 2px solid #00e676;
}

/* Cambiar los textos del círculo a verde */
.timeline-row:hover .timeline-circle .num,
.timeline-row:hover .timeline-circle .desc {
     color: #00e676 !important;
}

/* --- 3. EFECTO HOVER EN LAS TARJETAS BLANCAS --- */
.timeline-row:hover .tarjeta-cuadrada {
    background-color: #00e676 !important; 
    transform: scale(1.05); 
    box-shadow: 0 15px 30px rgba(0, 230, 118, 0.4) !important;
}

/* Cambiar los iconos y textos de la tarjeta a blanco */
.timeline-row:hover .tarjeta-cuadrada i,
.timeline-row:hover .tarjeta-cuadrada strong {
    color: #ffffff !important;
}

.timeline-row:hover .tarjeta-cuadrada p {
    color: #f8f9fa !important;
}

/* --- 4. LA VÍA Y EL PUNTO VIAJERO --- */
.timeline-track {
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 50%;
    width: 2px; 
    background-color: #dee2e6; 
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-dot {
    position: absolute;
    top: 0; 
    left: 50%;
    width: 14px;
    height: 14px;
    background-color: #00e676; 
    border-radius: 50%;
    transform: translate(-50%, var(--pos-y, 0px));
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    z-index: 2;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.8); 
}


.timeline-row {
    position: relative;
    z-index: 3;
}
footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--color-primary) !important;
}

a:focus, a:active, button:focus, button:active {
    outline: none !important;
    box-shadow: none !important;
}
.contact-form input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99 !important;
    pointer-events: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
}
#contact-form fieldset:nth-of-type(2) > legend {
    display: none !important;
}

/* --- AJUSTE PRIVACIDAD PARA MÓVIL Y ESCRITORIO --- */

label[for="jform_com_fields_politica_de_privacidad0"] a {
    text-decoration: none !important;
    color: #00cc66 !important; 
}

label[for="jform_com_fields_politica_de_privacidad0"] a:hover {
    text-decoration: underline !important;
    color: #00b359 !important;
}

/* Permitimos que el texto salte de línea (importante para móviles) */
label[for="jform_com_fields_politica_de_privacidad0"] {
    white-space: normal !important; 
    display: inline-block;
    line-height: 1.4;
    padding-left: 5px;
}

/* Alineación tipo flex para que el check no se mueva de su sitio */
.form-check-inline {
    display: flex !important;
    align-items: flex-start !important; 
    margin-bottom: 15px;
}

/* Que la casilla no se encoja ni se deforme */
#jform_com_fields_politica_de_privacidad0 {
    margin-top: 4px !important; 
    flex-shrink: 0; 
}
/* ----- REVISIÓN ESTILO BOTÓN ACEPTAR COOKIES ----- */

#cookiesck_accept {
    background-color: #008c4a !important;  
    color: #ffffff !important;              
    border: 2px solid #008c4a !important;    
    transition: all 0.3s ease !important;   /
}


#cookiesck_accept:hover {
    background-color: transparent !important; 
    color: #008c4a !important;               
    border-color: #008c4a !important;        
    cursor: pointer !important;
}