/* Variables de color (Actualizadas al nuevo diseño corporativo) */
:root {
    --primary-blue: #002b5c; /* Azul marino profundo */
    --primary-green: #39b54a; /* Verde brillante */
    --dark-text: #2C3E50;
    --light-bg: #F8F9F9;
    --white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--dark-text);
    line-height: 1.6;
}

h1, h2, h3, .logo span {
    font-family: 'Merriweather', serif;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* =========================================
   NAVEGACIÓN (NUEVA CABECERA AZUL OSCURA)
   ========================================= */
/* Contenedor del logo dentro del héroe */
.hero-logo-box {
    position: absolute; /* Lo saca del bloque de texto para moverlo por libre */
    top: 110px;  /* Ajusta la altura: a menos píxeles */
    left: 5%;    /* Ajusta la izquierda: a menos %, más pegado al borde */
    z-index: 10; /* Asegura que flote por encima del fondo */
}

/* Estilo para el logo en el interior del degradado */
.hero-logo-interior {
    height: 220px; /* Tamaño del Logo*/
    width: auto;
    filter: brightness(140%);
    transition: transform 0.3s ease;
}

.hero-logo-interior:hover {
    transform: scale(1.03); /* Efecto sutil al pasar el ratón */
}

/* Ajuste de espacio para que el contenido empiece un poco más abajo del menú */
.hero-centrado {
    position: relative; 
}
/* =========================================
   NAVEGACIÓN (MENÚ A LA DERECHA CON DEGRADADO)
   ========================================= */
.header {
    background: linear-gradient(
        to right, 
        rgba(0, 43, 92, 0.95) 0%, 
        rgba(28, 218, 53, 0.85) 100%
    );
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(26, 217, 70, 0.5);
}

/* =========================================
   NAVEGACIÓN (BANDA AZUL SÓLIDA + DEGRADADO)
   ========================================= */
.header {
    /* La franja inferior con el degradado azul-verde */
    background: linear-gradient(
        to right, 
        rgba(13, 51, 94, 0.95) 0%, 
        rgba(8, 242, 207, 0.762) 100%
    );

       
   /*Un borde superior grueso que hace de rectángulo azul sólido */
    border-top: 35px solid #002b5c; 
    
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.navbar {
    display: flex;
    justify-content: flex-end; /* Mantiene los enlaces a la derecha */
    align-items: center;
    padding: 18px 0;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--white); 
    margin-left: 30px; /* Espacio a la izquierda para que el último elemento quede perfecto en el borde derecho */
    font-weight: 600;
    transition: color 0.3s;
    text-transform: uppercase;
    font-size: 1.05rem;
}

.nav-links a:hover {
    color: #e0e0e0; 
}

.menu-toggle {
    display: none;
    font-size: 1.8rem;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
}

/* =========================================
   HERO SECTION (DEGRADADO AZUL A VERDE)
   ========================================= */
.hero, .hero-centrado {
    background: linear-gradient(
        to bottom, 
        rgba(0, 43, 92, 0.85) 0%, 
        rgba(8, 242, 207, 0.762) 100%
    ), url('../imagenes/valladolid.jpeg') center/cover no-repeat; 
    
    
    color: var(--white);
    text-align: center;
    padding-top: 180px; /* Más espacio arriba para que el nuevo logo grande no tape el título */
    padding-bottom: 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero h1, .hero-title {
    font-size: 3.5rem;
    margin: 0 auto 20px auto; /* Centramos el bloque de texto horizontalmente */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5); 
    line-height: 1.2;
    max-width: 900px;
}

.hero p, .hero-subtitle {
    font-size: 1.3rem;
    margin: 0 auto 40px auto; /* Centramos el bloque del subtítulo horizontalmente */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    max-width: 800px;
}

.btn-primary, .btn-presupuesto-verde {
    display: inline-block;
    background: linear-gradient(to bottom, #4ade80, #22c55e); 
    color: var(--white);
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 auto; /* Centramos también el botón  */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.btn-primary:hover, .btn-presupuesto-verde:hover {
    transform: scale(1.05);
}

/* Grid Servicios (Forzado a 3 columnas) */
.grid-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* La magia: 3 columnas exactamente iguales */
    gap: 30px;
}

/* Ajuste para Tablets (pantallas medianas) */
@media (max-width: 992px) {
    .grid-servicios {
        grid-template-columns: repeat(2, 1fr); /* Pasa a 2 columnas para no aplastar el texto */
    }
}

/* Ajuste para Móviles (pantallas pequeñas) */
@media (max-width: 768px) {
    .grid-servicios {
        grid-template-columns: 1fr; /* 1 sola columna hacia abajo en móviles */
    }
}

.card-servicio {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
    border-bottom: 4px solid var(--primary-green);
}

/* =========================================
   ESTILOS MINIMALISTAS (FONT AWESOME VERDES)
   ========================================= */

/* Estilo base para todos los iconos dentro del grid */
.icono-minimalista {
    font-size: 3.5rem; /* Tamaño grande y vistoso */
    color: #39b54a;    /* Verde corporativo */
    margin-bottom: 20px; /* Separación perfecta con el título h3 */
    display: inline-block; /* Para que los márgenes funcionen correctamente */
    transition: transform 0.3s ease; /* Pequeña animación para el hover */
}

/* Efecto elegante al pasar el ratón por la tarjeta */
.card-servicio:hover .icono-minimalista {
    transform: scale(1.1) translateY(-5px); /* El icono crece y sube un pelín */
}

/* Asegurar que el contenido de la card está centrado */
.card-servicio {
    text-align: center;
   
}

/* Contacto */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 40px;
    line-height: 2.5;
}

/* =========================================
   FONDO SECCIÓN DE CONTACTO (DEGRADADO)
   ========================================= */
#contacto {
    /* Degradado lineal: hacia la derecha (to right) 
       Empieza en verde corporativo y termina en azul marino */
    background: linear-gradient(to right, rgba(14, 195, 168, 0.762), #002b5c);
    
    /* Aseguramos que el fondo cubra todo el espacio sin cortarse */
    background-size: cover;
    background-position: center;
}


/* Contenedor de cada pareja (icono + texto) */
.contacto-item {
    display: flex;
    align-items: center; /* Centra el texto verticalmente con el icono */
    gap: 15px; /* Separación horizontal entre el icono y las letras */
    margin-bottom: 20px; /* Separación vertical entre teléfono, email y ubicación */
}

/* Control estricto del tamaño de los iconos */
.icono-contacto {
    width: 35px;
    height: 35px;
    object-fit: contain;
    flex-shrink: 0; /* Evita que el navegador encoja la imagen si la pantalla es muy pequeña */
}

/* Limpieza de márgenes para que la alineación no se rompa */
.contacto-item p {
    margin: 0;
    font-size: 1.1rem;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.formulario input, .formulario select, .formulario textarea {
    padding: 12px;
    border: 1px solid #ccc; /* Añadido borde sutil para visibilidad */
    border-radius: 5px;
    font-family: inherit;
}


footer {
    background-color: var(--primary-blue); /* Ajustado al nuevo azul */
    color: var(--white);
    text-align: center;
    padding: 20px 0;
}



/* =========================================
   SECCIONES GENERALES 
   ========================================= */
.section {
    padding: 80px 0;
}

.section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--primary-blue);
}

.section-subtitle {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.bg-light { background-color: var(--light-bg); }
.bg-dark { background-color: var(--primary-blue); }
.text-white { color: var(--white); }
.text-white h2, .text-white h3 { color: var(--white); }


/* =========================================
   SECCIÓN DE GALERÍA
   ========================================= */
#galeria {
    background: linear-gradient(to right, #39b54a, #002b5c);
    padding: 80px 0; /* Mantiene el aire arriba y abajo de la sección */
    background-size: cover;
    background-position: center;
}

/* Título principal de la galería */
#galeria h2 {
    color: #ffffff;
    text-align: center;
    margin-bottom: 50px; /* Separación con la cuadrícula de fotos */
    font-size: 2.5rem;
}

/* =========================================
   CABECERA DE LA GALERÍA (Logo sobre degradado)
   ========================================= */

/* 1. Hacemos la franja blanca totalmente transparente y flotante */
.cabecera-galeria { 
    background-color: transparent !important; /* Fuerza a quitar el blanco */
    position: absolute; /* Saca la cabecera del flujo normal... */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* la superpone por encima del degradado */
    padding: 15px 5%; /* Un poco de espacio a los lados */
}

/* 2. Ajustamos el tamaño del logo para que quede elegante a la izquierda */
.cabecera-galeria img {
    max-width: 220px; 
    filter: brightness(140%);
    height: auto;
}

/* 3. Damos espacio al degradado para que el título no quede tapado por el logo */
#galeria { 
    padding-top: 120px; /* Empuja el texto "Nuestros Trabajos" hacia abajo */
}

/* Textos descriptivos debajo de las fotos */
#galeria p {
    color: #f8f9fa; /* Blanco suave */
    text-align: center;
}

.grid-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.item-galeria {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    height: 250px; 
    margin: 0;
}

.item-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease;
    display: block;
}

.item-galeria:hover img {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0, 43, 92, 0.9)); /* Ajustado al nuevo azul */
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-galeria:hover .overlay {
    opacity: 1;
}

.overlay span {
    color: var(--white);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Galería y Reseñas index*/
.grid-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-bottom: 50px;
}

.foto-galeria img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.resenas-container {
    background: var(--light-bg);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    font-style: italic;
}

/* =========================================
   RESEÑAS PUBLICADAS (TARJETAS ESTÁTICAS)
   ========================================= */
.grid-resenas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px; /* Separación entre opiniones */
    max-width: 800px;
    margin: 0 auto 50px auto; /* Centrado y separado del formulario de abajo */
}

.tarjeta-resena {
    text-align: left;
    padding-left: 20px;
    border-left: 4px solid #39b54a; /* Línea verde corporativa */
}

.tarjeta-resena .estrellas {
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.tarjeta-resena .comentario {
    font-style: italic;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 10px;
}

.tarjeta-resena .autor {
    display: block;
    font-weight: bold;
    color: #002b5c;
    font-size: 0.95rem;
}

/* --- FORMULARIO DE RESEÑAS --- */
.nueva-resena-container {
    background-color: var(--light-bg);
    padding: 40px;
    border-radius: 8px;
    margin-top: 50px;
    border: 2px dashed #bdc3c7;
    text-align: center;
}

.nueva-resena-container h3 {
    margin-bottom: 20px;
    color: var(--primary-blue);
}

.nueva-resena-container .formulario {
    max-width: 600px;
    margin: 0 auto;
}

/* Animación para que las nuevas reseñas aparezcan suavemente */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.tarjeta-resena.nueva {
    animation: aparecer 0.5s ease-out forwards;
    border-left-color: #f1c40f; 
}

/* =========================================
   AÑADIDO: ESTILO RECTANGULAR Y ESTRELLAS
   ========================================= */

/* 1. Estrellas amarillas para los comentarios fijos */
.estrellas-amarillas {
    color: #FFC107; /* Amarillo dorado */
    font-size: 1.3rem;
    letter-spacing: 2px;
}

/* 2. Convertir los campos a rectangulares y darles estilo */
.nueva-resena-container .formulario input,
.nueva-resena-container .formulario select,
.nueva-resena-container .formulario textarea {
    border-radius: 4px; /* Esquinas rectangulares */
    border: 1px solid #ced4da;
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
    font-family: inherit;
    background-color: #ffffff; /* Asegura fondo blanco dentro del campo */
}

/* 3. Textarea más grande por defecto */
.nueva-resena-container .formulario textarea {
    min-height: 120px;
    resize: vertical; /* Solo permite estirar hacia abajo */
}

/* 4. Efecto profesional al hacer clic (verde corporativo) */
.nueva-resena-container .formulario input:focus,
.nueva-resena-container .formulario select:focus,
.nueva-resena-container .formulario textarea:focus {
    outline: none;
    border-color: #39b54a; /* Tu verde */
    box-shadow: 0 0 5px rgba(57, 181, 74, 0.3);
}

/* =========================================
   BOTÓN FLOTANTE "VOLVER AL INICIO"
   ========================================= */

/* Fija el botón abajo a la derecha para que siempre esté accesible al hacer scroll */
.btn-flotante-volver {
    position: fixed;
    bottom: 30px; /* Distancia desde abajo */
    right: 30px;  /* Distancia desde la derecha */
    z-index: 999; /* Siempre por encima de las fotos */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Sombra para darle profundidad */
    border-radius: 50px; /* Bordes redondeados modernos */
    padding: 12px 25px;
    font-weight: bold;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Efecto al pasar el ratón */
.btn-flotante-volver:hover {
    transform: translateY(-3px) scale(1.05); /* Se eleva un poquito */
}



/************************************/
/* --- NOTIFICACIONES VISUALES (TOASTS) --- */
/************************************/
.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.toast {
    min-width: 280px;
    padding: 15px 20px;
    border-radius: 8px;
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.mostrar {
    opacity: 1;
    transform: translateX(0);
}

.toast-error {
    background-color: #E74C3C;
    border-left: 6px solid #C0392B;
}

.toast-exito {
    background-color: var(--primary-green);
    border-left: 6px solid #27AE60;
}





/* =========================================
   POLÍTICA DE PRIVACIDAD (DEGRADADO Y JUSTIFICADO)
   ========================================= */

/* 1. Fondo degradado para toda la sección */
.seccion-privacidad {
    background: linear-gradient(to right, #39b54a, #002b5c);
    padding: 60px 0;
    min-height: 100vh; /* Garantiza que cubra toda la pantalla hacia abajo */
}

/* 2. Forzamos que todos los títulos sean blancos */
.seccion-privacidad h2,
.seccion-privacidad h3 {
    color: #ffffff;
    margin-bottom: 20px;
    margin-top: 30px;
}

/* Opcional: Centrar el título principal */
.seccion-privacidad h2 {
    text-align: center;
    font-size: 2.5rem;
    padding-top: 120px; 
}



/* 3. Textos justificados y fáciles de leer */
.texto-legal p,
.texto-legal li,
.fecha-actualizacion {
    color: #f8f9fa; 
    text-align: justify; /* Justificado de izquierda a derecha */
    line-height: 1.8; /* Interlineado amplio típico de textos legales */
    font-size: 1.05rem;
    margin-bottom: 15px;
}

/* 4. Separación de la lista para que se vea ordenada */
.texto-legal ul {
    margin-left: 20px;
    margin-bottom: 25px;
}

/* =========================================
   BOTÓN ACEPTAR (POLÍTICA DE PRIVACIDAD)
   ========================================= */

.contenedor-aceptar {
    text-align: center; /* Centramos el botón */
    margin-top: 50px;   /* Le damos un buen espacio de separación con el texto */
    margin-bottom: 20px;
}

.btn-aceptar {
    background-color: #39b54a; /* Verde corporativo */
    color: #ffffff;
    padding: 12px 40px; /* Un botón ancho y fácil de clickear */
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none; /* Quitamos el subrayado del enlace */
    border-radius: 8px; /* Bordes redondeados para mantener el estilo */
    display: inline-block;
    transition: all 0.3s ease; /* Transición suave para el hover */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Una pequeña sombra elegante */
}

/* Efecto al pasar el ratón por encima */
.btn-aceptar:hover {
    background-color: #2e963b; /* Un verde más oscuro */
    transform: translateY(-2px); /* El botón se eleva un poco */
    color: #ffffff;
}

/* =========================================
   RESPONSIVE (MÓVILES)
   ========================================= */
@media (max-width: 1024px) {
    /* 1. Solución al amontonamiento: Devolver el logo a su sitio */
    .hero-logo-box {
        position: relative; /* Le quita el modo "flotante" */
        top: 0;
        left: 0;
        margin: 0 auto 20px auto; /* Lo centra y le da margen por debajo */
        text-align: center;
    }

    .hero-logo-interior {
        height: 120px; /* Un poco más pequeño para que no ocupe media pantalla */
    }

    .hero-centrado {
        padding-top: 150px; /* Ajustamos el aire de arriba para móvil */
    }

    .hero-title {
        font-size: 2.2rem;
    }

    /* 2. Solución al menú hamburguesa invisible */
    .menu-toggle {
        display: block; /* Muestra el contenedor */
        margin-right: 20px;
    }

    /* Dibujamos las 3 rayitas blancas de la hamburguesa */
    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: var(--white); 
        transition: all 0.3s ease;
    }

    /* 3. Ocultar los enlaces normales (se verán al abrir el menú) */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%; /* Se despliega justo debajo de la cabecera */
        left: 0;
        background-color: rgba(0, 43, 92, 0.98); /* Fondo azul marino sólido */
        padding: 0;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        margin: 0;
        padding: 15px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        display: block;
    }

    /* Resto de secciones en móvil */
    .contacto-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   AJUSTES MÓVILES PARA LA GALERÍA
   ========================================= */
@media screen and (max-width: 768px) {
    /* 1. Damos más espacio al contenedor para que el texto baje y no choque con el logo */
    #galeria {
        padding-top: 180px; 
    }

    /* 2. Reducimos el logo un poco en móviles para que no se coma la pantalla */
    .cabecera-galeria img {
        max-width: 150px; 
    }
    
    /* 3. Centramos el logo para que quede mejor en móvil*/
    .cabecera-galeria .nav-container {
        display: flex;
        justify-content: center;
    }
}