/* Creado y desarrollado por Eduardo Fernández */

body {
  /*font-family: Arial, sans-serif;*/
  scroll-behavior: smooth;
}

.seccion {
  position: relative;
  padding: 80px 20px;
  text-align: center;


}

#inicio {
  padding: 280px 20px;
  background:
    url("../img/logoFinancialSuccess.png") no-repeat,
    linear-gradient(to left,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0)),
    linear-gradient(to top,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0)),
    url(../img/contrato.jpg) center no-repeat;

  height: 100%;
  width: 100%;
  display: table;
  position: relative;

  /* 👇 control de tamaño y posición */
  background-size: 50% auto, auto, auto, cover;
  background-position: right center, center, center, center;
}

/* Seccion de Menu */
.navbar-nav .nav-link {
  margin: 0 5px;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  background-color: #42d9e4;
  /* fondo turquesa */
  color: #ffffff;
  /* texto blanco */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  /* sombra alrededor */
  border-radius: 5px;
  /* esquinas redondeadas opcionales */
  padding: 5px 10px;
  /* da espacio para que parezca botón */
  transition: all 0.3s ease;
  /* animación suave */
}

/* Edicion de la secicion estrategia */

.estrategia {
  width: 100px;
  /* ancho del área visible: solo la mitad derecha */
  height: 200px;
  /* igual que el hexágono */
  overflow: hidden;
  /* recorta la parte que sobresalga */
  position: relative;
  background: #f0f0f0;
  /* opcional, solo para ver el contenedor */
}

.hexa {


  --b: 15px;
  /* adjust to control the border  */
  height: 200px;
  /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path:
    polygon(0 50%, 50% -50%, 100% 50%, 50% 150%, 0 50%,
      var(--b) 50%,
      calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(100% - var(--b)) 50%,
      calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      var(--b) 50%);
  background: #00aec8;
  /* Rotación 90° a la derecha */
  transform: rotate(90deg);
  transform-origin: center;
  /* punto de giro en el centro */
  position: relative;
  left: -210px;
  animation: pulse 3s infinite ease-in-out;
}

.hexa:nth-child(2) {
  left: -210px;
  animation: pulse 3s infinite ease-in-out 1.5s;
  /* empieza después */
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1) rotate(90deg);
  }

  50% {
    transform: scale(1.1) rotate(90deg);
  }
}

/*Estilo de cuerpo de texto de seccion "estrategia" */

#estrategia h1 {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* asegura que esté encima */
  color: #000;
  font-size: 3rem;
  text-align: center;
  /*Tipo y tamaño de fuente*/
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #00aec8;

}

#estrategia p {
  position: absolute;
  top: 70%;
  left: 35%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* asegura que esté encima */
  text-align: center;
  /*Tipo y tamaño de fuente*/
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 70;
  font-style: normal;
  color: #0a4759;
}


/* Isotipo de Financial Success */
#estrategia .isotipo {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  max-width: 30%;
  height: auto;

  animation: float 3s ease-in-out infinite;
}

/* Animaicion de Isotipo*/
@keyframes float {

  0%,
  100% {
    transform: translateY(-50%) translateY(0);
  }

  50% {
    transform: translateY(-50%) translateY(-15px);
  }
}

/*Sección de servicios */



#servicios h1 {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #00aec8;

}

.azulMarino {
  color: #0a4759;
  /* azul */
  font-weight: bold;
}

#servicios p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 70;
  font-style: normal;
  color: #0a4759;
}

/* iconos de servicios*/
.servicios-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
  /* para que se acomoden en mobile */
}

.servicio {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  flex: 1 1 250px;
  /* responsivo: mínimo 250px */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio i {
  font-size: 3rem;
  color: #00aec8;
  margin-bottom: 15px;
}

.servicio h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #0a4759;
}

.servicio p {
  font-size: 1rem;
  color: #555;
}

.servicio:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.15);
}

/* Sección de Experencia */

/* Sección de Experiencia */
#experiencia {
  display: flex;
  /* activa flexbox */
  align-items: center;
  /* centra verticalmente */
  justify-content: space-between;
  /* texto izq - imagen der */
  gap: 40px;
  /* espacio entre columnas */
  padding: 60px 5%;
  background-color: #ffffff;
  
}
#experiencia .fondo-experencia {
  background-image: url("../img/fondo-experencia.png"); /* tu imagen */
  background-size: cover;      /* ajusta la imagen a todo el div */
  background-position: center; /* centra la imagen */
  background-repeat: no-repeat;/* evita que se repita */

  position: absolute;  /* lo ponemos detrás del texto */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 2; /* lo manda al fondo */
  opacity: 0.2; /* opcional: baja opacidad para que no tape el texto */

    /* Animación */
  animation: zoomOut 10s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2); /* empieza más cerca */
  }
  100% {
    transform: scale(1);   /* termina más alejado */
  }
}

/* Contenedor de texto */
#experiencia .texto-experiencia {
  flex: 1;
  /* ocupa la mitad izquierda */
  max-width: 50%;
  text-align: left;
  /* alinea el texto a la izquierda */
}

#experiencia h1 {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #00aec8;
  margin-bottom: 20px;
}

#experiencia p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

/* Imagen a la derecha */
.experiencia-img {
  flex: 1;
  max-width: 50%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.experiencia-img:hover {
  transform: scale(1.05);
}

/* Responsive: en móviles se apila */
@media (max-width: 768px) {
  #experiencia {
    flex-direction: column;
    text-align: center;
  }

  #experiencia .texto-experiencia,
  .experiencia-img {
    max-width: 100%;
  }

  #experiencia .texto-experiencia {
    text-align: center;
  }
}

/* Sección de contacto */

#contacto {
  display: flex;              /* activa flexbox */
  justify-content: flex-end;  /* empuja el contenido a la derecha */
  align-items: center;        /* centra verticalmente */
  background-color: #00aec8 !important;
  padding: 80px 5%;
}
/* Imagen a la izquierda */
.imagen-contacto {
  flex: 1;              /* ocupa 50% */
  max-width: 50%;
}

.imagen-contacto img {
  width: 70%;          /* la imagen ocupa todo su contenedor */
  height: auto;         
  border-radius: 12px;  /* esquinas redondeadas opcionales */
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}
/* Texto a la derecha */
.texto-contacto {
  flex: 1;
  max-width: 50%;             /* ocupa la mitad de la pantalla */
  text-align: center;          /* alinea texto al centro */
  color: #fff;                /* texto blanco para contraste */
}

.texto-contacto h1 {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.5rem; /* tamaño grande */
  margin-bottom: 20px;
}
.texto-contacto p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
}

.texto-contacto i {
  color: #fff;
  margin-right: 10px;
  font-size: 1.5rem;
}