/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

/*!------------------------------------------------------------------
[MAIN STYLESHEET]

PROJECT:	Project Name
VERSION:	Versoin Number
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]
-------------------------------------------------------------------*/
/*  typography */
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700|Roboto:400");

body {
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  color: #4c4c4c;
}

p,
.paragraph {
  font-weight: 400;
  color: #4c4c4c;
  font-size: 15px;
  line-height: 1;
  font-family: "Roboto", sans-serif;
}

p-lg,
.paragraph-lg {
  font-size: 22px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
  font-family: "Roboto", serif;
  line-height: 1.2;
}

h1,
.h1 {
  font-size: 80px;
}

@media (max-width: 991px) {

  h1,
  .h1 {
    font-size: 65px;
  }
}

h2,
.h2 {
  font-size: 45px;
}

@media (max-width: 991px) {

  h2,
  .h2 {
    font-size: 35px;
  }
}

h3,
.h3 {
  font-size: 40px;
}

h4,
.h4 {
  font-size: 22px;
}

h5,
.h5 {
  font-size: 18px;
}

h6,
.h6 {
  font-size: 14px;
}

.image {
    display: block;
    position: relative;
}

.img1 {
    height: auto;
    max-width: 70%;
}

.image1 {
    display: block;
    position: relative;
    top: -100px !important;
}

.image2 {
    display: block;
    position: relative;
    top: -100px !important;
}
/* Estilo para alinear el icono y el texto */
        .icon-and-title {
            display: flex;
            align-items: center; /* Centra verticalmente el icono y el texto */
            margin-bottom: 0.5rem; /* Espacio entre el título y la descripción */
        }

        .icon-and-title .icon1   {
            margin-right: 0.5rem; /* Espacio a la derecha del icono */
            padding: 7px;
            color: #fff; /* Color del icono */
            background-color: #059EDB;
            border-radius: 25px;
        }

.icon-and-title1 {
    display: flex;
    align-items: center; /* Centra verticalmente el icono y el texto */
    margin-bottom: 0.5rem; /* Espacio entre el título y la descripción */
}


.fuente-apse {
    font-family: "Roboto", serif;
    font-size: 1rem;
    color: #ffffff;
    }

.column {
    /* display: block; */
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 2rem !important;
    padding-top: 1.2rem;

    }

    .column1 {
    /* display: block; */
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 2rem !important;
    padding-top: 1.2rem;
    align-content: center;

    }


    .column .socio {
    /* display: block; */
    border: #3333333a solid 1px;
    border-radius: 15px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin: 5px;

    }
/* Button style */
.button {
  font-family: "Roboto", serif;
  font-size: x-small;
  text-transform: capitalize;
  border-radius: 5px;
  font-weight: 600;
  border: 0;
  position: relative;
  z-index: 1;
  transition: 0.2s ease;
}

.button1 {
    font-family: "Roboto", serif;
    font-size: x-small;
    text-transform: capitalize;
    border-radius: 5px;
    font-weight: 600;
    border: 0;
    position: relative;
    z-index: 1;
    padding: 0;
    transition: 0.2s ease;
}



.button:focus {
  outline: 0;
  box-shadow: none !important;
}

.button:active {
  box-shadow: none;
}

.button.is-small {
  font-size: 15px;
  padding: 10px 30px;
}

.button.is-extra-small {
  padding: 5px 10px;
  font-size: 15px;
}

.button.is-primary {
  background-color: #41228e;
  color: #fff;
}

.button.is-primary:active {
  background-color: #542cb7 !important;
}

.button.is-primary:hover {
  background-color: #542cb7;
}

.button.is-primary.focus,
.button.is-primary.is-active {
  background-color: #542cb7 !important;
  box-shadow: none !important;
}

.button.is-link {
  background-color: transparent;
  color: #41228e;
  font-weight: bold;
  padding-left: 0;
  padding-right: 0;
}

.button.is-link:active,
.button.is-link:hover {
  color: #41228e;
  background: transparent;
}

body {
  background-color: #fff;
}

::-moz-selection {
  background: #542cb7;
  color: #fff;
}

::selection {
  background: #542cb7;
  color: #fff;
}

/* preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol,
ul {
  list-style-type: none;
  margin: 0px;
}

img {
  vertical-align: middle;
  border: 0;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a,
button,
select {
  cursor: pointer;
  transition: 0.2s ease;
}

a:focus,
button:focus,
select:focus {
  outline: 0;
}

a.text-dark:hover {
  color: #41228e !important;
}

a:hover {
  color: #41228e;
}

.slick-slide {
  outline: 0;
}

.section {
  padding-top: 80px;
  padding-bottom: 80px;
  padding: 0rem !important;
}

.section-title {
  margin-bottom: 80px;
  font-family: "Roboto", serif;
}

.section.is-small {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.has-background-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* overlay */
.overlay {
  position: relative;
}

.overlay::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

.outline-0 {
  outline: 0 !important;
}

.d-unset {
  display: unset !important;
}

.has-background-primary {
  background-image: url('../images/asociacion_fondo.png');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
  min-height: 100vh;
}

.has-background-second {
  background-image: url('../images/asociacion_fondo.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondm {
  background-image: url('../images/mision2.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondv {
  background-image: url('../images/vision1.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-seconde {
  background-image: url('../images/estructura.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondes {
  background-image: url('../images/estatuto.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-seconda {
  background-image: url('../images/afiliate.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondb {
  background-image: url('../images/beneficios.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondd {
  background-image: url('../images/decreto.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-seconds {
  background-image: url('../images/seguros1.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondn {
  background-image: url('../images/normaslaborales.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondo {
  background-image: url('../images/otrasleyes.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondso {
  background-image: url('../images/socios.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondno {
  background-image: url('../images/noticias.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}

.has-background-secondco {
  background-image: url('../images/contactos.jpg');
  background-color: transparent !important;
  background-size: cover;
  /* Ajusta la imagen al tamaño del contenedor */
  background-position: bottom;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
}


.has-background-gray {
  background: #eaeaea !important;
}

.has-text-primary {
  color: #41228e !important;
}

.has-text-color {
  color: #4c4c4c;
}

.has-text-dark {
  color: #000 !important;
}

.has-text-light {
  color: #999999 !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

.mr-20 {
  margin-right: 20px;
}

.zindex-1 {
  z-index: 1;
}

.rounded-lg {
  border-radius: 15px;
}

.overflow-hidden {
  overflow: hidden;
}

.font-secondary {
  font-family: "Roboto", serif !important;
}

.font-tertiary {
  font-family: "Verdana", serif !important;
  color: white;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;
}

/* creado por woli */

.destacado {
  background-color: rgba(0, 0, 0, 0.5);
  /* negro translúcido */
  padding: 1rem;
  border-radius: 8px;
  display: inline-block;
}

.shadow {
  box-shadow: 0px 18px 39.1px 6.9px rgba(224, 241, 255, 0.34) !important;
}

.bg-dark {
  background-color: #222222 !important;
}

/* icon */
.icon {
  font-size: 45px;
  height: unset;
  width: unset;
}
.icon1 {
  height: unset;
  width: unset;
}


.icon-bg {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.icon-light {
  color: #c8d5ef;
}

/* /icon */
/* slick slider */
.slick-dots {
  text-align: center;
  padding-left: 0;
}

.slick-dots li {
  display: inline-block;
  margin: 2px;
}

.slick-dots li.slick-active button {
  background: #fff;
  width: 25px;
}

.slick-dots li button {
  height: 6px;
  width: 12px;
  background: rgba(255, 255, 255, 0.5);
  color: transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.2s ease;
  border: 0;
}

/* /slick slider */
/* form */
.input {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #c7c7c7;
  height: 60px;
  box-shadow: none;
}

.input:focus {
  border-color: #41228e;
  outline: 0;
  box-shadow: none !important;
}

textarea.input {
  height: 120px;
}

/* /form */
/* card */
.card {
  border: 0;
}

.card-header {
  border: 0;
}

.card-footer {
  border: 0;
}

/* /card */
.list-hero-social {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  border: none;
  margin: 0 0 0 100px;
}

.list-hero-social .list-item {
  border: none;
  background: transparent;
}

.is-rounded {
  border-radius: 50%;
}

.image.is-full {
  width: 100%;
}

.has-border-top {
  border-top: 1px solid #c7c7c7;
}

.has-border-bottom {
  border-bottom: 1px solid #c7c7c7;
}

.is-border-dark {
  border-color: #343a40 !important;
}

.is-border-white {
  border-color: #fff !important;
}

.has-padding-top-15 {
  padding-top: 15px;
}

.has-padding-20 {
  padding: 20px;
}

.buttons .button input {
  width: 0;
  visibility: hidden;
}



.hero-area {
  padding: 300px 0 200px;
  position: relative;
}

@media (max-width: 767px) {
  .hero-area {
    padding: 250px 0 150px;
    overflow: hidden;
  }
}

.hero-area h1 {
  position: relative;
  z-index: 2;
}

.layer {
  position: absolute;
  z-index: 1;
}

#l1 {
  bottom: 0;
  left: 0;
}

#l2 {
  top: 190px;
  left: -250px;
}

#l3 {
  top: 200px;
  left: 40%;
}

#l4 {
  top: 200px;
  right: 40%;
}

#l5 {
  top: 100px;
  right: -150px;
}

#l6 {
  bottom: -20px;
  left: 10%;
}

#l7 {
  bottom: 100px;
  left: 20%;
}

#l8 {
  bottom: 160px;
  right: 45%;
}

#l9 {
  bottom: 100px;
  right: -10px;
}

.layer-bg {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* skills */
.progress-wrapper {
  height: 130px;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  bottom: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45%;
  transform: translateX(-50%) rotate(0);
  -webkit-animation: rotate 6s linear infinite;
  animation: rotate 6s linear infinite;
  z-index: 10;
}

.wave::after {
  border-radius: 47%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%) rotate(0);
  -webkit-animation: rotate 10s linear -5s infinite;
  animation: rotate 10s linear -5s infinite;
  z-index: 20;
}

@-webkit-keyframes rotate {
  50% {
    transform: translateX(-50%) rotate(180deg);
  }

  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes rotate {
  50% {
    transform: translateX(-50%) rotate(180deg);
  }

  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* /skills */
/* education */
.edu-bg-image {
  position: absolute;
  left: 0;
  top: -200px;
}

/* /education */
/* service */
.hover-bg-primary {
  transition: 0.3s ease;
}

.hover-bg-primary:hover {
  background: #41228e;
}

.hover-bg-primary:hover * {
  color: #fff;
}

.active-bg-primary {
  transition: 0.3s ease;
  background: #41228e;
}

.active-bg-primary * {
  color: #fff;
}

.hover-shadow {
  transition: 0.2s ease;
}

.hover-shadow:hover {
  box-shadow: 0px 18px 40px 8px rgba(224, 241, 255, 0.54) !important;
}

/* /service */
/* portfolio */
.hover-wrapper {
  overflow: hidden;
}

.hover-wrapper img {
  transition: 0.3s ease;
  transform: scale(1.1);
}

.hover-wrapper:hover img {
  transform: scale(1);
}

.hover-wrapper:hover .hover-overlay {
  opacity: 1;
  visibility: visible;
}



.hover-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}

/* /portfolio */
/* testimonial */
.testimonial-content strong {
  color: #2bfdff;
  font-weight: normal;
}

.testimonial-bg-shapes .container {
  position: relative;
  z-index: 1;
}

.testimonial-bg-shapes .bg-map {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.testimonial-bg-shapes .bg-shape-1 {
  position: absolute;
  left: 100px;
  top: -50px;
}

.testimonial-bg-shapes .bg-shape-2 {
  position: absolute;
  right: 150px;
  top: 50px;
}

.testimonial-bg-shapes .bg-shape-3 {
  position: absolute;
  right: 50px;
  top: 200px;
}

.testimonial-bg-shapes .bg-shape-4 {
  position: absolute;
  left: 100px;
  bottom: 200px;
}

.testimonial-bg-shapes .bg-shape-5 {
  position: absolute;
  right: 200px;
  bottom: -50px;
}

/* /testimonial */



.footer-section {
  padding-top: 200px;
}

.section-on-footer {
  margin-bottom: -250px;
}

.shadow-down {
  position: relative;
}

.shadow-down::before {
  position: absolute;
  content: "";
  box-shadow: 0px 0px 80.75px 14.25px rgba(224, 241, 255, 0.34);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

/* /footer */
.card-lg {
  flex-direction: row-reverse;
  align-items: center;
}

@media (max-width: 991px) {
  .card-lg {
    flex-direction: column;
  }
}

blockquote {
  display: inline-block;
  padding: 10px 20px;
  background: #eaeaea;
  border-left: 2px solid #41228e;
  font-style: italic;
  font-size: 22px;
}

.content * {
  margin-bottom: 0px;
}

.content h2 {
    font-size: 1.75em !important;
    margin-bottom: 0em !important;
}

.content strong {
  font-family: "Roboto", serif;
  font-size: 22px;
  font-weight: normal;
  color: #000;
  display: inherit;
  line-height: 1.5;
}

.page-title-alt {
  padding: 350px 0 70px;
}

.border-thick {
  border: 10px solid;
}

.drag-lg-top {
  margin-top: -230px;
}

@media (max-width: 991px) {
  .drag-lg-top {
    margin-top: 0;
  }
}

.page-title-alt .container {
  position: relative;
  z-index: 1;
}

.page-title-alt .bg-shape-1 {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
}

.page-title-alt .bg-shape-2 {
  position: absolute;
  left: 70px;
  top: 100px;
}

.page-title-alt .bg-shape-3 {
  position: absolute;
  left: 30%;
  top: 50px;
  transform: rotate(180deg);
}

.page-title-alt .bg-shape-4 {
  position: absolute;
  left: 100px;
  bottom: 100px;
}

.page-title-alt .bg-shape-5 {
  position: absolute;
  left: 40%;
  bottom: -25px;
}

.page-title-alt .bg-shape-6 {
  position: absolute;
  bottom: 100px;
  right: -100px;
}

.page-title {
  padding: 250px 0 150px;
}

.page-title .container {
  position: relative;
  z-index: 1;
}

.page-title .bg-shape-1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.page-title .bg-shape-2 {
  position: absolute;
  left: -20px;
  top: -10px;
}

.page-title .bg-shape-3 {
  position: absolute;
  left: 10%;
  top: 100px;
}

.page-title .bg-shape-4 {
  position: absolute;
  left: 50%;
  top: -20px;
}

.page-title .bg-shape-5 {
  position: absolute;
  left: 90px;
  bottom: -50px;
  transform: rotate(180deg);
}

.page-title .bg-shape-6 {
  position: absolute;
  right: 20%;
  bottom: -20px;
}

.page-title .bg-shape-7 {
  position: absolute;
  right: -220px;
  bottom: -100px;
}

.filter-controls li {
  cursor: pointer;
}

.filter-controls li.active {
  font-weight: bold;
}

/* Centrado total del menú */
#navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* ocupa todo el alto de la pantalla */
  text-align: center;
  align-self: anchor-center;
}

/* Estilos para la sección de contacto */
.my-contact-section {
  /* Puedes añadir estilos globales para la sección aquí si es necesario */
}

/* Ajustes para la barra de iconos azul si 'is-narrow-tablet' o 'min-width' no son suficientes */
.my-contact-section .column.is-narrow-tablet.has-background-info {
  /* flex-basis: 100px !important; /* Descomenta y ajusta si necesitas un ancho fijo */
  /* flex-grow: 0; */
}

/* Estilos responsivos */
@media screen and (max-width: 768px) { /* Punto de quiebre de Bulma para 'tablet' */
  .my-contact-section > .columns > .column.is-narrow-tablet.has-background-info {
    min-width: auto; /* Permite que el ancho sea 100% */
    width: 100% !important;
    flex-direction: row !important; /* Iconos en fila */
    justify-content: space-around !important; /* Espaciar iconos horizontalmente */
    padding: 1.5rem 1rem !important;
  }

  .my-contact-section > .columns > .column.is-narrow-tablet.has-background-info p {
    margin-bottom: 0 !important; /* Eliminar margen inferior para iconos en fila */
    margin-left: 0.5rem; /* Añadir un pequeño margen entre iconos */
    margin-right: 0.5rem;
  }

  .my-contact-section .columns .column.is-half-tablet { /* Columnas de info y de imagen */
    width: 100% !important; /* Apilar verticalmente en móviles */
  }

  .my-contact-section .contact-image-bg {
    min-height: 250px !important; /* Reducir altura de la imagen en móviles */
    /* Opcionalmente ocultar la imagen en móviles si ocupa mucho espacio */
    /* display: none !important; */
  }

  .my-contact-section .column.is-half-tablet[style*="padding"] {
      padding: 2rem 1.5rem !important; /* Ajustar padding en móviles */
  }
}

.has-background-info {
    background-color: #059EDB !important;
}
.columns.is-gapless>.column {

  margin: 0;
  padding: 10px !important;
  }

/* Columna que contiene el texto "CONTÁCTANOS" */
.contact-text-column {
  position: relative; /* Necesario para posicionar los pseudo-elementos */
  /* Espacio en la parte superior para la barra azul. 
     La imagen 'image_49b182.png' sugiere una barra delgada, ej: 10px o 15px */
  padding-top: 15px; 
}

/* Línea azul en la parte superior de .contact-text-column */
.contact-text-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* Se alinea con el inicio de .contact-text-column (que tiene ml-6) */
  width: 100%; /* Ocupa todo el ancho de .contact-text-column */
  height: 15px; /* Altura de la barra azul, debe coincidir con padding-top */
  background-color: #007bff; /* Color azul. Ajusta este hexadecimal según la imagen image_49b182.png */
  z-index: 1;
}

/* Puntos en la esquina superior derecha de la barra azul (que está en .contact-text-column::before) */
.contact-text-column::after {
  content: "";
  position: absolute;
  /* Posición vertical dentro de la barra azul de 15px */
  top: 4px; /* ej: (15px altura barra - 7px altura puntos) / 2 = 4px */
  /* Posición horizontal desde el borde derecho de .contact-text-column */
  right: 10px; 
  width: 12px;  /* Ancho para un patrón de puntos de 3x2 (ej: 3 puntos de 1px + 2 espacios de Xpx) */
  height: 5px; /* Altura para 2 filas de puntos (ej: 2 puntos de 1px + 1 espacio de Ypx) */
  z-index: 2; /* Para estar encima de la barra azul */

  /* --- Opción para los puntos --- */
  /* Recomendado: Usar una imagen SVG para los puntos */
  /* background-image: url('path/to/your/dots-pattern.svg'); */
  /* background-repeat: no-repeat; */
  /* background-size: contain; */

  /* Alternativa con CSS (cuadrícula de puntos de 3x2, cada punto de 1px x 1px) */
  /* Ajusta los tamaños y posiciones para que queden bien dentro de la barra de 15px */
  background-image:
    /* Fila 1 */
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1px, transparent 1px),
    /* Fila 2 */
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1px, transparent 1px);
  background-size: 1px 1px; /* Tamaño efectivo de cada "pixel" del gradiente que forma el punto */
  background-position:
    /* Fila 1 (X Y) */
    0px 0px,   /* Punto 1 */
    5px 0px,   /* Punto 2 (desplazado 5px a la derecha) */
    10px 0px,  /* Punto 3 (desplazado 10px a la derecha) */
    /* Fila 2 (X Y) */
    0px 4px,   /* Punto 4 (debajo del punto 1, desplazado 4px hacia abajo) */
    5px 4px,   /* Punto 5 */
    10px 4px;  /* Punto 6 */
  background-repeat: no-repeat;
}


/* --- Recordatorio: Mover estilos de .contact-image-bg --- */
/* Si aún tienes estilos en línea en .contact-image-bg, muévelos a CSS */
.contact-image-bg {
  background-image: url('images/backgrounds/footer.jpg'); 
  background-size: cover;
  background-position: center;
  min-height: 450px;
  /* Ya no necesita padding-top ni pseudo-elementos para la línea azul */
}

/* --- Ajustes Adicionales Opcionales (mencionados anteriormente) --- */

/* 1. Cambiar color del título "CONTÁCTANOS" si quieres igualar la imagen image_49b182.png */
/* .my-contact-section .title.is-2.has-text-grey-darker { */
  /* color: #003934 !important; /* Color verde azulado oscuro, ajusta el hexadecimal */
/* } */

/* 2. Asegurar visibilidad del texto de copyright */
.footer .section.is-small.has-border-top {
  background-color: #363636; /* Un fondo oscuro para la sección de copyright */
}
.footer .section.is-small.has-border-top p.has-text-light {
  color: #ffffff !important; /* Asegurar que el texto sea blanco */
}


/* about*/
/* Colores y estilos base */
:root {
    --primary-blue: #059EDB; /* Un azul cian para la barra, botones y líneas */
    --light-grey-bg: #f9f9f9; /* Fondo de la sección */
    --dark-text: #333333; /* Color de texto general */
}

/* Estilos de la sección principal */
.custom-section {
    display: flex;
    align-items: center;
    background-color: var(--light-grey-bg);
    padding: 50px;
    position: relative;
    overflow: hidden; /* Para contener las barras laterales */
    min-height: 400px; /* Altura mínima para que se vea bien, ajusta si es necesario */
}

/* Barras laterales izquierda y derecha */
.left-sidebar {
    background-color: var(--primary-blue);
    width: 20px; /* Ancho de la barra lateral */
    position: absolute;
    align-self: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 60%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1; /* Asegura que esté detrás del contenido */
}

.right-sidebar {
    background-color: var(--primary-blue);
    width: 20px; /* Ancho de la barra lateral */
    position: absolute;
    align-self: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    top: 0;
    height: 60%;
    right: 0;
    bottom: 0;
    z-index: 1; /* Asegura que esté detrás del contenido */
}

.tituloapse {

  font-size: 2em;
}
/* Barra superior */
.top-bar {
    background-color: var(--primary-blue);
    height: 60px; /* Altura de la barra superior */
    position: absolute;
    top: 0;
    width: 30%;
    right: -1px; /* Ajusta para la barra lateral derecha */
    display: flex;
    justify-content: flex-end; /* Alinea los iconos a la derecha */
    align-items: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-right: 15px; /* Espaciado a la derecha de los iconos */
    z-index: 2; /* Asegura que esté por encima de las barras laterales y el contenido */
}

.directory-top-line {
    background-color: var(--blue-background); /* Color de la línea */
    height: 20px; /* Altura de la línea, ajústala si quieres que sea más gruesa */
    width: 70%; /* Ocupa todo el ancho del contenedor */
    margin-bottom: 30px; /* Espacio entre la línea y el título "Directorio" */
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    justify-self: anchor-center;

    /* Si quisieras bordes redondeados o una forma específica como en la otra imagen,
       aquí añadirías propiedades como border-radius o clip-path.
       Por ahora, es una línea recta. */
} 

.directory-left-line {
    background-color: var(--blue-background); /* Color de la línea */
    width: 20px; /* Ancho de la línea, ajusta si es necesario */
    position: absolute; 
    align-self: anchor-center; 
    height: 60px;/* Para posicionarla de forma precisa dentro de la sección */
    top: 0;             /* Pegada al borde superior de la sección */
    left: 0;            /* Pegada al borde izquierdo de la sección */
    bottom: 0;          /* Se extiende hasta el borde inferior de la sección */
    z-index: 1;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;        /* Asegura que esté por debajo del contenido principal pero por encima del fondo */
}



.subtitle {
    color: #FFF !important;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
}

.title {
    color: #FFF !important;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
}

.titleab {
    color: #040661 !important;
    font-size: 2rem;
    padding-bottom: 1em;
    font-weight: 600;
    line-height: 1.125;
}

.title-contact {
    color: #343a40 !important;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
}

.columnimg {
    display: flex;
    flex-basis: 0;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1 !important;
    /* padding-left: 2rem !important; */
    /* padding-right: 2rem !important; */
    /* padding-bottom: 2rem !important; */
    /* padding-top: 1.2rem; */
}

@media screen and (max-width: 768px) {

  .columnimg {
    display:block;
    flex-basis: 0;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1 !important;
    /* padding-left: 2rem !important; */
    /* padding-right: 2rem !important; */
    /* padding-bottom: 2rem !important; */
    /* padding-top: 1.2rem; */
}
    
}

.columnimg1 {
    display: block;
    flex-basis: 0;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1 !important;
    /* padding-left: 2rem !important; */
    /* padding-right: 2rem !important; */
    /* padding-bottom: 2rem !important; */
    /* padding-top: 1.2rem; */
}

/* Contenedor principal del texto y la imagen */
.content-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 60px 10px; /* Relleno interior para el contenido */
    z-index: 10; /* Asegura que el contenido esté al frente */
    position: relative; /* Necesario para que el z-index funcione correctamente */
}

/* Columna de texto */
.text-column {
    flex: 1; /* Toma el espacio disponible */
    padding-right: 40px; /* Espacio a la derecha antes de la imagen */
    text-align: justify;
}

.logo {
    max-width: 150px; /* Tamaño del logo, ajusta según sea necesario */
    height: auto;
    margin-bottom: 25px; /* Espacio debajo del logo */
    display: block; /* Asegura que el margen inferior funcione */
}

.custom-title-color {
    color: var(--dark-text) !important; /* Color del texto de los títulos */
    font-weight: bold !important;
    line-height: 1.1; /* Ajusta el interlineado */
    margin-bottom: 5px !important; /* Espacio entre títulos */
}

.custom-button {
    background-color: var(--primary-blue);
    color: white;
    font-weight: bold;
    border-radius: 5px; /* Bordes ligeramente redondeados */
    margin-top: 20px; /* Espacio encima del botón */
}

/* Columna de imagen */
.image-column {
    flex: 1; /* Toma el espacio disponible */
    display: flex;
    justify-content: flex-end; /* Alinea la imagen a la derecha */
}

.custom-image {
    display: block;
    max-width: 100%; /* Asegura que la imagen sea responsiva */
    height: auto;
    object-fit: cover; /* Mantiene la relación de aspecto y cubre el área */
    border-radius: 8px; /* Ligeros bordes redondeados para la imagen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para la imagen */
}

/* Media queries para responsividad (ajustes para pantallas pequeñas) */
@media screen and (max-width: 768px) {
    .custom-section {
        flex-direction: column; /* Apila las columnas en pantallas pequeñas */
        padding: 10px;
    }

    .content-container {
        flex-direction: column;
        
        text-align: center; /* Centra el texto en pantallas pequeñas */
    }

    .text-column {
        padding-right: 0;
        margin-bottom: 30px; /* Espacio entre el texto y la imagen apilados */
    }

    .image-column {
        justify-content: center; /* Centra la imagen en pantallas pequeñas */
    }

    
        .top-bar1 {
        width: 100%; /* Ocupa todo el ancho en móviles */
        right: 0; /* Sin separación a la derecha */
        border-radius: 0; /* Sin bordes redondeados en móviles si lo prefieres */
        justify-content: center; /* Centra los iconos en la barra superior en móviles */
        padding-right: 0;
    }

    .left-sidebar,
    .right-sidebar {
        width: 10px; /* Barras laterales más delgadas en móviles */
    }
}

/*Directorio*/

:root {
    --blue-background: #059EDB; /* Azul vibrante de las tarjetas */
    --white-text: #ffffff;      /* Texto blanco */
    --dark-grey-text: #4a4a4a;  /* Texto oscuro para el título principal */
    --light-grey-bg: #f5f5f5;   /* Fondo general de la sección */
}


.custom-main-title {
    color: var(--dark-grey-text);
    font-weight: bold;
    font-size: 2.5rem; /* Tamaño del título principal */
    margin-bottom: 3rem !important; /* Espacio debajo del título principal */
    padding-bottom: 20px;
}

.member-card {
    background-color: var(--blue-background);
    border-radius: 10px; /* Bordes redondeados para la tarjeta */
    padding: 20px;
    text-align: center;
    color: var(--white-text);
    position: relative; /* Necesario para posicionar la imagen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura si el contenido es variable */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el contenido a la parte inferior de la tarjeta */
    align-items: center;
    padding-top: 80px; /* Espacio para que la imagen sobresalga */
}

.member-image-container {
    width: 120px; /* Ancho del contenedor de la imagen */
    height: 120px; /* Alto del contenedor de la imagen */
    border-radius: 50%; /* Hace el contenedor circular */
    overflow: hidden; /* Recorta la imagen a la forma del círculo */
    border: 0px solid #059EDB; /* Borde blanco alrededor de la imagen */
    position: absolute; /* Posiciona la imagen por encima de la tarjeta */
    top: -60px; /* Mueve la imagen a la mitad de su altura por encima de la tarjeta */
    left: 50%;
    transform: translateX(-50%); /* Centra la imagen horizontalmente */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para la imagen */
    display: flex; /* Para centrar la imagen dentro del círculo */
    justify-content: center;
    align-items: center;
}

.member-image {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: 100%; /* La imagen ocupa todo el alto del contenedor */
    object-fit: cover; /* Recorta la imagen para que cubra el contenedor sin distorsión */
}

.member-name {
    color: var(--white-text) !important;
    font-weight: bold;
    margin-bottom: 0 !important; /* Elimina margen inferior de Bulma */
    margin-top: 15px; /* Espacio entre la imagen y el nombre */
}

.member-position {
    color: var(--white-text) !important;
    font-size: 0.95rem; /* Tamaño del texto del cargo */
    margin-top: 5px; /* Espacio entre el nombre y el cargo */
}

/* Media queries para responsividad */
@media screen and (max-width: 768px) {
    .column.is-6-tablet {
        flex: 0 0 100%; /* En tabletas, ocupa todo el ancho */
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .member-card {
        padding: 15px;
        padding-top: 70px; /* Ajuste para pantallas más pequeñas */
    }

    .member-image-container {
        width: 100px;
        height: 100px;
        top: -50px;
    }

    .custom-main-title {
        font-size: 2rem;
        margin-bottom: 2rem !important;
    }
}


.has-background-white {
    background-color: #059EDB !important;
}

.has-background-white-contact {
    background-color: #FFF !important;
}

/*formulario*/
.field:not(:last-child) {
            margin-bottom: 1.5rem;
        }
        .textarea {
            resize: vertical;
        }
        .button.is-primary {
            background-color: #00d1b2;
            border-color: transparent;
        }
        .button.is-primary:hover {
            background-color: #00b89c;
        }
        /* Custom styles for dynamic fields */
        .dynamic-field-group {
            margin-top: 15px;
            padding-left: 10px;
            border-left: 3px solid #dbdbdb;
        }
        .dynamic-field-group .field {
            margin-bottom: 10px;
        }


.navbar-item img, .navbar-item svg {
    max-height: 100% !important;
}

@media screen and (max-width: 1023px) {
  .navbar-menu {
    display: none !important;
  }
}

/* Muestra el menú cuando tiene la clase is-active */
.navbar-menu.is-active {
  display: block !important;
}

@media screen and (max-width: 1023px) {
  .navbar-dropdown {
    display: none !important;
  }

  .navbar-dropdown.is-hidden-touch {
    display: block !important;
  }
}


@media screen and (max-width: 1023px) {
  .image2 {
    display: block;
    position: relative;
    top: 0px !important;
  }

}


/*MBoton formulario de afiliate*/

@media screen and (max-width: 1023px) {
  .field.is-grouped {
    display: flex !important;
    gap: .75rem;
    flex-direction: column;
}

}

/*Miembros*/
@media screen and (max-width: 1023px) {
  .is-display-flex, .is-flex {
  display: flex !important;
  flex-direction: column;
  gap: .75rem;
}

}

.testimonial-item {
  display: none;
}

.is-size-5 {
    font-size: 1.25rem !important;
    text-align: justify !important;
}

h5, .h5 {
    font-size: 18px;
    text-align: justify !important;
}


.hover-wrapper {
  overflow: hidden;
  position: relative;
}

.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 15, 15, 0.2);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
}

.hover-wrapper:hover .hover-overlay {
  opacity: 1;
}

.hover-content {
  text-align: center;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  animation: slideImages 40s infinite;
}

.slider img {
  flex: 0 0 100%;
  max-width: 100%;
  transition: opacity 0.5s ease;
}

@keyframes slideImages {
  0% { transform: translateX(0%); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0%); }
}

.rojoapse {
  color: #ff0000;
  font-weight: bold;
  
}



.herosection {
    display: flex;         /* Enables flexbox for the section */
    align-items: center;   /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    height: 600px;         /* Essential for vertical centering */

    /* Background styles from your HTML, moved here for better separation of concerns */
    background-image: url(../images/backgrounds/beneficios-socios.jpg); /* Adjust path if your CSS is in a different directory relative to images */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the background image itself */
}

.image.is-4by3 {
    aspect-ratio: 4 / 4 !important;
}