@font-face {
    font-family: 'SegoeUI';
    src: url(../font/SegoeUI.ttf) format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'SegoeUI Bold';
    src: url(../font/SegoeUI\ Bold.ttf) format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'SegoeUI Italic';
    src: url(../font/SegoeUI\ Italic.ttf) format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'FreightBigProBold';
    src: url(../font/FreightBigProBold-Regular.ttf) format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'ParastooBold';
    src: url(../font/Parastoo-Bold.ttf) format('truetype');
    font-style: normal;
}

@media screen and (max-width: 768px) {
    .navbar-nav{padding-left: 2% !important;}
    .navbar-collapse{z-index: 999 !important;}
    .navbar-collapse{background-color: #06384191 !important;}
    .nav-link{color: white !important;}
    .text1{font-size: 2rem !important;}
    .text2{font-size: 1.2rem !important;}
    .text3{font-size: .9rem !important;}
    .text4{font-size: 1.2rem !important;}
    .text5{font-size: 1.5rem !important;}
    .text6{font-size: 1rem !important;}
    .text7{font-size: 1.2rem !important;}
    .text8{font-size: 1.2rem !important;}
    .logo{width: 50% !important;}
    .boton{padding: 2% 3% !important;}
    .text3.text-black.w-50{width: 100% !important;}
    .plantas{min-height: 250px !important;}
    .bg-beige.linea{max-height: 150px !important;}
    form.w-50{width: 80% !important;}
    .modelo3container .foto1 .h-100, .modelo2container .foto2 .h-100{height: auto !important;}
}
@media screen and (max-width: 576px) {
    .modelo1container {  
        grid-template-columns: 1fr !important;
        grid-template-areas:
        "foto1"
        "foto2"
        "foto3"
        "foto4"
        "foto5"
        "foto6" !important;
    }
    .modelo2container {  
        grid-template-columns: 1fr !important;
        grid-template-areas:
        "foto1"
        "foto2"
        "foto3"
        "foto4" !important;
    }
     .modelo3container {  
        grid-template-columns: 1fr !important;
        grid-template-areas:
        "foto1"
        "foto2"
        "foto3"
        "foto4" 
        "foto5" !important;
    }
    .logo{width: 80% !important;}
    .boton{padding: 3% 4% !important;}
    .plantas{min-height: 450px !important;}
    .bg-beige.linea{max-height: 350px !important;}
}
body{
    font-family: 'SegoeUI', sans-serif;
}
.navbar-toggler{
    border: none !important;
}
.navbar-toggler-icon{
    background-image: url("../img/menu.png") !important;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.navbar-toggler:focus{
    box-shadow: none !important;
}
.logo{
    width: 30%;
}
.portada, .contacto {
  position: relative;
  overflow: hidden;
}
.portada{
    height: 100vh;
}
.contacto{
    min-height: 100vh;
}
.portada-bg,
.contacto-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* un poco más alto para cubrir al desplazarse */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateY(0);
  will-change: transform;
  z-index: -1;
}
.portada-bg {
  background-image: url('../img/portada.webp');
}

.contacto-bg {
  background-image: url('../img/contacto.webp');
}
/*.portada{
    min-height: 100vh;
    /*background-image: url('../img/portada.webp');
    background-size: 100% 100%;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*.portada {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.portada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../img/portada.webp') center / cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
  z-index: -1;
}*/
.text-blue{
    color: #063841 !important;
}
.text-black{
    color: #3D3D3D;
}
.text-beige{
    color: #DFB17F;
}
.bg-blue{
    background-color: #063841;
}
.bg-blue2{
    background-color: #063841ad;
}
.bg-blue2 .text-blue{
    color: white !important;
}
.bg-beige{
    background-color: #DFB17F;
}
.nav-link{
    font-family: 'SegoeUI Bold', sans-serif;
}
.w-30{
    width: 30%;
}
.boton{
    font-family: 'SegoeUI Bold', sans-serif;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 1% 2%;
    text-decoration: none !important;
}
.text1{
    font-family: 'FreightBigProBold', sans-serif;
    font-size: 3rem;
}
.text2{
    font-family: 'SegoeUI Bold', sans-serif;
    font-size: 1.5rem;
}
.text3{
    font-family: 'SegoeUI Bold', sans-serif;
    font-size: 1rem;
}
.text4{
    font-family: 'ParastooBold', sans-serif;
    font-size: 1.5rem !important;
}
.text5{
    font-family: 'FreightBigProBold', sans-serif;
    font-size: 2rem;
}
.text6{
    font-family: 'SegoeUI', sans-serif;
    font-size: 1.2rem;
}
.text7{
    font-family: 'SegoeUI Bold', sans-serif;
    font-size: 1.5rem;
}
.text8{
    font-family: 'FreightBigProBold', sans-serif;
    font-size: 1.5rem;
}
.text9{
    font-family: 'ParastooBold', sans-serif;
    font-size: 1.2rem;
}
.text10{
    font-family: 'SegoeUI', sans-serif;
    font-size: .8rem;
}
footer a{
    text-decoration: none !important;
    color: white !important;
}
.nubes{
    background-image: url('../img/nubes.webp');
    background-size: 100% 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.modelo1{
    background-image: url('../img/modelo1.webp');
    background-size: 100% 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.modelo2{
    background-image: url('../img/modelo2.webp');
    background-size: 100% 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.modelo3{
    background-image: url('../img/modelo3.webp');
    background-size: 100% 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.zona{
    background-image: url('../img/zona.webp');
    background-size: 100% 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cinta{
    width: 50px;
    height: auto;
}
.plantas{
    min-height: 350px;
    position: relative;
    display: flex;
    align-items: center;
}
.bg-beige.linea{
    width: 100%;
    max-height: 200px;
    display: flex;
    align-items: center;
}
.texto-vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.modelo1container {  
  display: grid;
  grid-template-columns: 1.5fr 0.2fr 1.3fr;
    grid-template-rows: auto auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "foto1 foto1 foto3"
    "foto2 foto2 foto3"
    "foto4 foto5 foto5"
    "foto6 foto6 foto6";
    -webkit-transform: translateZ(0);
}
.modelo2container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "foto1 foto1 foto1"
    "foto2 foto3 foto3"
    "foto2 foto4 foto4";
    -webkit-transform: translateZ(0);
}
.modelo3container {  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr;  
  grid-template-rows: auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "foto1 foto2 foto3"
    "foto1 foto4 foto5";
    -webkit-transform: translateZ(0);
}

.foto1 { grid-area: foto1; }

.foto2 { grid-area: foto2; }

.foto3 { grid-area: foto3; }

.foto6 { grid-area: foto6; }

.foto5 { grid-area: foto5; }

.foto4 { grid-area: foto4; }

.form-control{
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid white !important;
    color: white !important;
    border-radius: 0 !important;
    font-family: 'SegoeUI Bold';
}
.form-control:focus{
    box-shadow: none !important;
}
.form-control::placeholder{
    color: white !important;
}
.redes{
    font-size: 2rem;
    color: white;
}
.alert {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    font-weight: 500 !important;
}
.alert-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}
.alert-danger {
    background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%) !important;
    color: white !important;
}
.alert-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
    color: #212529 !important;
}
.alert-info {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
    color: white !important;
}
.alert i {
    font-size: 1.2em;
}
.alert-dismissible .btn-close{
    padding: .5rem .5rem !important;
    background-size: .7em !important;
}
.btn-close::before {
  font-size: .8rem;
  color: #000;
}