html,body{
  min-height:100%;
  height:100%;
  height:auto;
  font-size: 12pt;
font-family: "Forum", serif;
   line-height:normal;
   text-align:center;
   font-weight:normal;
   color:#000000;

overflow: auto;
 bottom:0;
 margin-bottom:0;
 top:0; margin-top:0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --brand-color: #0d73b3; /* Color Borravino */
            --transition-main: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }

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

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

        /* 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: 45px;
        }

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

        .icon-wrapper {
            width: 28px;
            height: 18px;
            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: 45%;
            height: 100vh;
            background-color: rgba(13, 115, 179, 0.90);
            z-index: 950;
            display: flex;
            align-items:center;
            justify-content:flex-start;
            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: left;
        }

        .menu-links li {
            margin: 30px 0 0 30px;
            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: 1.5rem;
            /*text-transform: uppercase;*/
            letter-spacing: 5px;
            font-weight: 300;
            transition: letter-spacing 0 ease, opacity 0 ease;
        }

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

        /* Bloqueo de scroll del body */
        body.no-scroll { overflow: hidden; }
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}
h1 b{font-size:16pt;font-style:normal;font-weight:normal}
#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.ah{width:100%;height:auto;border:0;padding:0;float:left}
#contenido img.mh{display:none}
#contenido span.t-h{display:block;z-index:300;position:absolute;margin:380px 0 0 36%;color:#fff; font-size:26pt}
#cuerpo{border:0; margin:500px 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 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: 25%;height:135px;padding:33px 0 0 0; /* Define dos columnas */
  margin:0 0 5% 0;border:1px solid #e1e1e1;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
text-align:center;
  /* Opcional: padding: 10px; para espaciado */
  background:#ffffff}
#home ul li:nth-child(1){border-right:0}
#home ul li:nth-child(2){border-right:0}
#home ul li:nth-child(3){border-right:0}
#home ul li:nth-child(4){border-right:1px solid #e1e1e1}
#home ul li a span{font-size:44pt;color: #545454;}
#home ul li a span:hover{font-size:44pt;color: #000;}
#home ul li.unit {
  width: 25%; height:auto;border:none; /* Define dos columnas */
  margin:5% 0 5% 0;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  background:#ffffff}
#home ul li.unit:nth-child(1){padding: 0 1% 0 0}
#home ul li.unit:nth-child(2){padding: 0 1% 0 0}
#home ul li.unit:nth-child(3){padding:0 1% 0 0}
#home ul li.unit:nth-child(4){padding:0 0 0 1%}
#home ul li.unit img{width:100%;height:auto;border:0}
#home ul li.unit span.expn {display:block;padding:3% 6% 3% 6%;}
#home ul li.unit span.expn a{display:block;width:100%;text-align:center;font-size:16pt;padding:0 0 3% 0;color:#0d73b3}
#home ul li.unit span.expn a:hover{color:#000}
#home ul li.unit span.expn span.vv{text-align:center;
  width: 32.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:11pt;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.unit span.expn span.vv span{font-size:24px;padding:0 0 1% 0;margin:0;color:#545454;vertical-align:bottom}  
 /*cada unidad*/ 
#unidades{float:left;width:100%;height:auto;margin:0 0 0 0;overflow:auto;display:block;padding:0 5%;}
#unidades ul {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen a la siguiente línea */
  padding: 0;
  list-style: none;}
#unidades ul li {
  width: 46%; /* Define dos columnas */
  margin: 0 2%;border:1px solid #e1e1e1;padding:2%;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  background:#ffffff}
#unidades ul li span.expn h2{width:100%;text-align:left;font-size:16pt;font-weight:normal;padding:0 0 3% 0}
#unidades ul li span.expn {display:block;padding:0 6% 3% 6%;}
#unidades 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 */
  }
#unidades ul li span.expn span.vv span{font-size:24px;padding:0 0 1% 0;margin:0;color:#000;vertical-align:bottom} 
#unidades ul li span.expn a {font-size:14pt;padding:5% 0 0 0;color:#0d73b3;text-transform:uppercase} 
#unidades ul li span.expn a:hover{color:#000;}
#unidades ul li span.expn a i:hover,#unidades ul li span.txt a i:hover{font-size:18px;padding:5% 0 0 1%;color:#000}
  #galeria ul li.desc {
  width: 96%; /* Define dos columnas */
  margin:0 2% 0 2%;padding:0;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  font-size:14pt
  }
  #galeria ul li.txt {
  width: 96%; /* Define dos columnas */
  margin:2% 2% 0 2%;padding: 2% 0;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  border-top:1px solid #e1e1e1;
  }
#galeria ul li.txt span.expn h2{width:100%;text-align:center;font-size:18pt;font-weight:normal;padding:0 0 3% 0}
#galeria ul li.txt span.expn {display:block;padding:0 6% 3% 6%;}
#galeria ul li.txt span.expn span.vv{text-align:center;
  width: 19%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:12pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */
  }
/*fin cada unidad*/
#serv{width:100%;height:400px;overflow:hidden;padding:0;margin:0 0 5% 0;border:1px solid #e1e1e1}
#serv #img{float:right;padding:0;width:40%;height:auto;overflow:hidden}
#serv #img img{width:100%;height:auto;text-align:right;padding:0;}
#serv #iconser{float:left;text-align:center;width:60%;height:400px;margin:0 0 0 0;overflow:hidden;display:block;padding:20px 0 20px 0; background:white;}
#serv #iconser span.vv{text-align:center;
  width: 32.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:11pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */}
#serv #iconser span.vv span{font-size:42px;padding:5%;color:#545454} 


/*FORMULARIO*/
#formulario{float:left;width:60%;height:auto;margin:0 0 0 0;overflow:auto;display:block;padding:0 5%;}

#datos-contacto{display:block;float:right;margin:2% 0.5%;width:37%;font-size:14pt;line-height:34pt}
#datos-contacto b{font-size:18pt;color:#0d73b3}
#datos-contacto a {color:#0d73b3}
#datos-contacto a:hover{color:#000}
#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:5% 0 0 0;overflow:auto;display:block;padding:0 5%;font-size:11pt;line-height:16pt}
	/* Estilo de los Inputs y Textarea */
#formulario form input{width:32%;
    padding: 2% 1%;
    margin-bottom: 25px;
    background: transparent;
    border: 1px solid rgba(13, 115, 179, 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(13, 115, 179, 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 #0d73b3; /* Color pleno al escribir */
    padding-left: 4%; /* Un pequeño desplazamiento elegante */
}

/* Ajuste del Botón de Envío */
#formulario button {
    display: block;
    width: 30%;
    padding: 18px;
    background-color: #0d73b3;
    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: rgba(13, 115, 179, 0.9); /* Un tono más oscuro */
    letter-spacing: 3px; /* 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(13, 115, 179, 0.05);
    color: #0d73b3;
    border-color: #0d73b3;
}

@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: block;
    justify-content: center;
} 
/* Cambiamos el color de los días seleccionados */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: #0d73b3 !important;
    border-color: #0d73b3 !important;
}
.flatpickr-months .flatpickr-month {
    background: #0d73b3 !important;
    color: #fff !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #0d73b3 !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 #0d73b3 !important;
    outline: none;
    transition: 0.3s;
}   

/*reseñas*/
#reviews{float:left;width:90%;height:auto;margin:2% 5%;overflow:auto;display:block;padding:0 5%;border-top:1px solid #e1e1e1}
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 940px; /* Ajustalo al ancho de tu web */
    margin: auto;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #0d73b3; /* 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: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.nav-btn:hover { background: rgba(13, 115, 179, 0.90); }

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

/* Ocultar flechas en móviles si preferís que usen el dedo */
@media (max-width: 600px) {
    .nav-btn { display: none; }
}
    /* 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: #0d73b3; border-radius: 10px; }
    
    .review-card { 
        flex: 0 0 300px; 
        scroll-snap-align: start; 
        background: #fff; 
        border-top: 5px solid #0d73b3; 
        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; }
    
    @media (max-width: 600px) { .review-card { flex: 0 0 85%; } }
    
 /*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: 46%; /* 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}


/*servicios*/ 
#servicios{float:left;text-align:center;width:100%;height:auto;margin:2% 0 0 0;overflow:auto;display:block;padding:0 5%;}
#servicios span.vv{text-align:center;
  width: 32.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:12pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */}
#servicios span.vv span{font-size:42px;padding:5%;color:#000} 
#servicios span.vvu{text-align:center;
  width: 22.5%;display:inline-block; /* Define tres columnas */
  margin:0 0 1% 0;font-size:12pt;margin:0 0 10px 0;
  box-sizing: border-box;/* Asegura que el padding no afecte el ancho */
  /* Opcional: padding: 10px; para espaciado */}
#servicios span.vvu span{font-size:32px;padding:5%;color:#000} 
#servicios h2{font-weight:normal;font-size:17pt;color:#000;margin:2% 0 2% 0;}
#servicios ul {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen a la siguiente línea */
  padding: 0;
  list-style: none;
}
#servicios 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 */
  }
/*pie*/
#pie{height:100%; overflow:auto; width:100%; float:left; margin:0 0 0 0; font-size:10pt; background:#f4f4f4;padding:2% 8% 2% 8%; border-top:1px solid #e1e1e1;text-align:center}
#pie ul li{display:inline-block;text-align:left;}
#pie ul li.iso{float:left;display:block;width:30%;height:auto;padding:0;margin:0;text-align:center;}
#pie ul li.iso span.iso{display:block;width:100%}
#pie ul li.iso span.iso img{width:auto;height:60px;padding:5px 5px 10px 5px; border:0;}
#pie ul li.iso span.social{display:inline-block;padding:4%;color: #0D73B3;}
#pie ul li.iso span.social a{color: #0D73B3;}
#pie ul li.iso span.social a:hover{color: #545454;}
#pie ul span.men{float:right;width:68%;height:auto;padding:0;margin:0 0 0 1%;display:block;}
#pie ul span.men li.mn{float:left;height:auto;padding:0;margin:0;text-align:left;}

#pie ul span.men li.mn a{display:inline-block;padding:6px; color: #0D73B3; font-size:12pt;text-transform:uppercase;text-decoration:none;}
#pie ul span.men li.mn a:hover{color:#545454;text-decoration:underline}
#pie ul li.pie_b{float:right;width:67%;height:auto;padding:0;margin:0 0 0 2%;display:block;text-align:left;font-size:13pt;color:#545454}