/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    --primary-color: #0d6efd; /* Color primario de Bootstrap (azul), puedes cambiarlo */
    --secondary-color: #6c757d; /* Color secundario */
    --whatsapp-green: #25D366;
}

/* Aplicar fuente Poppins si se cargó */
body {
    font-family: 'Poppins', sans-serif;
    /* Añadir padding superior para compensar la navbar fija */
    padding-top: 70px; /* Ajusta este valor a la altura exacta de tu navbar */
    /* Cursor personalizado - ¡NECESITAS CREAR LA IMAGEN 'broom.png'! */
    /* cursor: url('../assets/icons/broom.png') 16 16, auto; */ /* 16 16 es el punto caliente del cursor */
    cursor: default; /* Temporalmente default hasta que tengas la imagen */
}

/* Scroll Suave */
html {
    scroll-behavior: smooth;
}

/* Enlaces sin decoración por defecto */
a {
    text-decoration: none;
    color: var(--primary-color);
}
a:hover {
    color: darken(var(--primary-color), 10%);
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Un poco más de peso para los títulos */
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar {
    transition: background-color 0.3s ease-in-out;
}
.navbar-brand {
    font-size: 1.5rem;
}
.nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
}

/*--------------------------------------------------------------
# Secciones
--------------------------------------------------------------*/
section {
    padding: 60px 0;
    overflow: hidden; /* Para evitar desbordamientos horizontales inesperados */
}

/* Sección Inicio (Hero) */
#inicio {
    /* Puedes añadir más estilos aquí si es necesario */
}
#inicio h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Sección Servicios (Cards) */
#servicios .card {
    border: none; /* Diseño más limpio */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Asegurar que las cards en una fila tengan la misma altura */
    display: flex;
    flex-direction: column;
}
#servicios .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important; /* Sombra más pronunciada al pasar el ratón */
}
#servicios .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar contenido verticalmente */
    flex-grow: 1; /* Permitir que el body crezca para llenar el espacio */
}
#servicios .card-title {
     margin-bottom: 0.75rem; /* Espacio debajo del título */
}
#servicios .card-text {
    font-size: 0.9rem;
    color: var(--secondary-color);
    flex-grow: 1; /* Empujar el contenido hacia arriba si es necesario */
}

/* Sección Trabajos */
#trabajos .border {
    transition: box-shadow 0.3s ease;
}
#trabajos .border:hover {
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Sección Contacto (Mapa Responsivo) */
.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%; /* Ratio 16:9 */
    position:relative;
    height:0;
}
.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    border:0;
}

/* Color primario personalizado si es necesario */
.bg-primary {
    background-color: var(--primary-color) !important;
}
.text-primary {
    color: var(--primary-color) !important;
}
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%);
    border-color: darken(var(--primary-color), 10%);
}

/*--------------------------------------------------------------
# Botón Flotante WhatsApp
--------------------------------------------------------------*/
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--whatsapp-green);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* Tamaño del icono */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1030; /* Asegurar que esté por encima de la mayoría de elementos */
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none; /* Quitar subrayado si es un enlace */
}

.whatsapp-button:hover {
    transform: scale(1.1);
    background-color: darken(var(--whatsapp-green), 10%);
    color: white; /* Mantener color del icono */
}

/*--------------------------------------------------------------
# Banner GDPR Cookie
--------------------------------------------------------------*/
.cookie-consent-banner {
    z-index: 1050; /* Por encima de casi todo */
    /* display: none; es controlado por JS */
    transition: opacity 0.5s ease; /* Transición suave al aparecer/desaparecer */
}
/* Opcional: Clase para ocultar con transición */
.cookie-consent-banner.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Evitar interacción cuando está oculto */
}


/*--------------------------------------------------------------
# Responsive Design Adjustments
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
    body {
        padding-top: 58px; /* Ajustar si la altura de la navbar cambia en móvil */
    }
    section {
        padding: 40px 0;
    }
    #inicio {
         min-height: 60vh;
    }
    #inicio h1 {
        font-size: 2.5rem;
    }
     .whatsapp-button {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 767.98px) {
    .display-3 {
        font-size: 2.8rem;
    }
    .lead {
        font-size: 1rem;
    }
     .cookie-consent-banner .container {
        text-align: center;
    }
    .cookie-consent-banner p {
        margin-bottom: 1rem; /* Más espacio en móvil entre texto y botón */
    }
}

/*--------------------------------------------------------------
# Hero Section (#inicio)
--------------------------------------------------------------*/
.hero-section {
    min-height: 90vh; /* Puedes ajustar la altura */
    width: 100%;
    position: relative;
    display: flex; /* Asegura flexbox aunque ya esté en la clase HTML */
    align-items: center; /* Asegura alineación vertical */
    justify-content: center; /* Asegura alineación horizontal */
    /* --- La Imagen de Fondo --- */
    /* Ruta relativa desde la carpeta CSS a la carpeta de imágenes */
    background-image: url('../img/fondo.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* Efecto Parallax suave */
    padding: 80px 0; /* Espaciado interno */
}

/* --- Superposición Oscura (Overlay) --- */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente oscuro para mejorar legibilidad del texto blanco */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
    /* O un color sólido semi-transparente: */
    /* background-color: rgba(0, 0, 0, 0.65); */
    z-index: 1; /* Detrás del contenido */
}

/* Asegurar que el contenido del contenedor esté por encima del overlay */
.hero-section .container {
    position: relative; /* Ya estaba en el HTML, pero aseguramos */
    z-index: 2;
}

/* --- Estilos del Texto --- */
.hero-section h1 {
    /* display-2 ya es grande, podemos añadir más */
    text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.8); /* Sombra más pronunciada */
    letter-spacing: -1px; /* Unir un poco las letras */
    /* Efecto de entrada (sutil) */
    animation: fadeInDown 1s ease-out 0.2s;
    animation-fill-mode: backwards; /* Aplica estado inicial antes de animar */
}

.hero-section .hero-subtitle {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
    line-height: 1.6; /* Mejorar legibilidad */
     /* Efecto de entrada (sutil) */
    animation: fadeInUp 1s ease-out 0.5s;
    animation-fill-mode: backwards;
}

/* --- Resaltado de Sevilla --- */
.highlight-sevilla {
    color: #ffc107; /* Amarillo de Bootstrap (warning) - destaca bien */
    font-weight: 600; /* Un poco más de peso */
}

/* --- Botón --- */
.hero-section .btn {
     /* Efecto de entrada (sutil) */
    animation: fadeInUp 1s ease-out 0.8s;
    animation-fill-mode: backwards;
    padding: 12px 30px; /* Botón un poco más grande */
    font-size: 1.1rem;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Efecto al pasar el ratón */
}
.hero-section .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* --- Indicador de Scroll (Opcional) --- */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px; /* Distancia desde abajo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* Encima de todo */
    animation: bounce 2s infinite; /* Animación de rebote */
}

.scroll-down-indicator a i {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: color 0.3s ease;
}
.scroll-down-indicator a:hover i {
    color: var(--primary-color) !important; /* Cambia color al pasar el ratón */
}


/* --- Keyframes para Animaciones (si no los tienes ya) --- */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-25px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -15px); } /* Sube */
    60% { transform: translate(-50%, -7px); } /* Baja un poco */
}


/* --- Ajustes Responsive para el Hero --- */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: 75vh; /* Menos altura en móviles */
        background-attachment: scroll; /* Quitar parallax fijo en móvil (a veces da problemas) */
        padding: 60px 0;
    }
    .hero-section h1 {
        font-size: 2.6rem; /* Ajustar tamaño del título principal */
    }
    .hero-section .hero-subtitle {
        font-size: 1.1rem; /* Ajustar tamaño del subtítulo */
    }
    .hero-section .btn {
        padding: 10px 25px;
        font-size: 1rem;
    }
}

/* Elimina la regla de text-shadow anterior si la tenías directamente en #inicio h1 */
/* Busca esto y bórralo o coméntalo:
#inicio h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
*/
/* Elimina la regla de background anterior si la tenías directamente en #inicio */
/* Busca esto y bórralo o coméntalo:
#inicio {
     min-height: 80vh;
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x1080.png?text=Imagen+Fondo+Profesional') no-repeat center center;
     background-size: cover;
}
*/