html,body{font-family: 'Kanit', arial, sans-serif !important;color:#080909;text-align:center;font-size:16px;}
img{max-width:100%;}
.container-pisos{width:100%;padding:0 30px;margin:0 auto;}
a:link,a:visited,a:hover{color:#D52B1E;text-decoration: none !important;filter:grayscale(0);}
h1,h2,h4,h5,.footn,#titulo{font-weight:800}
.wsp{padding:14px;position:fixed;z-index: 9999;bottom: 8px; right: 8px;width: fit-content;background:#00be00;}

/* Navbar */
nav{width:100%;z-index:9999;padding-left:0 !important;padding-right:0 !important;position: fixed !important;top:0;left:0;border-bottom: 1px solid #131414;background:#f0f0f0}
.logotipo{height:60px;}
.navbar-toggler{border-color:#0038A8 !important;}
.cosechadora a:link,.cosechadora a:visited{color:#00297A;}
.cosechadora a:hover{color:#0038A8;}
.cosechadora img{margin-top:-3px;}
.navwsp{text-align: right;}
.navmenu{text-align: right;}
.btn-new{padding:14px 35px;background:none;color:#aaa;font-weight:600;border:1px solid #002266;border-radius: 2px;cursor:pointer;font-size:18px;font-weight:600;text-transform: uppercase;}
.btn-new:hover{background:#002266;}
.btn-new img{margin-bottom:-5px;margin-top:-8px;}


/* Animacion */
.carousel-inner{background:#080909;}
.google{width:100%;height:calc(100vh - 87px);display: table;}
.foto1{background:#080909 url(../construccion/cocina.jpg) center no-repeat;background-size: cover;}
.foto2{background:#080909 url(../construccion/obra.jpg) center no-repeat;background-size: cover;}
.foto3{background:#080909 url(../construccion/reforma.jpg) center no-repeat;background-size: cover;}
.foto4{background:#080909 url(../construccion/albanileria.jpg) center no-repeat;background-size: cover;}
.ads span{font-size:28px;font-weight:200;font-style: italic;color:#ffffff;letter-spacing:1px;}
.carousel-item{background-color:#F4F4F4;text-align: center;}
.carousel-control-next, .carousel-control-prev {width:60px !important;}
.carousel-indicators li{width:10px !important;height:10px !important;cursor: pointer;}
.plastificado{margin-top:87px;}

/* Frase del encabezado */
.plomeria{text-align: left;background:rgba(0,0,0,.6);padding-top:10px;padding-bottom:10px;color:#F4F4F4}
.encarow{height: calc(100vh - 86px);}
.menudat{color:#002266;font-weight:700;padding:0 10px;line-height: 36px;text-transform: uppercase;}
#encabezado{position: absolute;top:86px;left:60px;width:calc(100% - 120px);z-index:8888;height: calc(100% - 146px);}
#encabezado h1{font-size:50px;}
#encabezado h2{font-size:24px;font-weight:200;padding-bottom:20px;}
.obra{color:#D52B1E;}

/* Contenido */
#porque, #servicios, #reclamo, #interesado, #footer{padding: 90px 0; text-align: left;}
h1{margin:0 auto 10px;text-transform: uppercase;font-weight: 700;font-size:44px;}
#servicios h1{margin-bottom:6px;color:#00297A}
#porque h1{margin-bottom:6px;color:#D52B1E}
.cosecha:hover{color:#D52B1E;}
.cosecha p{text-align: left;padding:0 0 10px 0;margin-bottom:0;font-size:14px;letter-spacing: 2px;}
h3{font-weight:800;font-size:20px;text-align: left;padding:10px 0;margin-bottom:0;text-transform: uppercase;}
#porque{background: #ededed;}

#titulo{margin-top:86px;padding:0 0 60px 0 !important;background-size:cover !important;}
#titulo .container-fluid{background:rgba(238,207,152,.75);color:#17181a;font-size:40px;text-align: left;padding:22px 12px;}

    /* ─── SERVICIOS y PORQUE ─── */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
      gap: 12px;
    }
    .service-card {
      background: none;
      border: 1px solid #e2e2e2;
      border-radius: 2px;
      padding: 18px 16px;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .service-card:hover {
      border-color: var(--border-mid);
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    .service-icon {
      width: 38px;
      height: 38px;
      background: #E6EEF8;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    #porque .service-icon {
        background:#FADDDB;
    }
    .service-icon i {
      font-size: 18px;
      color: var(--navy-mid);
    }
    .service-name {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
      color: #00297A;
    }
    #porque .service-name {
        color:#D52B1E;
    }
    .service-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
    }



/* Estas interesado */
#interesado{background:url(../construccion/plomeria.jpg) center center;background-size:cover;color:#F4F4F4;}

/* Formulario */
.form-control{border-color:#080909;background:#e2e2e2;font-family: 'Kanit', arial, sans-serif;font-size:14px;padding:8px 12px;}

/* Pie de pagina */
#footer{background: #00297A !important;color:#e2e2e2;}
.footn{font-weight:700;font-size:22px;padding-bottom: 10px;display: inline-block;text-transform: uppercase;}
.logopie{text-align: right;}
.durlock{text-align:left;}
#firma{background:#002266;margin-bottom:0 !important;color: #e2e2e2;text-align: center;padding:0;}
#firma span{padding-top:10px;padding-bottom:10px;width:100%;text-align: center;display:block;}

@media only screen and (max-width: 1199px) {
.navbar-nav{padding-top:20px;}
.nav-item,.dropdown-menu{text-align: left;}
h1{font-size:2rem;}
#encabezado h1{font-size:50px;}
}

@media only screen and (max-width: 992px) {
.navbar-brand{margin-right:0;}
.dropdown-submenu .dropdown-menu {margin-left: calc(-83vw + 40px);margin-right: 0;width: 280px !important;}
#encabezado h1{font-size:42px;}
h3{font-size:28px;}
h4{font-size:44px;}
h5{font-size:36px;padding:10px 0 4px 0;}
}
  
@media only screen and (max-width: 768px) {
.btn-new{padding:12px 30px;}
#encabezado h1{font-size:40px;}
#encabezado h2{font-size:16px;}
html,body,h1{text-align: left;}
.logotipo{height:auto;}
.navmenu{padding-top:12px;padding-bottom: 12px;}
.plomeria .btn-new{margin-bottom:6px !important;}
}


@media only screen and (max-width: 576px) {
#servicios, #reclamo, #interesado, #footer{padding: 60px 0;}
h1{font-size:30px;}
#encabezado p{font-size:14px;}
#encabezado h1{font-size:36px;}
.durlock{margin-bottom:20px;}
.logopie{text-align: center;}
}
@media only screen and (max-width: 458px) {
#encabezado h1{font-size:28px;}
}
@media only screen and (max-width: 394px) {
.menudat{padding:0 0;font-size:16px;}
.btn-new{font-size: 16px;}
#encabezado h1{font-size:26px;}
}
