html,body{
  min-height:100%;
  height:100%;
  height:auto;
  font-size: 10pt;
font-family: 'Ubuntu', 'serif';
   line-height:normal;
   text-align:center;
   font-weight:normal;
   color:#000000;
background:#E0DFE0;
overflow: auto;
 bottom:0;
 margin-bottom:0;
 top:0; margin-top:0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --brand-color: #763F52; /* Color Borravino */
            --transition-main: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }

        body {
            font-family: 'Ubuntu', 'serif';
            background-color: #f4f4f4;
            height:auto; /*200vh Para probar el scroll */
            overflow-x: hidden;
        }

        /* 2. HEADER ESTRUCTURA */
        .main-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            z-index: 1000;
            display: flex;
            align-items: center;
            transition: background-color var(--transition-main), height 0.3s ease;
            background-color: transparent;
        }

        /* Estado del Header con Scroll */
        .main-header.scrolled {
            background-color: var(--brand-color);
            height: 60px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .header-container {
            display: flex;
            width: 100%;
            padding: 0 5%;
            align-items: center;
        }

        /* Columnas para centrado perfecto */
        .header-item {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .logo-center { justify-content: center; }
        .side-right { justify-content: flex-end; }

        /* Ajuste del Logo */
        .logo-center img {
            height: 45px; /* Altura inicial */
            width: auto; /* Mantiene la proporción */
            transition: height 0.3s ease;
            display: block;
        }

        /* Logo más pequeño al scrollear */
        .main-header.scrolled .logo-center img {
            height: 40px;
        }

        /* 3. BOTÓN HAMBURGUESA / X */
        .menu-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
            position: relative;
            z-index: 1100;
        }

        .icon-wrapper {
            width: 24px;
            height: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .line {
            width: 100%;
            height: 1.5px;
            background-color: #ffffff; /* Siempre blanco */
            transition: all 0.4s var(--transition-main);
        }

        /* Animación a X */
        .menu-btn.active .line-1 { transform: translateY(8px) rotate(45deg); }
        .menu-btn.active .line-2 { opacity: 0; transform: translateX(-10px); }
        .menu-btn.active .line-3 { transform: translateY(-8.5px) rotate(-45deg); }

        /* 4. LINK WHATSAPP */
        .wa-link {
            color: #ffffff;
            text-decoration: none;
            font-size: 11px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            font-weight: normal;
            transition: opacity 0.3s ease;
        }

        .wa-link:hover { opacity: 0.7; }

        /* 5. MENU OVERLAY CON EFECTO BLUR */
        .full-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            /* Fondo semi-transparente del color borravino */
            background-color: rgba(118, 63, 82, 0.95); 
            z-index: 950;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-100%);
            transition: transform var(--transition-main);
            
            /* Efecto de desenfoque de fondo (Blur) */
            backdrop-filter: blur(10px); 
            -webkit-backdrop-filter: blur(10px); /* Para Safari */
        }

        .full-menu.open {
            transform: translateY(0);
        }

        .menu-links {
            list-style: none;
            text-align: center;
        }

        .menu-links li {
            margin: 30px 0;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.5s ease;
        }

        .full-menu.open .menu-links li {
            opacity: 1;
            transform: translateY(0);
        }

        /* Retraso para efecto cascada (uno tras otro) */
        .full-menu.open li:nth-child(1) { transition-delay: 0.4s; }
        .full-menu.open li:nth-child(2) { transition-delay: 0.5s; }
        .full-menu.open li:nth-child(3) { transition-delay: 0.6s; }
        .full-menu.open li:nth-child(4) { transition-delay: 0.7s; }

        .menu-links a {
            color: white;
            text-decoration: none;
            font-size: 2.8rem;
            /*text-transform: uppercase;*/
            letter-spacing: 5px;
            font-weight: 300;
            transition: letter-spacing 0.3s ease, opacity 0.3s ease;
        }

        .menu-links a:hover {
            letter-spacing: 8px;
            opacity: 0.8;
        }

        /* Bloqueo de scroll del body */
        body.no-scroll { overflow: hidden; }
        
        .main-header {
        height: 70px; /* Header más petiso de entrada */
    }
    
    .main-header.scrolled {
        height: 60px;
    }

    .logo-center img {
    width: 175px; 
    height: 39px;
    object-fit: contain;
    transition: all 0.3s ease;
}

    .main-header.scrolled .logo-center img {
        height: 30px;
    }



    .menu-links a {
        font-size: 1.5rem; /* Links legibles pero contenidos */
        letter-spacing: 3px;
    }


ul, li {list-style:none}
a {text-decoration:none}

h1{width:100%;text-align:center;font-size:26pt;font-weight:normal;padding:0 0 3% 0;margin:0}
h1 span{font-size:11pt}
#contenedor {
    width:100%; 
    margin-left: 0; 
    margin-right: 0;
	text-align:left;
	overflow:auto;
	z-index:200;
	clear:both;
	}

#contenido{border:0; margin:0 0 0 0; padding:0; height:100%; overflow:auto; width:100%;}
#contenido img.mh{width:100%;height:auto;border:0;padding:0;float:left;display:block}
#contenido img.ah{display:none}
#cuerpo{border:0; margin:300px auto 0 auto; padding:5% 0 0 0; height:auto; overflow:auto; width:98%;max-width:1200px; background:transparent;}
#home{float:left;width:100%;height:auto;margin:0 0 0 0;overflow:auto;display:block;padding:0 5%;}
#home h1 span{display:block;text-align:right;margin:-1% 18% 0 0;}
#home h3{font-size:20pt;line-height:25pt;font-weight:normal;width:80%;margin:2% 10% 2% 10%}
#home ul {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen a la siguiente línea */
  padding: 0;
  list-style: none;
}

#home ul li {
  width: 100%; /* Define dos columnas */
  margin:5%;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  background:#ffffff}
#home ul li.amb3 {
  width: 100%; /* Define dos columnas */
  margin:0 5%;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  background:#ffffff}

#home ul li:last-child{float:right}
#home ul li img{width:100%;height:auto;padding:1%}
#home ul li span.txt {display:block;padding:3% 6% 3% 6%;}
#home ul li span.txt i{font-size:20px;padding:0 0 1% 5%;margin:0;color:#000;vertical-align:bottom} 
#home ul li span.txt h2,#home ul li span.expn h2{width:100%;text-align:left;font-size:14pt;font-weight:normal;padding:0 0 3% 0}
#home ul li span.expn {display:block;padding:3% 6% 3% 6%;}
#home ul li span.expn span.vv{text-align:center;
  width: 32.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:9pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  }
#home ul li span.expn span.vv span{font-size:24px;padding:0 0 1% 0;margin:0;color:#000;vertical-align:bottom} 
#home ul li span.expn a,#home ul li span.txt a{color:#763F52;margin:0 0 0 15px;font-size:12pt}
#home ul li span.expn a i,#home ul li span.txt a i{font-size:18px;padding:5% 0 0 1%;color:#763F52} 
#home ul li span.expn a:hover,,#home ul li span.txt a:hover{color:#000;}
#home ul li span.expn a i:hover,#home ul li span.txt a i:hover{font-size:18px;padding:5% 0 0 1%;color:#000}

#icon{float:left;text-align:center;width:100%;height:auto;margin:2% 0 0 0;overflow:auto;display:block;padding:0 5%;}
#icon span.vv{text-align:center;
  width: 32.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:9pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */}
#icon span.vv span{font-size:42px;padding:5%;color:#000} 
#icon span.vvu{text-align:center;
  width: 32.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:9pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */}
#icon span.vvu span{font-size:32px;padding:5%;color:#000}  
#icon h2{font-weight:normal;font-size:17pt;color:#000;margin:2% 0 2% 0;}
#icon ul {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen a la siguiente línea */
  padding: 0;
  list-style: none;
}
#icon ul li {
  width: 30%; /* Define tres columnas */
  margin:1%;font-size:12pt;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  }
#reviews{float:left;width:90%;height:auto;margin:5%;overflow:auto;display:block;padding:5%;}
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1000px; /* Ajustalo al ancho de tu web */
    margin: auto;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #763F52; /* Tu color borravino */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    transition: background 0.3s;
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.nav-btn:hover { background: #5a2e3d; }

.prev { left: -20px; }
.next { right: -20px; }


    /* Diseño Elegante Borravino */
    .reviews-wrapper { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px 0; }
    .reviews-container { display: flex; gap: 20px; overflow-x: auto; padding: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .reviews-container::-webkit-scrollbar { height: 6px; }
    .reviews-container::-webkit-scrollbar-thumb { background: #763F52; border-radius: 10px; }
    
    .review-card { 
        flex: 0 0 85%; 
        scroll-snap-align: start; 
        background: #fff; 
        border-top: 5px solid #763F52; 
        padding: 20px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .rev-author { font-weight: bold; color: #333; margin-bottom: 5px; display: block; }
    .rev-stars { color: #f1c40f; margin-bottom: 10px; font-size: 1.1em; }
    .rev-text { font-style: italic; color: #666; font-size: 0.95em; line-height: 1.5; margin: 0; }

/*galeria de fotos*/
#galeria{float:left;width:100%;height:auto;margin:0 0 0 0;overflow:auto;display:block;padding:0 5%;}
#galeria ul {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen a la siguiente línea */
  padding: 0;
  list-style: none;
}
    #galeria ul li {
  width: 100%; /* Define dos columnas */
  margin:2%;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  }
#galeria ul li img{width:100%;height:auto;padding:0}
#galeria h2{width:100%;text-align:center;font-size:18pt;font-weight:normal;padding:2% 0 3% 0}

#formulario{float:left;width:100%;height:auto;margin:0 0 0 0;overflow:auto;display:block;padding:0 5%;}
#formulario form input{width:98.7%;
    padding: 2% 1%;
    margin-bottom: 25px;
    background: transparent;
    border: 1px solid rgba(118, 63, 82, 0.3); /* Tu color borravino con transparencia */
    color: #333;
    font-size: 0.95rem;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    outline: none;
} 
#formulario form textarea {
    width: 98.7%;
    padding: 2% 1%;
    margin-bottom: 25px;
    background: transparent;
    border: 1px solid rgba(118, 63, 82, 0.3); /* Tu color borravino con transparencia */
    color: #333;
    font-size: 0.95rem;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    outline: none;
}
#formulario form input, textarea, button {
    transition: all 0.3s ease-in-out;
}
/* Efecto al hacer foco (Click para escribir) */
#formulario input:focus, 
#formulario textarea:focus {
    border: 1px solid #763F52; /* Color pleno al escribir */
    padding-left: 4%; /* Un pequeño desplazamiento elegante */
}

/* Ajuste del Botón de Envío */
#formulario button {
    display: block;
    width: 50%;
    padding: 18px;
    background-color: #763F52;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, letter-spacing 0.3s ease;
    margin-top: 20px;
}

#formulario button:hover {
    background-color: #5a303e; /* Un tono más oscuro */
    letter-spacing: 5px; /* Efecto dinámico al pasar el mouse */
}

/* Mensajes de Éxito/Error con Estilo */
.mensaje {
    padding: 20px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid;
    animation: fadeIn 0.6s ease-in-out;
}

.mensaje.exito {
    background-color: rgba(118, 63, 82, 0.05);
    color: #763F52;
    border-color: #763F52;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajuste para el widget de Turnstile */
.cf-turnstile {
    margin: 15px 0;
    display: flex;
    justify-content: center;
} 
/* Cambiamos el color de los días seleccionados */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: #763F52 !important;
    border-color: #763F52 !important;
}
.flatpickr-months .flatpickr-month {
    background: #763F52 !important;
    color: #fff !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #763F52 !important;
}
#checkin, #checkout {
    padding-right: 40px; /* Espacio para que el texto no tape el icono */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* Lo ubicamos a la derecha */
    transition: all 0.3s ease;
}

/* Cuando el usuario hace foco o el calendario está abierto */
#checkin:focus, #checkout:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23763F52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
    background-position: right 10px center; /* Lo ubicamos a la derecha */
    transition: all 0.3s ease;
}
/* Estilo para que los inputs se vean como el resto */
#checkin, #checkout {
    cursor: pointer;
    background-color: transparent !important;
}  
#checkin, #checkout {
    cursor: pointer;
    caret-color: transparent; /* Oculta la rayita de escribir para que no confunda */
}

/* Un leve efecto cuando el campo está enfocado */
input:focus, textarea:focus {
    border-bottom: 1px solid #763F52 !important;
    outline: none;
    transition: 0.3s;
}   
#ubicacion{float:left;width:100%;height:auto;margin:1% 0 0 0;overflow:auto;display:block;padding:0 5%;}
#ubicacion #map{width:100%;height:400px;margin:0;padding:0}
#polican{float:left;width:100%;height:auto;margin:0 0 0 0;overflow:auto;display:block;padding:0 5%;font-size:11pt;line-height:16pt}







/*pie*/
#pie{height:100%; overflow:auto; width:100%; float:left; margin:0 0 0 0; font-size:10pt; background:#fff;padding:2% 8% 2% 8%; border-top:1px solid #e1e1e1;text-align:center}
#pie a{font-size:12pt;color:#000;padding:2%}
#pie a:hover{color:#763F52}
#pie span{display:block; width:100%;padding:0 0 1% 0;text-align:center}
#pie span.dt{font-size:13pt;display:block; width:100%;padding:0 0 2% 0;text-align:center;color:#000}
#pie span.menubot{font-size:13pt;display:block; width:100%;padding:0 0 0 0;text-align:center;color:#000}
#pie span.menubot a {font-size:13pt;display:block; width:100%;padding:0 0 1% 0;text-align:center;color:#000}
#pie span.creditos{font-size:9pt;display:block; width:100%;padding:3% 0 0 0;text-align:center;color:#000}
#pie span.creditos a{font-size:9pt;color:#763F52;padding:0}
#pie span.creditos a:hover{color:#763F52;text-decoration:underline}

    



 

 
        

      
/*#763F52 barra menu
#E0DFE0 fondo web
#948F93 borde area texto
#ffffff fondo area texto*/