@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300,400);
@import url(https://fonts.googleapis.com/css?family=Roboto:700,300,400);
/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {	margin:0;	padding:0;	border:0;	outline:0;	font-weight:inherit;	font-style:inherit;	font-size:100%;	font-family:inherit; }/* remember to define focus styles! */:focus {	outline:0;}body {	color:black;	background:transparent;}ol,ul {	list-style: none;}/* tables still need 'cellspacing="0"' in the markup */table {	border-collapse:separate;	border-spacing:0;}caption,th,td {	text-align:left;	font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after {	content:"";}blockquote,q {	quotes: "" "";}a:link,a:visited {	text-decoration: none; border: 0px solid;}a:hover,a:active {	text-decoration: underline;}
@font-face {
    font-family: 'OmnesMedium';
    src: url('../fonts/OmnesMedium.eot');
    src: url('../fonts/OmnesMedium.eot') format('embedded-opentype'),
         url('../fonts/OmnesMedium.woff2') format('woff2'),
         url('../fonts/OmnesMedium.woff') format('woff'),
         url('../fonts/OmnesMedium.ttf') format('truetype'),
         url('../fonts/OmnesMedium.svg#OmnesMedium') format('svg');
}

@font-face {
    font-family: 'OmnesLight';
    src: url('../fonts/OmnesLight.eot');
    src: url('../fonts/OmnesLight.eot') format('embedded-opentype'),
         url('../fonts/OmnesLight.woff2') format('woff2'),
         url('../fonts/OmnesLight.woff') format('woff'),
         url('../fonts/OmnesLight.ttf') format('truetype'),
         url('../fonts/OmnesLight.svg#OmnesLight') format('svg');
}

@font-face {
    font-family: 'OmnesBold';
    src: url('../fonts/OmnesBold.eot');
    src: url('../fonts/OmnesBold.eot') format('embedded-opentype'),
         url('../fonts/OmnesBold.woff2') format('woff2'),
         url('../fonts/OmnesBold.woff') format('woff'),
         url('../fonts/OmnesBold.ttf') format('truetype'),
         url('../fonts/OmnesBold.svg#OmnesBold') format('svg');
}

html, body {
	background: #FFF;
	font-family: Roboto;
	position: relative;
}

/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #397524 #DFE9EB;
}*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #717EA6;
}

*::-webkit-scrollbar-track:hover {
  background-color: #717EA6;
}

*::-webkit-scrollbar-track:active {
  background-color: #717EA6;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #0C1637;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #0C1637;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #0C1637;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(12, 42, 55, 1) 0%, rgba(12, 22, 55, 0) 100%);
    z-index: 101;
    transition: .5s all;
}

header.headInterna {
    position: sticky;
    background: #FFF;
}

header.headInterna.openedMobileMenu {
    background: #FFF;
}

header.headInterna .menuItem {
    color: #0C1637!important;
}

header.headInterna .navbar-light .navbar-nav .nav-link {
    color: #0C1637!important;
}

header.headInterna path {
    fill: #0C1637!important;
}

header.headInterna .navbar-light .navbar-toggler {
	color: #0C1637!important;
	box-shadow: none !important;
}

header.openedMobileMenu {
	background: linear-gradient(45deg, #0C1637, #0c16374f);
}

header.openedMobileMenu.moodWhite .logoHeadMob path,
header.openedMobileMenu.moodWhite .iconHead path,
header.openedMobileMenu.moodWhite #logoSvg path, 
header.openedMobileMenu.moodWhite svg.icon path {
	fill: #FFF;
}

header.openedMobileMenu.moodWhite .navbar-light .navbar-toggler {
	color: #FFF;
}

.menuCont {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menuDeskTop {
    display: flex;
    width: 90%;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
}

.menuMobile {
	display: none;
}

.menu-left, .menu-right {
    display: flex;
    gap: 35px;
    flex: 2;
}

.menu-right {
    justify-content: flex-end;
}

.menuItem {
    text-decoration: none!important;
    color: #FFF!important;
    font-weight: 500;
    font-family: 'OmnesMedium';
    display: flex;
    align-items: center;
    transition: .5s all;
}

.logo svg,
.logo img {
    height: 50px;
}

#logoSvg {
	transition: .5s all;
}

.mobile-menu-icon {
    display: none;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    flex-direction: column;
    align-items: center;
}

.mobile-menu a {
    padding: 10px 0;
}

img.logoHead {
    height: 40px;
}

.navbar-light .navbar-toggler {
    color: #FFF;
    border: 0;
    transition: .5s all;
}

.navbar-light .navbar-nav .nav-link {
    color: #FFF!important;
}

svg.icon {
	height: 13px;
    display: inline-block;
}

svg.icon path {
    fill: #FFF;
}

.logo {
    flex: 1;
    text-align: center;
}

.logoHeadMob path,
.iconHead path,
#logoSvg path,
svg.icon path {
    transition: .5s all;
}

.moodWhite {
	background: transparent;
}

.moodWhite .menuItem {
	color: #0C1637!important;
}

.moodWhite .logoHeadMob path,
.moodWhite .iconHead path,
.moodWhite #logoSvg path,
.moodWhite svg.icon path {
	fill: #0C1637;
}

svg.iconHead {
    height: 22px;
    display: inline-block;
}

.contMenuHeadMob {
    flex: 1;
}

.contLogoHeadMob {
    flex: 3;
    text-align: center;
}

.contLinksHeadMob {
    display: flex;
    gap: 15px;
    flex: 1;
}

.logoHeadMob {
    height: 80px;
}

.barraMobile {
	
}

.barraMobile a.navbar-brand {
    width: 300px;
}

.pantallaS {
	width: 100%;
	height: auto;
	min-height: 100vh;
	position: relative;
}

#Home {
	background: url(../images/fondoHome.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}

#Home video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btnGenTransp {
    border: 1px solid #FFF !important;
    color: #FFF !important;
    text-decoration: none!important;
    border-radius: 32px;
    font-family: 'OmnesMedium';
    padding: 5px 20px;
    display: block;
    min-width: 180px;
    text-align: center;
}

.contenidoCentrado {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.tituloPrin {
    font-family: 'OmnesMedium';
    font-size: 48px;
    color: #FFF;
}

p.ttxtHomePr {
    font-family: 'OmnesMedium';
    font-size: 21px;
    color: #FFF;
    max-width: 600px;
    text-align: center;
}

div#Botella {
    background: #5299c4;
	background: url(../images/fondo.jpg) no-repeat center center;
	background-size: cover;
}

.animBotella {
	width: 50%;
	height: auto;
    aspect-ratio: 1;
}

.conteidoBotellaAnn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.contAnimBotl {
    flex: 1;
}

.boxAnnBotella {
    flex: 1;
}

.contentBubbles {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.boxBubbles {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
}

.itemBubble {
    flex: 1;
    margin-bottom: 15px;
    padding: 15px;
	text-align: center;
}

.itemBubble figure {
    position: relative;
    margin: 0 !important;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.imgBubble {
    width: 70%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 50%;
    object-position: center;
    margin: 0 auto 15px;
    max-width: 300px;
    display: block;
    transition: .5s all;
}

img.imgBubble:hover {
	width: 90%;
}

.titBubble {
    font-family: 'OmnesMedium';
    color: #0C1637;
    margin-bottom: 15px;
    font-size: 18px;
    margin-top: -15px;
    opacity: 0;
    transition: 1s all;
}

.txtBubble {
    font-family: 'OmnesLight';
    color: #0C1637;
    font-size: 16px;
    margin-top: -15px;
    opacity: 0;
    transition: 1s all;
}

.itemBubble.envista .txtBubble,
.itemBubble.envista .titBubble {
	opacity:1;
	margin-top: 0;
}

.btnFullBlue {
	color: #FFF!important;
    text-decoration: none!important;
    border-radius: 32px;
    font-family: 'OmnesMedium';
    padding: 10px 20px;
	font-size: 16px;
	background: #0C1637;
	display: block;
}

#gotaItem {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
/*
    background: no-repeat center top url(../images/gota.png);
    background-size: contain;
*/
}

.contentInfoAnimBotella {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.tituloAnimBotella {
    font-family: 'OmnesMedium';
    font-size: 30px;
    color: #0C1637;
    margin-bottom: 15px;
}

.textAnimBotella {
    font-family: 'OmnesMedium';
    font-size: 18px;
    color: #0C1637;
}

.boxBeneficios .itemBubble {
    width: 100%;	
    max-width: 300px;
    text-align: center;
}

.contBeneficios .btnFullBlue {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    min-width: 180px;
}

.boxBeneficios {
    display: flex;
    flex-direction: column;
}

.boxInfoBienestar {
    text-align: center;
    margin: 0 auto 35px;
    width: 100%;
    max-width: 600px;
}

.tituloInfoBienestar {
    font-family: 'OmnesMedium';
    font-size: 30px;
    color: #0C1637;
    margin-bottom: 15px;
    margin-top: -15px;
    opacity: 0;
    transition: 1s all;
}

.textoInfoBienestar {
    font-family: 'OmnesMedium';
    font-size: 18px;
    color: #0C1637;
    margin-top: -15px;
    opacity: 0;
    transition: 1s all;
}

.boxInfoBienestar.enVista .tituloInfoBienestar,
.boxInfoBienestar.enVista .textoInfoBienestar {
    opacity: 1;
    margin-top: 0;
}

footer {
	background: url(../images/aguaabajo.png) no-repeat center bottom;
	background-size: cover;
	padding: 270px 15px 25px;	
}

p.txtFooter {
    font-family: 'OmnesBold';
    color: #FFF;
    text-align: center;
}

img.logoFoot {
    margin: 0 auto;
    width: 100%;
    display: block;
    max-width: 150px;
}

a.linksFooter {
    font-family: 'OmnesMedium';
    font-size: 16px;
    color: #FFF !important;
    text-decoration: none;
}

#HomeNosotros {
	background: url(../images/fndNosotros.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	max-height: 70vh;
    min-height: auto;
    height: 100%;
}

.clip-svg {
    clip-path: url(#myClip);
    -webkit-clip-path: url(#myClip); /* Compatibilidad WebKit */
    width: 100%; /* Asegura que la imagen o elemento se ajuste al contenedor */
    height: auto;
    display: block;
    object-fit: cover; /* Escala y centra la imagen dentro del contenedor */
}

.itemGotas {
    width: 100%;
    margin: 0 auto 30px;
    padding: 15px;
    padding-top: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    min-height: 70vh;
}

/* Estilo inicial para las imágenes */
.image {
    opacity: 0;
    transition: opacity 1s ease;
    position: absolute;
    top: 0;
    left: 0;
}

/* Imagen por defecto visible */
.image-1 {
    opacity: 1;
}

/* Cambios de visibilidad según la clase del contenedor */
.sticky-container.show-image-1 .image-1 { opacity: 1; }
.sticky-container.show-image-2 .image-2 { opacity: 1; }
.sticky-container.show-image-3 .image-3 { opacity: 1; }

/* Estilos para el contenedor sticky */
.sticky-container {
    position: sticky;
    margin: 90px auto;
    max-width: 290px;
    top: 25vh;
}

.conNosotros {
    display: flex;
}

.imagenGota {
	flex: 1;
    padding: 30px;
}

.grupoGotas {
    flex: 1;
    padding-top: 22vh;
}

.imagenGota svg {
    width: 100%;
    height: auto;
    margin-top: 70px;
}

.bodyGota {
    width: 100%;
    max-width: 400px;
}

.textoGota {
    font-family: 'OmnesMedium';
    font-size: 20px;
}

.textoGota b {
    font-family: 'OmnesBold';
}

.tituloGota {
    font-family: 'OmnesMedium';
    font-size: 40px;
    margin-bottom: 20px;
}

.fndBlueGr {
	background: rgb(12,22,55);
	background: linear-gradient(180deg, rgba(12,22,55,1) 0%, rgba(12,22,55,1) 60%, rgba(60,168,200,1) 100%);	
}

#HomeBeneficios {
	background: url(../images/fndBeneficiosCe.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	max-height: 600px;
    min-height: auto;
}

#HomeBeneficios .contenidoCentrado {
	max-height: inherit;
}
.mouseInd {
	position: absolute;
	bottom: 20px;
	width: 150px;
	left: 50%;
	margin-left: -75px;
	text-align: center;
    font-family: 'OmnesMedium';
    font-size: 14px;
    color: #FFF;
}

.mouseInd img {
	display: block;
	margin: 0 auto;
}

.boxBeneficio {
    padding: 80px;
    text-align: center;
    color: #FFF;
}

.imgBeneficio {
    max-width: 250px;
    width: 100%;
    margin: 0 auto 50px;
}

h3.tituloBeneficio {
    font-family: 'OmnesMedium';
    font-size: 40px;
    margin-bottom: 25px;
}

p.textoBeneficio {
    font-family: 'OmnesLight';
    font-size: 20px;
}

span.midtxtBene {
    font-size: 14px;
}

.midSecBeneTit {
    font-family: 'OmnesMedium';
    font-size: 22px;
    margin-bottom: 10px;
}

.midSecBeneTxt {
    font-family: 'OmnesLight';
    font-size: 18px;
}

.fondoGradBotes {
	background: rgb(104,148,192);
	background: linear-gradient(180deg, rgba(104,148,192,1) 0%, rgba(113,154,196,1) 22%, rgba(130,164,200,1) 24%, rgba(209,222,234,1) 54%, rgba(194,210,224,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
    z-index: 0;
}

.fondnoFijoCeleste {
    background: linear-gradient(180deg, rgba(104, 148, 192, 1) 0%, rgba(113, 154, 196, 1) 22%, rgba(130, 164, 200, 1) 24%, rgba(209, 222, 234, 1) 54%, rgba(194, 210, 224, 1) 100%);
    background-attachment: fixed;
}

.boxModConsu {
    z-index: 1;
    position: relative;
}

.contModConsu {
}

.boxModConsu {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
}

.boxBotellaInt {
    flex: 1;
    max-height:100vh;
    position: sticky;
    top: 30px;
}

.boxBotellaInt .conentAnimBotGir {
	width: 100%;
/*
    position: sticky;
    aspect-ratio: 1;
    top: 40px;
*/
}

div#comoToma {
/*
    position: sticky;
    aspect-ratio: 1;
    top: 0;
*/
	height: fit-content;
	margin: 35px 0;
}

.contentModoConsu {
    flex: 1;
}

.bodyModoConsu {
    padding: 60px 15px 30px;
    color: #0C1637;
    max-width: min(38vw, 520px);
}

.primerParrModoConsu {
    font-family: 'OmnesMedium';
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 25px;
}

video.vidMidMC {
    width: 100%;
    margin-top: 25px;
}

h1.tituloModCons {
    font-family: 'OmnesMedium';
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 35px;
}

p.bolPModCons {
    font-family: 'OmnesBold';
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.subtModCons {
    font-family: 'OmnesMedium';
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.normalPModCons {
    line-height: 1.2;
    font-family: 'OmnesLight';
    font-size: 18px;
    margin-bottom: 15px;
}

.normalPModCons span {
    font-family: 'OmnesBold';
}

.contentMap {
    padding: 80px 8%;
    width: 100%;
    margin: 0 auto;
}

#EncontranosC video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemMapa {
    font-family: 'OmnesLight';
}

.itemMapa h3 {
    font-family: 'OmnesBold';
	margin-bottom: 8px;
}

div#contenidoMapa {
    z-index: 10;
}

/* Caja de búsqueda en el mapa */
.location-box {
    position: absolute;
    top: 10px;
    left: 50px;
	width: 320px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    z-index: 1000;
}

/* Encabezado */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    gap: 10px;
}
}

.header img {
}

.header button {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: block;
    padding: 0;
}

/* Contenido (búsqueda y lista) */
.content {
    padding: 10px;
}

.search {
    display: flex;
    margin-bottom: 10px;
}

.search input {
    flex: 1;
    padding: 5px;
	border: 1px solid #D9D9D9;
    border-radius: 6px;
}

.search button {
    padding: 10px 15px;
    margin-left: 5px;
    background: #0C1637;
    border: 0;
    color: #FFF;
    border-radius: 28px;
}

.location-list {
    max-height: 200px;
    overflow-y: auto;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    gap: 10px;
}

.location-item button {
    padding: 8px 13px;
    cursor: pointer;
    border: 0;
    background: #6AA4D1;
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    border-radius: 28px;
}

.btnVerEnMapa img {
    height: 12px;
}



.tituloBuscamapa {
    font-family: 'OmnesBold';
}

svg.iconCartShop {
    width: 18px;
}

#toggleContent svg {
    transition: .5s all;
}


#toggleContent.cerra svg {
    transition: .5s all;
    transform: rotate(180deg);
}


.tituloLocList {
    color: #0C1637;
    font-family: 'OmnesBold';
    font-size: 16px;
}

.textoLocList {
    color: #0C1637;
    font-family: 'OmnesLight';
    font-size: 14px;
}

.location-item.sinNada {
    border: 0;
}

.leaflet-popup-content p {
    margin: 0!important;
}

.contentContactoGen {
    display: flex;
    height: 100%;
    align-items: center;
}

.boxContactoGen {
    z-index: 100;
    position: relative;
    height: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.formContacto,
.infoContacto {
    flex: 1;
    padding: 15px;
}

.tituContact {
    color: #0C1637;
    font-size: 36px;
    margin-bottom: 15px;
    font-family: 'OmnesMedium';
}

.textoContacto {
    color: #0C1637;
    font-size: 16px;
    font-family: 'OmnesMedium';
}

form#formContacto textarea,
form#formContacto input {
    border: 1px solid #D9D9D9;
    padding: 5px 10px;
    width: 100%;
    max-width: 260px;
    margin-bottom: 10px;
    border-radius: 6px;
	display: block;
}

form#formContacto textarea {
	resize: none;
	height: 90px;
}

button#enviarBtn {
    border: 0;
    background: #0C1637;
    color: #FFF;
    padding: 8px 15px;
    border-radius: 28px;
    font-size: 16px;
    font-family: 'OmnesMedium';
}

.modal-header {
    background: #0C1637;
    color: #FFF;
}

.modal-header .btn-close {
    color: #FFF !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center / 1em auto no-repeat;
	opacity: 1;
}

#btnBuscarLoc span {
	display: block;
}

#btnBuscarLoc i {
	display: none;
}

#locationBox {
    pointer-events: none; /* Desactiva eventos en el contenedor general */
}

#locationBox * {
    pointer-events: auto;
    cursor: initial;
}