/* ========================================= */
/* CONCRETO Y BOMBAS MAZATLÁN */
/* STYLE.CSS */
/* PARTE 1 */
/* ========================================= */


/* RESET */

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


/* VARIABLES */

:root{

--amarillo:#FFC107;

--negro:#222222;

--gris:#F5F5F5;

--gris2:#666666;

--blanco:#FFFFFF;

--sombra:0 8px 20px rgba(0,0,0,.10);

}


/* BODY */

body{

font-family:Arial, Helvetica, sans-serif;

background:var(--blanco);

color:var(--negro);

line-height:1.6;

}


/* IMÁGENES */

img{

max-width:100%;

display:block;

}


/* LINKS */

a{

text-decoration:none;

color:inherit;

}


/* BOTÓN */

.btn{

display:inline-block;

background:var(--amarillo);

color:#000;

padding:14px 30px;

border-radius:8px;

font-weight:bold;

transition:.3s;

margin:10px;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:var(--sombra);

}


/* MENÚ */

.menu{

position:sticky;

top:0;

background:white;

display:flex;

justify-content:center;

align-items:center;

gap:35px;

padding:18px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

z-index:1000;

}

.menu a{

font-weight:bold;

transition:.3s;

}

.menu a:hover{

color:var(--amarillo);

}


/* HERO */

.hero{

padding:70px 20px;

text-align:center;

background:linear-gradient(

180deg,

#ffffff,

#f7f7f7

);

}


/* LOGO */

.logo{

width:540px;
margin-top: -30px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}


/* TITULO */

.hero h1{

font-size:42px;

margin-bottom:15px;

font-weight:700;

}


/* SUBTITULO */

.hero h2{

font-size:24px;

color:var(--gris2);

margin-bottom:25px;

font-weight:500;

}


/* TEXTO */

.hero p{

max-width:900px;

margin:auto;

font-size:18px;

margin-bottom:35px;

}


/* BOTONES HERO */

.hero-botones{

display:flex;

justify-content:center;

flex-wrap:wrap;

}


/* SECCIONES */

section{

padding:70px 20px;

}


/* TITULOS */

section h2{

text-align:center;

font-size:34px;

margin-bottom:25px;

}


/* PARRAFOS */

section p{

max-width:900px;

margin:auto;

text-align:center;

margin-bottom:20px;

}


/* GRID */

.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:45px;

}

/* ========================================= */
/* CONCRETO Y BOMBAS MAZATLÁN */
/* STYLE.CSS */
/* PARTE 2 */
/* ========================================= */


/* ========================= */
/* SERVICIOS */
/* ========================= */

.servicios{

background:#ffffff;

}


/* TARJETAS */

.card{

background:#fff;

padding:30px;

border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.30s;

border-top:5px solid var(--amarillo);

}

.card:hover{

transform:translateY(-8px);

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

}

.card h3{

font-size:24px;

margin-bottom:15px;

color:var(--negro);

}

.card p{

text-align:left;

font-size:16px;

color:var(--gris2);

}


/* ========================= */
/* ¿POR QUÉ ELEGIRNOS? */
/* ========================= */

.porque{

background:var(--gris);


}

.porque ul{

max-width:900px;

margin:auto;

list-style:none;

padding:0;

}

.porque li{

background:white;

margin-bottom:15px;

padding:18px 25px;

border-left:6px solid var(--amarillo);

border-radius:8px;

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

font-size:18px;



}

.btn{
    width: 350px;
    display: flex;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    
}


/* ========================= */
/* COBERTURA */
/* ========================= */

.local{

background:#fff;

}

.local ul{

max-width:800px;

margin:30px auto;

display:grid;

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

gap:15px;

list-style:none;

}

.local li{

background:var(--gris);

padding:15px;

text-align:center;

font-weight:bold;

border-radius:8px;

}


/* ========================= */
/* GALERÍA */
/* ========================= */

.galeria{

background:var(--gris);

}

.imagenes{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:20px;

margin-top:40px;

}

.imagenes img{

width:100%;

height:260px;

object-fit:cover;

border-radius:10px;

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

transition:.30s;

}

.imagenes img:hover{

transform:scale(1.03);

}


/* ========================= */
/* FAQ */
/* ========================= */

.faq{

max-width:900px;

margin:auto;

}

.faq h3{

margin-top:35px;

margin-bottom:10px;

font-size:22px;

color:var(--negro);

}

.faq p{

text-align:left;

color:var(--gris2);

margin-bottom:20px;

}


/* ========================= */
/* MAPA */
/* ========================= */

.mapa{

background:white;

}

.mapa iframe{

width:100%;

height:450px;

border:none;

border-radius:12px;

margin-top:25px;

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

}

/* ========================================= */
/* CONCRETO Y BOMBAS MAZATLÁN */
/* STYLE.CSS */
/* PARTE 3 */
/* ========================================= */


/* ========================= */
/* CONTACTO */
/* ========================= */

.contacto{

background:#ffffff;

text-align:center;

}

.contacto p{

margin-bottom:15px;

font-size:18px;

}


/* ========================= */
/* FOOTER */
/* ========================= */

footer{

background:#1f1f1f;

color:white;

padding:60px 20px;

text-align:center;

}

footer h3{

margin-bottom:20px;

font-size:28px;

}

footer p{

margin:10px 0;

color:#d6d6d6;

font-size:16px;

}


/* ========================= */
/* WHATSAPP FLOTANTE */
/* ========================= */

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:white;

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

z-index:999;

transition:.30s;

animation:pulse 2s infinite;

}

.whatsapp:hover{

transform:scale(1.12);

}


/* ANIMACIÓN */

@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);

}

}


/* ========================= */
/* SCROLL SUAVE */
/* ========================= */

html{

scroll-behavior:smooth;

}


/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:768px){

.menu{

flex-wrap:wrap;

gap:18px;

padding:15px;

}

.hero{

padding:50px 20px;

}

.hero h1{

font-size:30px;

}

.hero h2{

font-size:20px;

}

.hero p{

font-size:16px;

}

section{

padding:50px 18px;

}

section h2{

font-size:28px;

}

.card{

padding:25px;

}

.card h3{

font-size:21px;

}

.imagenes img{

height:220px;

}

.mapa iframe{

height:320px;

}

.btn{

width:100%;

max-width:340px;

}

.whatsapp{

width:60px;

height:60px;

font-size:30px;

right:18px;

bottom:18px;

}

}


/* ========================= */
/* PANTALLAS GRANDES */
/* ========================= */

@media(min-width:1200px){

.hero{

padding:90px 20px;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:20px;

}

section{

padding:90px 20px;

}

}

/* ========================= */
/* REDES SOCIALES */
/* ========================= */

.redes{

background:#f5f5f5;

text-align:center;

}


.redes .card{

text-align:center;

}


.redes .card h3{

font-size:26px;

margin-bottom:15px;

}

/*responsive*/

/* ================================= */
/* MENÚ RESPONSIVE */
/* ================================= */

.logo-menu img{

height:55px;

}

.menu{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 8%;

background:#fff;

position:sticky;

top:0;

z-index:999;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.menu-links{

display:flex;

gap:30px;

align-items:center;

}

.menu-links a{

font-weight:bold;

transition:.3s;

}

.menu-links a:hover{

color:#FFC107;

}

.menu-toggle{

display:none;

font-size:34px;

cursor:pointer;

}



/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:992px){

.menu{

padding:15px 5%;

}

.menu-links{

gap:20px;

}

}



/* ========================= */
/* CELULAR */
/* ========================= */

@media(max-width:768px){

.menu{

flex-wrap:wrap;

}

.menu-toggle{

display:block;

}

.menu-links{

display:none;

width:100%;

flex-direction:column;

margin-top:20px;

}

.menu-links.active{

display:flex;

}

.menu-links a{

padding:15px;

width:100%;

text-align:center;

border-top:1px solid #eee;

}

.logo-menu img{

height:45px;

}

}

/* ===================================== */
/* CALCULADORA DE CONCRETO */
/* ===================================== */

.calculadora{

padding:80px 10%;

background:#f8f8f8;

text-align:center;

}

.calculadora h2{

font-size:40px;

margin-bottom:15px;

color:#222;

}

.calculadora p{

color:#555;

margin-bottom:30px;

}

.calculadora-box{

max-width:700px;

margin:auto;

background:#fff;

padding:40px;

border-radius:15px;

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

}

.campo{

margin-bottom:25px;

text-align:left;

}

.campo label{

display:block;

font-weight:bold;

margin-bottom:8px;

}

.campo input{

width:100%;

padding:15px;

border:1px solid #ccc;

border-radius:8px;

font-size:18px;

outline:none;

transition:.3s;

}

.campo input:focus{

border-color:#FFC107;

}

.espesores{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

margin-bottom:25px;

}

.espesor-btn{

padding:10px 18px;

border:none;

border-radius:30px;

cursor:pointer;

font-weight:bold;

background:#eee;

transition:.3s;

}

.espesor-btn:hover{

background:#FFC107;

}

.resultado{

margin-top:35px;

padding:25px;

border-radius:12px;

background:#f5f5f5;

}

.resultado h3{

margin-bottom:10px;

}

.resultado h1{

font-size:48px;

color:#FFC107;

margin:10px 0;

}

.nota{

margin-top:25px;

font-size:15px;

color:#666;

line-height:1.6;

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:768px){

.calculadora{

padding:60px 20px;

}

.calculadora h2{

font-size:30px;

}

.calculadora-box{

padding:25px;

}

.resultado h1{

font-size:36px;

}

.espesor-btn{

width:100%;

}

}

/* ===================================== */
/* ANIMACIÓN RESULTADO CALCULADORA */
/* ===================================== */

.resultado.activo{

animation: aparecerResultado .5s ease;

}


@keyframes aparecerResultado{

0%{

opacity:0;

transform:translateY(20px) scale(.95);

}


100%{

opacity:1;

transform:translateY(0) scale(1);

}

}