/*--------------------------------------------------------------------------------------
Theme Name: Bensen - product landing tempalte
Theme URI:
Author: Dreambuzz
Author URI: https://themeforest.net/user/dreambuzz/portfolio
Description: Description
Version: 1.0.0
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SLIDER AREA
        2.3 SEARCH FORM AREA
    3. ABOUT AREA
    4. PROMOTIONS AREA
    5. MENUS AREA
    6. EVENT AREA
    7. TEAM AREA
    8. BLOG AREA
    9. INSTAGRAM FEED AREA
    10. FOOTER AREA
    11. SCROLL TO TOP


----------------------------------------------------------------------------------------*/

/*--------------------
   1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,600,600i,700,700i,800,900|Raleway:300,400,400i,700,800,900,900i');


a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #212324;
}

a:hover {
    color: #c1934c;
}

ul {
    list-style-type: none;
    padding-left: 0px;
}

a:focus,
a:hover {
    outline: 0 solid;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    color: #000;
}

html{
    overflow-x: hidden;
}

html,
body {
    width: 100%;
    max-width: 100%;
}

body {
    color: #555555;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
}

a:hover {
    text-decoration: none
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.navbar-toggle {
    border: 2px solid #fff;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #fff none repeat scroll 0 0;
}

.is-sticky .navbar-header .collapse,
.is-sticky .navbar-toggle {
    border: 2px solid #1a1a1a;
}

.is-sticky .navbar-toggle .icon-bar {
    background: #1a1a1a none repeat scroll 0 0;
}



/*--------------------------
   BUtton STYLES
---------------------------*/

.btn {
    color: #fff;
    font-weight: 700;
    display: inline-block;
    font-size: 13px;
    margin-top: 15px;
    padding: 12px 45px;
    border-radius: 0px;
    line-height: 26px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-transform: uppercase;
}


.btn i {
    margin-left: 15px;
}

.btn-feature,
.btn-white:hover,
.btn-grey:hover,
.btn-black:hover {
    background: #00ff77;
    color: #fff;
    border-color: #000000;
}

.btn-white {
    background: #fff;
    color: #000;
    border-color: #fff;
    padding: 11px 45px;
}

.btn-grey {
    border-color: #fff;
    background: transparent;
    color: #fff;
}

.btn-black,
.btn-feature:hover {
    background: #232323;
    border-color: #232323;
    color: #fff;
}

.btn-danger {
    background: #ed1c24;
}

.btn-circled {
    border-radius: 25px;
}



.btn-outline-dark {
    border: 1px solid#ddd;
    color: #000;
}



.btn-trans-gey {
    border: 1px solid#eee;
    color: #000;
}

.btn-trans-gey:hover {
    border: 1px solid#ed1c24;
    color: #fff;
    background: #ed1c24;
}




/*-----------------------------------
 HEADING SECTION
-----------------------------*/

.heading-title {
    color: #ed1c24;
    font-size: 40px;
}

.heading-left {
    padding-top: 40px;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.m-auto {
    margin: 0 auto;
    width: 100%;
}

section {
    padding: 80px 0px 120px;
}

.heading {
    text-align: center;
    margin-bottom: 60px;
    padding-top: 50px;
}

.heading p {
    color: #999999;
    line-height: 24px;
    margin: 20px auto 0;
}

.bg-light {
    background: #fafafa;
}

h4 {
    font-size: 18px;
    line-height: 28px;
}



/* HEADING AREA */

.heading {
    margin-bottom: 60px;
}

.heading h2 {
    font-size: 45px;
    line-height: 50px;
    font-weight: 800;
}

.heading-left h2 {
    font-family: "Poppins", sans-serif;
}



a.learn-more {
    color: #ed1c24;
    text-transform: uppercase;
    text-decoration: underline;
}



/*-----------------------------------
 MAIN Navigation SYLES
--------------------------------------*/

#main-nav {
    padding: 20px 0px;
}

#main-nav li a {
    padding: 8px 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.top-social {
    padding-top: 15px;
}

.top-social li a i {
    width: 30px;
    height: 30px;
    background: #ddd;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
}

#main-nav .top-social li a {
    padding: 8px 5px;
}

#main-nav li a {
    position: relative;
}

#main-nav li a.active {
    color: #ed1c24;
}

#main-nav li a.active:before {
    position: absolute;
    content: "";
    bottom: 0px;
    width: 30px;
    height: 1px;
    background: #ed1c24;
}




/*-----------------------------------
 MAIN BANNER SYLES
--------------------------------------*/

.main-banner-coontent {
    padding: 160px 0px 120px;
}


.banner-bg {
    background: url("../img/bg/banner-1.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

.dark-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}


.dark-overlay2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}



/*------------------------
 MAIN NAVIGATION
-------------------------------*/

.header-white {
    background: #fff;
    padding: 0px;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}

.site-navigation .navbar-nav li a {
    position: relative;
    padding: 20px 22px 20px;
    color: #2f2f2f;
    text-align: center;
    line-height: 30px;
    letter-spacing: 0px;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

.header-white .navbar-nav {
    padding-top: 20px;
}


.site-navigation.white {
    padding-top: 30px;
}


.site-navigation.white .navbar-nav li a {
    color: #fff;
    font-weight: 400;
    position: relative;
}


.site-navigation.white .navbar-nav li a:after {
    position: absolute;
    top: 27px;
    left: 0px;
    content: "";
    width: 2px;
    height: 15px;
    background: #555;
}


.dropdown-toggle::after {
    display: none !important;
}


.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 20px;
    padding-left: 20px;
}

.header-white.navbar-expand-lg .navbar-nav .nav-link {
    color: #111;
}

.header-white {
    padding-top: 0px;
    background: #fff;
}

.site-navigation.white.header-white {
    border: 0px;
    padding: 15px 0px;
}

.site-navigation.white.header-white,
.site-navigation.white .navbar-nav {
    padding-top: 10px;
}

.dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    border-radius: 0px;
    border: 0px;
    min-width: 250px;
    width: 100%;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}


.dropdown .dropdown-menu a {
    padding: 15px 20px !important;
    text-align: left !important;
}


.site-navigation.white .navbar-nav .dropdown .dropdown-menu a {
    color: #000;
}


/*--------------------------
 TOP SOCIAL
------------------------*/

.top-social {
    margin-top: 5px;
}

.top-social i {
    width: 45px;
    height: 45px;
    background: #fff;
    color: #000;
    border-radius: 100%;
}

/*----------- FOrm Control --------*/

.form-control {
    height: 40px;
}

::placeholder {
    color: #ddd;
    font-size: 13px;
}

textarea.form-control {
    height: auto;
}





/*------------------------------
HOME SLIDER
-----------------------------*/

.slider-content {
    display: table;
    height: 550px;
    width: 100%;
    text-align: center;
}

.slider-table-cell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.slide-1 {
    background: url("../img/bg/slider-1.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

.slide-2 {
    background: url("../img/bg/slider-2.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

.slide-3 {
    background: url("../img/bg/slider-3.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}


.slider-content h1 {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 55px;
}

.slider-content p {
    color: #fff;
    margin: 20px 0px;
}

.no-border {
    border: 0px;
}

/*--------------------------------
 MAIN STYLE START
--------------------------------*/

/*------------ Static Banner ------------*/

.banner-padding {
    padding: 190px 0px 120px;
}

.main-banner-coontent.white p {
    margin: 20px 0px;
}

.banner-bg-2 {
    background: url("../img/banner/home-04.jpg");
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
}

.banner-bg {
    background: url("../img/banner/video-bg.jpg");
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
}


.white h5,
.white h1,
.white p {
    color: #fff;
}

.lg-title {
    text-transform: uppercase;
    font-size: 80px;
    line-height: 80px;
    font-weight: 800 !important;
}


.subtitle {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
}

.main-banner-coontent p {
    font-size: 16px;
    line-height: 32px;
}

.video-play i {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border: 1px solid#fff;
    text-align: center;
    background: #fff;
    display: inline-block;
    border-radius: 100%;
    padding-top: 12px;
    font-size: 22px;
    color: #000;
}

.main-banner-coontent .video-play {
    color: #fff;
    font-weight: 700;
    margin-top: 40px;
    display: block;
}

.md-title {
    text-transform: uppercase;
    font-size: 55px;
    line-height: 55px;
    font-weight: 800;
}


/*------------------------
FEATURE SECTION
---------------------------*/

.bg-dark {
    background: #111 !important;
}

/* contenedor general de la sección */
#features {
    position: relative;
    padding-bottom: 65px;
    overflow: hidden;
}

/* este div es el que reemplaza tu container con margin-left:80px */
#features .features-wrapper {
    width: 65%;              /* deja libre el 35% para la imagen */
    padding-left: 80px;      /* lo que tú tenías */
    padding-right: 30px;
    margin: 0;
}

/* imagen a la derecha, fija como antes */
.feature-bg-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35%;
    background-image: url("../img/about/item-01.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
}

/* bloques */
.features-block {
    position: relative;
    color: #eee;
    padding: 30px 30px 30px 55px;
}

.features-icon {
    position: absolute;
    left: 0;
    top: 40px;
    color: #fff;
    font-size: 40px;
}

.features-block h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 32px;
}


/* ===== #features — imagen ABAJO en móvil, full-bleed sin espacio negro ===== */
@media (max-width: 991px) {
  #features {
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
  }

  /* antes era #features .container; ahora es el que usamos en desktop */
  #features .features-wrapper {
    order: 1;
    margin: 0 !important;
    padding: 10px 16px;
    width: 100%;
    max-width: 100%;
  }

  #features .feature-bg-img,
  #features .feature-bg-img.d-none {
    display: block !important;
    order: 2;
    position: relative;
    top: auto; right: auto; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
    margin: 0;
    height: 45vh;
    min-height: 220px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
  }

  #features .features-block {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px 14px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    color: #eee;
  }

  #features .features-icon {
    position: static !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
  }

  #features .features-icon i { font-size: 20px; }

  #features h3 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.25;
    text-align: left;
  }

  #features p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
  }

  #features .mb-4 { margin-bottom: 10px !important; }
}


/* evita scroll horizontal global */
html, body {
    overflow-x: hidden;
}

/*----------------------------
 ABOUT SECTION
----------------------------*/

#about {
    position: relative;
}

.about-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50%;
    background: linear-gradient(135deg, #002d24 0%, #00a877 100%);
    height: 100%;
}


.about-block {
    padding-top: 65px;
    color: #fff;
    padding-right: 40px;
}

.about-block h5,
.about-block h3 {
    color: #fff;
}


.about-block p {
    margin: 20px 0px;
    display: block;
}

#about-carousel{
    margin-top: 40px;
}


.btn-trans-white {
    border: 1px solid#fff;
    color: #fff;
}

.btn-trans-white:hover {
    background: #fff;
    color: #000;
}

.about-box {
    padding: 20px;
    padding-left: 100px;
}

.about-box h2 {
    font-size: 80px;
    font-weight: 800;
    opacity: 0.2;
    margin-left: -50px;
    text-transform: uppercase;
}

.about-box p {
    color: #111;
}


/*-------------------------
 PROCESS STYLES
------------------------------*/

#process {
   padding-top: 120px;
}

#process .container-fluid {
    padding: 0px;
}

.process-box {
    text-align: center;
    padding: 70px 30px 60px 30px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.process-box.active,
.process-box:hover {
    background: #fff;
}

.process-box i {
    font-size: 40px;
    width: 90px;
    height: 90px;
    text-align: center;
    background: #eee;
    color: #000;
    margin-bottom: 10px;
    border-radius: 100%;
    line-height: 40px;
    padding-top: 30px;
}

.process-box h4 {
    margin: 10px 0px;
}


.line {
    width: 50px;
    height: 1px;
    margin: 0 auto;
    background: #000;
    margin-bottom: 10px;
}

/*----------------------
 VIDEO SECTION 
-----------------------------*/

.bg-feature {
  background: linear-gradient(135deg, #00a877 0%, #002d24 100%);
}


#parallax {
    padding: 0px;
}

.parallax-content {
    padding: 100px 0px 80px 0px;
}

.parallax-content .md-title {
    color: #fff;
}


.video-bg {
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}


a.video-overlay-content {
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 30%;
    top: 38%;
    background: transparent;
    border: transparent;
}

button:focus,
button:hover {
    cursor: pointer;
}

.video-overlay-content {
    text-align: center;
}

.video-overlay-content i {
    font-size: 30px;
    background: #fff;
    color: #000;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    display: inline-block;
    line-height: 30px;
    padding-top: 20px;
}

.video-overlay-content h4 {
    color: #fff;
    text-transform: uppercase;
    margin-top: 10px;
}


/* ---------------------
   FOOTER AREA
-------------------------*/

#footer-area {
    padding: 80px 0px;
    background: #000;
}

.footer-top-area h3 {
    text-align: center;
    margin-bottom: 40px;
}


.footer-contact {
    position: relative;
    padding-left: 75px;
}

.footer-icon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    font-size: 52px;
}

.footer-contact h4 {
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 800;
}


.footer-contact p {
    line-height: 18px;
    font-size: 18px;
    color: #999;
}

.footer-contact h4 {
    color: #fff;
}

.footer-top-area h3,
.footer-icon {
    color: #fff;
}

.footer-content {
    color: #999;
    margin-top: 30px;
}

.footer-content .copy {
    color: #eee;
}




/*---------------------------
 APP HOME
------------------------------*/

.banner-bg-app {
    position: relative;
}

.banner-app-img {
    z-index: 1;
}

.app-banner-content {
    padding-top: 150px;
    text-align: center;
}

.app-padding {
    padding: 80px 0px;
}

.app-nav {
    border-bottom: 1px solid#eee;
}


.header-white.app-nav .navbar-nav {
    padding-top: 0px;
}

.app-banner-content p {
    margin: 20px 0px;
}



/*-----------------------------
  APP FEATURES
-----------------------------*/

.app-feature-box {
    text-align: center;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    margin-bottom: 30px;
}

.app-feature-box i {
    font-size: 30px;
}

.app-feature-box h4 {
    text-transform: uppercase;
    margin: 15px 0px;
}


/*-----------------------------

-------------------------------*/

#services {
    position: relative;
    padding-bottom: 45px;
}

.service-bg-img {
    position: absolute;
    left: -60px;
    bottom: 0px;
    width: 60%;
    min-height: 400px;
    height: 100%;
    background: url("../img/app/featured-article.png")no-repeat;
}



.service-block {
    position: relative;
    padding-left: 60px;
    padding-top: 20px;
}

.service-icon {
    position: absolute;
    left: 0px;
    top: 30px;
    font-size: 22px;
    color: #fff;
    width: 100%;
    height: 100%;
}

.service-block h4 {
    color: #fff;
    margin-bottom: 10px;
}

/*------------------------------
 PRODUCTS GALLERY
-------------------------------*/

.gallery-img {
    padding-bottom: 40px;
}


a:hover {
    cursor: pointer;
}


#navbarNav.navbar-collapse.collapse.show {
    background: #fff;
}

#navbarNav.navbar-collapse.collapse.show .navbar-nav li a {
    color: #000;
}

.black-logo {
    display: none;
}

.header-white .white-logo {
    display: none;
}

.header-white .black-logo {
    display: block;
}



/* Fondo con textura verde suave */
section {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* CARACTERÍSTICAS (textura de hojas) */
#caracteristicas {
  background-image: url("../img/fondos/FONDO.jpg");
  background-blend-mode: overlay;
  background-color: rgba(0,0,0,0.45);
}

/* ABOUT (bosque difuminado) */
/* Por si el fondo se aplica al section */
#about {
  background: none !important;
  background-image: none !important;
}


/* STYLES IMPORTADOS


    /* Estilo de la sección de bienvenida */
    #welcome, #bienvenida {
    background-color: #f9f9f9;
    color: #333;
    }

    .welcome-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
    }


    /* Contenedor principal */
    .banner-bg-2 {
    position: relative;
    overflow: hidden;
    min-height: 890px; /* ajustar si quieres menos/mas alto */
    }

    /* Video de fondo */
    .banner-bg-2 .banner-video {
    position: absolute;
    inset: 0;              /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta object-position para mostrar la parte del video que quieras */
    object-position: center center; /* <- valor recomendado inicial */
    z-index: 1;
    }

    /* Capa oscura para contraste */
    .banner-bg-2 .dark-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2;
    }

    /* Contenido encima del video */
    .banner-bg-2 .container {
    position: relative;
    z-index: 3;
    }

    /* La imagen pequeña del frente (que no quede atrás) */
    .banner-img img {
    position: relative;
    z-index: 4;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    }
    
    /* En móviles: el video también se muestra y se centra correctamente */
    @media (max-width: 991px) {
    .banner-bg-2 {
        position: relative;
        height: 100vh; 
        min-height: 100vh; /* ocupar toda la pantalla */
        background: none;
        overflow: hidden;
    }

    .banner-bg-2 .banner-video {
        display: block;
        width: 100vw;
        height: 100svh;
        object-fit: cover;          /* rellena todo el área */
        object-position: center;    /* centra el contenido */
        position: absolute;
        transform:scale(1.25); /* 👈 más zoom en móviles */
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
    }

    .banner-bg-2 .dark-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 2;
    }

    .banner-bg-2 .container {
        position: relative;
        z-index: 3;
        padding-top: 25vh; /* centra visualmente el texto */
    }
    }

    /* Sección Parallax */
    #parallax {
    position: relative;
    background-color: #007a5c; /* tono verde */
    overflow: hidden;
    padding: 100px 0; /* espacio vertical */
    }

    /* Alineación de columnas */
    #parallax .row {
    align-items: center;
    }

    /* Contenedor de texto */
    #parallax .text-col {
    color: #fff;
    text-align: left;
    }

    #parallax .text-col h1 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    }

    /* Contenedor del video vertical */
    #parallax .video-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    }
    
    /* Estilo del video */
    #parallax .video-bg video {
    width: 100%;
    max-width: 320px; /* controla el tamaño del video */
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    object-fit: cover;
    }

    /* Evita que sobresalga */
    @media (max-width: 991px) {
    #parallax {
        padding: 60px 0;
    }

    #parallax .text-col {
        text-align: center;
        margin-bottom: 30px;
    }

    #parallax .video-bg video {
        max-width: 250px;
    }
    .video-overlay {
    display: none !important;
    }
     }

    .modal-content {
    border-radius: 15px;
    background: #fff;
    }

    .modal-title {
    font-weight: 600;
    }

    .flatpickr-calendar {
    font-size: 15px;
    }


    #caracteristicas .feature-content p {
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0,0,0,0.8); /* leve realce */
    }

    
    #caracteristicas .heading-left h5 {
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0,0,0,0.8); /* leve realce */
    }

    
    #caracteristicas .heading-left h2 {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0,0,0,0.8); /* leve realce */
    }
    
    
    #caracteristicas .feature-content h4 {
    font-weight: 550;
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0,0,0,0.8); /* leve realce */
    }

    #caracteristicas .feature-content h4 {
    font-weight: 550;
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0,0,0,0.8); /* leve realce */
    }

    /* Hace blancos el título y el texto dentro de .heading */
    .heading h3{
    color: #ffffff;
    }

    .heading p {
    color: #ffffff !important;
    }

    nav .top-social {
    padding-right: 80px; /* separa del borde derecho */
    }

    /* ====== MODAL DE RESERVA ====== */
    #modalReserva .modal-content {
    border-radius: 12px;
    border: none;
    padding: 1.5rem;
    }

    /* Encabezado */
    #modalReserva .modal-header {
    border-bottom: none;
    text-align: center;
    justify-content: center;
    position: relative;
    }

    #modalReserva .modal-header .close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 1.5rem;
    opacity: 0.6;
    }

    /* Cuerpo */
    #modalReserva .modal-body {
    padding-top: 0;
    }

    #modalReserva label {
    font-weight: 500;
    margin-bottom: 5px;
    }

    #modalReserva .form-control {
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    }

    /* Footer con botones */
    #modalReserva .modal-footer {
    border-top: none;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    }

    #modalReserva .btn {
    flex: 1;
    padding: 12px;
    font-weight: 600;
    border-radius: 8px;
    font-size: 15px;
    }

    /* Colores de los botones */
    #modalReserva .btn-secondary {
    background-color: #6c757d;
    border: none;
    color: #fff;
    }

    #modalReserva .btn-primary {
    background-color: #007bff;
    border: none;
    }

    /* ====== ADAPTACIÓN A MÓVILES ====== */
    @media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100vw;
        height: auto;
    }

    #modalReserva .modal-content {
        height: auto;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #modalReserva .modal-body {
        flex: 1;
        overflow-y: auto;
    }

    #modalReserva .modal-footer {
        flex-direction: column;
    }

    #modalReserva .btn {
        width: 100%;
    }
    }

    .about-box h2{
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    }

    .about-box P{
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    }

    /* Ajuste del ícono en móviles */
    @media (max-width: 991px) {
    .navbar {
        background: transparent;
        box-shadow: none;
    }

    .navbar-toggler {
        background: rgba(255,255,255,0.5);
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 2000;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateY(-100%);
        opacity: 0;
        transition: all 0.35s ease;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        z-index: 1500;
    }

    .navbar-collapse.show {
        transform: translateY(0);
        opacity: 1;
    }

    .navbar-nav .nav-item {
        margin: 30px 0;
    }

    .navbar-nav .nav-link {
        font-size: 30px;
        color: #000000 !important;
    }
    }

    /* Animación del icono hamburguesa (opcional) */
    .navbar-toggler:focus {
    outline: none;
    }

    @media (max-width: 768px) {
        #footer-area .footer-top-area {
            margin-left: 8%;
        }
    }

    .habitacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #004d40, #00695c);
    color: #fff;
    overflow: hidden;
    margin-bottom: 60px;
    min-height: 350px;
    }

    .habitacion.invertida {
    flex-direction: row-reverse;
    background: linear-gradient(to right, #00695c, #004d40);
    }

    .habitacion-texto {
    flex: 1 1 45%;
    padding: 40px 50px;
    }

    .habitacion-texto h4 {
    font-size: 14px;
    letter-spacing: 1px;
    color: #a5d6a7;
    text-transform: uppercase;
    }

    .habitacion-texto h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    margin: 10px 0;
    }

    .habitacion-texto p {
    font-size: 15px;
    color: #e0f2f1;
    line-height: 1.5;
    margin-bottom: 20px;
    }


    .habitacion {
        display: flex;
        background: linear-gradient(to right, #004d40, #00695c);
        color: #fff;
        margin-bottom: 5px;
        margin-top: 5px;
        min-height: 350px;
        height: 550px;
    }
    

    .habitacion-texto {
        max-width: 500px; /* limita el ancho */
        flex: 1;
        padding: 40px 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .habitacion-slider {
        flex: 1;
        display: flex;
        height: 600px;
    }

    .habitacion-fotos {
        display: flex;
        width: 100%;
        height: 600px;
    }

    .habitacion-fotos img {
        width: 50%;
        height: 600px;
        object-fit: cover;
        object-position: center;
        display: block;
        transform: scale(1); /* reduce el zoom */
    }

    @media (max-width: 768px) {
        .habitacion {
            flex-direction: column;
            height: 810px;
            margin-bottom: 5px;
        }

        .habitacion.invertida {
            flex-direction: column;
        }

        .habitacion-texto {
            max-width: 100%;
            width: 100%;
            padding: 20px;
            text-align: center;
        }

        .habitacion-texto h2 {
            font-size: 24px;
            margin-top: 5px; /* 🔽 reduce el espacio superior */
            margin: 8px 0;
        }

        .habitacion-texto p {
            font-size: 14px;
            line-height: 1.4;
            margin-top: 0; /* 🔽 elimina espacio adicional */
        }

        /* 🔽 Aquí está la parte clave */
        .habitacion-fotos {
            display: flex;
            flex-direction: column; /* cambia a columna */
            width: 500px;
            height: auto; /* se adapta al contenido */
        }

        .habitacion-fotos img {
            width: 500px; /* cada imagen ocupa todo el ancho */
            height: 250px; /* altura más cómoda en móvil */
            object-fit: cover;
            transform: scale(1);
        }
    }

    /* ===================================
    SECCIÓN ABOUT - AJUSTE CARRUSEL
    =================================== */

/* ===================================
   SECCIÓN ABOUT - CORRECCIÓN FINAL
   =================================== */

    /* La sección abarca todo sin espacio arriba */
    #about {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden; /* evita desbordes del carrusel */
    }

    /* Fondo verde ocupa todo */
    #about .about-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    }

    /* Elimina el padding del container */
    #about .container {
    padding: 0 !important;
    margin: 0 auto;
    max-width: 100%;
    }

    /* Fila sin gutters y columnas iguales */
    #about .row {
    align-items: stretch;
    margin: 0;
    }

    #about .row > [class*="col-"] {
    padding: 0;
    }

    /* Columna de texto */
    #about .col-lg-6:first-child {
    position: relative;
    z-index: 2; /* sobre el fondo verde */
    padding: 60px; /* mantiene espacio interior del texto */
    }

    /* Columna del carrusel: sin padding, full screen a la derecha */
    #about .col-lg-6:last-child {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    min-height: 620px; /* ⬆️ antes estaba en 520px — ahora un poco más alta */
    }

    /* El carrusel ocupa toda la altura de su contenedor y se pega a los bordes */
    #about #about-carousel {
    position: absolute;
    top: -40px;
    right: 0;
    bottom: 0;
    left: auto;
    width: 100%; /* ocupa todo el ancho visible de la pantalla */
    height: 100%;
    display: flex;
    }

    /* Ajuste interno del carrusel */
    #about-carousel .carousel-inner,
    #about-carousel .carousel-item {
    height: 100%;
    }

    #about-carousel .carousel-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    }

    /* Indicadores y controles */
    #about-carousel .carousel-indicators {
    bottom: 10px;
    }

    #about-carousel .carousel-control-prev-icon,
    #about-carousel .carousel-control-next-icon {
    filter: invert(1);
    }

    /* Altura mínima en pantallas grandes */
    /* ===============  MOBILE OVERRIDES  =============== */
    @media (max-width: 991px) {
    /* Contenedor sin padding lateral */
    #about .container {
        padding: 0 !important;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Fila a ancho completo, sin gutters */
    #about .row {   
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Columna del carrusel (full-bleed real) */
    #about .col-lg-6:last-child {
        position: relative;
        display: block;
        width: 100vw;              /* ocupa el ancho total de la ventana */
        margin-left: calc(-50vw + 50%); /* elimina el margen lateral del container */
        margin-right: calc(-50vw + 50%);
        padding: 0;
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: auto;
        order: -1; /* la imagen va arriba del texto */
    }

    #about .col-lg-6:first-child p:last-child {
        margin-bottom: 0 !important;
    }


    /* Carrusel 100% ancho */
    #about #about-carousel {
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        height: 55vh;            /* ajusta a gusto */
        min-height: 260px;
        max-height: 520px;
        display: block;
    }

    #about-carousel .carousel-inner,
    #about-carousel .carousel-item {
        height: 100%;
        margin: 0 !important;
    }

    #about-carousel .carousel-item > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Texto más limpio y centrado visualmente */
    #about .col-lg-6:first-child {
        padding: 0px 25px;
    }
    }


    /* 1) Mantén tu "marco" tal cual, pero dale altura.
   Si tu .video-container ya tiene altura fija, deja esto.
   Si no, usa aspect-ratio 16:9 para replicar el <video> anterior. */
    .video-bg .video-container {
    position: relative;
    width: 100%;
    height: 428px;          /* si ya tenías altura */
    /* Si NO tienes altura previa, usa un ratio: */
    aspect-ratio: 16 / 9;
    }
    @supports not (aspect-ratio: 1) {
    .video-bg .video-container { padding-top: 56.25%; }
    .video-bg .video-container > .carousel { position: absolute; inset: 0; }
    }

    /* 2) El carrusel ocupa todo el marco */
    .video-container .carousel,
    .video-container .carousel-inner,
    .video-container .carousel-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    }

    /* 3) Wrapper del iframe: centrado y sin desbordes */
    .ig-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;                 /* oculta lo que sobresalga */
    display: flex;
    align-items: center;
    justify-content: center;
    }

    /* 4) El Reel es 9:16: llenamos ALTURA del marco y centramos.
        Si el marco es horizontal, se recortarán laterales (como background-size: cover). */
    .ig-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;                      /* prioridad: llenar altura */
    width: auto;                       /* anchura se ajusta sola */
    transform: translate(-50%, -50%);
    border: 0;
    }

    /* Si el marco llega a ser más estrecho que un 9:16, cambiamos a llenar ancho */
    @media (max-aspect-ratio: 9/16) {
    .ig-embed {
        width: 100%;
        height: auto;
    }
    }


        /* ===== Ajustes específicos para MÓVIL ===== */
    @media (max-width: 991px) {
    /* En móvil queremos 9:16 porque el Reel es vertical */
    .video-bg .video-container {
        height: 458px;             /* dejamos que mande el ratio */
        aspect-ratio: 9 / 16;
        max-height: 78vh;         /* opcional: evita que ocupe toda la pantalla */
    }

    /* Recorte del header del embed:
        - Agrandamos un poco el alto y lo subimos unos px para esconder la barra superior
        - Ajusta 44px / 22px si ves aún una línea azul/blanca */
    .ig-embed {
        height: calc(100% - 35px);
        width: auto;
        transform: translate(-50%, calc(-50% - 22px));
    }
    }    


    /* Día ocupado en el calendario */
    .flatpickr-day.booked,
    .flatpickr-day.booked:hover {
    background: #ffd6d6 !important;
    color: #b00000 !important;
    border-color: #b00000 !important;
    }

    /* Rango ocupado (cuando es un rango) */
    .flatpickr-day.booked.startRange,
    .flatpickr-day.booked.endRange {
    background: #ffb8b8 !important;
    }


        /* que el modal no oculte el calendario */
    #modalReserva .modal-body { overflow: visible; }

    /* que el calendario quede por encima del modal/backdrop */
    #modalReserva .flatpickr-calendar { z-index: 1060; } /* modal ~1050 */


    /* contenedor dentro del modal */
    #fp-slot {
    width: 100%;
    }

    /* solo afectará cuando el calendar viva dentro del slot (móvil) */
    #fp-slot .flatpickr-calendar {
    width: 100%;
    }

                

    /*--------------------------------
    PRICING AREA
    ------------------------------------*/

    #pricing {
        background: #f5f5f5;
        padding-bottom: 160px;
    }


    /* Cada tarjeta (cajón blanco) */
    .pricing-block {
        border: 1px solid #eee;
        padding: 40px 30px; /* igual en todos los lados para centrar */
        transition: all .3s ease;
        border-radius: 5px;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* distribuye contenido */
        align-items: center; /* centra horizontalmente */
        text-align: center; /* centra texto */
        height: 100%;
    }

    .pricing-block .price-sub {
        text-transform: uppercase;
        display: none;
    }

    .pricing-block .price-title {
        background: #000;
        color: #fff;
        padding: 5px 8px;
        display: inline-block;
    }

    .pricing-block .pricing {
        font-size: 80px;
        line-height: 80px;
        font-family: "Poppins", sans-serif;
        padding: 30px;
        text-align: center;
    }

    .pricing-block ul li {
        position: relative;
        color: #000;
        font-size: 16px;
        line-height: 36px;
    }


    .pricing-block ul li i {
        margin-right: 15px;
    }

    .pricing-block .btn {
        margin-bottom: -50px;
    }


    .pricing-block:hover,
    .pricing-block.active {
        background: #fff;
        -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
        box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
        border-color: #fff;
    }


    #pricing .heading p {
    color: #000000; /* negro puro */
    font-weight: 600; /* más grueso */
    }

    /* Ajuste de tamaño para los precios */
    .pricing-block .pricing {
        font-size: 38px; /* tamaño más equilibrado */
        font-weight: 700;
    }

    .pricing-block .pricing small {
        font-size: 16px;
        font-weight: 400;
    }

    /* Ajuste opcional para mejorar la alineación */
    .pricing-block h3.pricing {
        line-height: 1.2;
        margin-bottom: 10px;
    }

    /* Centrado visual del contenido */
    .pricing-block {
        text-align: center;
    }

        
    /* PRICING (textura madera clara) */
    #pricing {
    background-image: url("../img/fondos/FONDO3.jpg");
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,0);
    }

    /* Botón “Ver más / Ver menos” */
    .toggle-list {
        background: none;
        border: none;
        color: #00b84a;
        font-weight: 600;
        cursor: pointer;
        margin-top: -10px;
        margin-bottom: 15px;
        font-size: 15px;
        transition: color 0.3s ease;
    }

    /* Cuando la lista está expandida, mostrar todo */
    .feature-list.expanded .extra {
        display: block;
    }

    /* Ocultar los elementos extra por defecto */
    .feature-list .extra {
        display: none;
    }

    .toggle-list:hover {
        color: #008f3a;
    }


    /* ===== Ajustes para móvil (pricing) ===== */
    @media (max-width: 767px) {

        #pricing {
            padding-bottom: 80px; /* menos altura en móvil */
        }

        /* cada tarjeta más compacta */
        .pricing-block {
            height: auto !important;
            padding: 28px 18px 70px !important;  /* espacio abajo para el botón */
            border-radius: 18px;
        }

        /* precio más chico */
        .pricing-block .pricing {
            font-size: 34px !important;
            line-height: 1.1 !important;
            padding: 15px 0 5px !important;
        }

        /* descripción más angosta */
        .pricing-block p {
            font-size: 14px;
            line-height: 1.4;
            max-width: 90%;
            margin: 0 auto 15px;
        }

        /* lista más compacta */
        .pricing-block ul li {
            line-height: 28px;
            font-size: 14px;
        }

        /* el botón YA NO se sale */
        .pricing-block .btn {
            margin-bottom: 0;
            margin-top: 10px;
        }

        /* centramos el “Ver más” con menos espacio */
        .toggle-list {
            margin-top: 0;
            margin-bottom: 10px;
        }
    }


    /*--------------------------------
    END PRICING AREA
    ------------------------------------*/

    /* contenedor donde metemos el calendario dentro del modal */
    #fp-slot {
        width: 100%;
        display: flex; 
        justify-content: center;   /* 👈 centra horizontalmente */
    }

    /* calendario de flatpickr dentro del modal (solo cuando está en el slot) */
    #fp-slot .flatpickr-calendar {
        position: static !important;
        width: auto;               /* que use su ancho natural */
        margin: 8px auto 0;        /* centrado */
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* centrar la cabecera (mes/año) en móvil */
    #fp-slot .flatpickr-months,
    #fp-slot .flatpickr-month {
        justify-content: center;
        text-align: center;
    }

    /* por si los días se van un pelín a la izquierda */
    #fp-slot .flatpickr-days {
        justify-content: center;
    }


    /*--------------------------------
    TESTIMONIAL AREA
    ------------------------------------*/

    #testimonial {
        padding-top: 120px;
        background-image: url("../img/fondos/FONDO4.jpg");
        background-blend-mode: overlay;
        background-color: rgba(0,0,0,0);
    }

    /* Contenido del testimonio */
    .review-content {
        text-align: center;
        padding: 60px 40px;             
        min-height: 280px;               
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;         
    }

    /* Icono de comillas */
    .review-content i {
        font-size: 60px;
        line-height: 40px;
        opacity: .2;
    }

    /* Texto del testimonio */
    .review-content p {
        font-size: 26px;
        line-height: 40px;
        font-family: "Raleway", sans-serif;
        margin: 25px 0px;
        color: #ffffff;
        text-shadow: 0 0 1px rgba(0,0,0,0.8);

        /* 👇 límite de líneas para que no se desborde */
        display: -webkit-box;
        -webkit-line-clamp: 4;           /* número de líneas visibles */
        -webkit-box-orient: vertical;
        overflow: hidden;

        /* opción "estándar" (hoy casi no hace nada, pero calla el warning) */
        line-clamp: 4;


        max-height: 170px;               /* respaldo por si el clamp no aplica */
    }

    /* Nombre + estrellas */
    #testimonial h4 {
        font-weight: 550;
        color: #ffffff;
        text-shadow: 0 0 1px rgba(0,0,0,0.8);
    }

    .rating i {
        font-size: 15px;
        opacity: 1;
        color: #eff46b;
    }

    /* Cambiar color del ícono de comillas en la sección testimonial */
    #testimonial .icofont-quote-left {
        color: #ffffff;
        font-size: 50px;
        text-shadow: 0 0 3px rgba(0,0,0,0.5);
    }

    /* Botoncito opcional "ver más" si lo quieres usar */
    #testimonial .see-more {
        background: none;
        border: none;
        color: #fff;
        font-weight: 600;
        cursor: pointer;
        margin-top: 5px;
        text-shadow: 0 0 3px rgba(0,0,0,0.5);
    }