/*====================================================

        RS CONSTRUCCIÓN Y MANTENIMIENTO
        CSS PROFESIONAL 2026

====================================================*/


/*==========================
      GOOGLE FONT
==========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



/*==========================
        VARIABLES
==========================*/

:root{

    --color-principal:#d4a017;

    --color-secundario:#1f1f1f;

    --color-fondo:#f5f5f5;

    --color-blanco:#ffffff;

    --color-gris:#666;

    --color-texto:#222;

    --sombra:0 12px 30px rgba(0,0,0,.10);

    --radio:16px;

    --transicion:.35s;

}



/*==========================
          RESET
==========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    background:var(--color-fondo);

    color:var(--color-texto);

    overflow-x:hidden;

    line-height:1.6;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}



section{

    padding:90px 8%;

}



h1,h2,h3{

    font-weight:700;

}



.titulo-seccion{

    display:inline-block;

    color:var(--color-principal);

    font-size:.9rem;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:15px;

}



.subtitulo{

    max-width:750px;

    margin:20px auto 50px;

    color:var(--color-gris);

}



/*==========================
      TOP BAR
==========================*/

.top-bar{

    background:#111;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 8%;

    font-size:.90rem;

    flex-wrap:wrap;

    gap:10px;

}

.top-bar a{

    color:white;

}



/*==========================
         HEADER
==========================*/

header{

    background:white;

    position:sticky;

    top:0;

    z-index:999;

    box-shadow:0 4px 20px rgba(0,0,0,.05);

}



.header-contenido{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 8%;

}



.logo{

    display:flex;

    align-items:center;

    gap:18px;

}



.logo img{

    width:70px;

}



.logo h1{

    font-size:1.45rem;

    color:#222;

}



.logo span{

    color:#777;

    font-size:.9rem;

}



nav{

    display:flex;

    gap:30px;

}



nav a{

    font-weight:600;

    transition:.3s;

    position:relative;

}



nav a:hover{

    color:var(--color-principal);

}



nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-principal);

    transition:.3s;

}



nav a:hover::after{

    width:100%;

}



/*==========================
          HERO
==========================*/

.hero{

    min-height:85vh;

    background:
    linear-gradient(rgba(0,0,0,.70),
    rgba(0,0,0,.65)),
    url("imagenes/obra7.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    color:white;

}



.hero-contenido{

    max-width:700px;

}



.hero-subtitulo{

    display:inline-block;

    background:rgba(255,255,255,.12);

    padding:10px 20px;

    border-radius:50px;

    margin-bottom:25px;

    backdrop-filter:blur(10px);

}



.hero h2{

    font-size:3.6rem;

    line-height:1.1;

    margin-bottom:25px;

}



.hero p{

    font-size:1.1rem;

    color:#e5e5e5;

    margin-bottom:35px;

}



/*==========================
     HERO ETIQUETAS
==========================*/

.hero-etiquetas{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:40px;

}



.hero-etiquetas span{

    background:white;

    color:#222;

    padding:10px 18px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

}



/*==========================
      BOTONES
==========================*/

.hero-botones{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:60px;

}



.btn-principal{

    background:var(--color-principal);

    color:white;

    padding:16px 34px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}



.btn-principal:hover{

    transform:translateY(-5px);

    box-shadow:var(--sombra);

}



.btn-secundario{

    border:2px solid white;

    color:white;

    padding:16px 34px;

    border-radius:40px;

    transition:.3s;

}



.btn-secundario:hover{

    background:white;

    color:#222;

}



/*==========================
     HERO DATOS
==========================*/

.hero-datos{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.hero-datos div{

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(8px);

    padding:20px;

    border-radius:var(--radio);

}/*====================================================

            SECCIÓN NOSOTROS

====================================================*/

.nosotros{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    background:white;

}

.nosotros-texto h2{

    font-size:2.6rem;

    margin:20px 0;

    color:var(--color-secundario);

}

.nosotros-texto p{

    margin-bottom:25px;

    color:var(--color-gris);

    font-size:1.05rem;

    text-align:justify;

}

.nosotros-texto ul{

    margin-top:30px;

}

.nosotros-texto li{

    margin-bottom:18px;

    font-weight:500;

    color:#333;

}

.nosotros-imagen{

    display:flex;

    justify-content:center;

}

.nosotros-imagen img{

    width:100%;

    max-width:560px;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    transition:var(--transicion);

}

.nosotros-imagen img:hover{

    transform:scale(1.03);

}





/*====================================================

                SERVICIOS

====================================================*/

.servicios{

    text-align:center;

    background:#f8f8f8;

}

.servicios h2{

    font-size:2.6rem;

    margin:15px 0;

}

.contenedor{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.card{

    background:white;

    padding:40px 30px;

    border-radius:18px;

    box-shadow:0 12px 25px rgba(0,0,0,.06);

    transition:.35s;

    border-top:5px solid transparent;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

    border-top:5px solid var(--color-principal);

}

.card h3{

    font-size:1.35rem;

    margin-bottom:20px;

    color:var(--color-secundario);

}

.card p{

    color:var(--color-gris);

    line-height:1.8;

}





/*====================================================

                CLIENTES

====================================================*/

.clientes{

    background:white;

    text-align:center;

}

.clientes h2{

    font-size:2.5rem;

    margin:15px 0 50px;

}

.clientes-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.cliente{

    background:#fafafa;

    padding:45px;

    border-radius:18px;

    border-left:6px solid var(--color-principal);

    transition:.35s;

    box-shadow:0 8px 18px rgba(0,0,0,.05);

}

.cliente:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 28px rgba(0,0,0,.12);

}

.cliente h3{

    font-size:1.6rem;

    margin-bottom:18px;

    color:var(--color-principal);

}

.cliente p{

    color:var(--color-gris);

    line-height:1.8;

}





/*====================================================

            ¿POR QUÉ ELEGIRNOS?

====================================================*/

.ventajas{

    background:#f4f4f4;

    text-align:center;

}

.ventajas h2{

    font-size:2.5rem;

    margin:15px 0 50px;

}

.ventajas-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.ventaja{

    background:white;

    padding:40px 30px;

    border-radius:18px;

    transition:.35s;

    box-shadow:0 10px 20px rgba(0,0,0,.06);

}

.ventaja:hover{

    transform:translateY(-10px);

    background:var(--color-principal);

    color:white;

}

.ventaja:hover h3{

    color:white;

}

.ventaja:hover p{

    color:white;

}

.ventaja h3{

    margin-bottom:18px;

    font-size:1.3rem;

    color:var(--color-secundario);

    transition:.35s;

}

.ventaja p{

    color:var(--color-gris);

    transition:.35s;

    line-height:1.8;

}





/*====================================================

            ANIMACIONES

====================================================*/

.card,
.cliente,
.ventaja,
.nosotros-imagen img{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}/*====================================================

                GALERÍA

====================================================*/

.galeria{

    background:#fff;

    text-align:center;

}

.galeria h2{

    font-size:2.6rem;

    margin:15px 0;

}

.galeria-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:60px;

}

.foto{

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 12px 25px rgba(0,0,0,.08);

    cursor:pointer;

    position:relative;

}

.foto img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.6s;

}

.foto:hover img{

    transform:scale(1.12);

}

.foto::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

    opacity:0;

    transition:.4s;

}

.foto:hover::after{

    opacity:1;

}



/*====================================================

            ESTADÍSTICAS

====================================================*/

.dato{

    padding:35px;

}

.dato h2{

    font-size:2.8rem;

    color:var(--color-principal);

    margin-bottom:15px;

}

.dato p{

    color:#ddd;

    font-size:1rem;

}



/*====================================================

                CONTACTO

====================================================*/

.contacto{

    background:linear-gradient(135deg,#222,#111);

    color:white;

    text-align:center;

}

.contacto h2{

    font-size:2.7rem;

    margin:20px 0;

}

.contacto p{

    max-width:700px;

    margin:auto;

    color:#ddd;

    margin-bottom:45px;

    line-height:1.8;

}

.botones-contacto{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.botones-contacto a{

    min-width:220px;

    text-align:center;

}



/*====================================================

                FOOTER

====================================================*/

footer{

    background:#111;

    color:white;

}

.footer-contenedor{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    padding:70px 8%;

}

.footer-col h3{

    margin-bottom:25px;

    color:var(--color-principal);

}

.footer-col p{

    color:#bbb;

    line-height:1.9;

}

.footer-col ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-col li{

    color:#bbb;

    transition:.3s;

}

.footer-col li:hover{

    color:var(--color-principal);

    padding-left:10px;

}

.footer-col a{

    color:#bbb;

}

.footer-col a:hover{

    color:var(--color-principal);

}

.copyright{

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    padding:25px;

    color:#888;

}



/*====================================================

        BOTÓN WHATSAPP

====================================================*/

.whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    color:white;

    box-shadow:0 12px 25px rgba(0,0,0,.25);

    z-index:999;

    transition:.3s;

    animation:pulse 2s infinite;

}

.whatsapp:hover{

    transform:scale(1.1);

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}
.galeria-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}.foto img{height:260px;border-radius:14px;}

/*====================================================

        ADAPTACION PARA CELULARES Y TABLETS

====================================================*/

body{

    width:100%;

}

body,
header,
section,
footer{

    max-width:100%;

}

.header-contenido,
.top-bar,
.hero-contenido,
.nosotros,
.contenedor,
.clientes-grid,
.ventajas-grid,
.galeria-grid,
.footer-contenedor{

    min-width:0;

}

@media (max-width:980px){

    section{

        padding:70px 6%;

    }

    .top-bar{

        justify-content:center;

        text-align:center;

    }

    .header-contenido{

        flex-direction:column;

        align-items:center;

        gap:18px;

        padding:18px 6%;

    }

    .logo{

        justify-content:center;

        text-align:left;

        width:100%;

    }

    nav{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:12px 20px;

    }

    nav a{

        font-size:.95rem;

    }

    .hero{

        min-height:auto;

        padding-top:70px;

        padding-bottom:70px;

    }

    .hero-contenido{

        max-width:100%;

    }

    .hero h2{

        font-size:clamp(2.4rem, 8vw, 3.2rem);

    }

    .nosotros{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer-contenedor{

        grid-template-columns:1fr;

        gap:35px;

    }

}

@media (max-width:640px){

    section{

        padding:58px 5%;

    }

    .top-bar{

        padding:10px 5%;

        font-size:.82rem;

    }

    .header-contenido{

        padding:16px 5%;

    }

    .logo{

        gap:12px;

    }

    .logo img{

        width:58px;

        flex:0 0 auto;

    }

    .logo h1{

        font-size:1.15rem;

        line-height:1.2;

    }

    .logo span{

        display:block;

        font-size:.78rem;

        line-height:1.45;

    }

    nav{

        display:grid;

        grid-template-columns:repeat(3, minmax(0, 1fr));

        gap:10px;

    }

    nav a{

        text-align:center;

        font-size:.82rem;

        line-height:1.2;

        padding:8px 4px;

    }

    nav a::after{

        display:none;

    }

    .hero{

        align-items:flex-start;

        background-position:center;

    }

    .hero-subtitulo{

        max-width:100%;

        padding:9px 14px;

        border-radius:28px;

        font-size:.86rem;

    }

    .hero h2,
    .nosotros-texto h2,
    .servicios h2,
    .clientes h2,
    .ventajas h2,
    .galeria h2,
    .contacto h2{

        font-size:clamp(2rem, 11vw, 2.6rem);

        line-height:1.15;

    }

    .hero p,
    .nosotros-texto p,
    .subtitulo,
    .contacto p{

        font-size:.98rem;

        text-align:left;

    }

    .hero-etiquetas{

        gap:10px;

    }

    .hero-etiquetas span{

        padding:9px 13px;

        font-size:.82rem;

    }

    .hero-botones,
    .botones-contacto{

        gap:14px;

    }

    .btn-principal,
    .btn-secundario,
    .botones-contacto a{

        width:100%;

        max-width:320px;

        text-align:center;

        padding:14px 22px;

    }

    .hero-datos{

        grid-template-columns:1fr;

        gap:15px;

        margin-top:10px;

    }

    .hero-datos div,
    .card,
    .cliente,
    .ventaja{

        padding:26px 22px;

        border-radius:14px;

    }

    .contenedor,
    .clientes-grid,
    .ventajas-grid,
    .galeria-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .foto img{

        height:240px;

    }

    .whatsapp{

        right:18px;

        bottom:18px;

        width:58px;

        height:58px;

        font-size:1.55rem;

    }

}

@media (max-width:390px){

    .logo h1{

        font-size:1.05rem;

    }

    nav{

        grid-template-columns:repeat(2, minmax(0, 1fr));

    }

    .hero h2{

        font-size:2.15rem;

    }

}