/* PÁGINA HCE: ALEX */



@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {

  /* Colores */

  --oscuro: #0D2230;

  --semioscuro: #22577A;

  --verdeoscuro: #38A3A5;

  --verdesemiclaro: #57CC99;

  --verdeclaro: #80ED99;

  --semiblanco: #fafafa;

}



h1, h2, h3, span {

  font-family: "Poppins", sans-serif !important;

  font-optical-sizing: auto;

  font-style: normal;

}



h1 {

  font-size: 90px;

  font-weight: 800;

  color: var(--semiblanco);

}



h2 {

  font-size: 70px;

  font-weight: 600;

  color: var(--semiblanco);

}



h3 {

  font-size: 50px;

  font-weight: 400;

  color: var(--semiblanco);

}



p,a,input {

  color: var(--semiblanco);

}



p {

  margin: 0 !important;

}



span {

  color: var(--semiblanco);

}



a {

  text-decoration: none;

}



header {

  opacity: 0;

}



body {

  /* background-color: #0D2230 !important; */

}



.ocultar {

  display: none !important;

}



#subvencion-footer {

  display: none !important;

}



.contenido-hce {

  width: 100%;

  height: 100vh;

  z-index: 3;

}



.navbar {

  position: fixed;

  margin: 0 auto !important;

  top: 0;

  right: 0;

  left: 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem 1.5rem;

  opacity: 0;

  /* background-color: #fff; */

  z-index: 1;

}



.logo-hce {

  width: 130px;

}



.logo-expacioweb {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

}



.logo-expacioweb span {

  font-size: 14px;

}



.logo-expacioweb img {

  color: var(--semioscuro);

  font-size: 16px;

  width: 170px;

}



.btn-volver-a-web {

  padding: 1rem 1.5rem;

  display: flex;

  justify-content: center;

  align-items: center;

  color: var(--oscuro);

  background-color: var(--verdeclaro);

  border-radius: 50px;

  border: 1px solid var(--verdeclaro);

  font-size: 18px;

}



.fila-principal {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  position: relative;

}



.overlay {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  justify-content: center;

  align-items: center;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.overlay-back {

  height: 100%;

  background-color: var(--verdesemiclaro);

}



.fila-principal-contenido {

  display: flex;

  width: 100%;

  justify-content: space-evenly;

  align-items: center;

  justify-content: center;

  gap: 2rem;

  position: relative;

}



.fila-principal-contenido img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: -1;

  opacity: 0.7;

}



.fila-principal-bloque-1 {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.titulo-completo {

  line-height: 80px;

}



.fila-principal h1 {

  font-size: 90px;

  letter-spacing: 2px;

  font-weight: 800;

  opacity: 0;

  color: var(--semioscuro);

  text-align: center;

}



.fila-principal h3 {

  font-size: 25px;

  letter-spacing: 2px;

  opacity: 0;

  color: var(--semioscuro);

  letter-spacing: 6px;

  text-align: center;

}



.fila-principal h3 span {

  padding: 0.5rem 1rem;

  color: #fff;

  background-color: var(--verdeoscuro);

}



.scroll {

  position: absolute;

  bottom: 30px;

  left: 50%;

  width: 30px;

  height: 60px;

  border: 1.5px solid var(--semioscuro);

  border-radius: 50px;

  opacity: 0;

}



.scroll div {

  position: absolute;

  left: 50%;

  top: 0;

  height: 5px;

  width: 0;

  border: 1.5px solid var(--semioscuro);

}



.seccion-2 {

  width: 80%;

  margin: 0 auto;

  justify-content: center;

  align-items: center;

  display: flex;

  gap: 5rem;

}

.seccion-2 h2 {
  color: var(--semioscuro);
}



.bloque1-seccion-2 {

  width: 50%;

}



.bloque1-seccion-2 p {

  font-size: 1rem;

  margin-bottom: 1rem !important;

  color: var(--semioscuro);

}



.texto-seccion-2 {

  padding: 30px 30px 0px 0px;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  position: relative;

}



.svg {

  position: absolute;

  left: 0;

  width: 4.4rem;

  margin: 20rem 0 0 0;

}



.svg path {

  fill: var(--verdeclaro);

}



.foto-fran {

  width: 30%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.foto-fran-imagen {

  max-width: 450px;

  max-height: 700px;

  background-color: var(--verdeclaro);

  border-radius: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.foto-fran img {

  filter: drop-shadow(10px 10px 14px #38A3A5);

  border-radius: 15px;

}



.banner-1 {

  width: 90%;

  margin: 0 auto;

  overflow: hidden;

  padding: 15rem 0 14rem 0;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.banner-1 h1 {

  font-size: 100px;

  transform: scaleY(1.3);

  color: var(--verdeclaro);

}



.banner-1 h1:first-child {

  color: var(--semioscuro)

}



.banner-1 h1:last-child {

  text-align: end;

}

.seccion-3 {

  width: 70%;

  height: 50vh;

  margin: 0 auto;

  margin-top: 16rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 1rem;

  background-color: var(--verdeoscuro);

  border-radius: 20px;

}



.seccion-3 h3, .seccion-3 p {

  padding: 0 3rem 0 3rem;

}



.seccion-3 hr{

  width: 200px;

  height: 1px;

  background-color: var(--semiblanco);

  margin-left: 3rem;

}



.seccion-4 {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 70%;

  height: 100vh;

  position: relative;

  margin: 0 auto;

}



.contenedor-foto-equipo {

  margin: 0 auto;

  width: 100%;

  height: calc(100% - 2rem);

  position: absolute;

  top: 50%;

  left: 50%;

  border-radius: 15px;

  transform: translate(-50%, -50%);

  background-image: url('https://www.expacioweb.com/wp-content/uploads/2024/02/foto-equipo-final.webp');

  background-position: top;

  background-repeat: no-repeat;

  background-size: 100% 100%;

  display: flex;

  justify-content: center;

  align-items: flex-end;

}



.bloque1-seccion4{

  max-width: 80%;

  z-index: 1000;

  margin-bottom: 3rem;

}



.bloque1-seccion4 h2 {

  transform: scaleY(1.2);

  font-size: 50px;

}



.bloque1-seccion4 hr{

  margin: 2rem 0;

  width: 200px;

  height: 1px;

  background-color: var(--verdeclaro);

}



.foto-equipo-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(13, 34, 48, 0.7);

  z-index: 900;

  opacity: 0;

}



.seccion-4 span {

  width: calc(100% / 7);

  background-color: var(--oscuro);

  z-index: 999;

  height: 100%;

  filter: none;

}



.seccion-6 {

  max-width: 95%;

  margin: 10rem 2rem 0 2rem;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 40% 60%;

  align-items: flex-start;

}



.bloque1-seccion6 {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  position: relative;

}



.bloque1-seccion6 img {

  max-width: 450px;

  position: absolute;

  top: 50%;  

  left: 50%;

  transform: translate(-30%, 0%);

  border-radius: 5%;

}



.bloque1-seccion6 img:nth-child(1) {

  z-index: 900;

}



.bloque1-seccion6 img:nth-child(2) {

  z-index: 800;

}



.bloque1-seccion6 img:nth-child(3) {

  z-index: 700;

}



.bloque2-seccion6 {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.bloque2-seccion6 div {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 550px;

  height: 300px;

}



.bloque2-seccion6-h3 {

  font-weight: 600;

}



.bloque2-seccion6-h3 span {

  color: var(--verdeclaro);

  font-weight: 600;

}



.bloque2-seccion6 div:nth-child(2) {

  margin-top: 15rem;

}



.bloque2-seccion6 div:nth-child(3) {

  margin-top: 15rem;

}



.banner-2 {

  padding: 11rem 0 11rem 0;

}



.banner-2 h3 {

  margin: 0 auto;

  max-width: 80%;

  font-family: "Lora", serif;;

  text-align: center;

  font-style: italic !important;

  line-height: 50px;

  font-size: 40px;

}



.banner-2 span {

  font-style: italic !important;

  color: var(--verdeclaro);

  font-weight: 600;

}



.seccion-8 {

  width: 100%;

  height: 100vh;

  margin: 0 auto;

  position: relative;

}



.valores {

  max-width: 550px;

  height: 50vh;

  background-color: var(--oscuro);

  padding: 1rem 2rem;

  opacity: 0;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: flex-start;

}



.valores:nth-child(1) {

  position: absolute;

  top: 10%;

  left: 5%;

}



.valores:nth-child(2) {

  position: absolute;

  top: 14%;

  left: 12%;

}



.valores:nth-child(3) {

  position: absolute;

  top: 20%;

  left: 19%;

}



.valores:nth-child(4) {

  position: absolute;

  top: 24%;

  left: 26%;

}



.valores:nth-child(5) {

  position: absolute;

  top: 28%;

  left: 33%;

}



.valores:nth-child(6) {

  position: absolute;

  top: 32%;

  left: 40%;

}



.valores:nth-child(7) {

  position: absolute;

  top: 36%;

  left: 47%;

}



.valores:nth-child(8) {

  position: absolute;

  top: 40%;

  left: 54%;

}



.valores:nth-child(9) {

  position: absolute;

  top: 44%;

  left: 61%;

}



.valores span {

  font-size: 50px;

  font-weight: 800;

  color: var(--verdesemiclaro);

  text-align: center;

  text-transform: uppercase;

}



/* Footer */



.footer {

  padding: 6rem 0;

  display: grid;

  grid-template-columns: 55% 40%;

  align-items: center;

  gap: 3rem;

  width: 85%;

  margin: 0 auto;

  background-image: none;

  border-top: 1px solid var(--verdeclaro);

}



.bloque-1-footer {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

}



.bloque-1-footer a {

  padding: 0.8rem 2rem;

  display: flex;

  justify-content: center;

  align-items: center;

  color: var(--semioscuro);

  border-radius: 5px;

  border: 1px solid var(--verdeclaro);

  font-size: 16px;

  margin-top: 4rem !important;

}



.bloque-1-footer p {

  font-size: 16px;

  margin-top: 1.5rem !important;

  max-width: 600px;

}



.bloque-1-footer h3 {

  font-weight: 600;

}



.bloque-1-footer span {

  color: var(--verdeclaro);

}



.bloque-2-footer {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: end;

  gap: 8rem;

}



.bloque-2-footer p {

  font-size: 14px;

  text-align: right;

  font-weight: 600;

}



.bloque-2-footer p span {

  color: var(--verdeclaro);

}



.redes-sociales-footer {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-end;

  gap: 1rem;

}



.redes-sociales-footer span {

  font-weight: 600;

  font-size: 20px;

}



.iconos-sociales-footer {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

}



.banner-sub-footer {

  width: 100%;

  height: 150px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

  background-color: var(--semiblanco);

}



.banner-sub-footer h3 {

  font-weight: 600;

  font-size: 25px;

}



.banner-sub-footer span {

  color: var(--verdeclaro);

  font-weight: 600;

}



.bloque-2-footer span {

  color: var(--verdeclaro) !important;

}

























.btn-volver-arriba {

  opacity: 0;

  position: fixed;

  bottom: 30px;

  right: 30px;

  cursor: pointer;

}



.redes-sociales {

  opacity: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

  position: fixed;

  bottom: 30px;

  left: 30px;

}