html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}


/* Importante: Añade margen al cuerpo para que el contenido no se esconda */


body {
	padding-top: 180px;
    font-family: 'Raleway', sans-serif;
}

/* Utilidades */
.container {
    width: 80%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;	
}

.primero{
	width: 50%;
	border-radius: 0.5em;
    /*border: 1px solid #F40A0E;*/
	text-align: left;
	float: left;
}

.segundo{
	width: 50%;
	border-radius: 0.5em;    
	float: left;
	
}

@media (max-width: 919px) {
   
	    .primero {
        width: 100%;	
    }

    .segundo {
		margin-top: 1em;        
		width: 100%;
    }
	
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5em;
    margin: 0 0.1em;
    border-radius: 0.5em;
}

.btn-primary {
    color: white;
    background-color: #0F2620;
}

.btn-secondary {
    color: white;
    background-color: #7BA69A;
}

.btn-danger {
    color: white;
    background-color: #A6444C;
}

.btn-light {
    color: black;
    background-color: #DDF2CE;
}

.btn-dark {
    color: white;
    background-color: #13312B;
}


.bg-header {
    /*background-image: url('../assets/images/piscina.jpeg');
	background-color: #DAECEC;*/	
	
	position: fixed; /* Hace que el encabezado se quede fijo */
    top: 0;          /* Lo posiciona en la parte superior */
    left: 0;         /* Lo alinea a la izquierda */
    width: 100%;     /* Ocupa todo el ancho */
    z-index: 1000;
	
  
	background-color: #2c3e50;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 9em;
}

.bg-navbar {
    /*background-color: rgba(0, 0, 0, 0.157);*/
    padding: 1.5em 0;
}



.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1128px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
    }
}

.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 2rem;
    margin-bottom: 1em;
    font-weight: 500;
}


@media (min-width: 1128px) {
    .navbar-brand {
        flex-direction: row;
        margin-bottom: 0;
		margin-left: 0;
    }
}

.navbar-brand img {
    width: 6em;
}


/*main*/

.main{
    background-color: white;
    padding: 0.3em;
    margin-top: -2em;
    border-radius: 0.3em;
}

.main-title {
    text-align: center;
    text-transform: uppercase;
	font-family: 'Cherry Swash', cursive;
	padding: 0 0 .5em 0;
}

.tienda{
	margin-top: 1em;
	margin-bottom: 1em;
}

@media (min-width: 919px) {
    .tienda {
        display: flex;
        gap: 1em;
    }
}

.contenedor-flex {
  display: flex; /* Activa Flexbox */
}

.caja {
  flex: 1; /* Hace que los divs ocupen el mismo ancho */  
  margin-right: 1em;	 
  /* Los divs se estirarán a la altura del más alto automáticamente */
}

/* CARD */
.card {
    background-color:#FFFFFF ; 
    color:black;
    overflow: hidden;
	width: 50%;
    border-radius: 0.5em;
    margin-bottom: 1em;	
}

.card-img {
    width: 100%;
}

.card-body {	
    padding: 1em;
	text-align: center;
}

.card-body h3 {	
    font-size: 2rem;    
    font-weight: 500;
}

.card-body p {
	font-size: 16px;
    font-weight: 300;
}

.card-izquierdo{
	background-image:url("../assets/images/527325257_18524182117049673_7352591446469355944_n.jpg");
	background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
	color:black;
    overflow: hidden;
	width: 100%;
	height: 100vh;
    border-radius: 0.5em;	
}

/* NOSOTROS */
.nosotros {	
	display: flex;
    justify-content: center;
	margin-bottom: 1em;
	/*display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
    background-color: #2F2E2E;*/
}


.nosotros-col-text {
    order: 2;
}

@media (min-width: 576px) {
    .nosotros-col-img {
        height: 500px;
    }
}

@media (min-width: 768px) {
    .nosotros {
        flex-direction: row;
    }

    .nosotros-col-img {
        order: 1;
        flex: 1 1 0;
    }

    .nosotros-col-text {
        order: 2;
        flex: 1 1 0;
    }
}


.nosotros-body {
    padding: 1em;	
    text-align: center;
	align-self: center;
    color: white; 
	background-image:url("../assets/images/WhatsApp Image 2025-11-28 at 9.05.10 PM (1).jpeg");
	background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
	position: relative;	
}

.nosotros-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1; 
}

.contenedorPadre {
  display: flex;
  justify-content: center;	
}
.parrafo_principal{
    width: 50%;	
	margin-top: 4em;
	height: auto;
	padding: 1em 1em 1em 1em;
	align-content: center;
	background-color: rgba(255, 255, 255, 0.5);
	align-self: center;
	/*margin-left: 20em;*/
	
}

.parrafo_principal label{
	
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 1.3em;
	
}

.parrafos{
  display: flex;
  justify-content: center;
  margin: 12em 0 2em 3em;   
  padding: 1em;    	
	
   /*width: 90%;
   height: auto;
   margin: 12em 0 2em 3em;   
   padding: 1em; */    	
}

.derecho{
	align-self: center;
	padding: .5em 1em 1em 2em;
	margin-left: 2em;
	background-color: rgba(255, 255, 255, 0.5);
	/*float: left;
	height: 8em;
	width: 30%;
	margin-left: 2em;
	padding: .5 1em 1em 2em;
	background-color: rgba(255, 255, 255, 0.2);*/
	
}

.titulo_izquierdo{
	margin-top: auto;
	/*align-self: center;*/	
	padding: 1em 1em 1em 2em;	
	background-color: rgba(255, 255, 255, 0.7);	
}

.titulo_izquierdo h5{
	font-size: 1.2em;
}

.caja .card{
	width: 100%;
}

@media (max-width: 768px) {
	.contenedor-flex{
		display: block;
	}
	
    .card {
        width: auto;
    }
	.card-izquierdo{		
		width: 100%;
		height: 30em;			
		
	}
	
	.parrafo_izquierdo{
		height: 30em;
	}
	
	.titulo_izquierdo h5 {
	 font-size: 1em;
   }
	
	.card-body h3{
		font-size: 1.5em;
	}
	.parrafos{
		font-size: 1em;
	}
	.parrafo_principal{
		font-size: .7em;
	}
}


.nosotros-body h2 {
    /*text-transform: uppercase;*/
    font-weight: 500;
	position: relative;
    z-index: 2;
}

.nosotros-body h3{
    /*text-transform: uppercase;*/
    font-weight: 500;
	position: relative;
    z-index: 2;
}

.nosotros-body .textos {
    font-weight: 200;
	position: relative;
    z-index: 2; /* Asegura que esté encima del pseudo-elemento */	
}

.nosotros-body .titulo {    
	position: relative;
    z-index: 2; /* Asegura que esté encima del pseudo-elemento */
}


@media (max-width: 768px) {
	.nosotros-body .derecho  {
		margin: 1em;
		padding: 0;
		align-self: auto;
}
	 .parrafos  {		
		margin: 0;
		padding: 0;		 
	}
	
	.nosotros-body {
		background-image:url( "../assets/images/WhatsApp Image 2025-11-28 at 9.35.43 PM (1).jpeg");
	}
	
	.container{
		margin-left: 1em;
	}	
	
}

@media (max-width:1128px) {
	.nosotros-body .parrafo_principal{		
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}
	
}

.cuerpo{
	text-align: center;
	width: 80%;	
	height: auto;
	padding: 1em 1em 1em 1em;
	align-content: center;	
	align-self: center;	
	/*margin-left: 20em;*/
}

.cuerpo p{
	text-align: center;
}




.servicios{
  margin-top: 1em;
  width: 100%;	
  /*max-width: 1000px;*/  
  padding: 10px;
  background-color:#B1CFE7;
  border-radius: 10px;  	
}

.servicios-boton {  	
  margin-top: .5em;
  width: 100%;	
  text-align: center;  
}

@media (min-width: 919px) {
    .servicios {
        display: flex;
        gap: 1em;
    }
}

.servicios .card{
	width: 100%;	
	background-color:#B1CFE7;
}

.servicios .card-body{
	display: flex; /* Activa flexbox */
    align-items: center; /* Centra verticalmente el contenido */
    gap: 20px; /* Espacio entre imagen y texto */
}

.servicios .card-body img {
    width: 50%; /* Ejemplo de tamaño */
    height: auto;
}

.servicios .card-body .texto-info {
    text-align: justify;
	margin-left: 2em;
}

.texto-info h2 {
	margin:0;
	padding: 0;
}

.card-titulo{
	width: 100%;
    padding: 1em;
	text-align: center;		
}

@media (max-width: 652px) {
	
	.servicios .card-body{
		display: block;
	}
	
	.texto-info{
		text-align: center;
		margin: 0;
	}
	
   .servicios .card-body img {
		width: 100%;		
	}
}

.opiniones{
  margin-top: 1em;
  width: 100%;	
  /*max-width: 1000px;*/  
   
  border-radius: 10px;
  	
}

.opiniones .card-body{
	
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; 	
	/*display: flex; 
    align-items: center; 
    gap: 20px; */
}

.opiniones .card{
	width: 100%;	
}

.opinion-uno{
	background: #B1CFE7;
	padding: 1em;
	border-radius: .5em;
	width: 48%;
	text-align: left;
	height: 18em;
}

.opinion-video{
	background: #B1CFE7;
	padding: 1em;
	border-radius: .5em;
	width: 48%;
	text-align: left;
	height: auto;
}

video {
    display: block; /* Evita espacios extra */
    margin: 20px auto; /* Centrar y dar espacio */
    border: 2px solid #ccc;
    border-radius: 8px;
    max-width: 50%; /* Ajustable */
    height: auto;
}

@media only screen and (max-width: 768px) {

	.opinion-uno{
		width: 100%;
	}
	video{
		max-width: 100%; /* Ajustable */
	}
	.opinion-video{
		width: 100%;
	}
	
}

/* Ejemplo usando una clase */

/* FOOTER */
.bg-footer {
    background-color: #13312B;
    color:#FFFFFF ;
	padding-bottom: 2em;
	height:20em; 
	
}

.primero  h1, h4, p {
    padding: 1em 0 1em 0;
    margin: 0;
    text-align:left;
}

.primero img{
	margin-right: 1em; 
}

.segundo h4{
	padding: 1em 0 0 0;
    margin: 0;
    text-align:left;
}

.alinear{
	margin-left: .5em;
}

.bg-footer .iconos{
	width: 2em;
	height: 2em;
	float: left;
	
}

.container p{
	float: left;
}

@media (max-width: 1128px) {
	.bg-footer {
		height: 40em;
	}
	
}

.vinculo_programa{
	padding-top: 1em;
}

.vinculo_programa a{
	text-decoration: none;
	font-size: 1.2em;
	color: white;
}

/*@media (max-width: 768px) {
    .navbar-nav{
        display: none;
    }	
}*/
