:root {
    --primary: #0a192f;
    --accent: #c5a059;
    --bg-light: #f4f7f9;
    --white: #ffffff;
    --text: #333;
}
html {
    scroll-behavior: smooth; /* Hace que el movimiento sea fluido y no un salto brusco */
    scroll-padding-top: 100px; /* Deja un margen para que el Navbar no tape el título al saltar */
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
body { background: var(--white); color: var(--text); line-height: 1.6; overflow-x: hidden; scroll-behavior: smooth; }
/* Contenedor del logo */
.logo {
    display: flex;
    align-items: center;
}

/* Estilos de la imagen del logo */
.logo-img {
    height: 55px; /* Controla el tamaño aquí */
    width: auto;  /* Mantiene la proporción original */
    display: block;
    transition: transform 0.3s ease;
}

/* Estilos de la imagen del logo */
.logo-img {
    height: 55px; /* Controla el tamaño aquí */
    width: auto;  /* Mantiene la proporción original */
    display: block;
    transition: transform 0.3s ease;
}

/* Efecto opcional al pasar el ratón */
.logo-img:hover {
    transform: scale(1.05);
}



/* Efecto opcional al pasar el ratón */
.logo-img:hover {
    transform: scale(1.05);
}

/* Ajuste del Navbar para que el logo respire */
.navbar {
    padding: 0.5rem 8%; /* Ajustamos el padding vertical para que encaje la imagen */
    min-height: 80px;   /* Altura mínima asegurada para el navbar */
}



/* LOGO MÁS GRANDE */
.logo-img {
    height: 90px; /* Sube este valor hasta que el logo se vea como quieres */
    width: auto;
    display: block;
    transition: var(--transition);
}
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    /* Esto asegura que se alinee verticalmente con el logo */
    align-self: center; 
}

/* HAMBURGUER MÓVIL */
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
.bar { display: block; width: 25px; height: 3px; background: white; transition: 0.3s; }
@media (max-width: 768px) {
    .logo-img {
        height: 45px; /* Un poco más pequeño en móviles */
    }
    
    .navbar {
        padding: 10px 5%; /* Menos espacio lateral en móvil */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* SLIDER */
.slide {
    background-size: cover;      /* La foto ocupa todo el espacio sin deformarse */
    background-position: center;  /* La foto se centra siempre */
    background-repeat: no-repeat;
    height: 100vh;               /* O la altura que tengas asignada */
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-container {
    position: relative;
    height: 85vh;
    width: 100%;
    overflow: hidden;
    margin-top: 149px; /* Debe ser igual al min-height de tu navbar */
}
.slider-container { position: relative; height: 85vh; width: 100%; overflow: hidden; margin-top: 60px; }
.slide { 
    position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; 
    opacity: 0; transition: 1.5s ease; display: flex; align-items: center; justify-content: center; color: white;
}
.slide.active { opacity: 1; }
.slide-content h1 { font-size: 3.5rem; text-transform: uppercase; }
.slide-content p { font-size: 1.4rem; color: var(--accent); }
/* =========================================
   ESTILOS SECCIÓN: EL DESPACHO
   ========================================= */
.despacho-section {
    width: 100%;
    background-color: var(--white); /* Fondo blanco por defecto */
    padding-bottom: 80px; /* Espacio antes de la siguiente sección (servicios) */
}

/* Imagen Hero de la sección (Estilo Slider) */
.despacho-hero {
    height: 60vh; /* Un poco más baja que el slider principal */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax opcional, si te gusta */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    margin-bottom: 60px;
}

.despacho-hero h1 {
	text-align: center;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

/* Bloque de texto */
.despacho-text-block {
    max-width: 900px; /* Ancho de lectura cómodo */
    margin: 0 auto; /* Centrado */
    padding: 0 20px;
}
 #despacho h2, .despacho-content h2 {
	 text-align: center !important; /* centra el texto*/
	 margin-left: auto !important; /* centra  el bloque si tiene anchura fija*/
	 margin-right: auto !important;
	 margin-top: 30px; /* espacio con la imagen de arriba */
	 margin-bottom: 30px; /* espacio con el parrafo de abajo */
	 width: 100%; /* asegura que use todo el ancho para calcular el centro */
	 display: block;
	 }
	 

.despacho-text-block h2 {
    font-size: 2.2rem;
    color: var(--primary); /* Tu color azul oscuro */
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

/* Línea dorada decorativa debajo del H2 */
.despacho-text-block h2::after {
	display: none;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--accent); /* Tu color dorado */
}

.despacho-text-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark); /* Tu color de texto */
    margin-bottom: 25px;
    text-align: justify; /* Texto justificado para mayor formalidad */
}

/* Párrafo de referencia a servicios */
.referencia-servicios {
    font-weight: 600;
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 40px;
}


.referencia-servicios a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.referencia-servicios a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .despacho-hero {
        height: 40vh; /* Más baja en móvil */
    }
    
    .despacho-hero h1 {
        font-size: 2rem;
    }
    
    .despacho-text-block h2 {
        font-size: 1.8rem;
    }
    
    .despacho-text-block p {
        font-size: 1rem;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .despacho-hero {
        height: 40vh; /* Más baja en móvil */
    }
    
    .despacho-hero h1 {
        font-size: 2rem;
    }
    
    .despacho-text-block h2 {
        font-size: 1.8rem;
    }
    
    .despacho-text-block p {
        font-size: 1rem;
    }
}
/* SERVICIOS POR FILAS */
.services-section { padding: 120px 0; background-color: var(--bg-light); }
.main-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.services-header { text-align: center; margin-bottom: 90px; }
.section-title { font-size: 2.8rem; color: var(--primary); margin-bottom: 10px; }
.title-underline { width: 70px; height: 4px; background: var(--accent); margin: 0 auto; }

.service-row { display: flex; justify-content: space-between; margin-bottom: 90px; gap: 40px; }
.service-row:last-child { margin-bottom: 0; justify-content: flex-start; }

.item-service { flex: 1; max-width: calc(25% - 30px); display: flex; }
.card-inner {
    background: white; padding: 60px 30px; border-radius: 20px; text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.02);
    width: 100%; display: flex; flex-direction: column; align-items: center; transition: 0.4s;
}
.card-inner:hover { transform: translateY(-15px); border-color: var(--accent); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }

.icon-holder { 
    width: 80px; height: 80px; background: #f0f3f5; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; margin-bottom: 25px; color: var(--accent); font-size: 2.2rem;
}
.card-inner:hover .icon-holder { background: var(--accent); color: white; }

.btn-more {
    margin-top: auto; padding: 10px 20px; border: 2px solid var(--accent);
    color: var(--primary); text-decoration: none; border-radius: 6px;      font-weight: bold; transition: 0
}
.btn-more:hover { background: var(--accent); color: white; }
.contenedor-llamada {
	display: flex;
	justify-content: center; 
	aling-items: center; 
	margin-top: 10px;
	margin-bottom: 10px;
 }
.contenedor {
	/*display: flex;
	/*justify-content: center; */
	/*aling-items: center; */
	margin-top: 15px;
	margin-bottom: 15px;
 }


/* FORMULARIO */
.contact-section { padding: 100px 0; }
.wide-form { background: white; padding: 50px; border-radius: 25px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); max-width: 1000px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
input, select, textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 10px; outline: none; }
.btn-submit { background: var(--primary); color: white; border: none; padding: 18px; width: 100%; border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.btn-submit:hover { background: var(--accent); }

/* FOOTER */
.main-footer { background: var(--primary); color: #999; padding: 60px 8% 20px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 30px; }
.footer-bottom { border-top: 1px solid #222; padding-top: 20px; text-align: center; }

/* BOTONES FLOTANTES */
.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background: #25d366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 3000; text-decoration: none; }
#scrollTopBtn { position: fixed; bottom: 105px; right: 35px; background: var(--primary); color: white; border: 2px solid #c5a059; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: none; z-index: 2999; }

/* ANIMACIONES */
.reveal { opacity: 0; transform: translateY(40px); transition: 1s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 992px) {
    .service-row { flex-wrap: wrap; justify-content: center; }
    .item-service { flex: 0 1 calc(50% - 20px); max-width: none; }
}

@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links { 
        position: fixed; left: -100%; top: 60px; width: 100%; height: 100vh; 
        background: var(--primary); flex-direction: column; align-items: center; padding-top: 50px; transition: 0.4s;
    }
    .nav-links.active { left: 0; }
    .nav-links li { margin: 20px 0; }
    .service-row { display: block; margin-bottom: 0; }
    .item-service { max-width: 100%; margin-bottom: 30px; }
    .form-row { grid-template-columns: 1fr; }
    .slide-content h1 { font-size: 2rem; }
}
/* Contenedor del Formulario */
 .section-title { text-align: center;}
.wide-form {
    background: var(--white);
    padding: 70px; /* Más aire interno */
    border-radius: 30px; /* Bordes más suaves estilo Apple/Premium */
    box-shadow: 0 25px 70px rgba(0,0,0,0.07); /* Sombra mucho más suave y profunda */
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.02);
}

/* Filas y Espaciado */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; /* Separación generosa entre campos */
    margin-bottom: 30px;
}

/* Campos de entrada */
input, select, textarea {
    width: 100%;
    padding: 20px 25px;
    border: 1.5px solid #eee; /* Borde muy fino */
    border-radius: 15px; /* Redondeado coherente con las tarjetas de servicios */
    font-size: 1rem;
    color: var(--primary);
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    outline: none;
}

/* Efecto al pinchar en el campo */
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.05);
    transform: translateY(-2px);
}

/* Botón de envío imponente */
.btn-submit {
    background: var(--primary);
    color: white;
    border: none;
    padding: 22px;
    width: 100%;
    border-radius: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(10, 25, 47, 0.2);
}

.btn-submit:hover {
    background: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(197, 160, 89, 0.3);
}

/* Estilo para los placeholders */
::placeholder {
    color: #aaa;
    font-weight: 400;
}
/* Contenedor del enlace */
.logo-link {
    display: flex;
    align-items: center; /* Centra verticalmente imagen y texto */
    text-decoration: none;
    gap: 15px; /* Espacio entre el dibujo y el texto */
}

/* Imagen del logo (el dibujo cortado) */
.logo-img {
    height: 100px; /* Tamaño del dibujo */
    width: auto;
    display: block;
}

/* Contenedor de los textos */
.logo-text {
    display: flex;
    flex-direction: column; /* Nombre arriba, lema abajo */
    justify-content: center;
}

/* Nombre Principal */
.brand-name {
    color: #FFF !important; /* Blanco para garantizarlo */
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
}
/* Para que al pasar el raton no cambie a azul o dorado*/
 .logo-link: hover .brand-name { 
    color: #FFF !important;
 }

/* Lema o Texto secundario */
.brand-tagline {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 5px;
    text-transform: uppercase;
}

/* AJUSTE PARA MÓVIL */
@media (max-width: 768px) {
    .logo-img {
        height: 50px; /* Más pequeño en móvil */
    }
    .brand-name {
        font-size: 1.1rem;
    }
    .brand-tagline {
        font-size: 0.6rem;
    }
}

/* --- EFECTO ENCOGER (Solo se activa al bajar) --- */
.navbar.scrolled {
    min-height: 80px !important; /* El tamaño al que quieres que baje */
    background-color: var(--primary); /* Asegura que mantenga el color */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra para que resalte al flotar */
}

.navbar.scrolled .logo-img {
    height: 55px !important; /* El logo también encoge */
}

/* Si tienes la barra de teléfono arriba, esto la oculta suavemente */
.navbar.scrolled .top-header {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Ajuste de transición para que el cambio sea suave y no un salto */
.navbar, .logo-img, .top-header {
    transition: all 0.4s ease-in-out !important;
}
/* Fuerza el color dorado en el hover para todos los enlaces del menú */
.nav-links a {
    transition: var(--transition); /* Para que el cambio de color sea suave */
}

.nav-links a:hover {
    color: var(--accent) !important; /* El dorado que usas en el resto de la web */
    cursor: pointer;
}

/* Opcional: Si quieres que el enlace se vea dorado cuando estés en esa sección */
.nav-links a:active {
    color: var(--accent);
}
/* --- BANNER DE COOKIES: AISLAMIENTO TOTAL --- */
.cookie-wrapper {
    position: fixed !important;
    bottom: -150px; /* Escondido por defecto */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; /* Fuerza el ancho total de la pantalla */
    background-color: #0a192f !important; /* Tu azul oscuro */
    color: #ffffff !important;
    z-index: 99999 !important; /* Por encima de TODO */
    transition: bottom 0.5s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-top: 2px solid #c5a059 !important; /* Línea dorada superior */
}

/* Clase que activa el JS para mostrarlo */
.cookie-wrapper.show {
    bottom: 0 !important;
}

.cookie-container {
    display: flex !important;
    flex-direction: row !important; /* FUERZA LA LÍNEA */
    align-items: center !important;
    justify-content: center !important;
    width: 90% !important;
    max-width: 1200px !important;
    padding: 15px 0 !important;
    margin: 0 auto !important;
	gap: 20px !important;
}

.cookie-text {
    flex: none !important;
    text-align: center !important;
}

.cookie-text p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: white !important;
}

.cookie-text a {
    color: #c5a059 !important;
    text-decoration: underline !important;
}

.btn-cookie {
    background-color: #c5a059 !important;
    color: #0a192f !important;
    border: none !important;
    padding: 10px 25px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    white-space: nowrap !important; /* Evita que el texto del botón se parta */
}
/* --- BLOQUE DESTACADO INTERMEDIO (DESPACHO) --- */
.despacho-destacado-container {
    width: 100%;
    max-width: 900px;    /* Ancho máximo para que el texto sea legible */
    margin: 50px auto;  /* Centra el bloque y da aire arriba/abajo */
    padding: 20px;
    background-color: #f9f9f9; /* Un fondo gris muy sutil para destacar */
    border-radius: 8px; /* Bordes suaves */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
}

.despacho-destacado-flex {
    display: flex !important;
    align-items: center;    /* Centra verticalmente imagen y texto */
    justify-content: center; /* Centra horizontalmente el bloque completo */
    gap: 40px;              /* Espacio entre imagen y texto */
}

.destacado-imagen {
    flex: 0 0 400px; /* Ancho fijo para la imagen */
}

.destacado-imagen img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Bordes suaves en la foto */
    object-fit: cover;  /* Asegura que la foto cubra su espacio */
   /* border: 2px solid var(--accent); /* Tu dorado alrededor de la foto */
}

.destacado-texto {
    flex: 1;              /* El texto usa el resto del espacio */
    text-align: center;   /* Centra el texto DENTRO de su columna */
}

.destacado-texto h3 {
    font-size: 1.6rem;
    color: var(--primary); /* Tu azul oscuro */
    margin-bottom: 15px;
}

.destacado-texto p {
    font-size: 1rem !important;
    line-height: 1.6;
    color: #555;
    margin: 0 !important; /* Quita márgenes por defecto */
	padding-left: 15px;
}

/* --- RESPONSIVE: Adaptación para móviles --- */
@media (max-width: 768px) {
    .despacho-destacado-flex {
        flex-direction: column !important; /* En móvil, imagen arriba, texto abajo */
        text-align: center;
        gap: 20px;
    }
    
    .destacado-imagen {
        flex: 0 0 150px; /* Imagen más pequeña en móvil */
        width: 150px;
    }
}
/* --- SECCIÓN INICIO FEATURES --- */
.features-section {
    padding: 80px 5%;
    background-color: #ffffff;
}

.container-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-box {
    flex: 1;
    text-align: center;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid transparent;
}

.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-bottom: 3px solid #c5a059; /* Tu dorado */
}

.feature-icon {
    font-size: 3rem;
    color: #c5a059; /* Dorado */
    margin-bottom: 20px;
}

.feature-box h3 {
    font-size: 1.4rem;
    color: #0a192f; /* Tu azul oscuro */
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feature-box p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Responsive para que en móvil se pongan uno debajo de otro */
@media (max-width: 768px) {
    .container-features {
        flex-direction: column;
        gap: 20px;
    }
    .feature-box {
        padding: 20px;
    }
}

/* --- FOOTER GENERAL --- */

.main-footer {

    background-color: #0a192f; /* Tu azul oscuro */

    color: white;

    padding: 60px 0 20px 0;

    font-family: 'Arial', sans-serif;

}



.footer-grid {

    display: grid;

    /* TRUCO MÁGICO PARA RESPONSIVE: */

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

}



.footer-section h3 {

    color: #c5a059; /* Tu dorado */

    font-size: 1.2rem;

    margin-bottom: 20px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.footer-section p {

    font-size: 0.9rem;

    line-height: 1.6;

    color: #cbd5e0;

    margin-bottom: 10px;

}



.footer-section a {

    color: #cbd5e0;

    text-decoration: none;

    transition: color 0.3s;

}



.footer-section a:hover {

    color: #c5a059;

}



/* --- LÍNEA INFERIOR DE COPYRIGHT --- */

.footer-bottom {

    text-align: center;

    margin-top: 50px;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 0.8rem;

    color: #718096;

}



/* --- AJUSTE PARA MÓVILES MUY PEQUEÑOS --- */

@media (max-width: 480px) {

    .footer-grid {

        text-align: center; /* Centramos el texto en móviles */

    }

    

    .footer-section {

        margin-bottom: 20px;

    }

}

/* FOOTER 
.main-footer { background: var(--primary); color: #999; padding: 60px 8% 20px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: auto; margin-bottom: 30px; text-align: center;}
.footer-bottom { border-top: 1px solid #222; padding-top: 20px; text-align: center; }
.footer-grid a { color: #999; text-decoration: none; font-weight: 500; transition: 0.3s; }
.footer-grid a:hover { color: var(--accent); } */
/* Privacy wrapper */
.privacy-wrapper {
	display: flex;
	align-items: center; /*Alinea verticalmente al centro*/
	gap: 10px; /*Espacio entre checkbox y texto*/
	margin-bottom: 15px;}
.privacy-wrapper imput {
	margin: 0; /*Quita margenes por defecto*/}
input[type="checkbox"] {position: relative;
    margin: 0,6px,0,0;
	padding: 0;
	height: 13px;
	width: 13px;
	display: inline-block;
	border: 0;}	


/* --- RESPONSIVE FORMULARIO (REFORZADO) --- */



@media screen and (max-width: 850px) {

.contact-section .wide-form {

        padding: 30px 20px !important; /* Forzamos el cambio de espacio interno [cite: 11] */
        width: 95% !important;
        max-width: none !important;
    }

}



@media screen and (max-width: 600px) {

.contact-section {
        padding: 50px 0 !important; /* Reducimos el margen de la sección [cite: 10] */
    }



    /* Convertimos las 2 columnas en 1 sola columna vertical */

.contact-section .form-row {
        grid-template-columns: 1fr !important; /* Adiós al 1fr 1fr [cite: 11] */
        gap: 15px !important;
        margin-bottom: 15px !important;
    }



    .contact-section input, 
    .contact-section select, 
    .contact-section textarea {
        padding: 12px !important;
        font-size: 16px !important; /* Tamaño mínimo para evitar zoom en móviles [cite: 12] */
    }



.contact-section .btn-submit {
        padding: 15px !important; /* Botón más manejable  */
        font-size: 1.1rem !important;
    }



.contact-section .privacy-wrapper {
        display: flex !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

}	

/* XXXXXXXXXXXXXXXX CAMBIOS DIA 24/04 XXXXXXXXXXXX */

.top-bar {
	display: flex !important;
	background-color: var(--primary);
	color: white;
	width: 100% !important;
	padding: 10px 8px !importnt;;
	font-size: 14px;
	position: fixed;
	z-index: 1000;
	justify-content: flex-end !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(197, 160, 89, 0.2)
}

.contact-info {
	display: flex !important;
	gap: 20px !important;
}

.contact-info a {
	
	color: #c5a059;
	text-decoration: none;
	font-size: 14px;
	margin: 0 !important;
	display: flex !important;
	letter-spacing: 1px;
	align-items: center !important;
	text-align: rigth !important;
}

-contact-info a:hover {
	text-decoration: none;
	text-color: red;
	
}

@media (min-width: 768px) {
	.top-bar {
		text-align: right;
		}
}

/*     hoy    */

/* --- CONFIGURACIÓN GENERAL DEL HEADER --- */

.navbar {

    display: flex !important;

    flex-direction: column !important; /* Apila barra de contacto y menú */

    background: var(--primary);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 2000;

    border-bottom: solid 1px var(--accent);

    padding: 0 !important; /* Limpiamos paddings anteriores */

}



/* --- BARRA DE CONTACTO (Sustituye a la del margen 590px) --- */

.top-bar {

    width: 100%;

    background-color: rgba(0,0,0,0.2); /* Un toque más oscuro para separar */

    padding: 8px 8%;

    display: flex;

    justify-content: flex-end; /* Alinea el contacto a la derecha correctamente */

}



.contact-info a {

    color: var(--accent);

    text-decoration: none;

    margin-left: 20px;

    font-size: 13px;

    letter-spacing: 1px;

}



/* --- CONTENEDOR PRINCIPAL (Logo y Menú) --- */

.nav-main {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 8%;

    min-height: 90px;

}



.logo-img {

    height: 80px; /* Tamaño estable para el logo */

    width: auto;

    transition: transform 0.3s ease;

}



.nav-links {

    display: flex;

    list-style: none;

    margin: 0;

    padding: 0;

}



.nav-links li {

    margin-left: 30px;

}



/* --- RESPONSIVE --- */

@media (max-width: 768px) {

    .top-bar {

        justify-content: center; /* Centrado en móviles */

        padding: 5px;

    }

    

    .contact-info a {

        margin: 0 10px;

        font-size: 11px;

    }



    .nav-main {

        min-height: 70px;

        padding: 5px 5%;

    }



    .logo-img {

        height: 50px;

    }



    .hamburger {

        display: flex !important;

    }

}

/* --- RESET Y POSICIONAMIENTO --- */
.contenedor-navegacion {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 3000 !important;
    background-color: #0a192f !important; /* Azul oscuro de tu marca */
    display: flex !important;
    flex-direction: column !important;
}

/* --- BARRA SUPERIOR (CONTACTO) --- */
.barra-superior {
    background-color: #0a192f !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.3) !important;
    padding: 10px 8% !important;
	width: 100% !important;
}

.datos-contacto {
    display: flex !important;
    justify-content: flex-end !important; /* Lo lleva a la derecha */
    gap: 40px !important; /* ESTO DA LA SEPARACIÓN QUE BUSCABAS */
}

.datos-contacto a {
    color: #c5a059 !important; /* Dorado */
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
	display: flex !important;
	align-items: center !important;
}

/* --- MENU PRINCIPAL --- */
.menu-principal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 8% !important;
    min-height: 95px !important;
}

.enlaces-nav {
    display: flex !important;
    list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
    gap: 35px !important; /* Separación entre Inicio, Despacho, etc. */
}

.enlaces-nav a {
    color: white !important; /* Forzamos que el texto sea blanco */
    text-decoration: none !important;
    font-weight: 600 !important;
	font-size: 16px !important;
    transition: 0.3s !important;
}

.enlaces-nav a:hover {
    color: #c5a059 !important; /* Dorado al pasar el ratón */
}

/* --- AJUSTE MÓVIL --- */
@media (max-width: 991px) {
    .datos-contacto {
        justify-content: center !important;
        gap: 20px !important;
}
	
.enlaces-nav {
	gap: 15px !important;
}	
   
}

/* --- ESTRUCTURA GENERAL --- */

.header-final {

    position: relative !important; /* Cambiamos fixed por relative momentáneamente para ver si aparecen los servicios */

    width: 100% !important;

    background-color: #0a192f !important;

    z-index: 1000 !important;

}



/* --- BARRA DE CONTACTO --- */

.barra-contacto-final {

    background-color: #0a192f !important;

    border-bottom: 1px solid rgba(197, 160, 89, 0.3) !important;

    padding: 10px 8% !important;

}



.bloque-contacto {

    display: flex !important;

    justify-content: flex-end !important;

    gap: 40px !important; /* Separación entre teléfono y mail */

}



.bloque-contacto a {

    color: #c5a059 !important;

    text-decoration: none !important;

    font-size: 14px !important;

}



/* --- NAVBAR --- */

.navbar-final {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    padding: 10px 8% !important;

    min-height: 100px !important;

}



.img-logo-final {

    height: 90px !important;

    width: auto !important;

}



.lista-links-final {

    display: flex !important;

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

}



.lista-links-final li {

    margin-left: 35px !important; /* Separación entre opciones del menú */

}



.lista-links-final a {

    color: white !important;

    text-decoration: none !important;

    font-weight: 600 !important;

    transition: 0.3s !important;

}



.lista-links-final a:hover {

    color: #c5a059 !important;

}



/* --- SOLUCIÓN PARA QUE NO DESAPAREZCAN LOS SERVICIOS --- */

/* Forzamos que la sección siguiente tenga su espacio */

#inicio, .slider-container {

    margin-top: 0 !important;

}

/* --- CABECERA TOTAL --- */

.bloque-cabecera-final {

    width: 100% !important;

    background-color: #0a192f !important;

    position: relative !important; /* "Relative" para que empuje los servicios hacia abajo y se vean */

    display: block !important;

    z-index: 9999 !important;

}



/* --- BARRA TOP (CON SEPARACIÓN) --- */

.franja-top {

    background-color: #0a192f !important;

    border-bottom: 1px solid rgba(197, 160, 89, 0.3) !important;

    padding: 10px 8% !important;

    overflow: hidden !important;

}



.contenedor-flex-top {

    display: flex !important;

    justify-content: flex-end !important; /* Empuja a la derecha */

}



.enlace-top {

    color: #c5a059 !important;

    text-decoration: none !important;

    font-size: 16px !important;

    margin-left: 50px !important; /* SEPARACIÓN FORZADA ENTRE TEL Y EMAIL */

}



/* --- MENÚ (CON SEPARACIÓN) --- */

.cuerpo-nav {

    display: flex !important;

    justify-content: space-between !important; /* Logo a un lado, menú al otro */

    align-items: center !important;

    padding: 10px 8% !important;

    min-height: 100px !important;

}



.logo-final-img {

    height: 85px !important;

    width: auto !important;

}



.lista-menu-final {

    display: flex !important;

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

}



.lista-menu-final li {

    margin-left: 45px !important; /* SEPARACIÓN FORZADA ENTRE INICIO, DESPACHO, ETC */

}



.lista-menu-final a {

    color: white !important;

    text-decoration: none !important;

    font-weight: 600 !important;

    font-size: 16px !important;

}



.lista-menu-final a:hover {

    color: #c5a059 !important;

}



/* --- REAPARICIÓN DE SERVICIOS --- */

#inicio, .slider-container, .services-section {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

}

/* -- Forzar aparicion de scciones --*/
#servicios, .services-section {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	clear: both !important;
	margin-top: 50px !important;
}

.service-row {
	display: flex !important;
	visibility: visible !important;
}

/* -- RESET DE VISIBILIDAD PARA SECCIONES --*/
#servicios, .services-section, #contacto, .contact-section {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 1 !important;
	background-color: #f4f7f9 !important;
}

.main-wrapper {
	display: block !important;
	width: 100% !important;
}

/* --- DESBLOQUEO TOTAL DE SERVICIOS --- */
.services-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 100px 0 !important;
    background-color: #f4f7f9 !important; /* Color gris claro para ver el bloque */
    clear: both !important;
}

.item-service.reveal {
    opacity: 1 !important; /* Forzamos que la animación no los oculte */
    transform: none !important; /* Quitamos cualquier desplazamiento que los saque de pantalla */
    visibility: visible !important;
    display: block !important;
}

.service-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
}

/* --- AJUSTES MÓVILES DEFINITIVOS --- */
@media (max-width: 768px) {
    /* 1. Ajuste de la barra superior de contacto */
    .contenedor-flex-top {
        flex-direction: column !important; /* Email debajo del teléfono */
        align-items: center !important;
        gap: 10px !important;
    }
    
    .enlace-top {
        margin-left: 0 !important; /* Quitamos el margen lateral en móvil */
        font-size: 12px !important;
    }

    /* 2. El Menú de navegación se oculta */
    .lista-menu-final {
        position: fixed !important;
        left: -100% !important; /* Escondido a la izquierda */
        top: 100px !important;
        flex-direction: column !important;
        background-color: #0a192f !important;
        width: 100% !important;
        height: 100vh !important;
        text-align: center !important;
        transition: 0.3s !important;
        padding-top: 50px !important;
        z-index: 2000 !important;
    }

    /* Clase para mostrar el menú al pulsar (se activa con JS) */
    .lista-menu-final.active {
        left: 0 !important;
    }

    .lista-menu-final li {
        margin: 20px 0 !important;
        margin-left: 0 !important; /* Quitamos el margen de escritorio */
    }

    /* 3. Mostrar el botón de hamburguesa */
    .hamburguesa-final {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        cursor: pointer !important;
    }

    .hamburguesa-final span {
        display: block !important;
        width: 30px !important;
        height: 3px !important;
        background-color: white !important;
    }
}
@media (max-width: 768px) {
    .service-row {
        display: block !important; /* Una tarjeta debajo de otra */
    }

    .item-service {
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .section-title {
        font-size: 1.8rem !important; /* Títulos más pequeños para que no se corten */
    }
}

/* En el ordenador, el botón está escondido */
.hamburguesa-final {
    display: none;
}

/* En el móvil (max-width: 768px), el botón aparece */
@media screen and (max-width: 768px) {
    .hamburguesa-final {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
    }
}

/* --- ESTO DEBE IR AL FINAL DE TODO --- */

/* 1. Forzamos que el botón se vea en móvil con colores de prueba */
@media screen and (max-width: 768px) {
    #boton-maestro-movil {
        display: flex !important; /* Lo forzamos a existir */
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 40px !important;
        height: 30px !important;
        background: transparent; !important; /* COLOR ROJO PARA LOCALIZARLO */
        cursor: pointer !important;
        z-index: 10000 !important;
        padding: 5px !important;
    }

    #boton-maestro-movil span {
        width: 100% !important;
        height: 4px !important;
        background-color: white !important; /* Las líneas serán blancas */
        display: block !important;
    }

    /* 2. Forzamos que los servicios aparezcan (color verde de prueba) */
    .services-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #e0ffe0 !important; /* FONDO VERDE PARA VER LA SECCIÓN */
        min-height: 500px !important;
    }
}

/* 3. En ordenador el botón debe estar escondido */
@media screen and (min-width: 769px) {
    #boton-maestro-movil {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* El menú por defecto en móvil está escondido y preparado */
    .lista-menu-final {
        display: none !important; /* Escondido por defecto */
        position: absolute !important;
        top: 175px !important; /* Ajusta esto según la altura de tu cabecera */
        left: 0 !important;
        width: 100% !important;
        background-color: #0a192f !important; /* El azul oscuro de tu despacho */
        flex-direction: column !important;
        padding: 20px 0 !important;
        z-index: 99999 !important;
        border-bottom: 2px solid #c5a059 !important;
    }

    /* ESTA ES LA CLASE QUE ACTIVA EL BOTÓN */
    .lista-menu-final.mostrar-menu-movil {
        display: flex !important;
    }

    .lista-menu-final li {
        margin: 15px 0 !important;
        text-align: center !important;
    }

    .lista-menu-final a {
        color: white !important;
        font-size: 1.2rem !important;
        text-decoration: none !important;
    }
}

@media screen and (max-width: 768px) {
    #boton-maestro-movil {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 20px !important;
        cursor: pointer !important;
        z-index: 999999 !important;
        /* ELIMINAMOS ESTO: */
        border: none !important; 
        background: transparent !important;
        padding: 0 !important;
    }

    .linea-h {
        background-color: #c5a059 !important; /* Aquí decides el color de las rayas */
        height: 3px !important;
        width: 100% !important;
        display: block !important;
        border-radius: 2px !important;
    }
}

/* El contenedor de las tarjetas */
.service-row {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite que bajen si no caben */
    align-items: stretch !important; /* ESTO es lo que iguala las alturas */
    gap: 20px; /* Espacio entre tarjetas */
}

/* XXXXXXXXXXXXXXXXXXX Aviso legal XXXXXXXXXXXXXXXXXXXXX */

        /* Estilos específicos para la lectura de textos legales */
 .contenido-legal {
    padding: 60px 0;
    line-height: 1.8; /* Da aire entre líneas */
    color: #333;
}

.caja-info {
    background: #f9f9f9;
    padding: 20px;
    border-left: 4px solid #c5a059; /* El dorado de tu marca */
    margin: 20px 0;
}

.contenido-legal h2 {
    margin-top: 40px;
    color: #001f3f; /* El azul oscuro de tu despacho */
}

        .contenido-legal {
            padding: 60px 0;
            line-height: 1.8;
            color: #333;
            background-color: #fff;
        }
        .contenido-legal h2 {
            color: #c5a059;
            margin-top: 30px;
            font-size: 1.5rem;
            text-transform: uppercase;
        }
        .contenido-legal p, .contenido-legal li {
            margin-bottom: 15px;
            text-align: justify;
        }
        .datos-identificativos {
            background: #f9f9f9;
            padding: 20px;
            border-left: 4px solid #c5a059;
            margin: 20px 0;
        }
/* XXXXXXXXXXXXXXXXXXX Fin aviso legal XXXXXXXXXXXXXXXXXXXXX */

/* XXXXXXXXXXXXXXXXXXX Noticias XXXXXXXXXXXXXXXXXXXXX */

     .contenedor-noticias {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: center !important;
    align-items: stretch !important; /* <--- Esto iguala las alturas de las noticias */
}

.tarjeta-noticia {
    background: #fff;
    flex: 1 1 350px !important;
    max-width: 400px;
    display: flex !important;
    flex-direction: column !important; /* Permite que el contenido interno se estire */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.cuerpo-noticia {
    padding: 25px;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.cuerpo-noticia p {
    flex-grow: 1 !important; /* Empuja el enlace "Leer más" siempre al fondo */
} 
/* XXXXXXXXXXXXXXXXXXX Fin noticias  XXXXXXXXXXXXXXXXXXXXX */  

.seccion-noticias {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.titulo-seccion {
    text-align: center;
    color: #0a192f;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitulo-seccion {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
}

.contenedor-noticias {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.tarjeta-noticia {
    background: #fff;
    flex: 1 1 350px;
    max-width: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.tarjeta-noticia:hover {
    transform: translateY(-10px);
}

.imagen-noticia {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.cuerpo-noticia {
    padding: 25px;
}

.fecha-noticia {
    color: #c5a059;
    font-size: 0.85rem;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.tarjeta-noticia h3 {
    color: #0a192f;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.tarjeta-noticia p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.leer-mas {
    color: #c5a059;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

.leer-mas i {
    margin-left: 5px;
    transition: margin 0.3s;
}

.leer-mas:hover i {
    margin-left: 10px;
}

/* ----------- Carga de imagenes ----------*/

/* Estilo base para todas las imágenes de noticias */
.imagen-noticia {
    height: 200px !important;
    background-color: #0a192f; /* Color oscuro de reserva */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block !important;
}

/* Enlaces individuales con fotos nuevas y estables */
.img-1 { background-image: url('https://images.pexels.com/photos/101808/pexels-photo-101808.jpeg?auto=compress&cs=tinysrgb&w=500'); }
.img-2 { background-image: url('https://images.pexels.com/photos/60504/security-protection-anti-virus-software-60504.jpeg?auto=compress&cs=tinysrgb&w=500'); }
.img-3 { background-image: url('https://images.pexels.com/photos/164501/pexels-photo-164501.jpeg?auto=compress&cs=tinysrgb&w=500'); }
.img-4 { background-image: url('https://images.pexels.com/photos/6077326/pexels-photo-6077326.jpeg?auto=compress&cs=tinysrgb&w=500'); }
.img-5 { background-image: url('https://images.pexels.com/photos/8293778/pexels-photo-8293778.jpeg?auto=compress&cs=tinysrgb&w=500'); }
.img-6 { background-image: url('https://images.pexels.com/photos/4021775/pexels-photo-4021775.jpeg?auto=compress&cs=tinysrgb&w=500'); }

/* --- AJUSTE DE ALTURAS (ESCRITORIO Y GENERAL) --- */
.contenedor-servicios {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
    align-items: stretch !important; /* <--- Esto hace que todas las cajas midan lo mismo */
}

.tarjeta-servicio {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 300px !important; /* Permite que crezcan y se encojan */
    max-width: 350px !important;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.tarjeta-servicio p {
    flex-grow: 1 !important; /* Hace que el texto ocupe el espacio sobrante y empuje todo */
}

/* --- AJUSTE PARA MÓVILES VERTICALES --- */
@media (max-width: 480px) {
    .contenedor-servicios {
        padding: 0 15px !important; /* Un poco de aire a los lados */
    }

    .tarjeta-servicio {
        flex: 1 1 100% !important; /* Ocupa todo el ancho disponible */
        max-width: 100% !important;  /* Evita que se queden estrechas */
        margin-bottom: 20px !important;
        padding: 20px !important; /* Reducimos un poco el padding interno para ganar espacio */
    }
    
    .titulo-seccion {
        font-size: 1.8rem !important; /* Títulos un poco más pequeños para que no corten */
    }
}



/* --- NIVELACIÓN DE ALTURAS EN FILAS --- */
.service-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important; /* Fuerza a que todas las tarjetas de la fila midan lo mismo */
    gap: 20px;
    margin-bottom: 20px;
}

.item-service {
    display: flex !important;
    flex: 1 1 250px !important; /* Permite que crezcan y se repartan el espacio */
    max-width: 300px !important; /* Ajusta este valor según cuántas quieras por fila */
    margin: 0 !important; /* Quitamos márgenes manuales para que el flex trabaje mejor */
}

.card-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 30px;
    /* Aquí van tus estilos de fondo, bordes y sombras actuales */
}

.card-inner p {
    flex-grow: 1 !important; /* Este es el secreto: el texto estira la tarjeta hasta el final */
}

/* --- SOLUCIÓN PARA MÓVIL VERTICAL (ESTRECHEZ) --- */
@media (max-width: 768px) {
    .service-row {
        flex-direction: column !important;
        align-items: center !important;
    }

    .item-service {
        width: 100% !important; 
        max-width: 100% !important; /* Ocupa todo el ancho en el móvil */
        padding: 0 15px !important; /* Un poco de margen para que no pegue al borde de la pantalla */
    }
}

/* --- CONTÊINER QUE IGUALA ALTURAS --- */
.contenedor-servicios-unificado {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important; /* <--- O SEGREDO DAS ALTURAS IGUAIS */
    gap: 20px;
    padding-top: 30px;
}

.item-service {
    display: flex !important;
    flex: 1 1 280px !important; /* Tamanho flexível para as tarjetas */
    max-width: 320px !important;
    margin-bottom: 20px;
}

.card-inner {
    display: flex !important;
    flex-direction: column !important; /* Organiza ícone, título, texto e botão em linha vertical */
    width: 100% !important;
    flex-grow: 1 !important; /* Força a tarjeta a ocupar toda a altura da fila */
}

.card-inner p {
    flex-grow: 1 !important; /* Empurra o botão para o fundo, nivelando todos os botões */
    margin-bottom: 20px;
}

/* --- AJUSTE PARA CELULAR (ANCHURA TOTAL) --- */
@media (max-width: 600px) {
    .item-service {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}

/* Estilos para el Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Fondo oscuro */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border-radius: 10px;
    width: 70%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto; /* Por si la noticia es muy larga */
    position: relative;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover { color: #c5a059; }


.emboltorio { 
    background-color: #FCC6BB;
    padding: 0px 20px 10px 20px;
    border-radius: 25px;
}