:root {
  --vdata-purple: #88445C;  /* Color principal */
  --vdata-lavender: #D19DB3; /* Color secundari */
  --vdata-gold: #FFC857;     /* Color d'accent (botons, avisos) */
  --vdata-black: #444444;    /* Gris fosc per a text (millorat per llegibilitat) */
  --vdata-gray-light: #AAAAAA; /* Gris clar original per a elements decoratius */

  /* Sobrescribir variables de Bootstrap si es posible o usar las nuestras */
  --primary: var(--vdata-purple);
}

body {
    background-color: #ffffff;
    color: var(--vdata-black);
}

/* Botones principales */
.btn-primary {
    background-color: var(--vdata-purple);
    border-color: var(--vdata-purple);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #70364a; /* Un poco más oscuro que el púrpura */
    border-color: #70364a;
}

/* Botones de acento o avisos (usando el dorado) */
.btn-accent, .btn-warning {
    background-color: var(--vdata-gold);
    border-color: var(--vdata-gold);
    color: var(--vdata-black);
}

/* Esquemas de color específicos (o_ccX) si se usan en el HTML */
.o_cc1 {
    background-color: #f8f9fa; /* Mantener suave para el primer bloque */
    color: var(--vdata-black);
}

.o_cc1 h1, .o_cc1 h2, .o_cc1 h3, .o_cc1 p, .o_cc1 .lead {
    color: var(--vdata-purple) !important;
}

.o_cc1 p, .o_cc1 .lead {
    color: var(--vdata-black) !important;
}

.o_cc2 {
    background-color: white;
    color: var(--vdata-black);
}

.o_cc5 {
    background-color: var(--vdata-purple);
    color: white;
}

.o_cc5 .btn-primary {
    background-color: var(--vdata-gold);
    border-color: var(--vdata-gold);
    color: var(--vdata-black);
}

.o_cc4 {
    background-color: var(--vdata-lavender);
    color: white;
}

.o_cc4 h1, .o_cc4 h2, .o_cc4 h3, .o_cc4 h4, .o_cc4 h5, .o_cc4 h6, .o_cc4 p {
    color: white !important;
}

.s_parallax_bg + .o_we_bg_filter + .container h1 {
    color: white !important;
}

/* Forzar colores en elementos específicos de Odoo/Bootstrap que podrían tener selectores más fuertes */
#wrapwrap, 
#wrapwrap main,
.vdata-main-bg,
#o_shared_blocks {
    background-color: #f0e6eb !important;
}

#wrapwrap.o_footer_effect_enable > main {
    background-color: transparent !important;
}

/* Forzar que el pie de página no tenga margen superior que revele el fondo de abajo */
footer.o_footer {
    margin-top: 0 !important;
    position: relative;
    z-index: 10;
}

/* Reducir espacio en el formulario de contacto */
.s_website_form, 
.s_website_form form, 
.s_website_form .s_website_form_rows,
.s_website_form_submit {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.s_website_form_field.mb-3 {
    margin-bottom: 0.5rem !important; /* Reducir de mb-3 (1rem) a 0.5rem */
}

/* Asegurar que la sección y el contenedor no tengan padding inferior */
#wrap > .oe_structure > section.s_text_block,
#wrap > section.s_text_block,
.s_text_block .container,
.s_text_block .row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#o_shared_blocks {
    display: none !important;
}

a {
    color: var(--vdata-purple);
}

a:hover {
    color: var(--vdata-lavender);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vdata-purple);
}

.card-title, .card-body h3 {
    color: #7D4B63 !important;
}

.min-height-h3 {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: 2.2rem;
}

/* Sobrescribir el color de fondo de las secciones con o_cc2 */
section.o_cc2 {
    background-color: white !important;
}

/* Sobrescribir el color de fondo de las secciones con o_cc5 */
section.o_cc5 {
    background-color: var(--vdata-purple) !important;
    color: white !important;
}

.o_cc5 h1, .o_cc5 h2, .o_cc5 h3, .o_cc5 p {
    color: white !important;
}

section.o_cc5 h1, section.o_cc5 h2, section.o_cc5 h3, section.o_cc5 p {
    color: white !important;
}
header.o_header_standard {
    border-bottom: 2px solid var(--vdata-lavender);
}

nav.navbar {
    background-color: white !important;
}

.nav-link {
    color: var(--vdata-purple) !important;
}

.nav-link.active {
    color: var(--vdata-purple) !important;
    font-weight: bold;
}

footer.o_footer {
    background-color: var(--vdata-gray-light);
    color: var(--vdata-black);
    padding-top: 0;
}

footer.o_footer a {
    color: var(--vdata-purple);
    text-decoration: none;
    font-weight: 500;
}

footer.o_footer a:hover {
    color: var(--vdata-black);
    text-decoration: underline;
}

footer.o_footer .btn-primary {
    background-color: var(--vdata-purple);
    border-color: var(--vdata-purple);
    color: white !important;
}

footer.o_footer .btn-primary:hover {
    background-color: #70364a;
    border-color: #70364a;
    color: white !important;
    text-decoration: none !important;
}

/* .o_footer_copyright ya no se usa pero mantenemos el estilo por si acaso o lo limpiamos */
.o_footer_copyright {
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 0.85rem;
    padding: 10px 0;
}


.vdata-nav-toggler:focus,
.vdata-nav-toggler:active,
.vdata-nav-toggler {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Eliminar posibles spinners de Odoo */
.o_header_mobile .vdata-nav-toggler::after,
.o_header_mobile .vdata-nav-toggler::before {
    display: none !important;
    content: none !important;
    animation: none !important;
}

    /* Forzar Menú Móvil Personalizado */
.vdata-mobile-menu {
    display: none !important;
    visibility: hidden !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    z-index: 2000 !important; /* Aumentado drásticamente */
    background-color: white !important;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-in-out, visibility 0.3s !important;
    flex-direction: column !important; /* Asegurar dirección vertical */
}

.vdata-mobile-menu.show, 
body .vdata-mobile-menu.show,
html body .vdata-mobile-menu.show,
#vdata_mobile_menu.show {
    visibility: visible !important;
    display: flex !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.vdata-mobile-menu .offcanvas-header {
    padding: 1rem !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.vdata-mobile-menu .offcanvas-body {
    padding: 0 1.5rem 1.5rem 1.5rem !important; /* Añadido padding inferior */
    flex-grow: 1 !important;
    overflow-y: auto !important;
}

.vdata-nav-close {
    width: 30px !important;
    height: 30px !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    opacity: 0.5 !important;
}

.vdata-nav-close:hover {
    opacity: 1 !important;
}

.vdata-backdrop {
    opacity: .5 !important;
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000 !important;
    z-index: 1999 !important; /* Detrás del menú */
}

/* Banner de Cookies */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    color: var(--vdata-black);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 3000;
    border-top: 3px solid var(--vdata-gold);
}

.cookie-banner p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.cookie-banner a {
    color: var(--vdata-purple);
    text-decoration: underline;
}

/* --- Dinamismo y Animaciones --- */

.vdata-main-bg {
    background: linear-gradient(180deg, #ffffff 0%, #f9f2f5 30%, #f4ecf0 60%, #f0e6eb 100%) !important;
    position: relative;
    /* Asegurar que el fondo cubra todo el espacio si hay secciones vacías o con margen */
    min-height: 100%;
}

/* Hacer transparentes las secciones dentro del fondo común para que se vea el degradado */
.vdata-main-bg section {
    background-color: transparent !important;
}

/* Ajustes específicos para mantener legibilidad en secciones que eran oscuras o tenían color */
.vdata-main-bg section.o_cc5 {
    background-color: var(--vdata-purple) !important; /* Mantener el CTA destacado */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.s_call_to_action .container {
    padding-bottom: 24px;
    max-width: 1000px;
}

@media (min-width: 1200px) {
    .vdata-main-bg section.o_cc5 {
    }
}

/* El banner suele tener imagen de fondo, si queremos fondo común, la quitamos o la suavizamos */
.vdata-main-bg .s_banner {
    background-image: none !important;
}

/* Aparición progresiva de secciones con un ligero escalado */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Elementos Parallax */
.vdata-parallax {
    will-change: transform;
    transition: transform 0.1s linear; /* Un poco de inercia */
}

/* Animación de flotación suave */
.vdata-float {
    animation: floating 3s ease-in-out infinite;
}

/* Detener animaciones cuando no hay scroll */
body.vdata-stop-animations .vdata-float {
    animation-play-state: paused !important;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Microinteracciones en cards y botones */
.card, .btn-primary, .btn-lg {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

/* Colores de marca para vdata.net */
.vdata-brand-vdata, .vdata-brand-dot, .vdata-brand-net {
    font-size: 1.75rem;
}

.vdata-brand-vdata {
    color: var(--vdata-purple);
}

.vdata-brand-dot {
    color: var(--vdata-gold);
}

.vdata-brand-net {
    color: var(--vdata-lavender); /* Usamos lavanda para el 'net' claro */
}

/* Tamaño de fuente para la información de contacto */
.vdata-contact-info {
    font-size: 1.1rem;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(136, 68, 92, 0.15) !important;
}

.btn-primary:hover, .btn-lg:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(136, 68, 92, 0.3);
}

/* Parallax suave para el banner */
.s_banner {
    overflow: hidden;
    position: relative;
    background-attachment: fixed; /* Fallback para navegadores antiguos */
}

/* Responsive adjustment for parallax */
@media (max-width: 768px) {
    .s_banner {
        background-attachment: scroll;
    }
}