:root{
    --firstcolor: #333685;
    --secondcolor: #D9D9D9;
    --threecolor: #87CEEB;
    --fourcolor: #141E61;
}
body{
    font-family: "Figtree", sans-serif !important;
}
h2{
    /*font-family: "Encode Sans", sans-serif !important;*/
    font-weight: 500  !important;
    /*font-size: 3rem !important;*/
    margin-bottom: 4% !important;
}
nav.navbar .menu{
    padding: 1% 6% !important;
}
a.nav-link{
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0px 4px !important;
    color: var(--firstcolor);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .nav-link:hover{
    color: var(--threecolor) !important;
    font-weight: 900;
}
.p-purple{
    color:var(--firstcolor);
    font-weight: 500;
}
img{
    width: 100%;
}

/*-------------------------NAV---------------------------*/
#navbarSupportedContent{
    width: 50%;
}
a.nav-link:hover img.icon-social{
    color:var(--threecolor);
    background: var(--firstcolor);
}
a.nav-link.icon-linkedin{
    background-image: url('../img/Home/Linkedin.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
a.nav-link.icon-linkedin:hover{
    background-image: url('../img/Home/Linkedin2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 1s ;
}
a.nav-link.icon-facebook{
    background-image: url('../img/Home/Facebook.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
}

a.nav-link.icon-facebook:hover{
    background-image: url('../img/Home/Facebook2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 1s ;
}
.icon-social{
    width:70px;
    height: 70px;
}
.nav-item{
    padding: 0% 2%;
}
.navbar > .container-fluid{
    align-items: stretch !important;
}
.navbar-nav {
    flex-direction: row;
    width: 100%;
    display: flex;
    /*justify-content: space-evenly;*/
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-top: 0%;
    padding-bottom: 0%;
}
.container-logo a.navbar-brand img{
    width: 70%;
}
.container-cotiza a.wallet{
    background: var(--firstcolor); 
    color:white; 
    font-weight:700;
    font-weight: 800; 
    padding: 2% 15%; 
    text-decoration: none; 
    border-radius: 25px;
    transition: 0.3s;
}
.container-cotiza a.wallet:hover{
    background: var(--secondcolor);
}
.right-line{
    border-right: 1px solid var(--firstcolor);
}
.container-logo{
    width: 33%;
    padding: 0% 6%;
    display: flex;
    align-items: center;
}
.container-cotiza{
    /*background: var(--firstcolor);*/
    /*padding: 2% 0%;*/
    width: 20%;
    color: white;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
}
.container-cotiza img{
    width: 100%;
}
.container-cotiza  a:hover img{
    color: var(--threecolor);
}
.container-cotiza a{
    color: white;
    padding-right: 2%;
    font-weight: 900;
}
.container-cotiza a.nav-link{
    width: 35%;
    padding: 0% 5%;
}
.cotainer-social{
    display: flex;
    width: 69%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.container-cotiza a.nav-link:hover img{
    background: var(--secondcolor);
    border-radius: 20px;
}
.container-cotiza a:hover{
    color: var(--colortextgray);
}
/*------------START-------------------*/
#start{
    /*background-image: url('/assets/img/slider.png');*/    
    /*height: 600px;
    
    background-size: cover;
    background-repeat: no-repeat;*/
    padding: 0% 6%;
    /*margin: 0% 5%;
    border-radius: 30px;*/
}
.padpage{
    /*background-image: url('/assets/img/slider.png');*/    
    /*height: 600px;
    
    background-size: cover;
    background-repeat: no-repeat;*/
    padding: 2% 6%;
    /*margin: 0% 5%;
    border-radius: 30px;*/
}
#start h1{
    color: white;
    font-size: 2.5rem;
    margin: 0px;
    height: fit-content;
}
#start span.markerblue{    
    color: var(--threecolor);
    font-weight: 700;
    font-size: 4.7rem;
    text-transform: uppercase;
}
/*-----------Sección Misión/Visión-----------*/
.mis-val{
    color: var(--fourcolor);
}
h2.title-darkblue{
    color: var(--fourcolor);
    font-size: 2.5rem ;
    font-weight: 700 !important;
    text-transform: uppercase;
}
h3.subtitle-lightblue{
    color:var(--threecolor);
    font-size: 2.9rem;
    font-weight: 700 !important;
    text-transform: uppercase;
}
p.p-uppercase{
    color: var(--fourcolor);
    font-size: 1.5rem;
    text-transform: uppercase;
}

a.mision, a.valores{
    background: var(--secondcolor);
    font-weight: 700;
    color: white;
    padding: 5% 25%;
    text-decoration: none;
    border-radius: 20px 20px;
}
a.mision.active, a.valores.active{
    background: var(--firstcolor);
}
#valores .v-list img{
    width: 33%;
    /*padding-right: 10%;*/
    padding: 3% 5%;
}
#valores p{
    font-weight: 700;
}
.myv{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}
/*.myv #mision, .myv #vision{
    width: 70%;
}*/
.myv img{
    width: 100%;
}
.mis-val .myv p{
    font-size: 0.9rem;
    text-transform: none;
}
/*------------------Servicios-----------------*/
.purplecircle{
    background: var(--firstcolor);
    border-radius: 20px 20px;
    padding: 0% 1.2%;
    font-size: 0.9rem;
    margin-right: 2%;
    color:white;
}
.servicios p, .function-invert p{
    color:var(--firstcolor);
    font-size:1rem;
}
.servicios .emp-invrt img{
    width: 30%;
}
.servicios .emp-invrt {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
        padding-top: 5%;
}
.subtitle-purple{
    color: var(--firstcolor);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    /*text-align: center;*/
}
.servicios svg{
    color: var(--threecolor);
    width: 25px;
    height: 25px;
}
.lightblue-line{
    border-top: 2px solid var(--threecolor);
    margin-bottom: 4%;
}
.servicios img, .mercado img{
    width: 100%;
}
/*------------------Mercado-----------------*/
.mercado p{
    color:var(--firstcolor);
    font-size: 1.2rem;
    font-weight: 500;
}

/*------------------CONTACTO-----------------*/
a.purple-btt,a.gray-btt{
    text-decoration: none;
    color:white;
    font-weight: 600;
    background: var(--fourcolor);
    /*padding: 1% 5%;*/
    border-radius: 20px 20px;
}
a.purple-btt{
    background: var(--fourcolor);
    padding: 1% 5%;
}
a.purple-btt:hover{
    background: var(--secondcolor);
    
}
a.gray-btt{
    background: var(--secondcolor);
    padding: 1.5% 5%;
}
a.gray-btt:hover{
    background: var(--fourcolor);
}
iframe.map-vercontact{
    border-radius: 20px 20px;
    border: 13px solid var(--fourcolor) !important;
    width: 100%;
}
/*----------------- Función Inversión----------------*/
.calc-inv{
    background: linear-gradient(263deg, rgb(222, 222, 222) 20%, rgba(63, 63, 63, 0.5) 100%) !important;
    padding: 8% 8%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 45px 35px;
}
label{
    color: white;
}
#btt-fin, #btt-invert{
    color:white;
    text-decoration: none;
    font-weight: 700;
    background: var(--fourcolor);
    width: fit-content;
    padding: 4% 6%;
    margin-top: 5%;
    border-radius: 30px 30px;
}
p .unit{
    width: fit-content;
    background: var(--secondcolor);
    color: white;
    font-weight: 800;
    height: 100%;
    padding: 2.1%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
}
/*--- Plan de Inversión (tabla) ---*/
.plan-inversion{
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 5% 6%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.plan-inversion-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4%;
    border-bottom: 2px solid var(--threecolor);
    padding-bottom: 3%;
}
.plan-inversion-header h4{
    color: var(--firstcolor);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    text-transform: uppercase;
}
.plan-inversion-header img{
    width: 140px;
}
.plan-inversion-table{
    width: 100%;
    border-collapse: collapse;
    color: var(--fourcolor);
}
.plan-inversion-table td{
    padding: 8px 10px;
    font-size: 0.95rem;
}
.plan-inversion-table .label-cell{
    width: 60%;
}
.plan-inversion-table .value-cell{
    text-align: right;
    font-weight: 600;
}
.plan-inversion-table .value-cell.sign{
    width: 10%;
    text-align: right;
    padding-right: 4px;
}
.plan-inversion-table .value-cell.number{
    width: 30%;
    text-align: right;
}
.plan-inversion-table .row-plazo td{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.plan-inversion-table .row-inversion td{
    background: #dce6f5;
}
.plan-inversion-table .row-neto td{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.plan-inversion-table .row-mensual td{
    background: #d5e8d0;
}
.plan-inversion-table .row-separator td{
    padding: 4px 0;
    border: none;
}
.plan-inversion-table .text-red{
    color: #c0392b;
}
.input-inversion-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.input-inversion-wrap span{
    font-weight: 700;
    font-size: 1rem;
}
.input-inversion-wrap input{
    width: 140px;
    text-align: right;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
}
.plan-inversion-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    gap: 8px;
}
.plan-inversion-footer .aviso-invert{
    color: #c0392b;
    font-size: 0.85rem;
    margin: 0;
    min-height: 1.2em;
}
.plan-inversion-footer #btt-invert{
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-family: "Figtree", sans-serif;
    font-size: 0.95rem;
    background: var(--fourcolor);
    padding: 12px 28px;
    margin: 0;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.3s;
}
.plan-inversion-footer #btt-invert:hover{
    background: var(--firstcolor);
}
.img-inversion-phone{
    position: sticky;
    top: 20px;
    max-width: 100%;
}
.select-credito{
    width: 100%;
    text-align: right;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
    background: #fff;
    color: var(--fourcolor);
    cursor: pointer;
}
.plan-credito .plan-inversion-footer .aviso{
    color: #c0392b;
    font-size: 0.85rem;
    margin: 0;
    min-height: 1.2em;
}
.plan-credito #btt-fin{
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-family: "Figtree", sans-serif;
    font-size: 0.95rem;
    background: var(--fourcolor);
    padding: 12px 28px;
    margin: 0;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.3s;
}
.plan-credito #btt-fin:hover{
    background: var(--firstcolor);
}
.function-invert li{
    color:var(--fourcolor);
}
.function-invert  .form-floating>.form-control, .function-invert  .form-floating>.form-control-plaintext, .function-invert  .form-floating>.form-select {
    height: fit-content;
    min-height: min-content;
    line-height: 1.25;
}
.function-invert .form-floating>.form-select {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.function-invert  .form-floating>.form-control-plaintext:focus, .function-invert  .form-floating>.form-control-plaintext:not(:placeholder-shown), .function-invert .form-floating>.form-control:focus, .function-invert .form-floating>.form-control:not(:placeholder-shown){
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.function-invert .form-floating>.form-control, .function-invert .form-floating>.form-control-plaintext {
    padding: 0.5rem 0.5rem;
    padding-left: 1.5rem;
}
.background-build{
    background-image: url('../img/Home/Credito.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px 20px;
    background-position-y: bottom;
    padding-bottom: 10%;
}
.background-build img{
    width:30%;
}
p.credit-txt{
    font-size: 1rem;
    padding: 3% 0%;
    text-decoration: none;
}
a.credit-txt{
    font-size: 1rem;
    padding: 3% 0%;
    color: var(--firstcolor);
    text-decoration: none;
}
.bluenumber{
    color: var(--threecolor);
    font-size: 2.5rem;
    font-weight: 600;
}
.fsr img{
    width: 30%;
    padding-right: 5%;
}
h2.title-fin{
    font-size: 2.5rem;
    font-weight: 900 !important;
    color: var(--firstcolor);
}
.testimonios{
    background-image: url('../img/Home/testimonios.png');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 20px 20px;
    background-position-y: bottom;
    padding-bottom: 10%;
}
.icon-car{
    width: fit-content;
    background: var(--firstcolor);
    border-radius: 30px 30px;
    padding: 15% 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-car .carousel-control-next, .icon-car .carousel-control-prev {
    color: #ffffff;
    opacity: 13.5;
}
.testimonios .carousel-control-next, .testimonios .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: 10.5;
}
.carousel-testimonios img{
    width: 40%;
    padding: 0% 5%;
}
.carousel-control-next {
    right: 0;
}
.testimonios  .carousel-control-next-icon, .testimonios .carousel-control-prev-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
}
p.bigletter{
    color: var(--firstcolor);
    font-size: 4rem;
    font-weight: 800;
}
p.bigplus{
    color: var(--fourcolor);
    font-size: 7rem;
    font-weight: 800;
}
.testimonios .continer-test{
    padding-bottom: 5%;
}
/*--------------------AUTOMOTRIZ------------------*/
h2.title-auto{
    color: var(--firstcolor);
    text-transform: uppercase;
    font-size: 3.2rem;
    font-weight: 700 !important;
}
.blueline{
    border-bottom: 2px solid var(--firstcolor);
    /* width: fit-content; */
    margin-right: 13%;
}
.hero-img-wrap{
    width: 100%;
    max-height: 280px;
    overflow: hidden;
    border-radius: 10px;
}
.hero-img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
.c-funciona .background-build.autos{
    background-image: url('../img/Automotriz/back-auto.png') !important;
    background-size: contain;
    height: 580px;
}
.funciones{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
}
.funcion{
    padding: 0% 10%;
}
.funcion p{
    font-size: 0.9rem;
    line-height: 1;
    margin: 0%;
}
/*-----------Automovil----------*/
.automoviles{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    text-transform: uppercase;
}
.automovil{
    border: 1.5px solid var(--secondcolor);
    border-radius: 10px 10px;
    box-shadow: 0px 2px var(--secondcolor);
    margin: 0% 3%;
    display: flex;
    flex-direction: column;
}
.automovil .container-fluid{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.c-purple{
    color: var(--firstcolor);
}
.c-gray{
    color: var(--secondcolor);
}
.automovil p .txt-mes{
    text-transform: lowercase;
}
.automovil .c-left{
    text-align: start;
}
.automovil .c-right{
    text-align: end;
}
.automovil .img-card-wrap{
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    position: relative;
}
.badge-new{
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--firstcolor);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.automovil .img-card-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.automovil .a-caract img{
    width: 16%;
}
.automovil .a-caract svg, .automovil .a-caract i{
    width: 16%;
}
.automovil h6{
    margin: 0%;
}
.automovil strong{
    font-weight: 900;
    font-size: 1rem;
    
}
.automovil p{
    margin: 0%;
    font-size: 0.7rem;
}
.automovil .caract {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 2% 0%;
}
.automovil .caract p{
    font-size: 0.5rem;
}
/*------------------Form CONTACTO-----------------*/
#contacto{
    padding: 3% 5%;
}
#contacto a{
    text-decoration: none;
}
#contacto h2{
    color: var(--firstcolor);
}
form label{
    color: var(--colortextdarkgray);
    font-weight: 400;
}
.form-control{
    background: var(--colortextgray);
}
#green-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#green-button button{
    color: white;
    font-weight: 700;
    background: var(--colorbutton) !important;
    padding: 1% 5%;
    border-radius: 10px;
    border:none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
/*-------------Whatsapp--------*/
.conteiner-whatsapp{
    width: 0px;
    height: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.whatsapp-button{
    position: fixed;
    width: fit-content;
    right: 2%;
    bottom: 2%;
    z-index: 200;
    padding-top: 1%;
    padding-right: 0.9%;
    padding-bottom: 1%;
    padding-left: 1%;
    /*background: #008000;*/
    background: #008000;
    border-radius: 50% 50%;
}
.arrow{
    position: fixed;
    right: 4%;
    bottom: 15%;
    z-index: 200;
    /*padding-top: 1%;
    padding-right: 0.9%;
    padding-bottom: 1%;
    padding-left: 1%;*/
}
.arrow a{
    color: var(--second-darkgray);
}
.whatsapp-button svg{
    width: 100%;
}
/*----------------Modal----------------------*/
.modal-title {
    color: var(--firstcolor);
}
.detailscar p{
    color: var(--firstcolor);
}
.detailscar h5, .detailscar ul, .detailscar li, .detailscar a{
    color: var(--firstcolor);
}
.moredetailscar h3, .moredetailscar p, .extradetailscar h3, .extradetailscar p{
    color: var(--firstcolor);
}
.modal-header{
    background: var(--firstcolor);
    color: white;
}
.modal-header h1{
    background: var(--firstcolor);
    color: white;
}
.modal-header img{
    width: 9%;
    padding-right: 2%;
}
.pricemodal {
    color:var(--firstcolor)
}
.modal-body{
    background-image: url('../img/Home/logofooter.png'), var(--firstcolor);
    background-size: 30% 100%;
    background-repeat: no-repeat;
    color: white;
    padding-top: 2%;
    padding-left: 7%;

}
/*----------------FOOTER----------------------*/
footer{
    /*background: var(--firstcolor);*/
    /*background: #141E61;*/
    background: linear-gradient(#31368A 0%, #141E61 100%);
    /*background: linear-gradient( rgba(176, 180, 179,1) 0%, rgb(255, 255, 255) 100%);*/
    /*background-image: url('../img/Home/logofooter.png'), var(--firstcolor);*/
    color: white;
    /*padding-top: 5%;*/
    margin-top: 5%;
}
footer .footerlog{
    background-image: url('../img/Home/logofooter.png');
    background-size: 30% 100%;
    background-repeat: no-repeat;
    color: white;
    padding-top: 2%;
    padding-left: 7%;
}
footer a, footer p{
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin:0%;
}
footer p.copyright{
    text-decoration: none;
    color: white;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 1px;
    margin:0%;
}
footer img{
    width:65%;
}
footer a.sociales{
    font-weight: 300;
}
footer .opciones{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
footer .opciones a{
    padding: 3% 0%;
}
/*--- Calculadora de inversiones: categoría y columnas de rendimiento ---*/
.plan-inversion-table .row-categoria td{
    background: #eef1f8;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.plan-inversion-table .row-categoria .value-cell{
    color: var(--firstcolor);
    font-weight: 700;
}
.rend-cols{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 24px;
}
.rend-col{
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    color: var(--fourcolor);
}
.rend-col-head{
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 8px 10px;
}
.rend-col.anual .rend-col-head{
    background: #d5e8d0;
}
.rend-col.mensual .rend-col-head{
    background: #dce6f5;
}
.rend-linea{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 7px 12px;
    font-size: 0.9rem;
}
.rend-linea strong{
    white-space: nowrap;
    font-weight: 700;
}
.rend-linea.text-red,
.rend-linea.text-red strong{
    color: #c0392b;
}
.rend-linea.rend-total{
    border-top: 1px solid #ccc;
    font-weight: 700;
}
.rend-col.anual .rend-linea.rend-total{
    background: #d5e8d0;
}
.rend-col.mensual .rend-linea.rend-total{
    background: #dce6f5;
}
.rend-nota{
    margin-top: auto;
    font-size: 0.78rem;
    color: #666;
    padding: 8px 12px 10px;
}
/*--- Tabla de categorías de inversión ---*/
.tabla-categorias{
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    color: var(--fourcolor);
    font-size: 0.82rem;
}
.tabla-categorias caption{
    caption-side: top;
    text-align: left;
    color: var(--firstcolor);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding-bottom: 6px;
}
.tabla-categorias th{
    background: var(--fourcolor);
    color: #fff;
    font-weight: 600;
    padding: 7px 8px;
    text-align: center;
}
.tabla-categorias th:nth-child(1),
.tabla-categorias th:nth-child(2),
.tabla-categorias td:nth-child(1),
.tabla-categorias td:nth-child(2){
    text-align: left;
}
.tabla-categorias td{
    padding: 7px 8px;
    text-align: center;
    border-bottom: 1px solid #e3e3e3;
}
.tabla-categorias tr.cat-activa td{
    background: #dce6f5;
    font-weight: 700;
}
/*--- Enlaces y nota legal de la calculadora ---*/
.link-calculadora{
    color: var(--firstcolor);
    font-weight: 700;
    text-decoration: underline;
}
.link-calculadora:hover{
    color: var(--fourcolor);
}
.nota-legal{
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
}

/*--- Comparativa del mercado (gráfica de barras) ---*/
.grafica-mercado{
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
.gm-fila{
    display: grid;
    grid-template-columns: minmax(0, 11rem) 1fr 3.2rem;
    align-items: center;
    gap: 12px;
}
.gm-label{
    color: var(--fourcolor);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}
.gm-track{
    display: block;
    width: 100%;
    height: 22px;
    background: #f1f1f4;
    border-radius: 4px;
    overflow: hidden;
}
.gm-barra{
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--secondcolor);
}
.gm-ballesta .gm-barra{
    background: var(--firstcolor);
}
.gm-mercado .gm-barra{
    background: var(--threecolor);
}
.gm-valor{
    color: var(--fourcolor);
    font-size: 1.05rem;
    font-weight: 800;
    text-align: right;
}
.gm-ballesta .gm-label,
.gm-ballesta .gm-valor{
    color: var(--firstcolor);
    font-weight: 800;
}
.mercado .gm-nota{
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: #666;
    line-height: 1.5;
}
@media (max-width: 575px){
    .gm-fila{
        grid-template-columns: 1fr 3.2rem;
        gap: 4px 10px;
    }
    .gm-label{
        grid-column: 1 / -1;
        font-size: 0.85rem;
    }
}