/*
 * Custom code goes here.
 */

:root {
   --color-primary: #005CB8;
   --color-primary-light: #A2D0FF;
   --color-gray: #707070;
   --color-white: #ffffff;
   --color-yellow:#FFECCC;

   /* Colores secundarios */
   --color-secondary: #FFECCC;
   --color-secondary-dark: #423C32;

   /* Colores para textos */
   --text-color: #000000;
   --text-light: #707170;
}


@font-face {
   font-family: 'Open Sans';
   src: url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
   font-weight: 100 900;
   font-display: swap;
}
@font-face {
   font-family: 'Raleway';
   src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype');
   font-weight: 100 900;
   font-display: swap;
}

html {scroll-behavior: smooth;}      
body, p, button {font-family: 'Open Sans', sans-serif }
h1, h2, h3, h4 {font-family: 'Raleway', sans-serif }
body {
   background-color: var(--background-default);
   color: var(--text-color);
}
p, ul {font-weight: 300}



.has-text-primary {color: var(--color-primary) !important;}
.has-text-dark {color:var(--color-gray) !important}
.has-background-primary {background: var(--color-primary) !important}
.has-background-secondary {background: #A2D0FF}
.has-background-secondary-light {background: #A2D0FF50}
.section-background-gradient {background: linear-gradient(to right, #005CB8 0%, rgba(117, 123, 255, 0.8) 100%);}
.section-background-map {
  background: url(../img/mapamundi.webp);
  background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 70px 0
}
.is-rounded {border-radius:10px}
.is-box-shadow {box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.15);}
.is-italic {font-style: italic;}
.has-text-weight-ultrabold  {font-weight: 900;}


/*BTNS*/
.button {
  border-radius: 55px !important;
  padding: 25px 35px;
  font-weight: bold;
}
.button.is-primary {
  background: var(--color-primary) !important;
  border: 2px solid var(--color-primary);
}
.button.is-primary:hover {
  color:var(--color-primary) !important;
  background:transparent !important;
  border: 2px solid var(--color-primary);
}

.button.is-light {
  background: transparent; !important;
  border: 2px solid var(--color-primary);
  color:var(--color-primary) !important;
}
.button.is-light:hover {
    background-color: #005CB885;
    border-color: transparent;
    color: #ffff !important;
}


/*HEADER*/
header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
}
.navbar-item img {
   max-height: none;
   width: 220px;
   height: auto;
}
.navbar-item, .navbar-link {
  color: var(--text-color);
}
.navbar-burger span {
    height: 2px  !important;
    left: calc(50% - 11px)  !important;
    width: 22px  !important;
}
.navbar-burger span:nth-child(3) {top: calc(50% + 13px) !important;}
.navbar-burger span:nth-child(2) {top: calc(50% - -4px)  !important;}
.navbar-burger span:first-child {top: calc(50% - 4px)  !important;}
.navbar.scroll-header {box-shadow: 0 2px 10px 0 #3333334a;}

/*MAIN*/
main {margin-top: 6.5rem;}

/*FOOTER*/
.footer {background: var(--color-white);}
.footer a {color:var(--color-gray);}
.ultra-footer a {color:var(--color-white);}

/*GAPS*/
.default-section {
    margin: 125px 0;
}
.custom-padding {padding: 50px;}
/* Aplica el flex solo a las columnas de esta sección */
.custom-equal-columns > .column {
  display: flex;
}

/* Hace que el .box dentro de estas columnas se expanda para ocupar el alto total */
.custom-equal-columns > .column > .box {
   flex: 1;
}

/*IMAGES*/
.image-shadow {
   border-radius: 20px;
   box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.15);
}

/*BOX*/
.box {
    border-radius: 25px !important;
    padding: 40px !important;
}

/*CARRUSEL*/
.slider-navigation-next, .slider-navigation-previous {background: #ffffff80 !important;border: none !important}

/*FORM*/
.input, .textarea {
    box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.10);
    max-width: 100%;
    width: 100%;
    border: 1px solid #00000015;
    padding: 25px;
    border-radius: 8px;
}

/*BLOG*/
.article-tag div {
    font-weight: 300;
    color: var(--color-white);
    font-size: 12px;
    margin-top: 10px;
    width: max-content;
    border-radius: 8px;
    padding: 6px 30px;
    margin-right: 5px;
    margin-bottom: 6px;
    display: inline-block;
}
.article-tag .tag-producto {background:#A2D0FF}
.article-tag .tag-estrategia {background:#423C32}
.toc {margin: 50px 0;}
.toc .panel-heading {
    background-color: var(--color-yellow);
    border-radius: 8px 8px 0 0;
    color: var(--text-color);
    font-weight: 800;
    padding: 27px 23px;
}
.toc .panel-block {
    padding: 10px 23px;
    background: var(--color-yellow);
}
.toc .panel-block:last-child {padding-bottom:25px; }
.toc a.panel-block {text-decoration: underline;}
.toc .panel-block:not(:last-child), .toc .panel-tabs:not(:last-child) {border-bottom: none !important;}
.toc a.panel-block:hover, .toc label.panel-block:hover {background-color: var(--color-yellow) !important;}


/**/
.homepage .section-1-background {
    background: url(../img/marca-franca-soluciones-compliance-00.webp);
    background-repeat: no-repeat;
    background-position: top right;
    height: auto;
    min-height: 660px;
}

.page-sic .hero-body {
    width: 100%;
    max-width: 654px;
}
.page-sic .fases {
    width: 100%;
    max-width: 825px;
}
.column.fase-1, .column.fase-2, .column.fase-3, .column.fase-4 {margin: 50px 0;}
.column.fase-1 {
  background: url(../img/1.svg);
  background-repeat: no-repeat;
  background-position: 50% 85%;
}
.column.fase-2 {
   background: url(../img/2.svg);
   background-repeat: no-repeat;
   background-position: 50% 85%;
}
.column.fase-3 {
   background: url(../img/3.svg);
   background-repeat: no-repeat;
   background-position: 50% 85%;
}
.column.fase-4 {
   background: url(../img/4.svg);
   background-repeat: no-repeat;
   background-position: 50% 85%;
}
.page-cr .hero-body {
    width: 100%;
    max-width: 654px;
}
.page-compromiso .hero-body {
    width: 100%;
    max-width: 740px;
}
.page-os .hero-body {
    width: 100%;
    max-width: 854px;
}
.page-nosotros .hero-body {
    width: 100%;
    max-width: 650px;
}
.page-mf-canal .content  {
    width: 100%;
    max-width: 950px;
}
.row-contact-width {
   border-radius: 10px;
   box-shadow: 0 5px 35px 0 #00000015;
   width: 100%;
   max-width: 950px;
}
.column-contact-padding {padding: 60px;}


/*RESPONSIVE*/
@media screen and (min-width: 1024px) {
   .navbar-start {
       display: flex;
       flex-grow: 1;
       justify-content: center;
  }
}

@media screen and (max-width: 1023px) {
   main {margin-top: 5.5rem;}
   .topbar {padding: 1px 8px;}
   .navbar-item img {width: 180px;}
   .navbar-menu.is-active {
      position: fixed;
      top: 90px;
      left: 0;
      right: 0;
      z-index: 1100;
      background-color: white; 
      padding: 1rem;
    }


    .default-section {margin: 65px 15px;}
    .homepage .section-1-background {
      background: url(../img/marca-franca-soluciones-compliance-01.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top right;
      min-height: 550px;
    }
    .custom-padding {padding: 20px;}
}

@media screen and (max-width: 768px) {
  .responsive-reverse {
    flex-direction: column-reverse;
    display: flex;
  }
  .custom-padding {padding: 25px 0px;}
  .box {
    margin: 0 20px;
  }
  .slider-item img{
    max-height: 70px;
  }
  .column-contact-padding {padding: 30px 30px 45px;}
  .section-background-map {
    margin: 0 15px;
    padding: 55px 0
  }
}

/*** Clases especiales paddings y margins *******/
.pb-8{
  padding-bottom: 4rem !important;
}