* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #f4f4f4;
    color: #333;
}


.header {
    /* El degradado va de izquierda (2c80c9) a derecha (80b9e7) */
    background: linear-gradient(to right, #2c80c9, #a6d5f4);
    
    /* Cambié el color de texto a blanco para que resalte más sobre el azul fuerte */
    color: white; 
    
    padding: 0px; /* Ajusté el padding para que respire el contenido */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

/* Para que los párrafos dentro del header no hereden el gris oscuro que tenías */
.header-texto p {
    color: #f0f0f0;
    margin: 5px 0;
}

.logo {
    width: 265px; /* ajusta según tu logo */
    height: 170px;
}

.header-texto {
    text-align: left;
}

.telefono {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        text-align: center;
    }

    .header-texto {
        text-align: center;
    }
}

.hero {
    width: 100%;
    height: 650px;
    border: 4px solid #fff;

    animation-name: imagenesinicio;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    background-size: cover;
    background-position: center;

    /* 👇 CENTRADO DEL CONTENIDO */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra vertical */
    align-items: center;     /* centra horizontal */
    text-align: center;

    color: white;
}

@keyframes imagenesinicio{
    0% {
        background-image: url("imagenes/PLAFON1.png");
    }
    50% {
        background-image: url("imagenes/PLAFON2.png");
    }
    100% {
        background-image: url("imagenes/PLAFON3.png");
    }
}




.hero h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.subtitulo {
    letter-spacing: 5px;
    margin-bottom: 20px;
 
}


.boton {
    background: #84bce8;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px; /* 👈 bordes redondos */
}

.boton:hover {
    background: #1067b5;
    transform: scale(1.05);
    transition: 0.3s;
}


/* SECCIONES */
section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: auto;
}

h2 {
    margin-bottom: 20px;
    text-align: center;
}



/* PROYECTOS */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}


/* Estilo base que ya tienes con la transición añadida */
.Servicios1 {
    background: white;
    padding: 30px;
    text-align: center;
    border: 1px solid #ddd;
    transition: all 0.3s ease; /* Esto hace que el efecto sea suave y no brusco */
    cursor: pointer;
}

/* Efecto al pasar el mouse */
.Servicios1:hover {
    background: /*#ccd2d5*/#ced2d5; /* Un cambio sutil de fondo */
    border-color: #9ca2a8; /* Color amarillo/dorado (común en electricidad/obra) */
    transform: translateY(-8px); /* La tarjeta sube ligeramente */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* Sombra para dar profundidad */
}

/* Opcional: Resaltar el texto del título al pasar el mouse */
.Servicios1:hover {
    color: #333;
    font-weight: bold;
}



.galeriaimagenes {
    /* Usamos 3 columnas de igual ancho (1fr) */
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px;
    /* Centramos el contenido de las celdas */
    align-items: center;
    justify-items: center;
}

.proyecto {
    background: white;
    padding: 0; 
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 100%; /* Asegura que el div ocupe todo su espacio en la celda */
    /* Define una altura fija si quieres celdas exactamente del mismo tamaño */
    height: 280px; /* Ajusta este valor a tu gusto */
}

.proyecto img {
    width: 100%;
    height: 100%; /* La imagen llenará la altura fija del contenedor */
    /* Usa object-fit: cover para recortar la imagen y que cubra todo el espacio sin distorsionarse */
    object-fit: cover; 
    display: block; 
}
/* Efecto hover */
.proyecto:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}



/* FOOTER */
.footer {
    background: #596570;
    color: white;
    text-align: center;
    padding: 30px 20px;
}

.autor {
    margin-top: 15px;
    font-weight: bold;
}


/*Estilo de imagenes */
/* Estilo del fondo (negro semitransparente) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija para cubrir toda la pantalla */
  z-index: 100; /* Alto z-index para estar por encima de todo */
  padding-top: 100px; /* Ubicación en la parte superior */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  overflow: auto; /* Habilitar scroll si es necesario */
  background-color: rgb(0,0,0); /* Fondo negro */
  background-color: rgba(0,0,0,0.9); /* Fondo negro con opacidad */
}

/* Imagen dentro de la modal */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80vh; /* Limita la altura para que quepa en la pantalla */
  object-fit: contain; /* Asegura que la imagen completa sea visible */
}

/* El botón de cerrar (x) */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
}

/* Animación para que aparezca fluidamente */
@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}

.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

/*SEGUNDO CODIGO DE ESTILO IMAGEN */
/* Estilos para las flechas (anterior y siguiente) */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 25px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  /* Ocultas por defecto, se mostrarán con JS si es necesario */
  display: none; 
}

/* Posicionar la flecha "siguiente" a la derecha */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Cambiar el color de fondo al pasar el cursor */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Asegura que las flechas se muestren cuando la modal está visible */
.modal.visible .prev, 
.modal.visible .next {
    display: block;
}
/*ADAPTACIÓN A LAS PANTALLAS DE DIFERENTES DISPOSITIVOS */
/* --- ADAPTACIONES PARA MÓVILES Y TABLETS --- */

/* Tablets (Pantallas menores a 1024px) */
@media (max-width: 1024px) {
    .galeriaimagenes {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
        gap: 10px;
    }
    
    .hero {
        height: 500px; /* Reducción de altura para mejor proporción */
    }

    .hero h2 {
        font-size: 28px;
    }
}

/* Celulares (Pantallas menores a 600px) */
@media (max-width: 600px) {
    .header {
        padding: 20px 10px;
    }

    .logo {
        width: 180px; /* Logo más pequeño en celulares */
        height: auto;
    }

    .hero {
        height: 400px; /* Altura más cómoda para móviles */
    }

    .hero h2 {
        font-size: 24px;
        padding: 0 10px;
    }

    .subtitulo {
        letter-spacing: 2px; /* Reducción de espacio para que no se corte el texto */
        font-size: 14px;
    }

    .galeriaimagenes {
        grid-template-columns: repeat(1, 1fr); /* 1 sola columna en celulares */
    }

    .proyecto {
        height: 220px; /* Ajuste de altura de imagen en móvil */
    }

    .modal-content {
        width: 95%; /* La imagen ocupa casi todo el ancho en el celular */
    }

    .prev, .next {
        padding: 10px;
        font-size: 18px; /* Flechas más pequeñas para no estorbar */
    }

    section {
        padding: 25px 15px; /* Menos espacio lateral */
    }
}