@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* Colores */
:root {
    --bs-primary: #b8996e !important;
    --bs-primary-bg: #cfc5b6 !important;
    --bs-secondary: #59595b !important;
    --bs-secondary-bg: #59595b !important;
    --color-primary: #b8996e;
    --color-primary-oscuro: #856942;
    --color-secondary: #59595b;
    --color-secondary-oscuro: #434344;
    --color-secondary-claro: #6d6d6e;
    --color-resaltado: #d4ba91;
    --color-default: #47505f;
    --color-gris: #666666;
}

body {
    /* background-color: var(--color-primary); */
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
h1, h2, h3, h4, h4, h6 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: var(--color-secondary);
}
a:link, a:active, a:visited {
    color: var(--color-primary);
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
a:hover {
    color: var(--color-resaltado);
}

/* ************************** Estilos comunes ************************** */

.text-bg-dark {
    background-color: var(--color-secondary) !important;
}

/* ************************** Componentes bootstrap ************************** */

/* >>> Accordion <<< */
.accordion-button {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--color-default);
}
.accordion-item {
    margin-bottom: 15px;
}
.accordion .accordion-button i {
    color: var(--color-primary);
    margin-right: 10px;
}
.politica .icono {
    float: left;
    margin-right: 15px;
}
.politica .icono i {
    color: var(--color-celeste);
    font-size: 3rem;
    line-height: 0;
    transition: 0.5s;
}
.accordion-button:not(.collapsed) {
    color: white;
    background-color: var(--color-primary);
    box-shadow: inset 0 calc(-1 * var(--color-primary)) 0 var(--color-primary-oscuro);
  }
.accordion-button:focus {
    box-shadow: var(--color-primary);
}

/* >>> Card <<< */
.card {
    border-radius: 15px;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.card-img-top {
    border-radius: 15px 15px 0 0 ;
}
.card-body {
    padding: 2rem 1.5rem 1.3rem 1.5rem;
}
.card-title {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-gris);
}
.card-body i {
    font-size: 2rem;
}

/* >>> Button <<< */
.btn {
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 10rem;
    padding: 0.8rem 2rem;
}
.btn i {
    font-size: 2rem;
    margin-right: 7px;
}

/* ************************** Navegacion ************************** */

.navbar {
    transition: all 0.5s ease 0s;
    padding-top: 1.5rem;
    font-family: "Rubik", sans-serif;
    letter-spacing: 1px;
}
.datos-contacto {
    font-size: 0.9rem;
    text-align: right;
    padding-right: 25px;
    font-weight: 400;
    margin-bottom: 10px;
}
.datos-contacto a:link, .datos-contacto a:visited, .datos-contacto a:active {
    color: white;
}
.datos-contacto a:hover {
    color: var(--color-resaltado);
}
@media (max-width: 768px) {
    .navbar {
        margin-top: 0px;
    }
    .datos-contacto {
        display: none !important;
    }
 }
.nav-link button {
    background: none;
    border: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
}
.nav-link:link button, .nav-link:active button, .nav-link:visited button {
    background-color: none !important;
    color: white !important;
    transition: 0.3s ease-in-out;
}
.nav-link:hover button {
    color: var(--color-primary) !important;
}
.nav-link.active, .nav-link.active button {
    color: var(--color-primary) !important;
}

.navbar-brand  {
    margin-left: 10px;
}
.dropdown-menu {
    border-radius: 0;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.dropdown-menu hr {
    margin: 5px 10px;
    color: #666666 !important;
    opacity: .20;
  }
.dropdown-item {
    font-size: 0.82rem;
}
.dropdown-item.active {
    color: var(--color-primary) !important;
    background-color: transparent;
}
.scroll-pagina {
    padding: 0.3rem 0 0.3rem 0;
    background-color: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.scroll-pagina .navbar-brand::before {
    content: "";
    display:inline-block;
    width:280px;
    height:48px;
    background: url("../img/logo-Los-Platanos-horizontal.png") no-repeat 0 0;
    background-size: 280px;
    transition: 0.5s ease-in-out;
}
.offcanvas {
    text-align: center;
}

@media all and (min-width: 992px) {
    .scroll-pagina .nav-link:link button, .scroll-pagina .nav-link:active button, .scroll-pagina .nav-link:visited button {
        color: var(--color-gris) !important;
    }
    .scroll-pagina .nav-link:hover button {
        color: var(--color-primary) !important;
    }
    .scroll-pagina .nav-link.active button {
        color: var(--color-primary) !important;
    }
}
@media all and (max-width: 992px) {
    .offcanvas a.nav-link button {
        font-size: 1.5rem !important;
        margin-bottom: 0.8rem;
    }
    .scroll-pagina .navbar-brand::before {
        width:150px;
        height:57px;
        background: url("../img/logo-Los-Platanos-horizontal-mobil.png") no-repeat 0 0;
        background-size: 150px;
    }
}

.navbar-toggler {
    border: 1px solid !important;
  }


/* ************************** Slider ************************** */

#carouselInicio {
    /* height: 100vh; */
    width: 100%;
}
#carouselInicio .carousel-item {
    background-size: cover;
    background-position: center top;
    /* box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8); */
    height: 100vh;
}
.item-01 {
    background-image: url(../img/slide-01.jpg);
}
.item-02 {
    background-image: url(../img/slide-02.jpg);
}
.item-03 {
    background-image: url(../img/slide-03.jpg);
}
@media all and (max-width: 576px) {
    .item-01 {
        background-image: url(../img/slide-mobil-01.jpg);
    }
    .item-02 {
        background-image: url(../img/slide-mobil-02.jpg);
    }
    .item-03 {
        background-image: url(../img/slide-mobil-03.jpg);
    }
}
#carouselInicio .carousel-content {
    background-image: url(../img/logo-los-platanos-ph.png);
    background-position: left top;
    background-repeat: no-repeat;
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    background-color: rgba(20, 20, 20, 0.2);
}
#carouselInicio .carousel-content .caja {
    margin-bottom: 10rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#carouselInicio .carousel-content .caja h1 {
    font-size: 3.2rem;
    line-height: 3.3rem;
    text-transform: uppercase;
    color: white;
    
}
#carouselInicio .carousel-content .caja h1 span {
    font-weight: 300;
}
#carouselInicio .carousel-content .caja i {
    font-size: 2.5rem;
    color: white;
}

@media all and (max-width: 768px) {
    #carouselInicio .carousel-content {
        background-image: url(../img/logo-los-platanos-en-forma-blanca-mobil.png);
    }
    #carouselInicio .carousel-content .caja {
        padding: 0 2rem;
        margin-bottom: 8rem;
    }
    #carouselInicio .carousel-content .caja h1 {
        font-size: 1.9rem;
        line-height: 1.2;
    }
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 2.5rem;
    height: 2.5rem;
  }


/* ************************** Secciones ************************** */

.seccion {
    /* height: 100vh; */
    padding: 8rem 0 9rem 0;
}
.seccion-clara {
    color: var(--color-default);
    background-color: #eeeeee;
}
.seccion-oscura {
    color: var(--color-primary);
}
.seccion-color {
    background: linear-gradient(135deg, #e0d7ca, #beb8ae);
}

/* Encabezado seccion
--------------------------------*/
.encabezado-seccion {
    margin-bottom: 3.5rem;
    text-align: center;
}
.encabezado-seccion .titulo {
    font-size: 2.5rem;
    color: var(--color-secondary);
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 2.3rem;
}
.encabezado-seccion .titulo span {
    font-weight: 300;
}
.encabezado-seccion .titulo::before {
    content: "";
    position: absolute;
    display: block;
    width: 200px;
    height: 1px;
    background: #b1b1b1;
    bottom: 1px;
    left: calc(50% - 100px);
}

.encabezado-seccion .titulo::after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--color-primary);
    bottom: 0;
    left: calc(50% - 25px);
}
.encabezado-seccion.izquierda {
    /* margin-bottom: 0rem; */
    text-align: left;
}
.encabezado-seccion.izquierda .titulo::before, .encabezado-seccion.izquierda .titulo::after {
    left: 0;
}
@media (max-width: 768px) {
    .encabezado-seccion.izquierda {
        /* margin-bottom: 0rem; */
        text-align: center;
    }
    .encabezado-seccion.izquierda .titulo::before {
        left: calc(50% - 100px);
    }
    .encabezado-seccion.izquierda .titulo::after {
        left: calc(50% - 25px);
    }
 }
.seccion-color .encabezado-seccion .titulo::after {
    background: white;
}
.seccion-color .encabezado-seccion .titulo::before {
    background: white;
}
.seccion-oscura .encabezado-seccion p {
    color: var(--color-primary);
}
.seccion-oscura .encabezado-seccion .titulo {
    color: white;
}
.seccion-oscura .encabezado-seccion .subtitulo {
    color: var(--color-primary);
}
.seccion-oscura .encabezado-seccion .titulo::after {
    background: white;
}
.encabezado-seccion .subtitulo {
    font-size: 1.7rem;
    line-height: 2.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    color: var(--color-secondary-claro);
    /* padding-bottom: 15px;
    margin-bottom: 1.5rem; */
}
.encabezado-seccion .subtitulo span {
    font-weight: 300;
}
.encabezado-seccion p {
    font-size: 1.2rem;
    /* font-weight: 600; */
}

@media all and (max-width: 992px) {
    .encabezado-seccion .titulo {
        font-size: 1.9rem;
        padding-bottom: 15px;
        margin-bottom: 1.7rem;
    }
    .encabezado-seccion .subtitulo {
        font-size: 1.3rem;
        /* padding-bottom: 15px;
        margin-bottom: 1.5rem; */
    }
}

/* --- Seccion proyecto --- */
#proyecto {
    padding: 13rem 0 10rem 0;
}
@media (max-width: 768px) {
    #proyecto {
        padding: 8rem 0 5rem 0;
    }
 }
#proyecto a.btn {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
#proyecto a:hover.btn {
    background-color: var(--color-secondary);
    color: white
}
@media (min-width: 576px) {
.modal-dialog {
    max-width: 50%;
}
}


/* --- Seccion Especificaciones tecnicas --- */
#especificaciones-tecnicas {
    background: linear-gradient(150deg, rgba(77, 78, 79, 0.2), rgba(41, 41, 41, 0.5), rgba(77, 78, 79, 0.2)), url(../img/fondo-01.jpg) fixed left center;
    /* background: url(../img/fondo-02.jpg) fixed left center; */
    background-size: cover;
}

/* --- Seccion Imagenes --- */
#imagenes a img {
    transition: 0.3s ease-in-out;
}
#imagenes a:hover img {
    /* transition: 0.3s ease-in-out; */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    filter: brightness(1.2);
}

/* --- Seccion brochure --- */
#brochure {
    background: linear-gradient(150deg, rgba(77, 78, 79, 0.2), rgba(41, 41, 41, 0.5), rgba(77, 78, 79, 0.2)), url(../img/fondo-02.jpg) fixed left center;
    background-size: cover;
    padding: 11rem 0 23rem 0;
}
#brochure .btn {
    color: white;
}
#brochure .btn:hover {
    color: var(--color-primary-oscuro);
}

/* --- Seccion logo pie --- */
#logo-pie {
    margin: -250px 0 -200px 0;
    /* height: 0; */
    /* overflow: show; */
}

/* --- Seccion contacto --- */
#contacto {
    padding-top: 14rem;
    padding-bottom: 10rem;
}
#contacto a:link, #contacto a:visited, #contacto a:active {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: var(--color-default);
}
#contacto a:hover {
    color: var(--color-primary-oscuro);
}
#contacto i {
    font-size: 2rem;
    margin-right: 7px;
}
@media all and (max-width: 992px) {
    #contacto a:link, #contacto a:visited, #contacto a:active {
        font-size: 1.2rem;
        letter-spacing: 0;
    }
    #contacto i {
        font-size: 1.6rem;
        margin-right: 7px;
    }
    #contacto {
        padding-bottom: 5rem;
    }
}

/* ************************** Footer ************************** */

footer {
    background-color: var(--color-secondary);
    padding: 1.5rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    letter-spacing: 1px;
}
footer a:link, footer a:visited, footer a:active {
    color: rgba(255, 255, 255, 0.6);
}
footer a:hover {
    color: white;
}

/* *** Boton Whatsapp ** */

.icono-whatsapp {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #3ac754;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
  }

  .icono-whatsapp i {
    font-size: 25px;
    color: #fff;
    line-height: 0;
  }

  .icono-whatsapp:hover {
    background: #29913c;
    color: #fff;
  }

  .icono-whatsapp.active {
    visibility: visible;
    opacity: 1;
  }