@charset "UTF-8";
/* CSS Document */

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Asegura que el box-sizing se aplique a todos los elementos */
*, *::before, *::after {
    box-sizing: inherit;
}


body {
	color: #2D6E8B;
	
}

.logo img {
	height: 60%;
	width: auto;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-left: 30px;
}



h1 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
color: #2D6E8B;
}

h2 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
color: #47A2B4;
}

h3 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
color: #47A2B4;
}

h4 {
	background-color: #37383D; /* Fondo naranja */
            border-radius: 30px;      /* Esquinas redondeadas */
            padding: 10px;            /* Espaciado interno */
            color: white;             /* Texto blanco (opcional) */
}

h5 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	font-size: 1.5em;
  color: #E77A24;

	
}

 li {
	color: #8D9598;
	font-weight: 700;
	font-size: .9em; 
}

.btn-primary,  .btn-primary:active, .btn-primary:visited {
	margin-top: 1em;
	border: none;
    background-color: #B8EAC2 !important;
}

.btn-primary:hover {
	 background-color: #47A2B4 !important;
}






.btn-naranja {
  display: inline-block;
  padding: 10px 20px;
  background-color: #B8EAC2 ;   /* Color naranja */
  color: #2D6E8B;               /* Texto en blanco */
  text-decoration: none;      /* Quitar subrayado */
  font-size: 16px;
  border-radius: 25px;        /* Bordes redondeados */
  border: none;               /* Sin borde */
  transition: background-color 0.3s ease; /* Animación suave al pasar el mouse */
}

/* Efecto hover (cambio de color al pasar el mouse) */
.btn-naranja:hover {
  background-color: #47A2B4;  /* Cambia a un naranja más oscuro */
	color: white;
}



.iconos
{
	background-color:#47A2B4 ;
	padding-top: 50px;
	color: white;
}
.iconos h3 {
	color: white;
	text-align: center;
}
.iconos img {
	height: 100px;
	width: auto;
	
}
.ikon {
	text-align: right;
}

.contact {
	background-color: #EFEFEF;
}
.hero {
	background-color: #EFEFEF;
}
.beneficios {
	background-image: url('imagenes/spa.jpg'); /* Ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
   
}

.beneficios2 {
	background-image: url('imagenes/spa2.jpg'); /* Ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
	color:white;
   
}
.beneficios2 h3, h2 {
	color: aquamarine;
}
.beneficios2 li {
	color: white;
}

.beneficios li {
	color: gray;
}
.beneficios p {
	color: #2D6E8B;
}


.abajo {
	background-color: #2D6E8B;
}

.abajo h3 {
	color: white;
	text-align: center;
}


/* Estilo básico para todos los titulares */
.fade-in {
  opacity: 0;
  transform: translateY(-50px);  /* Comienza 50px por encima */
  transition: opacity 1s ease-in, transform 1s ease-in;
}

/* Clase para aplicar cuando el elemento es visible */
.fade-in-visible {
  opacity: 1;
  transform: translateY(0);  /* Se desliza a su posición original */
}