/*
Theme Name: Crédito C21 Serrurbana
Text Domain: finance21.serrurbana.pt
Version: 1.0
Tested up to: 8.0
Author: Victor Macedo
Author URI: https://victormacedo.com.br/
Theme URI: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
*/

:root {
    --light-color-bg: #F6F6F3;
    --primary-color-bg: #BEAF87;
    --primary-color-bg-alpha-2: rgba(190, 175, 135, 0.2);
    --primary-color-bg-alpha-3: rgba(190, 175, 135, 0.3);
    --primary-color-bg-alpha-4: rgba(190, 175, 135, 0.4);
    --primary-color-bg-alpha-5: rgba(190, 175, 135, 0.5);
    --primary-color-bg-alpha-6: rgba(190, 175, 135, 0.6);
    --secondary-color-bg:#A19276;
    --tertiary-color-bg: #252526;

    --details_color: #FF9A00;
    --details_color_dark-alpha-3: rgba(225,154,0,0.3);
    --details_color_dark-alpha-6: rgba(225,154,0,0.6);
    --details_color_dark-alpha-9: rgba(225,154,0,0.9);

    --title_color: #A19276;
    /*--text_color: #919191;*/
    --text_color: #252526;

    --error_fatal: #FF3D3D;
    --preto: #000000;
}

/* Reset básico para zerar estilos padrão dos navegadores */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

p, div, section, article, aside, nav, footer, header, main,
blockquote, pre, figure, figcaption, details, summary,
form, label, legend, td, th, caption, dd, dt,
li, ul, ol, menu, address,

a, span, strong, em, b, i, u, mark, small, abbr, dfn, cite,
q, time, code, kbd, samp, var, sub, sup, del, ins,
ruby, rt, rp,

button, option, optgroup, textarea, canvas, script, style{
    font-size: 1.2rem;
    line-height: 1.9rem;
}

body {
    line-height: 1.5rem;
}


ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Ordem recomendada */
a, a:link, a:visited, a:hover, a:focus, a:active{ color: var(--text_color); text-decoration: none;}

h1, h2, h3, h4, h5, h6{color: var(--title_color);}

h1, h1 *{font-size: 2.16rem;}
h2, h2 *{font-size: 1.8rem;}
h3, h3 *{font-size: 1.44rem;}
h4, h4 *{font-size: 1.2rem;}
h5, h5 *{font-size: 0.96rem;}
h6, h6 *{font-size: 0.84rem;}

/* styles.css */

/* Estilos globais */


body {
    font-family: 'Barlow-Medium' !important;
    color: var(--text_color);
    background-color: #FFFFFF; /* fallback */
    margin: 0;
    width: 100%;
}

b, strong, legend, th, dt,
b *, strong *, legend *, th *, dt *{
    font-family: 'Barlow-Bold' !important;
}

i, em, cite, dfn, var, address,
i *, em *, cite *, dfn *, var *, address *{
    font-family: 'Barlow-Italic' !important;
}

b i, b em, b cite, b dfn, b var, b address,
b i *, b em *, b cite *, b dfn *, b var *, b address *,
strong i, strong em, strong cite, strong dfn, strong var, strong address,
strong i *, strong em *, strong cite *, strong dfn *, strong var *, strong address *,
legend i, legend em, legend cite, legend dfn, legend var, legend address,
legend i *, legend em *, legend cite *, legend dfn *, legend var *, legend address *,
th i, th em, th cite, th dfn, th var, th address,
th i *, th em *, th cite *, th dfn *, th var *, th address *,
dt i, dt em, dt cite, dt dfn, dt var, dt address,
dt i *, dt em *, dt cite *, dt dfn *, dt var *, dt address *,
i b, i strong, i legend, i th, i dt,
i b *, i strong *, i legend *, i th *, i dt *,
em b, em strong, em legend, em th, em dt,
em b *, em strong *, em legend *, em th *, em dt *,
cite b, cite strong, cite legend, cite th, cite dt,
cite b *, cite strong *, cite legend *, cite th *, cite dt *,
dfn b, dfn strong, dfn legend, dfn th, dfn dt,
dfn b *, dfn strong *, dfn legend *, dfn th *, dfn dt *,
var b, var strong, var legend, var th, var dt,
var b *, var strong *, var legend *, var th *, var dt *,
address b, address strong, address legend, address th, address dt,
address b *, address strong *, address legend *, address th *, address dt * {
    font-family: 'Barlow-BoldItalic' !important;
}


@keyframes moveBackground {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  50% {
    background-position: 80% 20%, 20% 80%, 100% 50%;
  }
  100% {
    background-position: 0% 80%, 80% 0%, 50% 0%;
  }
}

h1, h2, h3, h4, h5, h6{
    margin: 30px 0 10px;
    line-height: 35px;
    font-family: 'typold_extendedmedium' !important;
}
h1 b, h1 strong, h1 legend, h1 th, h1 dt,
h1 b *, h1 strong *, h1 legend *, h1 th *, h1 dt *,
h2 b, h2 strong, h2 legend, h2 th, h2 dt,
h2 b *, h2 strong *, h2 legend *, h2 th *, h2 dt *,
h3 b, h3 strong, h3 legend, h3 th, h3 dt,
h3 b *, h3 strong *, h3 legend *, h3 th *, h3 dt *,
h4 b, h4 strong, h4 legend, h4 th, h4 dt,
h4 b *, h4 strong *, h4 legend *, h4 th *, h4 dt *,
h5 b, h5 strong, h5 legend, h5 th, h5 dt,
h5 b *, h5 strong *, h5 legend *, h5 th *, h5 dt *,
h6 b, h6 strong, h6 legend, h6 th, h6 dt,
h6 b *, h6 strong *, h6 legend *, h6 th *, h6 dt * {
    font-family: 'typold_extendedbold' !important;
}

h1 i, h1 em, h1 cite, h1 dfn, h1 var, h1 address,
h1 i *, h1 em *, h1 cite *, h1 dfn *, h1 var *, h1 address *,
h2 i, h2 em, h2 cite, h2 dfn, h2 var, h2 address,
h2 i *, h2 em *, h2 cite *, h2 dfn *, h2 var *, h2 address *,
h3 i, h3 em, h3 cite, h3 dfn, h3 var, h3 address,
h3 i *, h3 em *, h3 cite *, h3 dfn *, h3 var *, h3 address *,
h4 i, h4 em, h4 cite, h4 dfn, h4 var, h4 address,
h4 i *, h4 em *, h4 cite *, h4 dfn *, h4 var *, h4 address *,
h5 i, h5 em, h5 cite, h5 dfn, h5 var, h5 address,
h5 i *, h5 em *, h5 cite *, h5 dfn *, h5 var *, h5 address *,
h6 i, h6 em, h6 cite, h6 dfn, h6 var, h6 address,
h6 i *, h6 em *, h6 cite *, h6 dfn *, h6 var *, h6 address * {
    font-style: 'typold_extendeditalic' !important;
}

h1 b i, h1 b em, h1 b cite, h1 b dfn, h1 b var, h1 b address,
h1 b i *, h1 b em *, h1 b cite *, h1 b dfn *, h1 b var *, h1 b address *,
h1 strong i, h1 strong em, h1 strong cite, h1 strong dfn, h1 strong var, h1 strong address,
h1 strong i *, h1 strong em *, h1 strong cite *, h1 strong dfn *, h1 strong var *, h1 strong address *,
h1 legend i, h1 legend em, h1 legend cite, h1 legend dfn, h1 legend var, h1 legend address,
h1 legend i *, h1 legend em *, h1 legend cite *, h1 legend dfn *, h1 legend var *, h1 legend address *,
h1 th i, h1 th em, h1 th cite, h1 th dfn, h1 th var, h1 th address,
h1 th i *, h1 th em *, h1 th cite *, h1 th dfn *, h1 th var *, h1 th address *,
h1 dt i, h1 dt em, h1 dt cite, h1 dt dfn, h1 dt var, h1 dt address,
h1 dt i *, h1 dt em *, h1 dt cite *, h1 dt dfn *, h1 dt var *, h1 dt address *,
h2 b i, h2 b em, h2 b cite, h2 b dfn, h2 b var, h2 b address,
h2 b i *, h2 b em *, h2 b cite *, h2 b dfn *, h2 b var *, h2 b address *,
h2 strong i, h2 strong em, h2 strong cite, h2 strong dfn, h2 strong var, h2 strong address,
h2 strong i *, h2 strong em *, h2 strong cite *, h2 strong dfn *, h2 strong var *, h2 strong address *,
h2 legend i, h2 legend em, h2 legend cite, h2 legend dfn, h2 legend var, h2 legend address,
h2 legend i *, h2 legend em *, h2 legend cite *, h2 legend dfn *, h2 legend var *, h2 legend address *,
h2 th i, h2 th em, h2 th cite, h2 th dfn, h2 th var, h2 th address,
h2 th i *, h2 th em *, h2 th cite *, h2 th dfn *, h2 th var *, h2 th address *,
h2 dt i, h2 dt em, h2 dt cite, h2 dt dfn, h2 dt var, h2 dt address,
h2 dt i *, h2 dt em *, h2 dt cite *, h2 dt dfn *, h2 dt var *, h2 dt address *,
h3 b i, h3 b em, h3 b cite, h3 b dfn, h3 b var, h3 b address,
h3 b i *, h3 b em *, h3 b cite *, h3 b dfn *, h3 b var *, h3 b address *,
h3 strong i, h3 strong em, h3 strong cite, h3 strong dfn, h3 strong var, h3 strong address,
h3 strong i *, h3 strong em *, h3 strong cite *, h3 strong dfn *, h3 strong var *, h3 strong address *,
h3 legend i, h3 legend em, h3 legend cite, h3 legend dfn, h3 legend var, h3 legend address,
h3 legend i *, h3 legend em *, h3 legend cite *, h3 legend dfn *, h3 legend var *, h3 legend address *,
h3 th i, h3 th em, h3 th cite, h3 th dfn, h3 th var, h3 th address,
h3 th i *, h3 th em *, h3 th cite *, h3 th dfn *, h3 th var *, h3 th address *,
h3 dt i, h3 dt em, h3 dt cite, h3 dt dfn, h3 dt var, h3 dt address,
h3 dt i *, h3 dt em *, h3 dt cite *, h3 dt dfn *, h3 dt var *, h3 dt address *,
h4 b i, h4 b em, h4 b cite, h4 b dfn, h4 b var, h4 b address,
h4 b i *, h4 b em *, h4 b cite *, h4 b dfn *, h4 b var *, h4 b address *,
h4 strong i, h4 strong em, h4 strong cite, h4 strong dfn, h4 strong var, h4 strong address,
h4 strong i *, h4 strong em *, h4 strong cite *, h4 strong dfn *, h4 strong var *, h4 strong address *,
h4 legend i, h4 legend em, h4 legend cite, h4 legend dfn, h4 legend var, h4 legend address,
h4 legend i *, h4 legend em *, h4 legend cite *, h4 legend dfn *, h4 legend var *, h4 legend address *,
h4 th i, h4 th em, h4 th cite, h4 th dfn, h4 th var, h4 th address,
h4 th i *, h4 th em *, h4 th cite *, h4 th dfn *, h4 th var *, h4 th address *,
h4 dt i, h4 dt em, h4 dt cite, h4 dt dfn, h4 dt var, h4 dt address,
h4 dt i *, h4 dt em *, h4 dt cite *, h4 dt dfn *, h4 dt var *, h4 dt address *,
h5 b i, h5 b em, h5 b cite, h5 b dfn, h5 b var, h5 b address,
h5 b i *, h5 b em *, h5 b cite *, h5 b dfn *, h5 b var *, h5 b address *,
h5 strong i, h5 strong em, h5 strong cite, h5 strong dfn, h5 strong var, h5 strong address,
h5 strong i *, h5 strong em *, h5 strong cite *, h5 strong dfn *, h5 strong var *, h5 strong address *,
h5 legend i, h5 legend em, h5 legend cite, h5 legend dfn, h5 legend var, h5 legend address,
h5 legend i *, h5 legend em *, h5 legend cite *, h5 legend dfn *, h5 legend var *, h5 legend address *,
h5 th i, h5 th em, h5 th cite, h5 th dfn, h5 th var, h5 th address,
h5 th i *, h5 th em *, h5 th cite *, h5 th dfn *, h5 th var *, h5 th address *,
h5 dt i, h5 dt em, h5 dt cite, h5 dt dfn, h5 dt var, h5 dt address,
h5 dt i *, h5 dt em *, h5 dt cite *, h5 dt dfn *, h5 dt var *, h5 dt address *,
h6 b i, h6 b em, h6 b cite, h6 b dfn, h6 b var, h6 b address,
h6 b i *, h6 b em *, h6 b cite *, h6 b dfn *, h6 b var *, h6 b address *,
h6 strong i, h6 strong em, h6 strong cite, h6 strong dfn, h6 strong var, h6 strong address,
h6 strong i *, h6 strong em *, h6 strong cite *, h6 strong dfn *, h6 strong var *, h6 strong address *,
h6 legend i, h6 legend em, h6 legend cite, h6 legend dfn, h6 legend var, h6 legend address,
h6 legend i *, h6 legend em *, h6 legend cite *, h6 legend dfn *, h6 legend var *, h6 legend address *,
h6 th i, h6 th em, h6 th cite, h6 th dfn, h6 th var, h6 th address,
h6 th i *, h6 th em *, h6 th cite *, h6 th dfn *, h6 th var *, h6 th address *,
h6 dt i, h6 dt em, h6 dt cite, h6 dt dfn, h6 dt var, h6 dt address,
h6 dt i *, h6 dt em *, h6 dt cite *, h6 dt dfn *, h6 dt var *, h6 dt address *{
    font-family: 'typold_extendedXBdIt' !important;
}

ul{margin-left: 20px}
li{list-style: none;}
ul li:before {
  content: '\2022';
  margin: 0 10px;
  color: var(--details_color);
 }
 [role="button"]{
    cursor: pointer;
    font-family: 'typold_extendedmedium' !important;
 }


/*MENU*/


/* Container do menu */
.main-navigation ul{margin-left:0}
.main-navigation li{list-style: none;}
.main-navigation ul li:before {
    content: '';
    margin: 0;
    color: transparent;   
}

.main-navigation {
  float: right;
  position: relative;
}

/* Lista principal */
.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Itens do menu */
.main-menu li {
  position: relative;
  font-family: 'typold_extendedmedium' !important;
}

.main-menu a {
  text-decoration: none;
  color: #beaf87 !important;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  transition: color 0.3s;
  font-family: 'typold_extendedmedium' !important;
}

.main-menu a:hover {
  color: #252526 !important;
}

/* Submenu */
.main-menu li ul {
  position: absolute;
  left: 0;
  top: 100%;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 200px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: none;
  z-index: 99;
  border-radius: 7px;
}

.main-menu li ul li {
  padding: 0;
}

.main-menu li ul a {
  padding: 8px 15px;
  display: block;
  color: #beaf87;
  font-size: 1rem;
  font-family: 'typold_extendedmedium' !important;
}

.main-menu li:hover > ul {
  display: block;
}

/* Sub-submenu (nível 2+) */
.main-menu li ul li ul {
  left: 100%;
  top: 0;
}

/* Botão responsivo */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  color: #A19276;
  cursor: pointer;
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1024px) {
  .main-navigation {
    /*float: none;*/
    display: none;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    top: 35px;
    right: 0;
  }

  .main-menu {
    flex-direction: column;
    align-items: flex-start;
    display: none;
    background: #fff;
    position: absolute;
    top: 80px;
    right: 0;
    width: 250px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  }

  .main-menu li {
    width: 100%;
  }

  .main-menu li ul {
    position: static;
    box-shadow: none;
    background: none;
    padding-left: 15px;
  }

  .main-menu li ul li a {
    padding: 8px 0;
    cursor: pointer;
  }

  .main-menu.show {
    display: flex;
  }
}

/*Box Viwer*/

.vidro-fundo{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.85);
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}

.content_viwer_box{
    position: fixed;
    top: 100px; /*Modificar na anim~ção*/
    left: 24px;
    background: rgba(255, 255, 255, 0.85);
    width: calc(100% - 48px);
    height: calc(100% - 42px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 9998;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
    border-radius: 35px;
    display: none;
    opacity: 0;
    overflow: hidden;
    padding: 20px;
}
.content_viwer_box.content_form{
    padding: 80px 20px 20px 20px;
}

.content_viwer_box.content_menu{
    padding: 20px;
}

iframe#main_form_credit {
  width: 100%;   /* 100% da largura da viewport */
  height: 100%;  /* 100% da altura da viewport */
  border: none;
  margin: 0;
}
.close_viwer_port{
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--details_color);
    display: block;
    margin: 0 20px;
    position: absolute;
    border: 0;
    top: 20px;
    right: 10px;
    cursor: pointer;
    background-image: url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/close_form.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 50% 50%;

}


  .responsive-menu {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .responsive-menu a{
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    font-family: 'typold_extendedmedium' !important;
  }


  .responsive-menu li {
    width: 100%;
    border-bottom: 2px solid var(--light-color-bg);
    position: relative;
  }
  .responsive-menu li:last-child{
    border-bottom: 0px solid #000;
  }

  .responsive-menu li ul {
    position: static;
    box-shadow: none;
    background: none;
    padding-left: 30px;
    margin: 0px;
  }

  .responsive-menu li ul li a {
    padding: 8px 0;
    cursor: pointer;
  }

  .responsive-menu li:before{
    content: '';
  }

  .responsive-menu li ul li:before {
        content: '\21B3';
        margin: 0;
        color: var(--details_color);
        position: absolute;
        left: -20px;
        top: 5px;
    }

@media (max-width: 1024px) {
    .content_viwer_box{
        height: calc(100% - 129px);
    }
}



/*FINAL MENU*/


/*Menu Repsonsivo*/
.menu-responsive{
    width: calc(100% - 48px);
    height: 70px;
    background-color: rgba(255, 255, 255, 0.85);
    position: fixed;
    bottom: 20px;
    left: 24px;
    border-radius: 35px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: none;
    align-content: center;
    z-index: 9999;
}

.menu-responsive::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    border-radius: 40px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}

.menu-responsive{
    background-image: url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/home.svg), url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/euro.svg), url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/menu.svg) ;
    background-repeat: no-repeat,  no-repeat,  no-repeat;
    background-size: 30px;
    background-position: 50px 20px, 50% 20px, calc(100% - 55px) 20px;
}


@media (max-width: 1024px) {
  .menu-responsive{
    /*float: none;*/
    display: block;
  }
}

.menu-responsive ul{
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 99;
    width: calc(100% - 40px);
    left: 20px;
    bottom: 15px;
}

.menu-responsive ul{margin-left:0}
.menu-responsive li{list-style: none;}
.menu-responsive ul li:before {
    content: '';
    margin: 0;
    color: transparent;   
}

.menu-responsive ul li span{
    width: 100px;
    height: 40px;
    border-radius: 20px;
    display: block;
    text-align: center;
    cursor: pointer;
}
.activation{
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--details_color);
    display: block;
    margin: 0 20px;
    position: relative;
}

.activation.move_home {
  background-position: 33px 5px, calc(100% + 50px) 5px, calc(100% + 50px) 5px;
}

.activation.move_simulacao {
  background-position: calc(-100% - 50px) 5px, 33px 5px, calc(100% + 50px) 5px;
}

.activation.move_menu {
  background-position: calc(-100% - 50px) 5px, calc(-100% - 50px) 5px, 33px 5px;
}


.activation{
    background-image: url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/home-ac.svg), url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/euro-ac.svg), url(http://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/menu-ac.svg);
    background-repeat: no-repeat,  no-repeat,  no-repeat;
    background-size: 30px;
    background-position: 33px 5px, calc(100% + 50px) 5px, calc(100% + 50px) 5px;
    transition: background-position 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--details_color);
}


.effetc_glass_button.move_home {
  animation-duration: 0.25s;
  animation-name: activation_move_home;
}
@keyframes activation_move_home {
    0%{
        background-color: var(--details_color);
    }
    25%{
        background-color: var(--details_color_dark-alpha-6);
    }
    100%{
        background-color: var(--details_color);
    }
}


.effetc_glass_button.move_simulacao {
  animation-duration: 0.25s;
  animation-name: activation_move_simulacao;
}

@keyframes activation_move_simulacao {
    0%{
        background-color: var(--details_color);
    }
    25%{
        background-color: var(--details_color_dark-alpha-6);
    }
    100%{
        background-color: var(--details_color);
    }
        
}

.effetc_glass_button.move_menu {
  animation-duration: 0.25s;
  animation-name: activation_mmove_menu;
}

@keyframes activation_mmove_menu {
    0%{
        background-color: var(--details_color);
    }
    25%{
        background-color: var(--details_color_dark-alpha-6);
    }
    100%{
        background-color: var(--details_color);
    }

}





.menu-responsive ul li.active a{
    background: var(--details_color);

}


 /*Pagina em contrução*/

 body.in_construcion {
    font-family: 'Barlow-Regular';
    color: var(--text_color);
    background: radial-gradient(circle at 20% 20%, #beaf87 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, #fccb88 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, #F6F6F3 0%, transparent 40%);
    background-color: #FFFFFF; /* fallback */
    background-size: 200% 200%;
    background-position: 50% 50%;
    animation: moveBackground 30s ease-in-out infinite alternate;
    height: 100%;
    margin: 0;
}
body.in_construcion *{
    font-family: 'Barlow-Regular';
}


.glass-card {
    width: calc(100% - 100px);
    max-width: 800px;
    padding: 2rem;
    margin: 60px auto 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.65); /* vidro translúcido */
    backdrop-filter: blur(12px);            /* desfoca o que está atrás */
        -webkit-backdrop-filter: blur(12px);    /* Safari */

    /* borda suave para reforçar o vidro */
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* sombra + leve extrusão */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;

    /* brilho sutil no topo */
    position: relative;
}
.glass-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}
.glass-card *{
    text-align: center;
}
.glass-card p{
    max-width: 450px;
    margin: 10px auto;
}
#logo_ic{
    max-width: 300px;
    height: 136px;
    background-image: url("https://finance21.serrurbana.pt/wp-content/themes/credito_serrurbana/img/logo-intermediacao-de-credito-vinculado-century21-serrurbana.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 50px;
}
footer{
    margin: 20px auto 50px;
    text-align: center;
    max-width: 80%;
    border-top: 2px solid var(--primary-color-bg);
    padding: 50px 0 0 0;
}
@media (max-width: 1024px) {
    footer{
        margin: 20px auto 100px;
    }
}
footer p.rodape{
    font-size: 80%;
}

/*Site completo*/
body.body_credit{
    display: grid;
    justify-content: center;
}
header.header_site{
    width: 90%;
    margin: 0 auto;
    max-width: 1260px;
}
.container{
    width: 100%;
    margin: 0 auto;
    overflow: auto; 
}

.container_main{
  width:90%;
  max-width:1260px;
  margin:auto;
}

#cover-header{
    width: 100%;
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 1024px) {
    #cover-header{
        justify-content: center;
    }
}

#logo-site{
    width: 300px;
}

@media (max-width:768px) {
  #logo-site{
      width: 250px;
  }
}

@media (max-width:480px) {
  #logo-site{
      width: 200px;
  }
}

.bg_glow {
    background: radial-gradient(circle at 20% 20%, #beaf87 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, #fccb88 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, #F6F6F3 0%, transparent 40%);
    background-color: #FFFFFF; /* fallback */
    background-size: 200% 200%;
    background-position: 50% 50%;
    animation: moveBackground 30s ease-in-out infinite alternate;
}

.glass_content {
    background: rgba(255, 255, 255, 0.65); /* vidro translúcido */
    backdrop-filter: blur(6px);            /* desfoca o que está atrás */
        -webkit-backdrop-filter: blur(6px);    /* Safari */
    position: relative;
}
.glass_content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}
.large_box_comparations{
    opacity: 0;
    transition: opacity 0.3s ease-in-out !important; /* anima o aparecimento */
}
.box_comparations:hover{
    cursor: pointer;
}
.box_comparations:hover .large_box_comparations{
    opacity: 1;
}

.box_comparations:hover .content_box_comparetion{
    border-radius: 0;
    background-color: #A19276 !important;
    border: 0px solid !important;
}
.box_comparations:hover .content_box_comparetion *{
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.box_comparations.active .large_box_comparations{
    opacity: 1;
}

.box_comparations.active .content_box_comparetion{
    border-radius: 0;
    background-color: #A19276 !important;
    border: 0px solid !important;
}
.box_comparations.active .content_box_comparetion *{
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
.box_banco{
    margin-top: -100px !important;
    display: inline-block;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* curva elástica aproximada */
}

.box_banco:hover {
  transform: translateY(-20px); /* equivale a margin-top -150px */
}

/*---Blog---*/


/* === FONTES === */
/* Exemplo:
@font-face {
  font-family: 'MinhaFonte';
  src: url('../fonts/minha-fonte.woff2') format('woff2');
}
body { font-family: 'MinhaFonte', sans-serif; }
*/


*{box-sizing:border-box;margin:0;padding:0;}
body main.blog_credito{
  color:var(--text_color);
  line-height:1.5;
}

/* Header */
.top-header{
  padding:1rem 0;
  border-bottom:1px solid #ddd;
}
.top-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo-text{
  font-weight:700;
  color:var(--primary-color-bg);
  font-size:1.1rem;
}
.logo-text small{font-weight:400;}
.brand{font-size:1rem;color:var(--primary-color-bg);}

/* Hero */
.hero{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
}
.slider{
  flex:1;
  max-width: 450px;
  position:relative;
  background:#ccc;
  border-radius:12px;
  justify-content: center;   /* centro horizontal */
  align-items: center;       /* centro vertical */
  overflow: hidden;          /* corta o excesso */
  display: inline;
  align-content: end;

}
.slide{
  position:absolute;
  inset:0;
  background:#919191; /* Imagem do slide */
  opacity:0;
  transition:opacity .6s;
}
.slide.active{opacity:1;}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* efeito “capa” */
}

.title{
    opacity:0;
    display: none;
    transition:opacity .6s;
}
.title.active{
    opacity:1;
    display: block;
}
.controls{
    width: 100%;
    height: 50px;
    z-index: 99;
    position: relative;
    display: grid;
    align-items: center;
    justify-content: center;
}


.hero-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-content h1{
    font-size: 2.3rem;
    line-height: 2.5rem;
    margin: 0 0 1rem 0;
}
.hero-content p{margin-bottom:1.5rem;}
.btn{
  font-family: 'typold_extendedmedium';
  background:var(--details_color);
  color:#ffffff !important;
  padding:.7rem 1.5rem;
  text-decoration:none;
  border-radius:50px;
  display:inline-block;
  margin-bottom:1rem;
  text-align:center;
}
.slider-dots{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:.5rem;
}
.dot{
  width:50px;
  height:10px;
  background:#FFF;
  border:none;
  cursor:pointer;
  border-radius: 20px;
}
.dot.active{background:var(--details_color);}

/* Cards */
.cards-section{
  text-align:center;
}
.cards-section h2{
  font-family: 'typold_extendedmedium';
  font-size:1.4rem;
  margin-bottom:1.5rem;
  position:relative;
  margin: 0;                  /* remove margens padrão */
  color: #beaf87; 
}
/*.cards-section h2::after{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background:#ccc;
  margin-top:.5rem;
}*/
.title_section {
    display: flex;              /* coloca h2 e hr na mesma linha */
    align-items: center;        /* alinha verticalmente */
    gap: 10px; 
    margin: 4rem auto 2rem;                 /* espaço entre o texto e a linha */
}
.title_section hr{
    height: 4px;
    background: #beaf87;
    flex: 1;                    /* faz a linha ocupar todo o espaço livre */
    border: none;               /* remove a borda padrão */

}
.cards-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:4rem;
  margin-bottom:4rem;
}
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.card-img{
  background:#919191;
  width:100%;
  height:315px;
  border-radius:12px;
  margin-bottom:.8rem;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* efeito “capa” */
}
.card p{
  font-size:1.4rem;
  max-width:240px;
}

/* Responsividade */
@media (max-width:1260px){
    .cards-grid{
        gap:2rem;
    }
    .hero-content h1{
        font-size: 1.9rem;
        line-height: 2.1rem;
    }
}

@media (max-width:768px){
    .hero{flex-direction:column;}
    .hero-content h1{font-size:1.5rem;}
    .slider{
      max-width: 100%;
    }

    .cards-grid{
        grid-template-columns: 1fr 1fr;
        gap:3rem;
    }
    .card p{
        font-size:1.2rem;
        line-height: 1.5rem;
    }

}


/*ARTIGOS*/

/* Containers */


/* Article layout */
.article-title {
  font-size:2rem;
  color:#8B7B5F;
  margin:40px 0 30px;
  border-left:5px solid #A19276;
  padding-left:15px;
}
.details_artigle{
    margin: 20px 0 20px 20px;
}

span.details_author{
  display: flex;
  align-items: center;
}

figure.img_author{
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

figure.img_author img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.article-content {
  display:grid;
  grid-template-columns: 1fr 2fr 1fr; /* imagem / texto / sidebar */
  grid-gap:40px;
}

.article-image img {
  width:100%;
  height:auto;
  border-radius:8px;
  object-fit:cover;
}

.post_excerpt{
    font-size: 1.5rem;
    font-style: italic;
    line-height: 2rem;
    margin: 0 0 20px;
}

.article-text p, .article-text ul {
  margin-bottom:20px;
}

.date_article, .date_article *, .author_article, .author_article *, .reading_pace_article, .reading_pace_article *{ font-size: 0.98rem; }
.author_article a{text-decoration: underline;}

.reading_pace_article{
    margin: 5px 0 0;
}

/* Sidebar */
.article-sidebar .title_section {
    margin: 0 0 20px 0;                 /* espaço entre o texto e a linha */
}

.article-sidebar h3 {
  color:#8B7B5F;
  font-size:1.2rem;
  margin:0;
}
.related-posts {
  list-style:none;
  margin: 0;
}
.related-posts li {
  margin-bottom:20px;
}
.related-posts li:before{
    content: none;
    margin: 0;
}
.related-posts a {
  display:flex;
  align-items:flex-start;
  text-decoration:none;
  color:#333;
  transition:color .2s;
}
.related-posts a:hover {
  color:#A19276;
}
.articles_more_img {
  width: 60px;          /* largura fixa */
  height: 60px;         /* altura fixa = quadrado */
  flex-shrink: 0;       /* impede de encolher no flex */
  border-radius: 6px;   /* cantos arredondados */
  overflow: hidden;     /* corta qualquer excesso da imagem */
  margin-right: 10px;
  background: #eee;     /* cor de fundo caso a imagem demore a carregar */
  display: flex;        /* para centralizar caso precise */
  align-items: center;
  justify-content: center;
}

.articles_more_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* mantém proporção e preenche o quadrado */
  display: block;        /* remove espaços indesejados */
}
.related-posts span {
  font-size:1.1rem;
}

/* Footer */
.site-footer {
  text-align:center;
  padding:20px 0;
  background:#fff;
  border-top:1px solid #ddd;
  margin-top:40px;
}

.main-menu-footer{
    display: flex;
    list-style: none;
    justify-content: center;
    column-gap: 20px;
    margin: 40px 0;
}
.main-menu-footer li::before{
    content: '';
    margin: 0;
    color: transparent;
}
.main-menu-footer li a{
  font-family: 'typold_extendedmedium' !important;
  color: #afafaf;
}

@media (max-width:480px) {
  .main-menu-footer{
      display: block;
  }
}

/* -------- Responsivo -------- */
@media (max-width:1024px) {
  .article-content {
    grid-template-columns: 1fr 1.5fr; /* imagem + texto */
    grid-template-areas:
      "image text"
      "sidebar sidebar";
  }
  .article-sidebar {
    grid-column: 1 / -1;
    margin-top: 40px;
  }
}

@media (max-width:768px) {
  .article-content {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    /* imagem vem primeiro, depois texto, depois sidebar */
    grid-template-areas:
      "image"
      "text"
      "sidebar";
  }

  .article-image img {
      width:70%;
    }

  /* garante que a imagem ocupe a linha completa */
  .article-image {
    grid-area: image;
    text-align: center;
  }
  .article-text {
    grid-area: text;
  }
  .article-sidebar {
    grid-area: sidebar;
  }

  .article-title {
    font-size: 1.6rem;
  }

  .related-posts a {
    flex-direction: row; /* mantém miniaturas ao lado */
  }
}

@media (max-width:480px) {
  .article-title {
    font-size: 1.4rem;
  }
  .related-posts img {
    width: 50px;
    height: 50px;
  }
}

.add_google{
  border-bottom: 2px solid var(--details_color);
  border-top: 2px solid var(--details_color);
  margin: 20px 0;
}

.adsbygoogle {
  overflow: hidden;
  display: none;
}