@charset "utf-8";
/* CSS Document */
/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;600&family=Merriweather+Sans&family=Montserrat&family=Open+Sans:wght@400;600;700&display=swap');

/*barra superior*/
.skippy {
  background-color: #D4A413;
}
.text-center {
  text-align: center !important;
}
.py-2 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .active > .nav-link {
  color: #CD7F32;
}

img_sombra {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.bg-light {
      background-image: url("../images/fondo.jpg");
    background-repeat: repeat;
}



/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather Sans', sans-serif;
}

h1 {
    font-size: 30px;
    font-weight: 600;
}

h2 {
    font-size: 26px;
    font-weight: 400; 
    color: #CD7F32;
}

h3 {
    font-size: 22px;
    font-weight: 300;
    padding-top: 10px;
    padding-bottom: 5px
}

h4 {
    font-size: 18px;
    font-weight: 200;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

.pief {
    font-size: 12px;
    color: darkgray;
    font-style: italic;
}


.miembros {
  color: #16163f;
  font-family: "Merriweather", Sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.2em;
}


/* Texto general */
body {
  font-family: 'Montserrat', sans-serif;
    text-align: justify;
  padding-bottom: 3rem;
  color: #5a5a5a;
    background-color: #F2F2F2;
    background-image: url("../images/fondo.jpg");
    background-repeat: repeat;
    
  
}  
.lead {
  font-size: 1.05rem;
  font-weight: 200;
}

/*.lead2 {
  padding: 0px 0px 0px 30px;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #F3C332;
}*/


p {
  margin-top: 0;
  margin-bottom: 1rem;
}


.amarillo {
color: #16163f;
    text-align: left;
  font-size: 40px;
  font-weight: 100;
  text-transform: none;
  line-height: 1.4em;
 padding: 0px 0px 0px 30px;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #F3C332;    

    
}

.tamarillo {
    color: #F3C332;
    
}

.blanco {
    color: white!important;
}

.azul {
    
    color: #CD7F32;
    
}
.fpie {
    background-image: url("../images/fpie.jpg");
    background-repeat: repeat-x;
    opacity: 0.8;
    
}

.gris {
    
    color: #CBCBCB;
    
}

.fgris {
    
    background-color: #CBCBCB;
    padding-top: 5px;
    padding-bottom: 5px;
    
}

a {
  color: #353132;
}

a::hover {
  color: #0592EC;
  text-decoration: underline;
}



.textColumnas {
  text-align: justify;
  color: #4a4a4a;
    padding: 10px;
}

img.img-responsivesf {
    margin: auto;
    display: block;
    padding: 3px;

    
    
    
    
}

img.img-responsive {
    margin: auto;
    display: block;
background: linear-gradient(to bottom right, #784915 16%,#F8CF75 51%,#FFFFE2 84%);
padding: 3px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    
    
    
    
}

.rounded {
  border-radius: 1.25rem !important;
}

.btnPos {
    position: absolute;
    margin-left: -600px;
    margin-top: 200px;
  
}


/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 200px!important;    
  height: 100%;
}



/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* Centrar vertical y horizontalmente los elementos en cada diapositiva */


/* Estilo para el título principal */
.carousel-caption h2 {
  font-size: 80px;
  color: #000000; /* Texto negro */
}

/* Estilo para el botón */
.carousel-caption a.btn-primary {
  background-color: #CD7F32; /* Color del botón */
  color: #fff; /* Texto blanco */
  text-decoration: none; /* Quitar subrayado del enlace */
}


/* Cambiar el color del texto del botón al pasar el mouse (hover) */
.carousel-caption a.btn-primary:hover {
  color: #fff; /* Texto blanco al pasar el mouse */
    font-weight: 800;
  background-color: #D4A413;
  border-color: #D4A413;    
}

/* botones */
.btn-primary {
  color: #fff; /* Texto blanco al pasar el mouse */
  background-color: #D4A413;
  border-color: #D4A413;
}


.btn-primary:hover {
  color: #fff; /* Texto blanco al pasar el mouse */
    font-weight: 800;
  background-color: #D4A413;
  border-color: #D4A413; 
}

.btn-center {
  display: flex;
  align-items: center;
  justify-content: center;
      max-width: 50%; /* Puedes ajustar este valor según tus necesidades */
  margin: auto; /* Centra horizontalmente */
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
      color: #111111; 
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 3rem;
  }
}

/*Profiles */

.single_advisor_profile {
    position: relative;
    margin-bottom: 50px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    z-index: 1;
    border-radius: 15px;
    -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
    box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
}
.single_advisor_profile .advisor_thumb {
    position: relative;
    z-index: 1;
    border-radius: 15px 15px 0 0;
    margin: 0 auto;
    padding: 10px 10px 0 10px;
    background-color: #D4A413;
    overflow: hidden;
}
.single_advisor_profile .advisor_thumb::after {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    position: absolute;
    width: 150%;
    height: 80px;
    bottom: -45px;
    left: -25%;
    content: "";
    background-color: #ffffff;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
@media only screen and (max-width: 575px) {
    .single_advisor_profile .advisor_thumb::after {
        height: 160px;
        bottom: -90px;
    }
}
.single_advisor_profile .advisor_thumb .social-info {
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
    right: 30px;
    text-align: right;
}
.single_advisor_profile .advisor_thumb .social-info a {
    font-size: 14px;
    color: #875421;
    padding: 0 5px;
}
.single_advisor_profile .advisor_thumb .social-info a:hover,
.single_advisor_profile .advisor_thumb .social-info a:focus {
    color: #CD7F32;
}
.single_advisor_profile .advisor_thumb .social-info a:last-child {
    padding-right: 0;
}
.single_advisor_profile .single_advisor_details_info {
    position: relative;
    z-index: 1;
    padding: 30px;
    text-align: right;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    border-radius: 0 0 15px 15px;
    background-color: #ffffff;
}
.single_advisor_profile .single_advisor_details_info::after {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 3px;
    background-color: #875421;
    content: "";
    top: 12px;
    right: 30px;
}
.single_advisor_profile .single_advisor_details_info h6 {
    margin-bottom: 0.25rem;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single_advisor_profile .single_advisor_details_info h6 {
        font-size: 14px;
    }
}
.single_advisor_profile .single_advisor_details_info p {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    margin-bottom: 0;
    font-size: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single_advisor_profile .single_advisor_details_info p {
        font-size: 12px;
    }
}
.single_advisor_profile:hover .advisor_thumb::after,
.single_advisor_profile:focus .advisor_thumb::after {
    background-color: #D4A413;
}
.single_advisor_profile:hover .advisor_thumb .social-info a,
.single_advisor_profile:focus .advisor_thumb .social-info a {
    color: #ffffff;
}
.single_advisor_profile:hover .advisor_thumb .social-info a:hover,
.single_advisor_profile:hover .advisor_thumb .social-info a:focus,
.single_advisor_profile:focus .advisor_thumb .social-info a:hover,
.single_advisor_profile:focus .advisor_thumb .social-info a:focus {
    color: #ffffff;
}
.single_advisor_profile:hover .single_advisor_details_info,
.single_advisor_profile:focus .single_advisor_details_info {
    background-color: #D4A413;
}
.single_advisor_profile:hover .single_advisor_details_info::after,
.single_advisor_profile:focus .single_advisor_details_info::after {
    background-color: #ffffff;
}
.single_advisor_profile:hover .single_advisor_details_info h6,
.single_advisor_profile:focus .single_advisor_details_info h6 {
    color: #ffffff;
}
.single_advisor_profile:hover .single_advisor_details_info p,
.single_advisor_profile:focus .single_advisor_details_info p {
    color: #ffffff;
}

/*Menu superior */

/* Fuente, tamaño y color de texto para todos los elementos del menú */

.navbar {
  position: relative;
  border-top: 2px solid #CD7F32;
  width: 100%; /* Establece el ancho al 50% de la página */
  margin: 0 auto; /* Centra horizontalmente */
  transition: top 0.3s; /* Agregamos transición para un efecto suave */
    z-index: 9999;
}

/* Estilos cuando se hace scroll */

.logo, .intro, .menu, .content {
    padding:10px;
}

.menu {
   
    background:#f2f2f2;
    height:80px;
    line-height:30px;
    width:100%;
    z-index: 9999;
    box-shadow: 2px 2px 2px gray;
    font-weight: bold;
}

.menu-padding {
    padding-top:40px;
}
.content p {
    margin-bottom:20px;
}
.sticky {
    position:fixed;
    top:0;
}

.navbar-nav .nav-link {
  font-family: 'Golos Text', serif;
  font-size: 16px;
  color: #000000;
}

/* Color de fondo del elemento activo */
.navbar-nav .nav-item.active .nav-link {
  color: #CD7F32;
}

/* Línea sobre el menú */
.navbar-nav .nav-link::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #CD7F32;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

/* Línea sobre el elemento activo */
.navbar-nav .nav-item.active .nav-link::after {
  transform: scaleX(1);
  height: 5px;
}

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {

  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #CD7F32;
  height: 300px;    
  color: white;
  transform: rotateY(180deg);
} 

.cleaner_h10 { 
	clear: both; 
	width:100%; 
	height: 10px; 
}

.cleaner_h20 { 
	clear: both; 
	width:100%; 
	height: 10px; 
}

li::marker {
color: #0E6FC9;
}



@media screen and (max-width: 768px){
   h2
   {
     font-size: 2.5em;
   }
   .text h3
   {
     font-size: 3em;
   }
 }

 .contenedor {
    display: flex;
    align-items: center;
    position: relative;
  }
  .circulo {
    width: 50px;
    height: 50px;
    font-family: 'Merriweather Sans', sans-serif;
    border: 3px solid #D4A413;
    border-radius: 50%;
    background-color: white;
    color: #394F7D;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    font-size: 40px;
    position: absolute;
    z-index: 1;
  }
  .rectangulo {
    font-size: 18px;
    color: #394F7D;  
    border: 2px solid #D4A413;
    border-radius: 10px;
    padding: 20px;
    margin-left: 25px; /* Ajuste para la superposición */
    position: relative;
    z-index: 0;
    padding-left: 40px; /* Margen interno adicional para el texto */
    width: calc(100% - 65px); /* Ancho ajustado para ocupar el espacio disponible */
    display: flex; /* Añadido para centrar verticalmente */
   
      
      
  }

.marginLeft {
    margin-left: 10px;
    
}

li {list-style:none;}

li.estilo-1 {
  list-style: none; /* Elimina los estilos de lista predeterminados */
  overflow: hidden; /* Asegura que todo el contenido flote correctamente */
}

.circuloT {
  width: 50px; /* Tamaño fijo del círculo */
  height: 50px; /* Tamaño fijo del círculo */
  border: 3px solid #D4A413;
  border-radius: 50%; /* Asegura un círculo perfecto */
  font-size: 30px;    
  background-color: white;
  color: #394F7D;
  text-align: center;
  line-height: 40px; /* Alineación vertical de la letra */
  font-weight: bold;
  float: left; /* Flota a la izquierda */
  margin-right: 10px; /* Espacio entre el círculo y el texto */
  position: relative; /* Posición relativa para el z-index */
  z-index: 2; /* Asegura que el círculo se muestre sobre el texto */
}

.texto {
  display: block; /* Asegura que el texto sea un bloque */
  
  text-align: justify;
}