/* ==========================================================================
   SeguroJoven v2
   Design System
   ========================================================================== */

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

ul,
ol{
    list-style:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root{

    /* Brand */

    --color-primary:#0057B8;
    --color-primary-dark:#003E8A;
    --color-primary-light:#EAF3FF;

    --color-accent:#19C37D;

    /* Neutral */

    --color-white:#FFFFFF;
    --color-background:#F7F9FC;
    --color-surface:#FFFFFF;

    --color-text:#172B4D;
    --color-text-light:#5B6B83;

    --color-border:#E5EAF1;

    /* Status */

    --color-success:#14AE5C;
    --color-warning:#F5A524;
    --color-danger:#E5484D;

    /* Shadows */

    --shadow-sm:0 2px 8px rgba(15,23,42,.05);

    --shadow-md:0 10px 35px rgba(15,23,42,.08);

    --shadow-lg:0 20px 60px rgba(15,23,42,.12);

    /* Radius */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:24px;

    --radius-xl:32px;

    --radius-pill:999px;

    /* Layout */

    --container:1280px;

    /* Transitions */

    --transition:.25s ease;

}

/* ==========================================================================
   BODY
   ========================================================================== */

body{

    font-family:'Inter',sans-serif;

    background:var(--color-background);

    color:var(--color-text);

    line-height:1.6;

    font-size:16px;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    line-height:1.1;

    letter-spacing:-.03em;

}

h1{

    font-size:clamp(2.8rem,5vw,4.8rem);

}

h2{

    font-size:clamp(2rem,4vw,3.2rem);

}

h3{

    font-size:1.5rem;

}

p{

    color:var(--color-text-light);

}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container{

    width:min(100% - 48px,var(--container));

    margin-inline:auto;

}

.section{

    padding:60px 0;

}

.grid{

    display:grid;

}

.flex{

    display:flex;

}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:10px 30px;

    border:none;

    border-radius:var(--radius-pill);

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--color-primary);

    color:#fff;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);

}

.btn-secondary{

    background:#fff;

    color:var(--color-primary);

    border:1px solid var(--color-border);

}

.btn-secondary:hover{

    background:var(--color-primary-light);

}

.btn-outline{

    background:transparent;

    border:2px solid var(--color-primary);

    color:var(--color-primary);

}

.btn-lg{

    min-height:58px;

}

.btn-full{

    width:100%;

}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card{

    background:var(--color-surface);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:8px 18px;

    background:var(--color-primary-light);

    color:var(--color-primary);

    border-radius:999px;

    font-size:.875rem;

    font-weight:600;

}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center{

    text-align:center;

}

.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.mt-4{margin-top:2rem;}
.mt-5{margin-top:3rem;}

.mb-1{margin-bottom:.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}
.mb-4{margin-bottom:2rem;}
.mb-5{margin-bottom:3rem;}

.hidden{

    display:none !important;

}

/* ==========================================================================
   COLOR UTILITIES (used by Font Awesome icons)
   ========================================================================== */

.text-primary  { color: var(--color-primary)  !important; }
.text-success  { color: var(--color-success)   !important; }
.text-warning  { color: var(--color-warning)   !important; }
.text-danger   { color: var(--color-danger)    !important; }
.text-white    { color: var(--color-white)     !important; }
.text-right    { text-align: right; }

/* Icon size helpers */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 0.9rem; }
.icon-md { font-size: 1.2rem; }
.icon-lg { font-size: 1.6rem; }
.icon-xl { font-size: 2rem; }
#BarraLinksPie{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:1rem;
    align-items:start;

    color:#fff;
    text-align:center;
    background:#1886ff;
    padding:1rem;
}

#BarraLinksPie > div{
    min-width:0;
}

#BarraLinksPie a{
    display:block;
    color:#fff;
    text-decoration:none;
}

#BarraLinksPie a:visited,
#BarraLinksPie a:focus,
#BarraLinksPie a:active{
    color:#fff;
}

#BarraLinksPie a:hover{
    color:#c85b02;
    transition:color .3s;
}

#BarraLinksPie .fa,
#BarraLinksPie .far,
#BarraLinksPie .fas{
    display:block;
    font-size:2rem;
    margin-bottom:1rem;
}
#BarraLinksPie br{
	line-height:0rem
}
/* Tablets */
@media (max-width:991px){
    #BarraLinksPie{
        grid-template-columns:repeat(6,1fr);
    }
}

/* Móviles */
@media (max-width:575px){
    #BarraLinksPie{
        grid-template-columns:repeat(4,1fr);
    }
}