body {
	/* font-family: "Ubuntu Sans", sans-serif; */
	font-family: var(--serif);
	position: relative;
	/* margin-top: 105px; */
	/* margin-bottom: 400px; Es la altura del footer, si cambio la altura del footer debo cambiar esto */
	/* min-height: 100% !important; */
    /* height: 100%; */
	margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita scrolls horizontales accidentales */
}


html {
	font-size: 13px;
	/* min-height: 100% !important; */
    /* height: 100%; */
}
a{
	outline: none !important;
	text-decoration: none;
}







.btn:focus, .btn:focus:active {
	outline: none;
  	box-shadow: none;
	background-color: transparent;
	color: var(--primary-10);
	border: 1px solid var(--primary-10);
}

/*  ---------- Saco borde celeste focus bootstrap -------------- */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
button,
.uneditable-input:focus {   
	/*border-color: rgba(126, 239, 104, 0.8);*/
	box-shadow: 0 !important;
	outline: 0 none !important;
	outline-color: transparent !important; 
	outline-style: none !important;
}
/*  ---------- Saco borde celeste focus bootstrap -------------- */





/* -------------------------------/ FUENTES /---------------------------------------- */
	:root {
		--serif: "Old Standard TT", serif; 
		--sans: "Ubuntu Sans", sans-serif;
	}
/* -------------------------------/ FUENTES /---------------------------------------- */





/* -------------------------------/ COLORES /---------------------------------------- */
	:root {	
		--black: #010101; 
		--white: #F2F2F2;	


		--grey: #6A6C6D; 
		--grey-50: #BDBDBD; 
		--grey-10: #F2F2F2; 
		--grey-5: #EBEBEB;

			
		--primary: #2B4257;
		--primary-10: #93B8D9; 

		--secondary: #051D40;
		--tertiary: #050A30;
	}
/* -------------------------------/ COLORES /---------------------------------------- */


:root{
	--f-thumb-border-radius: 0;
}













.bg-perlado{
	background-color: var(--grey-10);
}





h1 {
	font-size: 3.3rem;
	line-height: 3.5rem;
	position: relative;
	color: var(--black);
}
h2{
	font-size: 2.2rem;
	line-height: 3rem;
	font-weight: 200;
	padding: 15px 0px;
	margin: 0;
}
p{
	font-family: var(--sans);
	font-size: 1.5rem;
	line-height: 2.3rem;
	font-weight: 400;
	color: var(--grey);
	margin-bottom: 0;
}






























a#ir_arriba{
	display: block;
	cursor: pointer;
	width: 70px;
	height: auto;
	padding: 10px 0;
	background-color: var(--black);
	/* border:1px solid var(--white); */
	color: var(--white);
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.2rem;
	font-weight: 100;
	position: fixed;
	bottom: 20px;
	right: 30px;
	opacity: 0;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	border: 1px solid var(--grey);
	font-family: var(--sans);
		z-index: 999;      /* Makes sure it stays on top of other elements */

}
a#ir_arriba.visible{
	opacity: 1;
	bottom: 20px;
	/*bottom: 30px;*/
	right: 20px;
	/*right: 30px;*/
}
a#ir_arriba:hover{ background-color: var(--primary); }
a#ir_arriba svg{ margin-bottom: 10px;}


























img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	margin: 0;
	padding: 0;
}
	










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

strong{
	font-weight: 600;
}

span{
	font-size: 1.8rem;
	line-height: 1.8rem;
}



.btn{
	font-family: var(--sans);
	font-size: 1.5rem;
	line-height: 1.5rem;
	font-weight: 400;
	transition: all .3s ease-in-out;
	padding: 12px 60px;
	border-radius: 0;
	position: relative;
	border: none;
}
.btn.btn-primary{
	color: var(--white);
	background-color: var(--primary);
	border: 1px solid var(--primary);
}
.btn.btn-primary:hover{
	background-color: var(--secondary);
	border: 1px solid var(--grey-50);
}


.btn.btn-secondary{
	color: var(--white);
	background-color: var(--black);
	border: 1px solid var(--grey-50);
}
.btn.btn-secondary:hover{
	background-color: var(--white);
	color: var(--primary);
	border: 1px solid var(--grey-50);
}







.sk-fading-circle {
  /*margin: 100px auto;*/
  width: 50px;
  height: 50px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  /*padding: 10px;*/
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: var(--grey-10);
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}





.bg-primary{background-color: var(--primary) !important}
.bg-secondary{background-color: var(--secondary) !important;}
.bg-gris_light{background-color: var(--grey-10) !important;}







/* -------------------------------/ ANULO DESLAZAMIENTO DE SCROLL DE BOOTSTRAP /---------------------------------------- */
:root{scroll-behavior:unset}
/* -------------------------------/ ANULO DESLAZAMIENTO DE SCROLL DE BOOTSTRAP /---------------------------------------- */

.container,.container-fluid{padding-left: 20px;	padding-right: 20px;}





header {
	position: fixed;
	width: 100%;
	z-index: 9999;
	padding-top: 15px;
	/* padding-bottom: 10px; */
	height: 70px;
	/* margin-top: 13px; */
}

header img.logo_ppal{
	max-width: 270px;
	width: 100%;
	/* height: 30px; */
	object-fit: cover;
	/* background-color: olive; */
}
.navbar .container-fluid{ 
	background-color: var(--black);
}
.navbar-brand{
	/* border: 1px solid red; */
	padding: 0;
	margin-left: 0;
}


/*Links de Navegación*/


.navbar-nav .nav-item{
	width: 100%;
	border-bottom: none;
}
.navbar-nav .nav-item a.nav-link {
	/* background-color: red; */
	font-family: var(--sans);
	color: var(--white);
	font-size: 1.5rem;
	line-height: 1.5rem;
	margin: none;
	border-bottom: 1px solid rgb(67, 67, 67);
	border-bottom: 0;
	/* height: 50px; */
	/* padding: 20px 20px; */
	padding: 20px 0 20px 0;
	border-bottom: 1px solid var(--grey);
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .100em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
}
.navbar-toggler-icon{
	background-image:  url("../img/hamburguesa.svg");
	background-repeat: no-repeat;
	background-size: 100%;
}
.navbar-nav .nav-item a.nav-link:hover{
	color: var(--primary-10);
}
/*-----------------navegacion----------------------------------*/



/*-------------------------------------*/
	/* Estilos para el submenú (segundo nivel) */
	.dropdown-submenu {
		position: relative;
	}

	.dropdown-submenu .dropdown-menu {
		top: 0;
		left: 100%; /* Lo posiciona a la derecha del menú actual */
		min-width: max-content; /* Fuerza a la caja a ser tan ancha como el texto + imagen */
    	width: auto;
	}
	/* Mostrar el submenú al pasar el mouse (hover) */
	.dropdown-submenu:hover > .dropdown-menu {
		display: block;
	}
	/* Flechita indicadora para items con submenú */
	.dropdown-submenu > .dropdown-toggle:after {
		transform: rotate(-90deg);
		right: 0;
		margin-top: -11px;
		/* background-color: blue; */
	}
/*-------------------------------------*/



.navbar-nav .nav-item.dropdown ul.dropdown-menu{
	font-family: var(--sans);
	border-radius: 0;
	background-color: var(--black);
	padding: 0;
}
.navbar-nav .nav-item.dropdown ul.dropdown-menu li{
	border-bottom: 1px solid rgb(255, 255, 255, .2);
}
.navbar-nav .nav-item.dropdown ul.dropdown-menu li:last-child{
	border-bottom: none;
}
.navbar-nav .nav-item.dropdown ul.dropdown-menu li a.dropdown-item{
	color: var(--white);
	font-size: 1.6rem;
	font-weight: 300;
	transition: all .15s ease-in-out;
	position: relative;
	padding: 17px 60px 17px 20px;
}
.navbar-nav .nav-item.dropdown ul.dropdown-menu li a.dropdown-item:hover{
	background-color: var(--primary);
	color: var(--grey-10);
	transition: all .3s ease-in-out;
}
/* tercer nivel dew menu ----- */
.navbar-nav .nav-item.dropdown ul.dropdown-menu ul li{
	/* border: 1px solid blue; */
}
.navbar-nav .nav-item.dropdown ul.dropdown-menu ul li a.confoto{
	margin: 0;
	padding: 8px 25px 8px 15px !important;
}



.btn-seach_header:hover{
	background-color: var(--grey-10);
	
}

































































/* ------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------/ INDEX /-------------------------------------------------- */



video#video_home {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/* z-index: -1; */
	/* filter: grayscale(1); */
  }



body.index h1{color: var(--black);}
body.index .titulo-novedades{color: var(--black);}
body.index .titulo-novedades::before{ background-color: var(--black);}



.portada{
	height: 100vh;
	/* background-image: url("../img/video_poster.jpg"); */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* border: 1px solid red; */
	display: flex;
	align-items: end;
	overflow: hidden;
	position: relative;
	padding:0 0 70px 0;
}
.portada::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(360deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 50%);
	mix-blend-mode: multiply;
	opacity: .5;
	position: absolute;
	top: 0;
	left: 0;
}
.portada .row{
	padding-top: 60px;
}
.portada h1{
	position: relative;
	z-index: 0;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, .3);
	font-style: italic;
	color: var(--white);
	font-size: 5rem;
	line-height: 5.5rem;
	max-width: 300px;
	letter-spacing: -.2rem;
	margin: 0;
}
section.portada h2{
	display: block;
	font-style: normal;
	font-family: var(--sans);
	font-size: 2.2rem;
	line-height: 3rem;
	color: var(--white);
	position: relative;
	z-index: 1;
	letter-spacing: .1rem;
	padding-top: 10px;
}

.portada video#video_home {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	/* filter: grayscale(1); */
  }




.contenido{
	margin-top: 80px;
}


.btn-seach_busqueda_gral{
	border: 1px solid var(--black);
	border-left: none;
	width: 60px;
	margin-top: -25px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: var(--black);
	border-radius: 0 10px 0 0 ;
	background-image: url("../img/lupa_w.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
}
.btn-seach_busqueda_gral:hover{
	background-color: var(--black);
	
}




.banner{
	background-color: var(--black);
	transition: all .2s ease-in-out

}
.banner p{
	color: var(--white);
	font-family: var(--sans);
	font-size: 1.6rem;
	line-height: 1.6rem;
	font-weight: 400;
	margin-bottom: 0;
	padding-top: 5px;
}
.banner:hover{
	background-color: var(--grey);
}




.breadcrumb {
    font-family: var(--sans);
    color: var(--grey);
    font-size: 1.3rem;
    line-height: 2rem;
    font-weight: 500;
}
.breadcrumb-item a {
    text-decoration: none;
    color: var(--grey);
}
.breadcrumb-item a:hover {
    color: var(--grey-50);
}


/* ***********************************************************************

 Seccion Galeria 

**********************************************************************/


.galeria img {
	/* border: 2px solid red; */
    width: 100%;
    height: 210px;
	object-fit: cover;
    transition: all .2s ease-in-out

}

.galeria img:hover {
    border: 3px solid #ffffff75;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: none;
    filter: none;
}
.galeria ul.nav-galeria{
	font-size: 2rem;
}
.galeria ul.nav-galeria li.nav-item{
	padding-right: 20px;
}
.galeria ul.nav-galeria li.nav-item a.nav-link{
	/* border: 1px solid fuchsia; */
	padding-left: 0;
	color: var(--grey-50);
}
.galeria ul.nav-galeria li.nav-item a.nav-link.active{
	color: var(--primary);
	font-weight: 600;
}


/****************GALERIA2
***************/

/* .galeria.ampliada{
	border: 1px solid yellow;
} */
.galeria.ampliada .col{
	/* border: 1px solid aquamarine; */
	position: relative;
}

/* Efecto de zoom suave al pasar el mouse */
[data-fancybox="gallery"] img {
    transition: all .3s ease;
    cursor: pointer;
}

[data-fancybox="gallery"] img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.f-counter{
	/* border: 1px solid red; */
	align-items: center !important;
}

.f-caption{
	font-family: var(--sans);
	font-size: 1.3rem;
	line-height: 1.8rem;
}




/* --- 1. ELIMINACIÓN AGRESIVA DEL BORDE AZUL (Mantenemos esto) --- */
.galeria.ampliada .col a, 
.galeria.ampliada .col a img,
.galeria.ampliada .col a:focus, 
.galeria.ampliada .col a:active, 
.galeria.ampliada .col a:focus-visible {
    outline: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* --- 2. CONFIGURACIÓN DEL CONTENEDOR Y LA IMAGEN (Nuevo) --- */

/* Preparamos la columna para contener los iconos y el efecto */
.galeria.ampliada .col {
    position: relative; /* Necesario para los pseudo-elementos */
    overflow: hidden;   /* Mantiene el efecto de zoom dentro de la caja */
    transition: box-shadow 0.3s ease; /* Transición suave para la sombra del hover */
}

/* Preparamos la imagen para un efecto de zoom suave */
.galeria.ampliada .col img {
    transition: transform 0.3s ease; /* Transición suave para el zoom */
    display: block;
    width: 100%;
}

/* --- 3. EFECTOS AL PASAR EL MOUSE POR LA COLUMNA (:hover) --- */

/* Cuando pasamos el mouse por la COLUMNA, damos sombra a la columna */
.galeria.ampliada .col:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Sombra suave de fondo */
    z-index: 10; /* Eleva ligeramente la imagen sobre las otras */
}

/* Cuando pasamos el mouse por la COLUMNA, hacemos zoom a la imagen */
.galeria.ampliada .col:hover img {
    transform: scale(1.05); /* Un zoom muy ligero del 5% */
}


/* --- 4. TUS ICONOS DE ZOOM (Mantenemos tu lógica pero los fijamos en la esquina) --- */

/* Fondo gris del icono */
.galeria.ampliada .col::before {
    position: absolute;
    content: "";
    width: 35px; /* Un poco más grande para el icono */
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7); /* Blanco transparente para que destaque */
    bottom: 10px; /* Posicionado en la esquina derecha */
    right: 10px;
    left: auto; /* Anulamos left si estaba en tu CSS anterior */
    opacity: 0; /* Invisible por defecto */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 100; /* Por encima de la imagen */
}

/* Icono de Lupa SVG */
.galeria.ampliada .col::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/zoom-in.svg);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 17px; /* Centrado dentro del 'before' */
    right: 17px;
    left: auto; /* Anulamos left */
    /* mix-blend-mode: difference; */ /* Opcional, pruébalo si quieres el icono inverso */
    opacity: 0; /* Invisible por defecto */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 101; /* Por encima del background */
}

/* Mostrar iconos en :hover */
.galeria.ampliada .col:hover::after,
.galeria.ampliada .col:hover::before {
    opacity: 1; /* ¡Hacemos visible el icono! */
}







/* ***********************************************************************

 Seccion Galeria 

**********************************************************************/

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
	/* border: 1px solid red; */
    object-fit: cover;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom: 40px;
}
.swiper-pagination-bullet-active{background-color: var(--primary-10);}

#hidroterapias {
    /* Pegamos tu degradado de Figma aquí */
    background: linear-gradient(270deg, #000 0%, #182530 25.67%, #050C32 50.59%, #051237 60.45%, #030619 76.23%, #050A30 100%);
    
    /* Hacemos que el fondo sea 4 veces más ancho que la pantalla (para 4 slides) */
    background-size: 400% 100%; 
    
    /* Posición inicial */
    background-position: 0% 0%;
    
    position: relative;
    margin-top: 80px;
    padding-bottom: 80px;
    transition: background-position 0.1s ease-out; /* Movimiento fluido */
}
#hidroterapias{
	background: linear-gradient(180deg, var(--black, #010101) 0%, var(--primary, #2B4257) 100%);	position: relative;
	margin-top: 80px;
	padding-bottom: 80px;
}
#hidroterapias h1{
	font-size: 4rem;
	line-height: 4rem;
	font-style: italic;
	margin-top: 40px;
}
#hidroterapias::before{
	display: none;
	position: absolute;
	content: "";
	height: 110px;
	width: 100%;
	/* border: 1px solid red; */
	bottom: 0;
	right: 0;
	background-image: url("../img/logo_white_bahamas_blanco.svg");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	opacity: 0.05;
	mix-blend-mode: exclusion;
}
/* #hidroterapias::after{
	display: none;
	position: absolute;
	content: "";
	height: 210px;
	width: 100%;
	border: 1px solid red;
	top: 0;
	right: 0;
	background-image: url("../img/logo_white_bahamas_blanco.svg");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	opacity: 0.02;
	mix-blend-mode: exclusion;
} */
#hidroterapias img{
	z-index: 1;
	/* border: 5px solid lime; */
	height: 500px;
}
#hidroterapias h1{
	color: white;
}

#hidroterapias p{
	color: white;
}


.swiper-button-prev,
.swiper-button-next {
	/* position: absolute;
	width: calc(var(--swiper-navigation-size) / 44 * 27);
	height: var(--swiper-navigation-size);
	margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center; */
	top: 50%;
	color: white;
}

.swiper-button-prev svg{display: none;}
.swiper-button-next svg{display: none;}









/* ***********************************************************************

 Seccion cards por que y mas elegidos

**********************************************************************/


.card{
	border: none;
	border-radius: 0;
	position: relative;
	/* width: auto; */
	/* min-height: 390px; */
	transition: all .2s ease-in-out	
}
.card .card-footer{
	font-family: var(--sans);
}






.porque_wb{
	margin-top: 80px;
}








/* 1. CONFIGURACIÓN BASE DE LAS CARDS */
.card {
    border: 1px solid transparent;
	transition: all .2s ease-in-out;
    /*overflow: hidden; /* Importante para que la imagen no se salga */
	/*backface-visibility: hidden; /* Ayuda a que el renderizado sea suave en Chrome */

}
.grupo-porque .card {
	position: relative;
}
.card .card-body{	
	padding: 20px 20px 20px 20px;
}
.card .card-body h5.card-title{
    margin-bottom: 10px;
	padding-top: 0px;
	transition: all .2s ease-in-out;
}
.card .card-body h5.card-title span{
    font-size: 2.7rem;
    line-height: 3rem;
	display: block;
}
.card .card-body h5.card-title span.txt{
	position: relative;
	font-style: italic;
	/* border: 1px solid red; */
	padding: 150px 0 0 0px; /*Tocar esto para separa numero de titulo en reposo*/
	transition: all .2s ease-in-out;	
}
.card .card-body span.numero{
	opacity: .3;
}




.card.grey-darkest, 
.card.grey {
	color: var(--white);
}
.card.grey-darkest{ 
	background-color: var(--black); 
}
.card.grey-darkest .card-body p, .card.grey .card-body p{ 
	color:var(--white);
}
.card.grey { background-color: var(--grey); }
.card.grey-lightest{
    background-color: var(--grey-50);
    color: var(--black) !important; 
}
.card.grey-lightest .card-body p{
    color: var(--black) !important; 
}

/*animacion entre activo y reposo:---------------------------- */
	.card:hover {
		border: 1px solid var(--primary);
		background-color: #FFF;
	}
	.grupo-porque .card:hover .card-body h5.card-title span.txt{
		margin:-33px 0 0 42px;
		padding: 0px 0 0 0px;
	}
	.grupo-porque .card:hover .card-body h5.card-title{
		padding-top: 250px;
	}
	.grupo-porque .card:hover img {	
		opacity: 1;
		border-top: 5px solid #FFF;
		border-right: 5px solid #FFF;
		border-left: 5px solid #FFF;
	}
	.card.grey-darkest:hover .card-body p,.grupo-porque .card.grey:hover .card-body p{color: var(--black);}
/*animacion entre activo y reposo:---------------------------- */











/* 3. IMÁGENES (Ocultas por defecto) */
.grupo-porque img {
    opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 250px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	transition: all .2s ease-in-out;
}




/* Forzamos texto negro en TODO el contenido de la card al hacer hover */
.grupo-porque .card:hover .card-body,
.grupo-porque .card:hover .card-footer,
.grupo-porque .card:hover .card-footer p {
    /* background-color: white !important; */
    color: black !important;
}


/* :root {	--f-thumb-border-radius:0px } */
:root {	--clip-path: inset(0 var(--clip-shift) round var(0px, 0)); }















.grupo-productos .card{
	position: relative;
	margin-top: 10px;
	padding: 0;
	/* border: 20px solid blue; */
	transition: all .2s ease-in-out;
	max-height: 460px;
}
.grupo-productos .card .card-body{
	padding-left: 0;
	/* background-color: yellowgreen; */
}
.grupo-productos .card:hover{
	border: 1px solid var(--primary-10);
	padding: 5px 5px 0px 5px;
}

.grupo-productos .card::after{
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	right: 100px;
	bottom: 21px;
	/* background-color: red; */
	background-image: url(../img/Link_Icon.svg);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: all .3s ease-in-out;
}
.grupo-productos .card:hover::after{
	opacity: 1;
	right: 25px;
}
.grupo-productos .card .card-body h5.card-title a.stretched-link{
	font-size: 2.2rem;
	line-height: 2.2rem;
	color: var(--black);
	margin: 0;
	transition: all .2s ease-in-out;
}
.grupo-productos .card:hover > .card-body h5.card-title a.stretched-link{
	color: var(--black);
	padding-left: 20px;
}
#mas_elegidos .grupo-productos .card:hover > .card-body h5.card-title a.stretched-link{
	padding-left: 5px !important;
}
.grupo-productos .card img{
	/* border: 3px solid red; */
	height: 360px;
	border-radius: 0;
	transition: all .2s ease-in-out;
}
.grupo-productos .card:hover > img{
	height: 390px;
	width: 100%;
	filter:  brightness(130%)
}




#mas_elegidos{
	margin-top: 70px;
	padding-bottom: 20px;
}
#mas_elegidos .card{height: auto !important; /* En mobile es mejor que el alto sea automático */}
#mas_elegidos .grupo-productos .card .card-body h5{
	color: var(--black) !important;
	padding-top: 10px;
}
#mas_elegidos .grupo-productos .card img{
	height: 250px;
	object-fit: cover;
}
#mas_elegidos .grupo-productos .card .card-body ul{
	opacity: 1 !important; 
    /* padding-top: 10px; */
    transition: all .2s ease-in-out;
}
#mas_elegidos .grupo-productos .card:hover > .card-body ul{
	/* border: 1px solid yellow; */
	width: 100%;
}
#mas_elegidos .grupo-productos .card .card-body ul li p{
	color: var(--primary);
	font-size: 1.2rem;
}
#mas_elegidos .grupo-productos .card .card-body ul svg{
	padding-right: 3px;
	margin-top: 2px;
}





.productos_wb{
	margin-top: 50px;
}




/* #proyectos_destacados .container-fluid{ padding: 0;}
#proyectos_destacados .container-fluid .row .col-12{ padding: 0;} */
#proyectos_destacados h1{ color: var(--black);}
#proyectos_destacados .text-container { background-color: var(--black);}
#proyectos_destacados img {
    width: 100%;
	height: auto;
    object-fit: cover;
}
#proyectos_destacados h2{ color: var(--white);}
#proyectos_destacados p{
	color: var(--white);
	padding-bottom: 40px;
	margin: 0 !important;
	font-size: 1.3rem;
	line-height: 2.3rem;
	margin-top: 10px;
	max-width: 300px;
}



/* ***********************************************************************

PORTADA INTERNA

**************************************************************************** */





.portada.interna{
    height: 100vh; /* Ocupa toda la pantalla */
    width: 100%;
}

.portada.interna .img-portada{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen actúe como background-size: cover */
    z-index: -1; /* La manda al fondo */
}

.portada.interna h1 {
    color: var(--white); /* Ajusta según necesites */
    margin: 0;
	font-size: 4rem;
	line-height: 4.5rem;
}

.portada.interna h2{
	font-size: 1.6rem;
	line-height: 2rem;
	max-width: 600px;
	line-height: 120%;
}






/* ***********************************************************************

GAMA

**************************************************************************** */



#detalles_gama h1 {
   	padding: 0;
}
.dimensiones{ margin-top: 80px !important;}
.dimensiones, .dimensiones p{
	color: var(--black);
	/* background-color: cyan; */
	font-size: 1.3rem;
	line-height: 1.3rem;
	font-family: var(--sans);
	margin: 0;
}
.dimensiones li {
	padding-bottom: 10px;
}
.detalles_c_uno{
	padding-top: 10px;
}

#detalles_gama .grilla_dinamica a img{
	transition: all .2s ease-in-out;
	border: 1px solid transparent;
}

#detalles_gama .grilla_dinamica a:hover > img{
	filter:contrast(105%);
	border: 1px solid var(--primary-10);
} 



#detalles_gama .detalles_c_uno ul li{color: var(--black);}
#detalles_gama .detalles_c_uno ul li strong{padding-right: 8px;}
#detalles_gama .detalles_c_uno, .detalles_c_uno p{
	font-family: var(--sans);
	font-size: 1.4rem;
	line-height: 1.4rem;
	color: var(--black);
}
#detalles_gama .detalles_c_uno figure figcaption{
	font-style: italic;
	font-size: 1.4rem;
	line-height: 1.4rem;
	padding-top: 20px;
}
#detalles_gama .detalles_c_uno ul li{
	/* padding-left: 15px; */
	position: relative;
	margin-bottom: 10px;
	/* background-color: pink; */
}

#detalles_gama .detalles_c_uno ul li:first-child:after{display: none;}
#detalles_gama .detalles_c_uno ul li:first-child{
	padding-left: 0;
	color: var(--black);
	list-style: none;
	font-weight: 600;
}




/* 2. Sincronizamos la altura de los títulos */
#detalles_gama h2 {
    min-height: 60px; /* Evita que un título de 2 líneas empuje la foto hacia abajo */
    display: flex;
    align-items: center;
}

/* 3. Ajuste de la imagen del casco */
#detalles_gama .galeria.ampliada img {
	border: 1px solid;
    max-height: 220px; 
    width: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* ***********************************************************************

Accesorios

**************************************************************************** */


#accesorios .card img {
    display: block; /* Evita espacios extra debajo de la imagen */
    position: relative;
	height: 230px;
}

#accesorios .card {
    position: relative; /* Contenedor padre para posicionar el pseudo-elemento */
    overflow: hidden;
	font-family: var(--sans);
}
#accesorios .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ajuste automático al tamaño de la card */
    height: 230px;
    z-index: 1;
    
    /* Aplicamos el color con 50% de opacidad */
    background-color: color-mix(in srgb, var(--primary), transparent 50%);
    
    /* Este es el truco para que se mezcle con la imagen de abajo */
    mix-blend-mode: multiply;
    
    /* Evita que el overlay bloquee clics si hay enlaces */
    pointer-events: none; 
}
#accesorios .card .card-body{
	padding: 0;
	margin-top: 20px;
	max-width: 360px;
}
#accesorios .card .card-body h5{
	/* border: 1px solid red; */
	font-size: 1.6rem;
	margin-bottom: 10px;
}
#accesorios .card .card-body p{
	/* border: 1px solid red; */
	font-size: 1.3rem;
	line-height: 2rem;
}





#accesorios .grilla_dinamica{
	/* border: 1px solid orchid; */
	margin-top: 20px;
}
/* #accesorios .grilla_dinamica div{
	padding-right: 20px;
} */
#accesorios .grilla_dinamica .col  div:first-child{
	position: relative;
}
#accesorios .grilla_dinamica .col  div:first-child::after{
	 content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ajuste automático al tamaño de la card */
    height: 100%;
    
    /* Aplicamos el color con 50% de opacidad */
    background-color: color-mix(in srgb, var(--primary), transparent 50%);
    
    /* Este es el truco para que se mezcle con la imagen de abajo */
    mix-blend-mode: multiply;
    
    /* Evita que el overlay bloquee clics si hay enlaces */
    pointer-events: none; 
}
#accesorios .grilla_dinamica h4{
	color: var(--black);
	font-family: var(--sans);
	margin: 20px 0;
	height: max-content !important;
}

#accesorios .grilla_dinamica p{
	font-size: 1.3rem;
	line-height: 2.3rem;
}
/* #accesorios .col div:nth-child(2) {
    height: 100%;  Estira el contenedor del h4 para ocupar el espacio disponible *
} */




/* ***********************************************************************

Categorias

**************************************************************************** */




#categorias .titulo_producto{
	/* border: 1px solid cornflowerblue; */
	margin-top: 100px;
	margin-bottom: -10px;
	padding: 0;
	/* border: 1px solid purple; */
	align-self: baseline;
}
#categorias .titulo_producto h2{ 
	padding: 0;
	margin: 0;
	/* width: 340px; */
	display: -webkit-box;
	line-clamp: 1;
	-webkit-line-clamp: 3; /* Número de líneas que deseas mostrar */
	-webkit-box-orient: vertical;  
	overflow: hidden;
	text-overflow: ellipsis; /* Opcional, pero ayuda a la claridad */

}
#categorias .titulo_producto .capacidad{
	width: max-content;
	/* background-color: yellow; */
	padding: 0;
 	margin-top: auto;
}

#categorias .titulo_producto svg{
	padding-right: 3px; 
	/* background-color: palevioletred; */
}
#categorias .contenido {margin: none;}

#categorias .contenido img{
	width: 100%;
	border: 1px solid var(--grey-5);
}

#categorias .cada_tabla{
	margin: 0;
	padding: 0;
}

table tbody tr{
	border: 1px solid var(--grey-5) ;
}

table thead tr th{
	font-family: var(--sans);
	font-size: 1.3rem;
	line-height: 1.3rem;
	color: var(--grey) !important;
	font-weight: 400;
	padding: 15px !important;
	/* background-color: peru !important; */
}

table tbody tr td{
	font-family: var(--sans);
	font-size: 1.4rem;
	font-weight: 500;
	align-self: center;
	/* border: 1px solid yellowgreen; cada celda */
	padding: 15px !important;
	background-color: rgb(255, 255, 255) !important;
}
table tbody tr td:first-child{
	/* background-color: pink; */
	font-weight: 600;
}
table tbody tr td a.flecha_entabla{
	display: block;
	width: 25px;
	height: 25px;
	background-image: url(../img/chevron-right_primary.svg);
	background-size: 27px;
	transition: all .15s ease-in-out;
}

table tbody tr:hover > td a.flecha_entabla{
	background-image: url(../img/chevron-right_white.svg);
}

/* .table-striped > tbody > tr{
	border: 2px solid purple;

} */


/* Forzamos el hover sobre cualquier celda (par o impar) */
.table-striped > tbody > tr:hover > * {
	transition: all .2s ease-in-out;
    background-color: var(--primary) !important;
    color: white !important;
}




/* ***********************************************************************

Contacto

**************************************************************************** */


/* #contenido_contacto{
	padding-left: 0;
	position: relative;
}
#contenido_contacto::after{
	position: absolute;
	content: "";
	width: 120px;
	left: -80px;
	height: 780px;
	top: 0;
	left: 0;
	background-color: var(--white);
	opacity: 0;
} */

#contenido_contacto h1{
	margin-top: 80px; 
	margin-bottom: 20px;
}
#contacto footer{
	margin: 0 !important;
}
	

/*Informacion de contacto columna 1 de informacion*/



	#contacto ul.datos-en-contacto{
		margin-top: 80px;
	}
	#contacto ul.datos-en-contacto li{ 
		margin-bottom: 40px;
	}
	#contacto ul.datos-en-contacto li a{
		color: var(--primary);
		font-size: 1.3rem;
		font-family: var(--sans);
		padding-left: 10px;
	}
	#contacto ul.datos-en-contacto li a strong{
		color: var(--black);
		font-family: var(--serif);
		font-size: 1.6rem;
	}



/*Formulario de contacto*/

	#contenedor_formulario_completo_contacto{
		position: relative;
		width: 100%;
		font-family: var(--sans);
		margin-bottom: 80px;
	}

	.form-group{
		/* background-color: blue; */
		margin: 0;
		width: 100%;
		/* border: 5px solid lightseagreen; */
		padding-bottom: 10px;
	}
	.form-group .form-label{
		font-size: 1.4rem;
		color: var(--black);
		font-weight: 500;
	}

	.form-control, .form-select{
		padding: 15px 10px;
		background-color: var(--grey-5);
		border-radius: 0;
		color: var(--black);
		border: none;
		font-weight: 400;
		font-size: 1.3rem;
		border: 1px solid var(--grey-50);
		line-height: 1.5rem;
		transition: all .2s ease-in-out ;
	}

/*Feedback del form*/


	#mensaje_enviado_ok_contacto{
		display: none;
		padding: 150px 0;
	}
	#mensaje_enviado_ok_contacto p{
		display: block;
		text-align: left;
		color: var(--grey-10);
		font-weight: 600;
		font-size: 2.3rem;
		line-height: 2.7rem;
	}
	#mensaje_enviado_ok_contacto p span{
		font-weight: 300;
		display: block;
	}

	label.error{
		width: fit-content;
		position: relative;
		font-size: 1.2rem;
		font-weight: 400;
		text-transform: uppercase;
		display: none;
		color: var(--white);
		padding: 2px 4px;
		background-color: var(--black);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}


	#enviando_datos_contacto{
		display: none;
		width: 70px;
		height: 70px;
		padding: 10px;
		border-radius: 50%;
		background-color: var(--grey);
		position: absolute;
		z-index: 9999;
		left: 40%;
		top: 25%;
	}






/* customizar select -------------------------- */

select,::picker(select) {
	appearance: base-select;
}
.form-select{
	appearance: base-select;
	/* background-image: url("../img/chevron-right_primary.svg");
	background-size: 12px;
	background-position: calc(100% - 12px);
	background-color: red; */
}
.form-select option {
  border-bottom: 1px solid var(--grey-50);
  color: var(--grey);
  padding: 10px;
}
.form-select option:hover,
.form-select option:focus {
  background: var(--primary);
  color: var(--white);
}

.form-select::picker-icon{
	border: 1px solid yellow;
	opacity: 0;
	width: 10px;
	height: 16px;
	margin-top: -20px;
	/* background-image: url(../img/chevron-right_primary.svg);
	background-size: cover;
	background-repeat: no-repeat; */
}

select.form-select{
	color: var(--grey);
}











/* ***********************************************************************

Filosofia


**************************************************************************** */



video{
	object-fit: cover;
	width: 100%;
	height: 550px;
	/* position: relative;
	top: 0;
	left: 0px; */
}

#filosofia .contenido {
	/* border: 1px solid blueviolet; */
	padding-bottom: 80px;
}
#filosofia .contenido p{
	border-top: 1px solid var(--grey-50);
	padding-top: 20px;
	max-width: 320px;
	font-size: 1.3rem;
	line-height: 2.4rem;
}
#filosofia .contenido p strong{
	color: var(--black);
	padding-bottom: 15px;
}






/* ***********************************************************************

TERAPIAS

**************************************************************************** */
.terapias.contenido .row{
	/* border: 1px solid royalblue; */
	margin: 80px 0 20px 0;
}
.terapias.contenido span{
	/* background-color: greenyellow; */
	font-weight: 500;
	font-style: italic;
	font-family: var(--sans);
	color: var(--primary);
	font-size: 1.5rem;
}
.terapias.contenido h3{
	font-family: var(--sans);
	font-size: 2rem;
	font-weight: 600;
	padding: 0;
	margin-top: 0;
}
.terapias.contenido ul{
	margin-top: 30px;
	position: relative;
}
.terapias.contenido section ul{
	margin-top: 80px;
	position: relative;
}
.terapias.contenido section ul::after{
	position: absolute;
	content: "";
	width: 100px;
	height: 1px;
	background-color: rgb(134, 166, 185, .5);
	top: -40px;
	left: 0;
}
.terapias.contenido ul li{
	color: var(--grey);
	font-family: var(--sans);
	font-size: 1.3rem;
	padding-bottom: 5px;
	/* border: 1px solid red; */
}
.terapias.contenido ul li:first-child{
	color: var(--primary);
	font-style: italic;
	font-family: var(--serif);
	font-size: 2rem;
}
.terapias.contenido p {
	color: var(--black);
	/* border: 1px solid red; */
	margin-top: 20px;
}



/* ***********************************************************************

ARQ

**************************************************************************** */


.frase_destacadisima{
	/* background-color: red; */
	position: relative;
	color: var(--grey);
	padding: 100px 0px 60px 0px;
	max-width: 750px;
	font-style: italic;
	font-weight: 500;
}
.frase_destacadisima span{
	font-style: normal;
	text-transform: uppercase;
	font-size: 2.2rem;
	line-height: 3rem;
}
.frase_destacadisima::after{
	position: absolute;
	content: "";
	width: 70px;
	height: 70px;
	background-image: url(../img/comillas.svg);
	background-size: cover;
	background-repeat: no-repeat;
	top: 0;
	left: -100px;
}

#terapias .frase_destacadisima h2 span{ 
	text-transform: lowercase !important;
	font-style: normal;
}




/* .arquitectos ul.listado_con_parrafo{ padding: 80px 0; border: 10px solid red;}
.arquitectos ul.listado_con_parrafo li{
	border: 1px solid greenyellow;
	padding-bottom: 40px;
	position: relative;
	max-width: 600px;
}
.arquitectos ul.listado_con_parrafo li::after{
	position: absolute;
	content: "";
	top: 0;
	left: -35px;
	width: 24px;
	height: 24px;
	background-image: url(../img/check-grey50.svg);
	background-size: cover;
	background-repeat: no-repeat;
}
.arquitectos ul.listado_con_parrafo li h3{
	color: var(--primary);
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.6rem;
} */



.arquitectos.portada-gal{
	background-image: url(../img/water.jpg);
	background-attachment: fixed;
	background-attachment: fixed;
	/* Fija la imagen */
	background-size: cover;
	/* Cubre toda la pantalla */
	background-position: center;
	/* Centra la imagen */
	background-repeat: no-repeat;
	/* No repite la imagen */
	padding: 40px 0;
	color: var(--white);
}
.arquitectos.portada-gal h2{font-size: 4rem;}
.arquitectos.portada-gal p{ color: var(--white);}
.arquitectos.galeria{
	background-color: var(--black);
	color: var(--white);
	padding: 80px 0;
}

.galeria.ampliada.arquitectos .swiper-slide {
	height: 210px;
}

.galeria.ampliada.arquitectos .swiper-slide img {
	height: 210px !important;
	object-fit: cover;
}

/*-----CARDS iconicas osea con iconos-----*/
	.cards-iconicas .card{
		position: relative;
		transition: all .2s ease-in-out;
		/* border: 1px solid rebeccapurple; */
		padding: 100px 0px 20px 30px;
		background-color: var(--white);
	}
	.cards-iconicas .card .card-body{
		padding: 0;
	}
	.cards-iconicas .card .card-body p{
		margin-top: -20px;
		color: var(--black) !important;
	}	
	.cards-iconicas .card h5, .cards-iconicas .card-body p{
		color: var(--black);
		font-style: italic;
	}
	.cards-iconicas .card.grey{
		background-color: var(--grey-5);
	}
	.cards-iconicas .card::after{
		position: absolute;
		content: "";
		width: 22px;
		height: 22px;
		left: 30px;
		top: 30px;
		/* background-color: plum; */
		background-size: cover;
		background-repeat: no-repeat;
	}
.arquitectos.cards-iconicas .card.first::after{background-image: url(../img/iconos/ticket-percent.svg);}
.arquitectos.cards-iconicas .card.second::after{background-image: url(../img/iconos/layers.svg);}
.arquitectos.cards-iconicas .card.third::after{background-image: url(../img/iconos/timer.svg);}
.arquitectos.cards-iconicas .card.fourth::after{background-image: url(../img/iconos/droplet.svg);}
.arquitectos.cards-iconicas .card.fifth::after{background-image: url(../img/iconos/Rule-Icon.svg);}
.arquitectos.cards-iconicas .card.sixth::after{background-image: url(../img/iconos/pen-tool.svg);}

	#spa_home .cards-iconicas .card.first::after{background-image: url(../img/iconos/headset.svg);}
	#spa_home .cards-iconicas .card.second::after{background-image: url(../img/iconos/shower-head.svg);}
	#spa_home .cards-iconicas .card.third::after{background-image: url(../img/iconos/lightbulb.svg);}
	#spa_home .cards-iconicas .card.fourth::after{background-image: url(../img/iconos/library.svg);}
	#spa_home .cards-iconicas .card.fifth::after{background-image: url(../img/iconos/trees.svg);}






.cards-iconicas .porque_wb .card img{
	display: none;
}
.porque_wb .card:hover{
	border: 1px solid var(--primary-10);
}


.cards-iconicas .porque_wb .card:hover{ border: 1px solid transparent;}












.contenido.acordeon .row .col-md-7, .col-md-5 { padding: 0;}
.contenido.acordeon .accordion .accordion-item{
	border: 0;
	transition: all .3s ease-in-out;
}
.contenido.acordeon .accordion .accordion-item h2.accordion-header{

	padding-top: 0;
	padding-bottom: 0;
}
.contenido.acordeon .accordion .accordion-item h2.accordion-header button{
	color: var(--grey); 
	transition: all .2s ease-in-out;
	font-family: var(--sans);
	font-size:  1.9rem;
	line-height: 2rem;
	height: 60px;
	/* border: 1px solid yellow; */
	padding-left: 60px;
}
.contenido.acordeon .accordion .accordion-item h2.accordion-header button:not(.collapsed){
	color: var(--grey-50); 
	background-color: var(--black);
	border: none;
}
.contenido.acordeon .accordion .accordion-item .accordion-body:not(.collapsed){
	background-color: var(--black);
	color: var(--white);
	font-family: var(--sans);
	padding: 20px 10px;
	font-size: 1.4rem;
	line-height: 2rem;
}

.accordion-button:not(.collapsed){box-shadow: none;}
.contenido.acordeon .accordion .accordion-item h2.accordion-header button{border-radius: 0 !important;}

.accordion-button::after{
	background-image: url(../img/plus.svg);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	left: 25px;
	width: 20px;
	height: 20px;
}
.accordion-button:not(.collapsed)::after{
	background-image: url(../img/minus.svg);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	left: 25px;
	width: 20px;
	height: 20px;
}







.video-dinamico-wrap {
	position: relative;
	width: 100%;
	min-height: 240px;
}

#video-dinamico {
	/* Define la duración y el tipo de la transición de opacidad */
	transition: opacity 0.5s ease-in-out;
	opacity: 1; /* Estado visible por defecto */
}

#video-dinamico.fade-out,
#video-dinamico.is-empty {
	opacity: 0; /* Estado oculto durante el cambio */
}

.video-dinamico-placeholder {
	position: absolute;
	inset: 0;
	display: none;
	min-height: 240px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid rgba(188, 160, 102, 0.42);
	background:
		linear-gradient(135deg, rgba(188, 160, 102, 0.16), rgba(255, 255, 255, 0.68)),
		var(--grey-5);
	color: var(--grey);
	text-align: center;
}

.video-dinamico-placeholder.is-visible {
	display: flex;
}

.video-dinamico-placeholder span {
	color: var(--primary);
	font-family: var(--sans);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.video-dinamico-placeholder small {
	font-family: var(--mono);
	font-size: 0.9rem;
}


/* ***********************************************************************

SAUNAS

**************************************************************************** */




.beneficios-enlista{
	background-color: var(--grey-5);
	padding-top: 80px;
}
.beneficios-enlista ul.listado-conceptos li{
	color: var(--grey);
	font-size: 2.6rem;
	padding: 30px 0;
	border-bottom: 1px solid rgb(134, 166, 185, .5);
}

ul.listado-subrayado li{
	font-size: 1.5rem;
	line-height: 1.5rem;
	color: gray;
	font-family: var(--sans);
	padding: 15px 0;
	border-bottom: 1px solid rgb(134, 166, 185, .5);
}
#saunas ul li.last{ border: none;}
#saunas figure figcaption{
	background-color: var(--grey-50);
	color: var(--primary);
	font-size: 1.3rem;
	font-family: var(--sans);
	padding: 20px;
}

#saunas .card, .cards-iconos .card{
	/* border: 1px solid pink; */
	max-height: max-content;
	min-height: 200px;
}
#saunas .card .card-body, .cards-iconos .card .card-body{
	padding-bottom: 0;
	position: relative;
}

/*---after con el icono en card-------*/
	#saunas .card .card-body::after{
		position: absolute;
		content: "";
		background-image: url(../img/Link_Icon_w.svg);
		background-size: cover;
		background-repeat: no-repeat;
		height: 20px;
		width: 20px;
		top: 25px;
		right: 25px;
		transition: all .2s ease-in-out;
	}
	#saunas .card.card.grey-lightest .card-body::after{ background-image: url(../img/Link_Icon.svg);}
	#saunas .card:hover .card-body::after{
		top: 315px;
		right: 25px;
		background-image: url(../img/Link_Icon.svg);
	}

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

#saunas .card .card-body .card-title{
	font-size: 2.2rem;
	line-height: 2.2rem;
	color: var(--black);
	font-style: italic;
	/* position: relative;
	top: 120px; */
	margin-top: 0;
	transition: all .2s ease-in-out;
}

#saunas .card:not(:hover) .card-body .card-title{
	margin-top: 150px;
	/* border: 1px solid red; */
}

#saunas .card .card-footer{
	border: none;
	padding: 0px 0px 20px 20px;
}
/* Solo aplica el color blanco cuando la card NO tiene el mouse encima */
#saunas .card.grey-darkest:not(:hover) .card-body .card-title, #saunas .card.grey:not(:hover) .card-body .card-title {
    color: var(--white);
}#saunas .card.grey .card-footer p, #saunas .card.grey-darkest .card-footer p{color: var(--white);}
#saunas .card.grey-lightest .card-footer p{color: var(--black);}











/* ***********************************************************************

SPA PROFESIONAL

**************************************************************************** */

/* #spa_prof footer{
	margin: 0 !important;
} */

.banner_convideo {
    position: relative;
    overflow: hidden; /* Evita que el video sobresalga */
    padding: 80px 0px;
    min-height: 400px; /* Ajusta según necesites */
    display: flex;
    align-items: center;
}
.banner_convideo video{
	width: 100%;
    height: 800px;
}
/* Estilo para el video de fondo */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover; /* Mantiene la proporción cubriendo el área */
    z-index: -1; /* Lo envía al fondo */
}

/* Overlay (Capa de color) */
.banner_convideo::after {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0.2) 80%);
    mix-blend-mode: multiply;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; /* Por encima del video, debajo del texto */
}

/* Asegurar que el texto esté visible */
.content-overlay {
    position: relative;
    z-index: 1; /* Por encima de todo */
    color: var(--white);
}

.banner_convideo h1, .banner_convideo p{ color: var(--white); }




.slider {
  width: 100%;
  overflow: hidden; /* Esto es vital para que no salga barra de scroll */
}

.slide-track {
  display: flex;
  width: max-content; /* IMPORTANTE: Hace que la fila crezca todo lo necesario */
  animation: scroll 20s linear infinite;
}

.logo {
  width: 200px; /* Dale un ancho fijo a todos los logos */
  padding: 0 40px; /* Espaciado lateral uniforme */
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { 
    /* Se mueve exactamente la mitad (el set 1 completo) */
    transform: translateX(-50%); 
  }
}





/* ***********************************************************************

SPA HOME

**************************************************************************** */

#spa_home .parrafo_txt{
	padding: 40px 0px 80px 0px;
}
#spa_home .parrafo_txt h3{
	font-family: var(--sans);
	font-weight: 600;
	padding-bottom: 20px;
}

#spa_home .parrafo_txt img{
	height: 300px;
	width: 100%;
}






































































































.grid-filler {
	visibility: hidden;
}

.grilla_dinamica {
	grid-template-columns: 1fr;
}

/* .grilla_dinamica div {
	border: 1px solid red;
} */

.grilla_dinamica img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}

/*

.grilla_dinamica{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-auto-flow: row;
}

.grilla_dinamica div{
	padding: 20px;
	border: 1px solid red;
}
*/




#inicio > #wsp_btn{
	bottom: 110px;
}








#wsp_btn{
	position: fixed;
	right: 26px;
	bottom: 400px;
	z-index: 999;      /* Makes sure it stays on top of other elements */
	background-color: transparent;
	transition: all .2s ease-in-out;
	/* border: 1px solid red; */
}


/*Mix blend en span prueba definitive*/
	#wsp_btn a {
		position: relative;
		isolation: isolate; /* Esto es sagrado: crea el límite para el blend-mode */
		background: transparent; /* O el color que tenga tu botón */
	}
	#wsp_btn.mix .phone-text {
		mix-blend-mode: difference !important;
		text-shadow: none !important; /* ¡ESTO ES VITAL! La sombra anula el blend-mode */
		color: #20AF56 !important; /* El exclusion funciona mejor con texto blanco */
		position: relative;
		z-index: 1;
	}

#wsp_btn a img{
    border: 1px solid transparent; 
    border-radius: 50%;
    transition: all .2s ease-in-out;
	/* border: 1px solid blue; */
		mix-blend-mode: normal !important; 
		position: relative;
		z-index: 2; /* La ponemos por encima del plano de mezcla del texto */
}

#wsp_btn a span{
	/* border: 1px solid pink; */
	color: var(--white);
	font-size: 1.6rem;
	font-family: var(--sans);
	text-shadow: 0px 0px 4px rgba(0, 0, 0, .4);
}
#wsp_btn:hover a img{
	border: 1px solid var(--grey); 
	transform: scale(1.1); /* Un efecto más suave que mover pixeles */
}






/*
.btns_contacto{ transition: all .2s ease-in-out;}
.btns_contacto .col-4 a svg{padding: 5px 0;}
.btns_contacto .tel{background-color: var(--primary);}
.btns_contacto .wsp{background-color: #20AF56;}
.btns_contacto .mail{background-color: var(--grey);}

.btns_contacto .mail:active, .btns_contacto .wsp:active, .btns_contacto .tel:active{background-color: var(--black);}*/

ul#contact_mobile {
	margin: 0;
	padding: 0;
}
ul#contact_mobile li{
	float: left;
	padding: 0;
	margin: 0;
	display: block;
	width: 33.3%;
	text-align: center;
}
ul#contact_mobile li a{
	display: block;
	width: 100%;
	height: 90px;
	padding: 0;
	margin: 0;
	padding: 15px 0;
	background-color: blue;
}
ul#contact_mobile li a svg{
	width: 35px;
}

ul#contact_mobile li a.tel{background-color: var(--primary);}
ul#contact_mobile li a.wsp{background-color: #20AF56;}
ul#contact_mobile li a.mail{background-color: var(--grey);}

















footer{
	background-color: var(--black);
	margin-top: 0;
	color: white;
	/* position: relative; */
	/* z-index: 0; */
}
/* footer .container-fluid{
	 padding-right: 12px; 
	 padding-left: 12px;
} */
footer svg{
	margin: 20px 0px 0px 60px;
	padding-bottom: 20px;
}
footer h5{
	font-size: 1.6rem;
	line-height: 1.6rem;
	font-style: italic;
	font-weight: 500;
	color: var(--primary);
	position: relative;
	padding-left: 13px;
}
footer h5::before{
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	background-color: var(--black);
	height: 7px;
	width: 7px;
	rotate: -45deg;
	border-radius: 3px;
}
footer h6, footer h6 a{
	color: var(--grey-10);
	font-size: 1.2rem;
	line-height: 1.2rem;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 30px;
	text-decoration: none;
}
footer h6 a:hover{
	text-decoration: underline;
}

footer img.logo_footer {
	width: 75px;
	height: 30px;
	object-fit: contain; /* o cover */
	overflow: hidden;
	/* border:1px solid red; */
}
 



footer ul.social-links li a {
    display: inline-flex; /* Better for centering icons */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px; /* Added height for a perfect circle */
    border-radius: 50%; /* Make the background circle smooth */
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Professional "ease" */
    z-index: 1;
}

/* The Circle Border (Pseudo-element) */
footer ul.social-links li a::after {
    position: absolute;
    content: "";
    inset: -2px; /* Shorthand for top/bottom/left/right */
    border: 1px solid var(--grey-50);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8); /* Starts slightly smaller */
    transition: all 0.3s ease;
    z-index: -1;
}

/* Hover States */
footer ul.social-links li a:hover {
    background-color: var(--black);
    transform: translateY(-3px); /* Subtle lift effect */
}

/* Replace "zoom" with "scale" for the image/background */
footer ul.social-links li a:hover {
    background-size: 30px; /* If using background-image */
}

/* If you are using <img> tags inside the <a> */
footer ul.social-links li a img {
    transition: transform 0.3s ease;
}

footer ul.social-links li a:hover img {
    transform: scale(1.15); /* Much smoother than zoom */
}

footer ul.social-links li a:hover::after {
    opacity: 1;
    transform: scale(1); /* Grows into place */
}



footer .contenedor_wb_logo{ border-right: 0;}
footer .information{ 
	border-top: 1px solid rgb(134, 166, 185, .5);
	border-bottom: 1px solid rgb(134, 166, 185, .5);

}
footer .information .info_link{ padding: 40px; height: 200px;}

footer .information .info_link span{ color: var(--white);}
footer .information .info_link p{ color: var(--primary-10); font-size: 1.3rem;}
footer .information .info_link.showroom{ border-right: 1px solid rgb(134, 166, 185, .5); border-bottom: 1px solid rgb(134, 166, 185, .5);} 
footer .information .info_link.horarios{ border-bottom: 1px solid rgb(134, 166, 185, .5);} 
/* footer .information .info_link.soporte{ border-right: 1px solid rgb(134, 166, 185, .5);}  */
footer .information .info_link.contacto{ border-top: none; border-left: 1px solid rgb(134, 166, 185, .5); margin-left: -1px;}




footer .information .info_link a{
	color: var(--primary-10); 
	transition: all .2s ease-in-out;
	width: 10px;
	position: relative;
}
footer .information .info_link a:hover{
	color: var(--grey); 
}
footer .information .info_link.horarios p{color: var(--grey-50);}





/*------ESTO ES EL AFTER DE BOTONES INFO----*/
	footer .information .info_link a::after{
		position: absolute;
		content: "";
		background-image: url(../img/Link_Icon.svg);
		height: 20px;
		width: 20px;
		top: -25px;
		left: 0;
		mix-blend-mode: exclusion;
		/* border: 1px solid yellow; */
		background-color: var(--primary-10);
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0;
		transition: all .4s ease-in-out;
	}
	footer .information .info_link a:hover::after{
		opacity: .2;
		left: -30px;
	}
/*------ESTO ES EL AFTER DE BOTONES INFO----*/






























.material-symbols-outlined:hover{
	color:red
}










  /*Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {

	

	html {
		font-size: 11px;
	}
	/* .navbar-expand-xl .navbar-collapse {
		background-color: transparent !important;
	} */
	.portada{
		padding:0 0 70px 30px;
	}
	.portada h1{
		font-size: 7rem;
		line-height: 7rem;	
		max-width: fit-content;
	}



	#hidroterapias::after{
		display: block;
	}
	#hidroterapias::before{
		display: block;
	}
	#hidroterapias h1{
		font-size: 5rem;
	}
	#mas_elegidos .card { 
        height: 400px !important; 
    }
	#mas_elegidos .grupo-productos .card .card-body h5{
		color: var(--grey-50) !important;
        transition: color 0.3s ease;
	}



	.card .card-body h5.card-title{
    	margin-bottom: 20px;
	}

	#mas_elegidos .grupo-productos .card .card-body ul {
		opacity: 0 !important; /* Desaparece en desktop por defecto */
	}
/* EFECTO HOVER: Solo ocurre en pantallas grandes */
    #mas_elegidos .grupo-productos .card:hover .card-body h5 {
        color: var(--black) !important;
    }

	#mas_elegidos .grupo-productos .card:hover .card-body ul {
        opacity: 1 !important; /* Aparece al pasar el mouse */
    }
	#categorias .cada_tabla{
		margin-top: -28px;
	}
	.dimensiones{ margin-top: 0 !important;}

	.portada.interna{
		height: 60vh; /* Ocupa toda la pantalla */
		padding-bottom: 40px;
	}
	.portada.interna h1{
		font-size: 5rem;
		line-height: 5rem;
		padding-bottom: 10px;
	}
	.portada.interna h2{
		/* border: 1px solid yellow; */
		font-size: 1.8rem;
		font-weight: 2.4rem;
		padding: 0;

	}
	.frase_destacadisima::after{
		opacity: 1;
		top: 55px;
	}


	#terapias h3{
	padding-bottom: 10px;
	padding-top: 0;
	}
	
	#filosofia video{ left: -120px;}

	.contenido.acordeon .accordion .accordion-item .accordion-body:not(.collapsed){padding:20px 60px;}


	footer{ margin-top: 80px;}

	
}









  
  /*Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) { 


	.navbar-brand{
		margin-left: 15px;
	}
	

	.grilla_dinamica{
		display:grid;
		grid-template-columns:repeat(3,1fr);
		gap:20px;
	}

	/* .grupo-productos .card .card-body h5.card-title a.stretched-link{
		color: var(--grey-50);
	} */





	
	/*.grilla_dinamica{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: column;

		grid-template-rows: auto;  
		grid-auto-rows: 1fr;       

		gap: 20px
	}*/
	





	.encabezado-categoria{
		height: 160px;
	}
	.encabezado-categoria h1{
		line-height: 3rem;
	}

	.encabezado-categoria h1::before{
		display: block;
	}





	.encabezado-producto{
		background-image: url(../img/Header-Producto.png);
		background-size: cover;
		background-position: right;
		min-height: 300px;
		border: 1px solid white;
		border-left: 1px solid var(--black);
		position: relative;
	}
	
	.encabezado-producto h1{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 500px;
	}
	h4.categoria-producto{
		padding-left: 100px;
		color: var(--grey-50);
	}


	.btn-share{
		position: absolute;
		bottom: 10px;
		left: 0;
		width: 50px;
		height: 50px;
		color: white;
		background-image: url(../img/share-icon.svg);
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: center;
		background-color: var(--black);
		border-radius: 50%;
		background-color: var(--black);
		transition: all .2s ease-in-out;
	}



		#contenido_contacto::after{
	opacity: 1;
}

	footer .information .info_link{ height: stretch;}

	footer ul.social-links{border-top: 0;}
	footer .contenedor_wb_logo{ border-right: 1px solid rgb(134, 166, 185, .5);}
	footer .information .info_link.info_link.showroom { border-bottom: 0;}
	footer .information .info_link.horarios{ border-right: 1px solid rgb(134, 166, 185, .5); border-bottom: none;}
	footer .information .info_link.contacto{ border-top: 0; margin: 0;}






  }

  
  






 /* Large devices (desktops, 992px and up)*/ 
  @media (min-width: 992px) { 




	footer svg{
		margin: 50px 0px 0px 90px;
		padding: 0;
	}
	


		


	.terapias.contenido h3{
	margin-top: -8px;
	}

}
  









/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
		/*Links de Navegación*/


		
	.navbar-nav .nav-item a.nav-link{
		margin: 0 18px;
		padding-bottom: 0;
		padding-top: 0 !important;
		border: none;
	}
	.navbar-nav .nav-item.dropdown ul.dropdown-menu{
		margin-top:20px;
		border: none;
		/* border: 1px solid green; */
	}
	.navbar-nav .nav-item.dropdown ul.dropdown-menu ul{
		margin-top:0px;
	}	
	.dropdown-submenu:hover > .dropdown-menu {
        display: block;
        position: absolute;
        left: 100%; /* Lo patea a la derecha */
        top: 0;
    }



	.navbar-nav .nav-item{
		width: auto;
	}
	.navbar-nav .nav-item a.nav-link {
		margin: 0 10px;
		padding: 0;
		/* border: 4px solid paleturquoise; */
		height: auto;
	}

 }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }