@charset "utf-8";
body {
  overflow-x: hidden;
}

@media (max-width: 768px) {
	#header {
		
		margin-top:-220px !important;
	    height: 60px !important;
			
		background-color: #232323 !important;
	}
	
	
	
}

@media (min-width: 768px) {
	#header {
		background-color: white !important;
		height: 160px !important;
		width: 100% !important;
		margin-top: 0 !important; /* Evitamos moverlo hacia arriba */
		position: fixed !important; /* Fija el header */
		top: 0; /* Lo pega a la parte superior */
		left: 0;
		z-index: 2000;
	}
	.main-nav{
		
		background-color: #232323 !important;
        height: 50px;
        margin-top: -120px !important;
		width: 80% !important; 
		text-align: right;
		width: 100% !important;
	}
	
	
	
	header .container {
		width: 100% !important;
	}
	}
/*geometría medium*/
@font-face {
  font-family: 'Geometria Bold';
  src: url("../assets/fonts/Geometria-Bold.ttf");
}


/*geometría*/
@font-face {
  font-family:'Geometria';
  src: url("../assets/fonts/Geometria.ttf");
}


/*geometría Medium*/
@font-face {
  font-family:'Geometria Medium';
  src: url("../assets/fonts/Geometria-Medium.ttf");
}


    .sectiontitulo {
      text-align: left;
      width: 100%;
      margin: auto;
	  margin-top: -150px;
	  align-items: center;
      
   }
.h2titulo
{
	margin-top:360px;
}

@media (max-width:767px)
{
	.altosvg{
		 
		
		 width: 100%;
	 }
}
@media (min-width:767px)
{
	
	.altosvg{
		
		 
	 }
}


@media only screen and (max-width:360px){
    .h2titulo {
		 font-family: 'Geometria';
      font-size: 22px !important;
      color: #37AB8A !important;
      margin-bottom: 10px;
		 position: relative;
		 left: 1%;
		
		
    }

    .psubtitulo {
      font-size: 15px;
      line-height: 1.8em;
      color: #000000;
      margin-bottom: 30px;
	  max-width: 98%;
		 position: relative;
		 left: 1%;
		font-family: 'Geometria';
    }
	 
	 .content{
	width: 180px;
		 margin-left: -30px;
}
	
	.loguito {
  width: 200px;
  height: auto;
	margin-left: -20px;
}
	 
}

@media only screen and (min-width:361px) and (max-width:767px){
    .h2titulo {
		 font-family: 'Geometria';
      font-size: 24px !important;
      color: #37AB8A !important;
      margin-bottom: 10px;
		 position: relative;
		 left: 1%;
		
		
    }

    .psubtitulo {
      font-size: 15px;
      line-height: 1.8em;
      color: #000000;
      margin-bottom: 30px;
	  max-width: 98%;
		 position: relative;
		 left: 1%;
		font-family: 'Geometria';
    }
	 
	 .content{
	width: 200px;
		 margin-left: -20px;
}
	
	.loguito {
  width: 220px;
  height: auto;
	margin-left: -20px;
}
	 
}
@media only screen and (min-width:768px) and (max-width:1366px)  
	{
    .h2titulo {
		 font-family: 'Geometria';
      font-size: 38px !important;
      color: #37AB8A !important;
      margin-bottom: 10px;
		 position: relative;
		 left: 19%;
		
		
    }

    .psubtitulo {
		 font-family: 'Geometria';
      font-size: 17px;
      line-height: 1.8em;
      color: #000000;
      margin-bottom: 30px;
	  max-width: 560px;
		 position: relative;
		 left: 19%;
    }
		.content{
	width: 250px;
}

	.loguito {
  width: 250px;
  height: auto;
	margin-left: -20px;
}	
		 
}

@media only screen and (min-width:1367px)  {
    .h2titulo {
		 font-family: 'Geometria';
      font-size: 42px !important;
      color: #37AB8A !important;
      margin-bottom: 10px;
		 position: relative;
		 left: 24%;
		
		
    }

    .psubtitulo {
      font-size: 17px;
      line-height: 1.8em;
      color: #000000;
      margin-bottom: 30px;
	  max-width: 520px;
		 position: relative;
		 left: 24%;
		font-family: 'Geometria';
    }
	
	.content{
		width: 250px;}
	
	
	.loguito {
  width: 260px;
  height: auto;
	margin-left: -20px;
}
}

    .full-width-image {
      width: 100%;
      height: auto;
      display: block;
    }

    @media (max-width: 600px) {
      

      .psubtitulo {
        font-size: 16px !important;
		  font-family: 'Geometria';
      }
    }


/* Contenedor principal con grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dos columnas por defecto */
  gap: 20px;
  justify-items: center;
	max-width: 1000px;
	margin-top:100px;
	margin-left: auto;
	margin-right: auto;
	
            
}

/* Estilo para cada item de la grilla */
.grid-item {
  display: grid;
  grid-template-columns: 150px 1fr; /* Imagen en la primera columna, texto en la segunda */
  grid-template-rows: auto 1fr; /* La firma se coloca en una fila nueva al final */
  gap: 15px;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  width: 100%;
	background-color: white;
}

/* Contenedor de la imagen del perfil */
.profile {
  display: grid;
  grid-template-columns: 150px 1fr; /* Imagen a la izquierda y contenido a la derecha */
  gap: 15px;
}

/* Imagen del perfil */
.profile-image {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
}

/* Estilo para los textos (nombre, subtítulo y detalles) */
.name {
  font-size: 20px;
  
	color: black;
	 font-family: 'Geometria Bold';
}

.subtitle {
  font-size: 16px;
  
  font-style: italic;
	color: black;
	font-family: 'Geometria';
	font-weight: bold
}

.details {
  font-size: 15px;
  color: #333;
  margin-top: 10px;
	font-family: 'Geometria';
	text-align: justify;
}

/* Logo de la firma (al final de la grilla) */
.signature {
  grid-column: span 2; /* Hace que ocupe toda la fila */
  text-align: center;
}



/* Responsividad para pantallas más pequeñas */
@media (max-width: 768px) {
  .grid-container {
    
	
	  
	  grid-template-columns: 1fr;
        width: 100%;
        padding-left: 0px;
        margin-left: auto;
	  margin-right: auto;
  }

  .grid-item {
    grid-template-columns: 1fr; /* Una sola columna también para los items */
  }

  .signature {
    grid-column: span 1; /* Asegura que la firma esté en una sola fila */
  }
}


.grilladegrade{
	
	background: linear-gradient(to bottom, white, rgb(55, 171, 138));
	padding-bottom: 100px;
}
 

.linea-horizontal {
  width: 100%;
  height: 10px;
  background-color: rgb(55, 171, 138);
  border: none;
  margin: 0; /* Opcional, para quitar espacios por defecto */
}
