/* ----------------------------
   RESET + TIPOGRAFÍA
---------------------------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; color:#333; background:#f9f9f9; line-height:1.6; }

/* ----------------------------
   HEADER
---------------------------- */
.header {
    width:100%;
    background:#1a1a1a;
    color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
.header-container {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    transition: all 0.3s ease;
}
.logo-area { display:flex; align-items:center; gap:15px; transition: all 0.3s ease; }
.logo { width:60px; border-radius:5px; transition: all 0.3s ease; }
.empresa h1 { font-size:1.3rem; color:#fff; font-family:'Poppins', sans-serif; transition: all 0.3s ease; }
.empresa p { font-size:0.85rem; color:#ccc; transition: all 0.3s ease; }
.nav a { margin-left:20px; font-weight:600; transition: all 0.3s; color:#fff; }
.nav a:hover { color:#ff8c00; }
.btn-nav { background:#ff8c00; color:#fff; padding:8px 16px; border-radius:5px; font-weight:600; transition: all 0.3s; }
.btn-nav:hover { background:#e07b00; }

/* ----------------------------
   HEADER SHRINK
---------------------------- */
.header.shrink {
    padding:5px 20px;
    background:#1a1a1acc;
}
.header.shrink .logo { width:40px; }
.header.shrink .empresa h1 { font-size:1rem; }
.header.shrink .empresa p { font-size:0.7rem; }
.header.shrink .nav a { margin-left:10px; font-size:0.85rem; }
.header.shrink .btn-nav { padding:5px 10px; font-size:0.85rem; }

/* ----------------------------
   HEADER OCULTO AL BAJAR
---------------------------- */
.header.hide {
    transform: translateY(-100%);
}

/* ----------------------------
   HERO
---------------------------- */
.hero { height:100vh; background:url('images/obra3.jpg') center/cover no-repeat; display:flex; align-items:center; justify-content:center; padding-top:80px; transition: all 0.3s ease; }
.hero-overlay { background:rgba(0,0,0,0.55); text-align:center; padding:40px 20px; border-radius:10px; }
.hero h2 { color:#fff; font-size:2.5rem; margin-bottom:15px; font-family:'Poppins', sans-serif;}
.hero p { color:#ddd; font-size:1.1rem; margin-bottom:25px; }
.btn-principal { background:#ff8c00; color:#fff; padding:12px 25px; border-radius:8px; font-weight:600; transition:0.3s; }
.btn-principal:hover { background:#e07b00; }

/* ----------------------------
   SOBRE NUESTRA EMPRESA
---------------------------- */
.empresa-section { padding:80px 20px; background:#fff; }
.empresa-container { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:30px;}
.empresa-texto { flex:1 1 500px; }
.empresa-titulo { font-family:'Poppins', sans-serif; font-size:2.2rem; margin-bottom:20px; color:#1a1a1a; }
.empresa-desc { font-size:1rem; color:#555; margin-bottom:15px; line-height:1.5; }
.empresa-img { flex:1 1 400px; text-align:center;}
.empresa-img img { width:100%; border-radius:15px; box-shadow:0 8px 25px rgba(0,0,0,0.15); }

/* ----------------------------
   SERVICIOS
---------------------------- */
.servicios { padding:80px 20px; background:#f4f4f4; text-align:center; }
.titulo { font-size:2rem; margin-bottom:40px; color:#1a1a1a; font-family:'Poppins', sans-serif; }
.servicios-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:25px;}
.servicio-card { background:#fff; padding:25px; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:0.3s; }
.servicio-card h3 { color:#ff8c00; margin-bottom:15px; font-family:'Poppins', sans-serif;}
.servicio-card p { color:#555; font-size:0.95rem; }
.servicio-card:hover { transform:translateY(-5px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }

/* ----------------------------
   GALERÍA
---------------------------- */
.galeria-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:15px;}
.galeria-grid img { width:100%; height:200px; object-fit:cover; border-radius:10px; transition:0.3s;}
.galeria-grid img:hover { transform:scale(1.05); }

/* ----------------------------
   PROCESO
---------------------------- */
.proceso { padding:80px 20px; background:#f4f4f4; text-align:center;}
.proceso-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:25px; margin-top:40px; }
.paso { background:#fff; padding:25px; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:0.3s;}
.paso span { display:inline-block; font-size:1.5rem; font-weight:700; color:#ff8c00; margin-bottom:15px;}
.paso h4 { margin-bottom:10px; color:#1a1a1a; }
.paso p { color:#555;}
.paso:hover { transform:translateY(-5px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }

/* ----------------------------
   CONTACTO + MAPA
---------------------------- */
.contacto { padding:100px 20px; background:linear-gradient(135deg,#f4f4f4 0%,#fff 100%);}
.contacto-container { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:30px; align-items:center; }
.contacto-info { flex:1 1 400px; background:#fff; padding:40px 30px; border-radius:15px; box-shadow:0 8px 25px rgba(0,0,0,0.15); transition:transform 0.3s;}
.contacto-info:hover { transform:translateY(-5px);}
.contacto-info h3 { color:#1a1a1a; margin-bottom:20px; font-size:1.8rem; font-family:'Poppins', sans-serif; }
.contacto-info .telefono { font-weight:700; color:#ff8c00; margin-bottom:15px; font-size:1.1rem; }
.contacto-info p { margin-bottom:25px; color:#555; line-height:1.5; }
.btn-whatsapp { display:inline-block; background:#25d366; color:#fff; padding:14px 28px; border-radius:12px; font-weight:700; font-size:1.1rem; transition:0.3s;}
.btn-whatsapp:hover { background:#1ebe57; }
.contacto-img { flex:1 1 400px; border-radius:15px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.15);}
.contacto-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s;}
.contacto-img img:hover { transform:scale(1.05);}
.mapa-container { margin-top:30px; border-radius:15px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.15); }

/* ----------------------------
   BOTÓN WHATSAPP
---------------------------- */
.whatsapp-float { position:fixed; bottom:30px; right:30px; background:#25d366; color:#fff; font-size:2rem; padding:15px 18px; border-radius:50%; box-shadow:0 4px 15px rgba(0,0,0,0.2); z-index:999; transition:0.3s;}
.whatsapp-float:hover { transform:scale(1.1); }

/* ----------------------------
   FOOTER
---------------------------- */
.footer { background:#1a1a1a; color:#ccc; text-align:center; padding:20px 10px; font-size:0.9rem; }

/* ----------------------------
   RESPONSIVE
---------------------------- */
@media(max-width:768px){
    /* Header vertical en móviles */
    .header-container {
        flex-direction: column;
        align-items: center;
        padding: 10px 15px;
    }

    .logo-area {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin-bottom: 10px;
    }

    .empresa h1 { font-size: 1.2rem; text-align:center; }
    .empresa p { font-size: 0.8rem; text-align:center; }

    .nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; }
    .nav a { margin:5px; font-size:0.9rem; }
    .btn-nav { padding:6px 12px; font-size:0.9rem; }

    .hero h2 { font-size:1.8rem; }
    .hero p { font-size:0.95rem; }
    .btn-principal { padding:10px 20px; font-size:0.95rem; }

    .empresa-container,
    .contacto-container { flex-direction: column; }

    .contacto-info,
    .contacto-img { flex: 1 1 100%; }
    .contacto-info { padding:30px 20px; }
    .btn-whatsapp { width:100%; text-align:center; }
}